@mcp-b/react-components 0.39.0 → 0.41.0

package/dist/styles/manager-office.css

@@ -0,0 +1,486 @@
+.manager-office {
+  block-size: 100%;
+  min-block-size: 32rem;
+}
+
+.manager-office__sidebar {
+  block-size: 100%;
+  min-inline-size: 0;
+  display: grid;
+  grid-template-rows: auto auto auto minmax(0, 1fr);
+  gap: var(--sigvelo-density-compact-control-gap);
+  padding: var(--sigvelo-spacing-2);
+}
+
+.manager-office__sidebar-heading,
+.manager-office__sidebar-actions {
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+}
+
+.manager-office__sidebar-heading {
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  justify-content: space-between;
+  padding-inline-start: var(--sigvelo-spacing-2);
+}
+
+.manager-office__sidebar-actions {
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+/*
+ * Ploy's measured application voice is 14px/21px for content and ~12.25px for
+ * metadata. The office previously ran a step below that on both — 13px titles
+ * over 11px meta — which read as a settings panel rather than the surface a
+ * manager works out of. The dense sidebar keeps the compact step; only the
+ * content plane moves up.
+ */
+.manager-office__sidebar-heading strong,
+.manager-office__employee-nav strong,
+.manager-office__routine-trigger strong {
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-compact-leading);
+}
+
+.manager-office__employee-header strong,
+.manager-office__work-list strong,
+.manager-office__routine-list strong,
+.manager-office__channel-list strong {
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-sm-leading);
+}
+
+.manager-office__attention-nav,
+.manager-office__employee-link {
+  inline-size: 100%;
+  min-inline-size: 0;
+  display: grid;
+  align-items: center;
+  justify-content: stretch;
+  gap: var(--sigvelo-density-compact-control-gap);
+  font-weight: var(--sigvelo-font-weight-normal);
+  text-align: start;
+}
+
+.manager-office__attention-nav {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.manager-office__attention-nav > svg {
+  color: var(--sigvelo-color-danger-text);
+}
+
+/* A section label above the roster, sized to the rail's own quiet voice. */
+.manager-office__nav-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-2);
+  margin: var(--sigvelo-spacing-1) 0 0;
+  padding-inline: var(--sigvelo-spacing-2);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-2xs-leading);
+  text-transform: uppercase;
+  letter-spacing: var(--sigvelo-tracking-wide);
+}
+
+.manager-office__employee-nav {
+  min-block-size: 0;
+  overflow: auto;
+}
+
+.manager-office__employee-link {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding-block: var(--sigvelo-spacing-1);
+}
+
+.manager-office__identity {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.manager-office__employee-nav small,
+.manager-office__routine-list small {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
+}
+
+.manager-office__employee-header small,
+.manager-office__work-list small,
+.manager-office__channel-list small {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-text-xs-leading);
+}
+
+.manager-office__attention-nav[aria-current="page"],
+.manager-office__employee-link[aria-current="page"] {
+  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 18%);
+}
+
+.manager-office__main {
+  min-inline-size: 0;
+  min-block-size: 0;
+  block-size: 100%;
+  overflow: auto;
+}
+
+/*
+ * A capped, centred column. Stretched to a 1440px pane, a roster row put its
+ * status a screen-width away from the name it belonged to; Ploy caps the same
+ * lists at 800px for the same reason.
+ */
+.manager-office__attention,
+.manager-office__employee-detail {
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 60rem;
+  margin-inline: auto;
+  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-3);
+}
+
+.manager-office__attention-list {
+  gap: var(--sigvelo-spacing-2);
+}
+
+/*
+ * Rows are bounded surfaces, not naked ghost buttons. One hairline and a real
+ * padding box give each row an edge to scan against, which is what carried
+ * Ploy's 67px work rows and Codex's activity rows.
+ */
+.manager-office__work-link,
+.manager-office__routine-link,
+.manager-office__channel {
+  inline-size: 100%;
+  min-inline-size: 0;
+  display: grid;
+  align-items: center;
+  justify-content: stretch;
+  gap: var(--sigvelo-density-compact-control-gap);
+  font-weight: var(--sigvelo-font-weight-normal);
+  text-align: start;
+  white-space: normal;
+}
+
+.manager-office__work-link {
+  min-block-size: var(--sigvelo-control-height-xl);
+  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-surface);
+}
+
+.manager-office__routine-link {
+  padding-block: var(--sigvelo-spacing-1);
+}
+
+.manager-office__work-link,
+.manager-office__routine-link {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
+.manager-office__row-chevron {
+  color: var(--sigvelo-color-text-subtle);
+}
+
+.manager-office__employee-detail {
+  display: grid;
+  align-content: start;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.manager-office__employee-header {
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-1);
+}
+
+.manager-office__employee-handoffs,
+.manager-office__attention-list {
+  display: grid;
+  gap: var(--sigvelo-spacing-2);
+}
+
+.manager-office__handoff {
+  inline-size: 100%;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-3);
+  /* Lifted off a transcript the card needs elevation; sitting on the page it
+     does not, and the attention hairline reads better without a shadow
+     competing with it. Same call as the sections below. */
+  box-shadow: none;
+}
+
+/*
+ * `AgentAttention` stacks header over body over actions, which is right when
+ * the employee quoted its ask. When it did not, that stack spends a whole row
+ * on a lone button, so the card pulls the way in up beside the ask instead.
+ */
+.manager-office__handoff:not(:has(.agent-attention__body)) {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+/* The verbatim ask is the point of the card; it wraps rather than truncating,
+   unlike the description line above it. */
+.manager-office__handoff > .agent-attention__body {
+  grid-column: 1 / -1;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
+}
+
+@container responsive-sidebar-shell (inline-size <= 34rem) {
+  .manager-office__handoff:not(:has(.agent-attention__body)) {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--sigvelo-spacing-2);
+  }
+}
+
+.manager-office__employee-columns {
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
+  align-items: stretch;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.manager-office__employee-aside {
+  min-inline-size: 0;
+  display: grid;
+  align-content: start;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.manager-office__section {
+  min-inline-size: 0;
+  display: grid;
+  align-content: start;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-3);
+}
+
+.manager-office__section-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-2);
+}
+
+/* The glyph makes the three panes distinct before their labels are read. */
+.manager-office__section-title {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-density-compact-control-gap);
+  margin: 0;
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.manager-office__section-title > svg {
+  color: var(--sigvelo-color-text-muted);
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+}
+
+.manager-office__section-content {
+  display: grid;
+  gap: 0;
+}
+
+.manager-office__channel-list {
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.manager-office__channel {
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  padding: var(--sigvelo-spacing-1) 0;
+}
+
+/* The host's mark sits in the tile the way a favicon would, so a supplied SVG
+   and a fallback initial occupy the same box. */
+.manager-office__channel-mark {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.manager-office__channel-mark > svg {
+  inline-size: 65%;
+  block-size: 65%;
+}
+
+.manager-office__channel-direction {
+  display: inline-grid;
+  place-items: center;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.manager-office__channel-status {
+  display: inline-grid;
+  place-items: center;
+}
+
+.manager-office__channel-status[data-status="connected"] {
+  color: var(--sigvelo-color-success-text);
+}
+
+.manager-office__channel-status[data-status="needs-auth"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.manager-office__channel-status[data-status="error"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.manager-office__work-list {
+  gap: var(--sigvelo-spacing-2);
+}
+
+.manager-office__routine-list {
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.manager-office__routine-trigger {
+  inline-size: 100%;
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  justify-content: stretch;
+  padding-inline: 0;
+  text-align: start;
+}
+
+.manager-office__routine-trigger > span:first-child {
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-density-compact-control-gap);
+}
+
+.manager-office__routine-list {
+  margin-block-start: var(--sigvelo-spacing-1);
+}
+
+.manager-office__nav-status,
+.manager-office__thread-status {
+  display: inline-grid;
+  place-items: center;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.manager-office__status,
+.manager-office__evidence {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-density-compact-control-gap);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-snug);
+  white-space: nowrap;
+}
+
+.manager-office__status > svg,
+.manager-office__evidence > svg,
+.manager-office__nav-status > svg,
+.manager-office__thread-status > svg,
+.manager-office__channel-direction > svg,
+.manager-office__channel-status > svg,
+.manager-office__row-chevron,
+.manager-office__routine-link > svg {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+}
+
+.manager-office__status[data-status="needs-you"],
+.manager-office__nav-status[data-status="needs-you"],
+.manager-office__status[data-status="issue"],
+.manager-office__status[data-status="unavailable"],
+.manager-office__nav-status[data-status="issue"],
+.manager-office__nav-status[data-status="unavailable"],
+.manager-office__thread-status[data-status="error"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.manager-office__status[data-status="working"],
+.manager-office__status[data-status="connecting"],
+.manager-office__nav-status[data-status="working"],
+.manager-office__nav-status[data-status="connecting"],
+.manager-office__thread-status[data-status="running"] {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.manager-office__evidence[data-complete] {
+  color: var(--sigvelo-color-success-text);
+}
+
+/*
+ * The rail's state line stays muted and lets the glyph beside it carry the
+ * colour. Tinting both put semantic text at 11px over the selected row's
+ * raised background, which lands at 4.28:1 — under the 4.5:1 floor — and the
+ * glyph is a non-text element held to 3:1, so it can say the same thing.
+ */
+
+.manager-office__unread-dot {
+  display: inline-block;
+  inline-size: var(--sigvelo-spacing-1-5);
+  block-size: var(--sigvelo-spacing-1-5);
+  margin-inline-start: var(--sigvelo-spacing-1);
+  border-radius: var(--sigvelo-radius-full);
+  background: var(--sigvelo-color-primary-text);
+  vertical-align: middle;
+}
+
+.manager-office__main > .empty-state {
+  padding: var(--sigvelo-spacing-6) var(--sigvelo-spacing-3);
+}
+
+@container responsive-sidebar-shell (inline-size <= 42rem) {
+  .manager-office__attention,
+  .manager-office__employee-detail {
+    padding: var(--sigvelo-spacing-2);
+  }
+
+  .manager-office__employee-columns {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@container responsive-sidebar-shell (inline-size <= 30rem) {
+  .manager-office__status > span {
+    display: none;
+  }
+}
+
+@media (any-pointer: coarse) {
+  .manager-office__attention-nav,
+  .manager-office__employee-link,
+  .manager-office__work-link,
+  .manager-office__routine-link,
+  .manager-office__routine-trigger {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
+@media (forced-colors: active) {
+  .manager-office__attention-nav[aria-current="page"],
+  .manager-office__employee-link[aria-current="page"] {
+    outline: var(--sigvelo-border-width) solid Highlight;
+  }
+}

package/dist/styles/mcp-plugin-catalog.css

@@ -2,58 +2,67 @@
   container: mcp-plugin-catalog / inline-size;
   box-sizing: border-box;
   inline-size: 100%;
-  max-inline-size: var(--sigvelo-measure-wide-block);
-  padding-inline: var(--sigvelo-spacing-4);
-  margin-inline: auto;
+  min-block-size: 0;
+  display: flex;
+  flex-direction: column;
   color: var(--sigvelo-color-text);
 }
 
-.mcp-plugin-catalog__header,
-.mcp-plugin-catalog__heading-copy,
 .mcp-plugin-catalog__installed,
 .mcp-plugin-catalog__sections,
 .mcp-plugin-catalog__section {
   display: grid;
 }
 
+/* The card's chrome row at the bar rhythm: no title (the hosting tab or icon
+   carries it), no fill — separated from the scrolling directory by one
+   hairline and a breath of shadow. */
 .mcp-plugin-catalog__header {
-  gap: var(--sigvelo-spacing-4);
-  margin-block-end: var(--sigvelo-spacing-6);
+  position: relative;
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  min-block-size: calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2));
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  box-shadow: var(--sigvelo-elevation-bar);
 }
 
-.mcp-plugin-catalog__heading-copy {
-  gap: var(--sigvelo-spacing-1);
+/* The bar's one action keeps to the far end, Ploy-style. */
+.mcp-plugin-catalog__add-custom {
+  margin-inline-start: auto;
 }
 
-.mcp-plugin-catalog__heading,
-.mcp-plugin-catalog__description,
 .mcp-plugin-catalog__section-heading,
 .mcp-plugin-catalog__empty,
 .mcp-plugin-details p {
   margin: 0;
 }
 
-.mcp-plugin-catalog__heading {
-  font-size: var(--sigvelo-text-3xl);
-  font-weight: var(--sigvelo-font-weight-normal);
-  line-height: var(--sigvelo-text-3xl-leading);
-  letter-spacing: var(--sigvelo-tracking-normal);
+.mcp-plugin-catalog__search {
+  flex: 1;
+  max-inline-size: 24rem;
 }
 
-.mcp-plugin-catalog__description {
-  max-inline-size: var(--sigvelo-measure-prose);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-base);
-  line-height: var(--sigvelo-text-base-leading);
+.mcp-plugin-catalog__body {
+  flex: 1;
+  min-block-size: 0;
+  overflow: auto;
+  padding-inline: var(--sigvelo-spacing-4);
+  padding-block: var(--sigvelo-spacing-2) var(--sigvelo-spacing-4);
 }
 
-.mcp-plugin-catalog__search {
-  inline-size: 100%;
+.mcp-plugin-catalog__body > * {
+  max-inline-size: var(--sigvelo-measure-wide-block);
+  margin-inline: auto;
 }
 
 .mcp-plugin-catalog__installed {
   gap: var(--sigvelo-spacing-2);
-  margin-block-end: var(--sigvelo-spacing-6);
+  margin-block-end: var(--sigvelo-spacing-5);
 }
 
 .mcp-plugin-catalog__installed-list,
@@ -70,7 +79,7 @@
 }
 
 .mcp-plugin-catalog__sections {
-  gap: var(--sigvelo-spacing-6);
+  gap: var(--sigvelo-spacing-5);
 }
 
 .mcp-plugin-catalog__section {
@@ -86,7 +95,7 @@
 
 .mcp-plugin-catalog__list {
   display: grid;
-  gap: var(--sigvelo-spacing-4) var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   margin-inline: calc(-1 * var(--sigvelo-spacing-2));
 }
 
@@ -95,7 +104,7 @@
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--sigvelo-spacing-2);
-  min-block-size: var(--sigvelo-spacing-14);
+  min-block-size: var(--sigvelo-spacing-12);
   padding-inline-end: var(--sigvelo-spacing-2);
   border-radius: var(--sigvelo-radius-lg);
   transition: background-color var(--sigvelo-motion-duration-interaction)
@@ -112,10 +121,10 @@
 
 .mcp-plugin-catalog__card-main {
   display: grid;
-  grid-template-columns: var(--sigvelo-spacing-10) minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-spacing-8) minmax(0, 1fr);
   align-items: center;
   justify-content: start;
-  gap: var(--sigvelo-spacing-3-5);
+  gap: var(--sigvelo-spacing-3);
   inline-size: 100%;
   min-inline-size: 0;
   padding-inline: var(--sigvelo-spacing-2);
@@ -170,7 +179,7 @@
   background:
     radial-gradient(
       ellipse 48% 135% at 0% 38%,
-      var(--sigvelo-color-warning-400) 0%,
+      var(--sigvelo-color-primary-400) 0%,
       transparent 74%
     ),
     radial-gradient(
@@ -285,11 +294,6 @@
 }
 
 @container mcp-plugin-catalog (inline-size >= 36rem) {
-  .mcp-plugin-catalog__header {
-    grid-template-columns: minmax(0, 1fr) 16rem;
-    align-items: end;
-  }
-
   .mcp-plugin-catalog__list {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

package/dist/styles/mcp-server-picker.css

@@ -130,7 +130,7 @@
 }
 
 .mcp-server-picker__row-shell[data-status="authenticating"] .mcp-server-picker__row-status {
-  color: var(--sigvelo-color-warning-text-on-subtle);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .mcp-server-picker__row-shell:is([data-status="failed"], [data-status="not-connected"])