@mcp-b/react-components 0.40.0 → 0.42.0

package/dist/styles/alert-dialog.css

@@ -6,7 +6,7 @@
 }
 
 .alert-dialog__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-layout-stack);
 
   position: fixed;
   inset-block-start: 50%;
@@ -39,16 +39,16 @@
   font-size: var(--sigvelo-text-compact);
   line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text-muted);
-  margin: 0 0 var(--sigvelo-spacing-4);
+  margin: 0 0 var(--sigvelo-layout-stack);
   text-wrap: pretty;
 }
 
 .alert-dialog__header {
   display: grid;
   gap: var(--sigvelo-spacing-1);
-  margin-block-end: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-layout-gutter);
 }
 
 .alert-dialog__media {
-  margin-block-end: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-layout-gutter);
 }

package/dist/styles/app-frame.css

@@ -1,8 +1,6 @@
 .app-frame {
-  block-size: 100%;
-  min-block-size: 0;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto var(--sigvelo-layout-track-fill);
   overflow: hidden;
   color: var(--sigvelo-color-text);
   background: var(--sigvelo-color-canvas);

package/dist/styles/app-icon.css

@@ -1,3 +1,6 @@
+/* A mark sits flat on whatever canvas hosts it — the tile never paints its
+   own background. Elevation is a drop shadow that follows the mark's own
+   silhouette, so a transparent favicon casts its shape, not an invisible box. */
 .avatar.app-icon {
   --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-8);
   --sigvelo-recipe-app-icon-radius: 30%;
@@ -11,10 +14,11 @@
   flex: none;
   overflow: hidden;
   border-radius: var(--sigvelo-recipe-app-icon-radius);
-  background: var(--sigvelo-color-surface-raised);
-  box-shadow: 0 var(--sigvelo-spacing-1) var(--sigvelo-spacing-4)
-    color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 5%);
-  corner-shape: round;
+  background: transparent;
+  filter: drop-shadow(
+    0 var(--sigvelo-border-width) var(--sigvelo-spacing-0-5)
+      color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 25%)
+  );
   user-select: none;
 }
 
@@ -40,24 +44,15 @@
   padding: var(--sigvelo-spacing-2);
 }
 
-.app-icon[data-app-icon-variant="surface"] {
-  background: var(--sigvelo-color-surface-raised);
-}
+/* The surface variant keeps only the inset; the mark stays flat on the canvas. */
 
 .app-icon[data-app-icon-variant="contrast"] {
   background: var(--sigvelo-color-primary-bg);
   color: var(--sigvelo-color-primary-text-on-bg);
 }
 
-.app-icon::after {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  box-shadow: inset 0 0 0 var(--sigvelo-border-width-hairline)
-    color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 10%);
-  content: "";
-  pointer-events: none;
-}
+/* Full-bleed artwork brings its own edges; a hairline ring around a flat
+   transparent mark would outline an invisible box, so no variant draws one. */
 
 .app-icon__image,
 .app-icon__fallback,
@@ -80,7 +75,7 @@
   align-items: center;
   justify-content: center;
   border-radius: inherit;
-  background: var(--sigvelo-color-surface-raised);
+  background: transparent;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
@@ -94,7 +89,6 @@
 .app-icon-stack {
   display: inline-flex;
   align-items: center;
-  block-size: 0;
   isolation: isolate;
 }
 

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

@@ -1,23 +1,28 @@
 .app-top-bar {
-  --app-top-bar-block-size: calc(
-    var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2)
-  );
-
   box-sizing: border-box;
   inline-size: 100%;
   min-inline-size: 0;
-  min-block-size: calc(var(--app-top-bar-block-size) + env(safe-area-inset-top, 0px));
+  /* Hooks, not constants: declaring either here would beat every inherited
+     value, so the defaults live in the fallbacks. Hosts set
+     --app-top-bar-block-size on any ancestor to size every bar in a region at
+     once; the bar adds the safe-area inset itself, so the hook stays a plain
+     content height. */
+  min-block-size: calc(
+    var(--app-top-bar-block-size, var(--sigvelo-layout-chrome)) + env(safe-area-inset-top, 0px)
+  );
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto var(--sigvelo-layout-track-fill);
   align-items: center;
   gap: var(--sigvelo-density-compact-control-gap);
   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));
+  padding-inline: calc(var(--sigvelo-layout-gutter) + env(safe-area-inset-left, 0px))
+    calc(var(--sigvelo-layout-gutter) + env(safe-area-inset-right, 0px));
   border: 0;
   border-radius: 0;
-  background: var(--sigvelo-color-surface);
+  /* No surface of its own: the bar occupies a layout row, so whatever plane
+     it sits on shows through and can never disagree with it. */
+  background: transparent;
 }
 
 .app-top-bar__leading,
@@ -48,6 +53,23 @@
   justify-self: end;
 }
 
+/* A panel header, not an application title bar: the symmetric track layout
+   would float the name in the middle of the plane instead of labelling its
+   leading edge. Only the trailing group still needs room of its own.
+   Panel chrome also sits atop scrolling content, so it separates the Ploy
+   way — one hairline and a breath of shadow, still no fill. */
+.app-top-bar[data-title-align="start"] {
+  position: relative;
+  grid-template-columns: auto auto var(--sigvelo-layout-track-fill);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  box-shadow: var(--sigvelo-elevation-bar);
+}
+
+.app-top-bar[data-title-align="start"] .app-top-bar__title {
+  justify-self: start;
+}
+
 .app-top-bar__button {
   box-sizing: border-box;
   flex: 0 0 auto;

package/dist/styles/approval.css

@@ -11,6 +11,7 @@
 .approval__header {
   display: flex;
   align-items: baseline;
+  /* Widget density, not --sigvelo-layout-cluster. */
   gap: var(--sigvelo-spacing-2);
   line-height: var(--sigvelo-leading-snug);
 }

package/dist/styles/artifact.css

@@ -15,9 +15,9 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-gutter);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   background-color: var(--sigvelo-color-surface);
 }
 
@@ -54,8 +54,8 @@
 }
 
 .artifact__content {
-  padding-block: var(--sigvelo-spacing-4);
-  padding-inline: var(--sigvelo-spacing-4);
+  padding-block: var(--sigvelo-layout-stack);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-sm);
   line-height: var(--sigvelo-leading-normal);
   overflow-wrap: anywhere;
@@ -104,7 +104,7 @@
   justify-content: center;
   flex-wrap: wrap;
   gap: var(--sigvelo-spacing-2);
-  padding: var(--sigvelo-spacing-4);
+  padding: var(--sigvelo-layout-stack);
   color: var(--sigvelo-color-text-muted);
   text-align: center;
 }

package/dist/styles/attachment-preview.css

@@ -2,14 +2,15 @@
    Scoped as .dialog__popup.attachment-preview so it beats the base dialog
    sizing regardless of import order. */
 .dialog__popup.attachment-preview {
-  width: fit-content;
-  max-width: min(90vw, 56rem);
+  inline-size: fit-content;
+  /* Lightbox measure. Not --sigvelo-layout-break-compact. */
+  max-inline-size: min(90dvi, 56rem);
 }
 
 .attachment-preview__image {
   display: block;
-  max-width: 100%;
-  max-height: 70vh;
+  max-inline-size: 100%;
+  max-block-size: 70dvb;
   border-radius: var(--sigvelo-radius-md);
 }
 

package/dist/styles/avatar.css

@@ -1,6 +1,5 @@
 .avatar {
   --sigvelo-recipe-avatar-size: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-2-5);
 
   position: relative;
   display: inline-flex;
@@ -12,23 +11,23 @@
   overflow: hidden;
   font-family: inherit;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
-  border-radius: var(--sigvelo-radius-full);
   user-select: none;
 }
 
+.avatar[data-shape="circle"] {
+  border-radius: var(--sigvelo-radius-full);
+}
+
 .avatar[data-size="sm"] {
   --sigvelo-recipe-avatar-size: var(--sigvelo-spacing-6);
-  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-2);
 }
 
 .avatar[data-size="lg"] {
   --sigvelo-recipe-avatar-size: var(--sigvelo-control-height-lg);
-  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-3);
 }
 
 .avatar[data-size="xl"] {
   --sigvelo-recipe-avatar-size: var(--sigvelo-spacing-14);
-  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-4);
 }
 
 .avatar[data-shape="rounded"] {
@@ -68,7 +67,7 @@
   color: var(--sigvelo-color-text-muted);
   text-transform: uppercase;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
-  border-radius: var(--sigvelo-radius-full);
+  border-radius: inherit;
 }
 
 .avatar[data-size="sm"] .avatar__fallback {
@@ -89,8 +88,7 @@
   margin-inline-start: 0;
 }
 
-.avatar-group__count,
-.avatar__badge {
+.avatar-group__count {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -122,17 +120,3 @@
 .avatar-group:has(.avatar[data-size="lg"]) .avatar-group__count {
   --sigvelo-recipe-avatar-count-size: var(--sigvelo-control-height-lg);
 }
-
-.avatar__badge {
-  position: absolute;
-  inset-inline-end: 0;
-  inset-block-end: 0;
-  z-index: 10;
-  inline-size: var(--sigvelo-recipe-avatar-badge-size);
-  block-size: var(--sigvelo-recipe-avatar-badge-size);
-  color: var(--sigvelo-color-primary-text-on-bg);
-  background-color: var(--sigvelo-color-primary-bg);
-  border: 2px solid var(--sigvelo-color-canvas);
-  border-radius: var(--sigvelo-radius-full);
-  user-select: none;
-}

package/dist/styles/base.css

@@ -33,15 +33,9 @@
 
 /* sigvelo-pill-shapes:start */
 :where(
-  .agent-activity-preview__badge,
-  .agent-activity-preview__dismiss,
-  .agent-activity-preview__unviewed-dot,
   .approval__key,
-  .avatar,
+  .avatar[data-shape="circle"],
   .avatar-group__count,
-  .avatar__badge,
-  .avatar__fallback,
-  .badge,
   .browser-run-panel__tab-glyph,
   .chain-of-thought__search-result,
   .chain-of-thought__step-indicator,
@@ -50,6 +44,7 @@
   .empty-state__icon,
   .inline-citation__trigger,
   .media-preview-card__play,
+  .manager-office__unread-dot,
   .menu__radio-indicator::before,
   .message-scroller__button,
   .plan-summary__trigger,
@@ -68,7 +63,6 @@
   .slider__indicator,
   .slider__thumb,
   .slider__track,
-  .status-pill__dot,
   .stepper__indicator,
   .stepper__separator,
   .stepper__trigger,

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

@@ -0,0 +1,38 @@
+.browser-live-screen__input {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+  resize: none;
+  border: 0;
+  padding: 0;
+  appearance: none;
+  background: transparent;
+  caret-color: transparent;
+  color: transparent;
+  cursor: default;
+  touch-action: none;
+}
+
+.browser-live-screen__input:focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
+}
+
+.browser-live-screen__keyboard {
+  display: none;
+  position: absolute;
+  inset-block-end: var(--sigvelo-spacing-2);
+  inset-inline-end: var(--sigvelo-spacing-2);
+  z-index: 1;
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-floating);
+}
+
+@media (pointer: coarse) {
+  .browser-live-screen__keyboard {
+    display: inline-flex;
+  }
+}

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

@@ -39,17 +39,25 @@
   opacity: 1;
 }
 
-/* The chip itself is the library StatusPill (sm/destructive/busy) — only the
-   overlay placement lives here. */
-.browser-live-view__badge {
+.browser-live-view__status {
   position: absolute;
   inset-block-start: var(--sigvelo-spacing-2);
   inset-inline-end: var(--sigvelo-spacing-2);
   z-index: 1;
-  box-shadow: var(--sigvelo-elevation-raised);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
   pointer-events: none;
 }
 
+.browser-live-view__status > svg {
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
+}
+
 /* Ended state: quiet fill, same footprint so the layout never jumps */
 .browser-live-view__ended {
   display: flex;

package/dist/styles/browser-replay.css

@@ -4,7 +4,7 @@
 .browser-replay {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
   font-family: inherit;
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
@@ -16,7 +16,7 @@
 
 .browser-replay__stage-wrap {
   position: relative;
-  width: 100%;
+  inline-size: 100%;
   aspect-ratio: 16 / 10;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   overflow: hidden;
@@ -44,9 +44,9 @@
 .browser-replay__controls {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   background-color: var(--sigvelo-color-surface);
@@ -60,7 +60,7 @@
 
 .browser-replay__scrubber {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .browser-replay__time {

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

@@ -2,15 +2,18 @@
   min-inline-size: 0;
   min-block-size: 0;
   block-size: 100%;
+  border: 0;
+  border-radius: 0;
 }
 
+/* The tab strip and the address row are one chrome group: only the bottom
+   row draws the group's edge. */
 .browser-run-panel .web-preview__nav:has(.browser-run-panel__tabs) {
-  min-block-size: var(--sigvelo-spacing-12);
   gap: 0;
   padding-block: 0;
   padding-inline: var(--sigvelo-spacing-1-5);
   border-block-end: 0;
-  background: var(--sigvelo-color-canvas);
+  box-shadow: none;
 }
 
 .browser-run-panel__tabs {
@@ -29,20 +32,27 @@
   display: none;
 }
 
-.browser-run-panel__tab.button {
+/* Not drawn browser chrome: a tab is the same muted control as every other
+   row in the card's bar, selection the same subtle fill. */
+.browser-run-panel__tab {
   min-inline-size: min(11rem, 45vw);
-  min-block-size: var(--sigvelo-control-height-xl);
   max-inline-size: 13rem;
+  min-block-size: var(--sigvelo-control-height-sm);
   flex: 0 0 auto;
   gap: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
-  border-radius: var(--sigvelo-radius-md) var(--sigvelo-radius-md) 0 0;
+  padding-inline: var(--sigvelo-spacing-2);
+  border-radius: var(--sigvelo-radius-sm);
   text-align: start;
   white-space: nowrap;
 }
 
+.browser-run-panel__tab:hover:not([data-disabled]) {
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
+}
+
 .browser-run-panel__tab[data-active] {
-  background: var(--sigvelo-color-surface);
+  border-block-end-color: transparent;
+  background: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text);
 }
 
@@ -66,24 +76,17 @@
   line-height: var(--sigvelo-leading-tight);
 }
 
-.browser-run-panel__address-bar {
-  min-block-size: var(--sigvelo-spacing-12);
-  background: var(--sigvelo-color-surface);
-}
-
 .browser-run-panel .browser-run-panel__body {
   min-block-size: 0;
   display: flex;
-  padding: var(--sigvelo-spacing-2-5);
+  padding: 0;
 }
 
-/* Whichever live surface the body holds — the panel's own embedded view or a
- * host-fed stream — fills the frame the same way. */
-.browser-run-panel__body > .browser-live-view {
+/* The panel owns the space allotted to whichever direct surface it hosts. */
+.browser-run-panel__body > * {
   flex: 1;
+  /* Hosted preview floor. Not --sigvelo-layout-sidebar. */
   min-block-size: 16rem;
-  aspect-ratio: auto;
-  border-radius: var(--sigvelo-radius-md);
 }
 
 .browser-run-panel__state {

package/dist/styles/button.css

@@ -38,10 +38,7 @@
   flex: none;
 }
 
-/* ponytail: one brightness rule covers press feedback for every variant;
-   upgrade to per-variant color-mix rules if filter side effects ever bite */
 .button:active:not([data-disabled]) {
-  filter: brightness(0.94);
   translate: 0 var(--sigvelo-motion-distance-xs);
 }
 
@@ -65,7 +62,11 @@
 }
 
 .button--normal.button--primary:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), black 5%);
+  background-color: var(--sigvelo-color-primary-bg-hover);
+}
+
+.button--normal.button--primary:active:not([data-disabled]) {
+  background-color: var(--sigvelo-color-primary-bg-press);
 }
 
 .button--normal.button--neutral {
@@ -74,7 +75,11 @@
 }
 
 .button--normal.button--neutral:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), black 5%);
+  background-color: var(--sigvelo-color-neutral-bg-hover);
+}
+
+.button--normal.button--neutral:active:not([data-disabled]) {
+  background-color: var(--sigvelo-color-neutral-bg-press);
 }
 
 .button--normal.button--destructive {
@@ -83,7 +88,11 @@
 }
 
 .button--normal.button--destructive:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-color-danger-bg), black 5%);
+  background-color: var(--sigvelo-color-danger-bg-hover);
+}
+
+.button--normal.button--destructive:active:not([data-disabled]) {
+  background-color: var(--sigvelo-color-danger-bg-press);
 }
 
 /* Outline appearance */

package/dist/styles/card.css

@@ -3,14 +3,14 @@
   color: var(--sigvelo-color-text);
   /* Shadow-led elevation: the hairline ring in the stack is the perimeter. */
   border-radius: var(--sigvelo-radius-lg);
-  padding: var(--sigvelo-spacing-4);
+  padding: var(--sigvelo-layout-stack);
   box-shadow: var(--sigvelo-elevation-raised);
   transition: box-shadow var(--sigvelo-motion-duration-interaction)
     var(--sigvelo-motion-ease-change);
 }
 
 .card[data-size="sm"] {
-  padding: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-layout-gutter);
   border-radius: var(--sigvelo-radius-md);
 }
 
@@ -39,13 +39,13 @@
 .card__header {
   display: grid;
   grid-template-rows: auto auto;
-  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill);
   align-items: start;
-  margin-block-end: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-layout-gutter);
 }
 
 .card__header:has(.card__action) {
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
 }
 
 .card__action {

package/dist/styles/chatgpt-sign-in-screen.css

@@ -1,7 +1,4 @@
 .chatgpt-sign-in {
-  --chatgpt-sign-in-pointer-x: 50%;
-  --chatgpt-sign-in-pointer-y: 58%;
-
   position: relative;
   isolation: isolate;
   overflow-x: hidden;
@@ -33,14 +30,17 @@
   position: absolute;
   z-index: 0;
   inset: 0;
+  /* The pointer position arrives as an inline style from the component's own
+     mousemove handler; the fallbacks are only the resting spot before the
+     first move. */
   background:
     radial-gradient(
-      circle at var(--chatgpt-sign-in-pointer-x) var(--chatgpt-sign-in-pointer-y),
+      circle at var(--chatgpt-sign-in-pointer-x, 50%) var(--chatgpt-sign-in-pointer-y, 58%),
       color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%),
       transparent 12rem
     ),
     radial-gradient(
-      circle at var(--chatgpt-sign-in-pointer-x) var(--chatgpt-sign-in-pointer-y),
+      circle at var(--chatgpt-sign-in-pointer-x, 50%) var(--chatgpt-sign-in-pointer-y, 58%),
       color-mix(in oklab, var(--sigvelo-color-primary-bg-muted), transparent 86%),
       transparent 18rem
     );
@@ -67,7 +67,7 @@
   z-index: 1;
   display: flex;
   justify-content: center;
-  margin-block-start: var(--sigvelo-spacing-4);
+  margin-block-start: var(--sigvelo-layout-stack);
 }
 
 .chatgpt-sign-in__error {