@mcp-b/react-components 0.39.0 → 0.41.0

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

@@ -1,12 +1,19 @@
 .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,
+        calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2))
+      ) +
+      env(safe-area-inset-top, 0px)
+  );
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
@@ -17,7 +24,9 @@
     calc(var(--sigvelo-spacing-2) + 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 +57,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 minmax(0, 1fr);
+  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/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-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,22 +76,16 @@
   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;
 }
 
-.browser-run-panel__live-view {
+/* The panel owns the space allotted to whichever direct surface it hosts. */
+.browser-run-panel__body > * {
   flex: 1;
   min-block-size: 16rem;
-  aspect-ratio: auto;
-  border-radius: var(--sigvelo-radius-md);
 }
 
 .browser-run-panel__state {

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
     );
@@ -70,6 +70,12 @@
   margin-block-start: var(--sigvelo-spacing-4);
 }
 
+.chatgpt-sign-in__error {
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-sm);
+}
+
 .chatgpt-sign-in__brand {
   display: grid;
   gap: var(--sigvelo-spacing-1-5);

package/dist/styles/commit.css

@@ -126,9 +126,32 @@
 }
 
 .commit__file-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
   min-inline-size: var(--sigvelo-spacing-5);
-  justify-content: center;
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-compact);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.commit__file-status[data-status="added"] {
+  color: var(--sigvelo-color-success-text);
+}
+
+.commit__file-status[data-status="modified"] {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.commit__file-status[data-status="deleted"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.commit__file-status[data-status="renamed"] {
+  color: var(--sigvelo-color-primary-text);
 }
 
 .commit__file-icon {

package/dist/styles/environment-variables.css

@@ -92,6 +92,9 @@
 
 .environment-variables__required {
   flex-shrink: 0;
+  color: var(--sigvelo-color-warning-text);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
 }
 
 .environment-variables__copy {

package/dist/styles/index.css

@@ -15,7 +15,6 @@
 @import "./accordion.css" layer(components);
 @import "./activity-header.css" layer(components);
 @import "./activity.css" layer(components);
-@import "./agent-activity-preview.css" layer(components);
 @import "./agent-attention.css" layer(components);
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
@@ -27,7 +26,6 @@
 @import "./avatar.css" layer(components);
 @import "./app-icon.css" layer(components);
 @import "./app-frame.css" layer(components);
-@import "./badge.css" layer(components);
 @import "./button.css" layer(components);
 @import "./action-guide.css" layer(components);
 @import "./card.css" layer(components);
@@ -67,9 +65,7 @@
 @import "./search-field.css" layer(components);
 @import "./select.css" layer(components);
 @import "./separator.css" layer(components);
-@import "./shell.css" layer(components);
 @import "./slider.css" layer(components);
-@import "./status-pill.css" layer(components);
 @import "./stepper.css" layer(components);
 @import "./switch.css" layer(components);
 @import "./tabs.css" layer(components);
@@ -88,6 +84,7 @@
 @import "./streamdown.css" layer(components);
 @import "./artifact.css" layer(components);
 @import "./browser-live-view.css" layer(components);
+@import "./browser-live-screen.css" layer(components);
 @import "./browser-control-overlay.css" layer(components);
 @import "./browser-run-panel.css" layer(components);
 @import "./browser-replay.css" layer(components);
@@ -112,6 +109,10 @@
 @import "./reasoning.css" layer(components);
 @import "./resizable-side-panel.css" layer(components);
 @import "./responsive-sidebar-shell.css" layer(components);
+/* After the shell it composes: `.manager-office` and `.responsive-sidebar-shell`
+   land on the same element at equal specificity, so the shell's `min-block-size:
+   0` silently ate the office's own floor while this sat earlier in the file. */
+@import "./manager-office.css" layer(components);
 @import "./sources.css" layer(components);
 @import "./subagent-run.css" layer(components);
 @import "./task.css" layer(components);