@mcp-b/react-components 0.40.0 → 0.42.0

package/dist/styles/think-execution-workbench.css

@@ -1,16 +1,20 @@
+/*
+ * One quiet canvas and one pane, like the workspace slot it lives in: the run
+ * list is a gap-separated roster (routine-library anatomy), and a selected
+ * run replaces it with a mini-page — eyebrow, title, hairline fact rows —
+ * the way opening a file replaces the workspace browser.
+ */
 .think-execution-workbench {
+  position: relative;
   min-inline-size: 0;
   min-block-size: 0;
   display: flex;
   flex: 1;
   flex-direction: column;
+  block-size: 100%;
   overflow: hidden;
   container-type: inline-size;
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-canvas),
-    var(--sigvelo-color-primary-bg-subtle) 18%
-  );
+  /* No paint: the workbench card (or whatever plane hosts it) shows through. */
   color: var(--sigvelo-color-text);
 }
 
@@ -23,24 +27,32 @@
   font: inherit;
 }
 
+/* The routine library's floating error notice overlays rather than
+   reflows, so a failed action never shoves the roster around. */
 .think-execution-workbench__error {
-  margin: var(--sigvelo-spacing-3) var(--sigvelo-spacing-3) 0;
-  min-block-size: var(--sigvelo-control-height-xs);
-  padding-block: var(--sigvelo-spacing-1);
-  padding-inline: var(--sigvelo-spacing-2-5);
+  position: absolute;
+  z-index: 2;
+  inset-block-start: var(--sigvelo-layout-gutter);
+  inset-inline: 50% auto;
+  max-inline-size: min(32rem, calc(100% - var(--sigvelo-layout-gutter) * 2));
+  padding: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-danger-border-subtle);
   border-radius: var(--sigvelo-radius-sm);
-  background: var(--sigvelo-color-danger-bg-subtle);
+  translate: -50% 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-danger-text);
-  font-size: var(--sigvelo-text-xs);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  font-size: var(--sigvelo-text-compact);
 }
 
 .think-execution-workbench__content {
   min-block-size: 0;
   display: grid;
   flex: 1;
-  grid-template-rows: minmax(12rem, 0.75fr) minmax(0, 1fr);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
   overflow: hidden;
 }
 
@@ -51,34 +63,22 @@
   overflow: auto;
 }
 
-.think-execution-detail {
-  display: grid;
-  align-content: start;
-  gap: var(--sigvelo-spacing-3);
-  min-inline-size: 0;
-}
-
-/* Only the container concerns — the block inside is `EmptyState`, and this
-   component is documented as reusable outside the workbench, so it does not
-   reach for a workbench class to fill itself. */
-.think-execution-detail--empty {
-  align-content: center;
-  justify-items: center;
-  min-block-size: 12rem;
-}
-
-.think-execution-workbench__run-list {
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
+/* Roster column cap (the Ploy number) so full-page routes don't stretch rows
+   across the whole viewport; narrow hosts are unaffected. */
+.think-execution-workbench__list-header,
+.think-execution-workbench__list,
+.think-execution-workbench__empty {
+  inline-size: min(100%, var(--sigvelo-layout-content));
+  margin-inline: auto;
 }
 
 .think-execution-workbench__list-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   min-block-size: var(--sigvelo-control-height-lg);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-layout-gutter);
 }
 
 .think-execution-workbench__list-header h3 {
@@ -88,132 +88,122 @@
   line-height: var(--sigvelo-leading-tight);
 }
 
+/* Same hairline-bounded band the routine library gives its empty run section. */
 .think-execution-workbench__empty {
-  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-2-5);
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-layout-stack);
 
-  margin: var(--sigvelo-spacing-3);
+  border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .think-execution-workbench__list {
-  margin: 0;
-  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
+  /* Block only — the roster-cap rule above owns margin-inline. */
+  margin-block: 0;
+  padding: 0 var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   list-style: none;
   display: grid;
+  gap: var(--sigvelo-spacing-1);
 }
 
 .think-execution-workbench__list > li {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   align-items: center;
   min-inline-size: 0;
-  border-radius: var(--sigvelo-radius-sm);
+  border-radius: var(--sigvelo-radius-md);
   transition: background-color var(--sigvelo-motion-duration-interaction)
     var(--sigvelo-motion-ease-change);
 }
 
-.think-execution-workbench__list > li:not(:last-child) {
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.think-execution-workbench__list > li[data-selected="true"] {
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-primary-bg-subtle),
-    var(--sigvelo-color-surface) 70%
-  );
-}
-
 .think-execution-workbench__run {
   min-inline-size: 0;
-  min-block-size: calc(var(--sigvelo-control-height-xl) + var(--sigvelo-spacing-3));
+  min-block-size: var(--sigvelo-spacing-14);
   display: flex;
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-1);
+  padding: var(--sigvelo-spacing-2);
   border-radius: inherit;
   text-align: start;
 }
 
-.think-execution-workbench__detail-header code {
-  min-inline-size: 0;
-  overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
-  overflow-wrap: anywhere;
-  font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
-}
-
 .think-execution-workbench__run-actions {
   inline-size: var(--sigvelo-control-height-sm);
   min-block-size: var(--sigvelo-control-height-sm);
   margin-inline-end: var(--sigvelo-spacing-1);
 }
 
-.think-execution-workbench__detail {
+/* The detail pane owns scrolling; the mini-page inside centres itself. */
+.think-execution-detail {
   display: grid;
   align-content: start;
-  gap: var(--sigvelo-spacing-3);
-  padding: var(--sigvelo-spacing-3);
-  background: var(--sigvelo-color-surface);
+  gap: var(--sigvelo-layout-stack);
+  /* `page` owns the measure and gutter; keep the roomier first-read block pad. */
+  --sigvelo-recipe-layout-stack: clamp(var(--sigvelo-layout-stack), 3vw, var(--sigvelo-spacing-8));
 }
 
-.think-execution-workbench__detail-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--sigvelo-spacing-3);
-  min-inline-size: 0;
+/* Only the container concerns — the block inside is `EmptyState`, and this
+   component is documented as reusable outside the workbench, so it does not
+   reach for a workbench class to fill itself. */
+.think-execution-detail--empty {
+  align-content: center;
+  justify-items: center;
+  min-block-size: 12rem;
+  block-size: 100%;
 }
 
-.think-execution-workbench__detail-header > div {
+.think-execution-detail__header {
   min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-1);
 }
 
-.think-execution-workbench__detail-status {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: var(--sigvelo-spacing-2);
+.think-execution-detail__eyebrow {
+  margin: 0;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
-  text-align: end;
-}
-
-.think-execution-workbench__detail-status > div {
-  display: grid;
-  gap: var(--sigvelo-spacing-0-5);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
-.think-execution-workbench__detail-status strong {
-  color: var(--sigvelo-color-text);
-  font-weight: var(--sigvelo-font-weight-semibold);
+.think-execution-detail__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
 }
 
-.think-execution-workbench__detail h3 {
+.think-execution-detail__heading h3 {
+  min-inline-size: 0;
   margin: 0;
-  font-size: var(--sigvelo-text-sm);
+  overflow-wrap: anywhere;
+  font-size: var(--sigvelo-text-lg);
   font-weight: var(--sigvelo-font-weight-semibold);
+  letter-spacing: -0.025em;
   line-height: var(--sigvelo-leading-tight);
 }
 
-@container (width >= 44rem) {
-  .think-execution-workbench__content {
-    grid-template-rows: minmax(0, 1fr);
-    grid-template-columns: minmax(15rem, 0.85fr) minmax(21rem, 1.15fr);
-  }
+.think-execution-detail__header code {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-muted);
+  overflow-wrap: anywhere;
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-xs);
+}
 
-  .think-execution-workbench__run-list {
-    border-block-end: 0;
-    border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-      var(--sigvelo-color-neutral-border-subtle);
-  }
+.think-execution-detail__error {
+  margin: 0;
+  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-2-5);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-relaxed);
+  overflow-wrap: anywhere;
 }
 
-@media (forced-colors: active) {
-  .think-execution-workbench {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
-    background: canvas;
-    color: canvastext;
-    box-shadow: none;
-  }
+.think-execution-detail__facts {
+  font-size: var(--sigvelo-text-compact);
 }