@mcp-b/react-components 0.40.0 → 0.41.0

package/dist/styles/think-full-app.css

@@ -1,13 +1,11 @@
-.think-thread-shell {
+/* The app names the shell's own container so bar rules below can measure the
+   whole app, rail included — the bar lives in the shell's row, outside the
+   `.think-full-app` container. */
+.think-full-app-shell {
   container-name: responsive-sidebar-shell think-full-app;
 }
 
 .think-full-app {
-  --think-full-app-header-block-size: calc(
-    var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2) +
-      env(safe-area-inset-top, 0px)
-  );
-
   position: relative;
   container: think-full-app / inline-size;
   block-size: 100%;
@@ -15,84 +13,67 @@
   min-inline-size: 0;
   display: grid;
   grid-template-rows: minmax(0, 1fr);
-  background: var(--sigvelo-color-surface-under);
+  background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
   font-family: inherit;
 }
 
-.think-full-app[data-has-workbench-topbar="true"] {
-  grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
-}
-
 .think-full-app__view-scope {
   grid-column: 1;
   grid-row: 1;
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) var(--resizable-side-panel-size, 21.25rem);
+  /* Conversation first and sized, workbench second and greedy. */
+  grid-template-columns: auto minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr);
-  overflow: hidden;
-  transition: grid-template-columns var(--sigvelo-motion-duration-layout)
-    var(--sigvelo-motion-ease-change);
-}
-
-.think-full-app[data-has-workbench-topbar="false"] > .think-full-app__view-scope {
-  margin-block-start: var(--sigvelo-spacing-2);
-}
-
-/* ResponsiveSidebarShell owns the outer material when a thread sidebar is
-   present. Flatten the nested app so the hierarchy still has exactly one
-   raised primary plane. */
-.think-full-app[data-has-thread-sidebar="true"] {
-  background: var(--sigvelo-color-surface);
-}
-
-.think-full-app[data-has-thread-sidebar="true"] > .think-full-app__view-scope {
-  margin: 0;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.think-full-app[data-has-workbench-topbar="true"] > .think-full-app__view-scope {
-  grid-row: 2;
-}
-
-.think-full-app[data-has-workbench="false"] > .think-full-app__view-scope {
-  grid-template-columns: minmax(0, 1fr);
+  margin: var(--sigvelo-spacing-3);
 }
 
 .think-full-app__mobile-view-switch {
   display: none;
 }
 
-.think-full-app__thread-trigger {
-  display: none;
-}
-
 .think-full-app__view-switch {
   gap: var(--sigvelo-spacing-0-5);
   padding: 0;
   background: transparent;
 }
 
-.think-full-app > .think-full-app__app-bar {
-  grid-column: 1 / -1;
-  grid-row: 1;
-  z-index: var(--sigvelo-z-chrome);
-  background: var(--sigvelo-color-surface-under);
+.think-full-app__app-bar {
+  /* Line the bar's controls up with the plane inset below it. */
+  padding-inline: var(--sigvelo-spacing-3);
+}
+
+/* Without host chrome the bar carries only the compact view switch, and that
+   is hidden above the breakpoint — reserve no room for it. */
+.think-full-app__app-bar[data-app-chrome="false"] {
+  display: none;
 }
 
 .think-full-app__chat-surface {
   grid-column: 1;
   grid-row: 1;
+  /* The conversation carries the resize, so the workbench can simply take the
+     rest of the row. */
+  inline-size: var(--resizable-side-panel-size, 24.5rem);
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr);
   overflow: hidden;
-  background: var(--sigvelo-color-surface);
+  transition: inline-size var(--sigvelo-motion-duration-layout) var(--sigvelo-motion-ease-change);
+}
+
+/* A length rather than `auto`: closing has to interpolate from the open width,
+   and a length-to-auto transition never finishes. */
+.think-full-app[data-has-workbench="false"] .think-full-app__chat-surface {
+  inline-size: calc(100cqi - var(--sigvelo-spacing-3) * 2);
+}
+
+body.is-resizing-side-panel .think-full-app__chat-surface {
+  transition: none;
 }
 
 .think-full-app__chat,
@@ -110,6 +91,8 @@
   grid-template-rows: minmax(0, 1fr) auto;
 }
 
+/* Transparent column: the aside positions the plane, it is not a material of
+   its own. */
 .think-full-app__aside {
   grid-column: 2;
   grid-row: 1;
@@ -117,26 +100,16 @@
   min-block-size: 0;
   display: grid;
   grid-template-rows: minmax(0, 1fr);
-  overflow: hidden;
-  border-inline-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-canvas),
-    var(--sigvelo-color-primary-bg-subtle) 18%
-  );
+  /* A margin, not a column gap: with no panels at all the aside is absent and
+     a gap would still hold its track open. */
+  margin-inline-start: var(--sigvelo-spacing-3);
 }
 
 .think-full-app__resizer {
   z-index: 5;
-}
-
-.think-full-app[data-has-workbench-topbar="true"] .think-full-app__resizer {
-  inset-block-start: var(--think-full-app-header-block-size);
-}
-
-body.is-resizing-side-panel .think-full-app__view-scope {
-  transition: none;
+  /* Centre the handle in the column gap rather than on the grid edge: the
+     conversation is inset by the gutter and the gap sits beyond its edge. */
+  translate: calc(var(--sigvelo-spacing-3) * 1.5) 0;
 }
 
 .think-full-app__workbench-slot,
@@ -150,12 +123,11 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   overflow: hidden;
 }
 
-.think-full-app__workbench {
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-canvas),
-    var(--sigvelo-color-primary-bg-subtle) 18%
-  );
+/* The app's one raised plane. Panels fill it and never draw a second edge. */
+.think-full-app__workbench-slot {
+  border-radius: var(--sigvelo-radius-lg);
+  background: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-floating);
 }
 
 /* The panel stands in for itself while its first read is in flight, so the
@@ -164,44 +136,59 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   justify-content: center;
 }
 
-.think-full-app__workbench.workspace-explorer {
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.think-full-app__workbench-view-switch {
-  margin-inline-start: auto;
-}
-
 .think-full-app__workbench-panel {
   padding: 0;
 }
 
+/* Host panels fill the plane rather than sizing to their content. Only visible
+   once the plane became the wide side of the split. */
+.think-full-app__workbench-panel > * {
+  flex: 1;
+  min-block-size: 0;
+}
+
 .think-full-app__workbench-panel:focus-visible {
   outline: 2px solid var(--sigvelo-color-focus);
   outline-offset: -2px;
 }
 
 @container think-full-app (inline-size <= 56rem) {
+  /* A side panel or phone has no desktop chrome around the app, so an inset
+     plane reads as a card in a frame. Flatten to one edge-to-edge surface,
+     app bar included — the frame never shows. */
   .think-full-app__view-scope {
     grid-template-columns: minmax(0, 1fr);
+    margin: 0;
+    overflow: hidden;
   }
 
-  /* A side panel or phone has no desktop chrome around the app, so the
-     floating application plane reads as a card in a frame. Flatten to one
-     edge-to-edge surface, app bar included — the frame never shows. */
-  .think-full-app > .think-full-app__view-scope,
-  .think-full-app[data-has-workbench-topbar="false"] > .think-full-app__view-scope {
-    margin: 0;
+  .think-full-app__aside {
+    margin-inline-start: 0;
+  }
+
+  /* Compact swaps between the two rather than seating them side by side, so
+     neither carries the desktop split's width. The extra class matches the
+     closed-workbench rule this has to beat. */
+  .think-full-app .think-full-app__chat-surface {
+    inline-size: auto;
+    transition: none;
+  }
+
+  /* .think-full-app__workbench needs the extra class: panels that paint
+     themselves raised are defined after this stylesheet. */
+  .think-full-app__workbench-slot,
+  .think-full-app .think-full-app__workbench {
     border-radius: 0;
+    background: var(--sigvelo-color-surface);
     box-shadow: none;
   }
 
-  .think-full-app > .think-full-app__app-bar {
-    background: var(--sigvelo-color-surface);
+  .think-full-app__app-bar[data-app-chrome="false"] {
+    display: grid;
   }
 
+  /* One switch at a time: compact swaps the whole view rather than opening a
+     panel beside the conversation. */
   .think-full-app__workbench-view-switch {
     display: none;
   }
@@ -210,40 +197,6 @@ body.is-resizing-side-panel .think-full-app__view-scope {
     display: flex;
   }
 
-  .think-full-app__app-title {
-    display: none;
-  }
-
-  .think-full-app__thread-trigger {
-    inline-size: auto;
-    max-inline-size: min(22rem, 58vw);
-    min-inline-size: 0;
-    min-block-size: var(--sigvelo-density-compact-control-height);
-    display: inline-flex;
-    gap: var(--sigvelo-density-compact-control-gap);
-    padding-inline: var(--sigvelo-density-compact-control-padding-inline);
-    border-radius: var(--sigvelo-radius-md);
-    color: var(--sigvelo-color-text);
-    font-size: var(--sigvelo-density-compact-control-font-size);
-    font-weight: var(--sigvelo-font-weight-semibold);
-  }
-
-  .think-full-app__thread-trigger-title {
-    min-inline-size: 0;
-  }
-
-  .think-full-app__thread-trigger > svg {
-    flex: 0 0 auto;
-    inline-size: var(--sigvelo-density-compact-control-icon-size);
-    block-size: var(--sigvelo-density-compact-control-icon-size);
-    color: var(--sigvelo-color-text-muted);
-    transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
-  }
-
-  .think-full-app__thread-trigger[aria-expanded="true"] > svg {
-    rotate: 180deg;
-  }
-
   .think-full-app__chat-surface,
   .think-full-app__workbench-slot,
   .think-full-app__workbench {
@@ -261,7 +214,6 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 
   .think-full-app__aside {
     display: contents;
-    border-inline-start: 0;
   }
 
   .think-full-app__resizer {
@@ -277,71 +229,8 @@ body.is-resizing-side-panel .think-full-app__view-scope {
     --agent-chat-content-max-inline-size: 34rem;
   }
 
-  .think-full-app .think-full-app__chat .message-scroller__viewport {
-    --message-scroller-fade-size: 3rem;
-  }
-
-  .think-full-app .think-full-app__chat .agent-chat__transcript-content {
-    --message-scroller-virtual-block-start: calc(
-      var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px)
-    );
-
-    padding-block-start: var(--message-scroller-virtual-block-start);
-    /* Matches Codex's side-panel gutter (--padding-panel: 12px). */
-    padding-inline: var(--sigvelo-spacing-3);
-  }
-
-  /* The base composer scrim already dissolves the transcript above the box. */
-  .think-full-app .agent-chat__composer {
-    padding-block: var(--sigvelo-spacing-2)
-      max(var(--sigvelo-spacing-2), env(safe-area-inset-bottom, 0px));
-    padding-inline: max(var(--sigvelo-spacing-3), env(safe-area-inset-left, 0px))
-      max(var(--sigvelo-spacing-3), env(safe-area-inset-right, 0px));
-  }
-
-  /* The gutter above belongs to the composer pinned under a transcript. On the
-     start screen the composer is in flow and the utility tray docks against
-     the card's bottom edge, so any bottom padding here reads as the tray
-     floating detached. */
-  .think-full-app .agent-chat-start-screen__composer > .agent-chat__composer {
-    padding: 0;
-  }
-
-  .think-full-app .prompt-input {
-    gap: var(--sigvelo-spacing-1);
-    padding-block: var(--sigvelo-spacing-2);
-    padding-inline: var(--sigvelo-spacing-2-5);
-  }
-
-  .think-full-app .message__content {
-    line-height: var(--sigvelo-leading-normal);
-  }
-
-  .think-full-app .message[data-from="user"] .message__content {
-    padding-block: var(--sigvelo-spacing-1-5);
-    padding-inline: var(--sigvelo-spacing-2-5);
-  }
-
-  .think-full-app .workspace-explorer__header {
-    min-block-size: var(--sigvelo-density-compact-control-height);
-    padding-block: 0;
-  }
-
-  .think-full-app .workspace-explorer__filter {
-    margin-block: var(--sigvelo-spacing-1);
-    margin-inline: var(--sigvelo-spacing-2);
-  }
-}
-
-@container responsive-sidebar-shell (inline-size <= 56rem) {
-  .think-thread-shell:has(.think-full-app) .responsive-sidebar-shell__toggle {
-    display: none;
-  }
-
-  .think-thread-shell[data-hide-app-bar-in-workbench]:has(
-      .think-full-app[data-mobile-view="workbench"]
-    )
-    > .app-top-bar {
+  /* An immersive workbench view owns the whole viewport. */
+  .think-full-app__app-bar[data-hide-in-workbench][data-mobile-view="workbench"] {
     display: none;
   }
 }
@@ -349,10 +238,9 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 @media (forced-colors: active) {
   .think-full-app,
   .think-full-app__chat-surface,
-  .think-full-app__aside,
+  .think-full-app__workbench-slot,
   .think-full-app__workbench,
-  .think-full-app__app-bar,
-  .think-full-app__workbench-view-switch {
+  .think-full-app__app-bar {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
     background: canvas;
     color: canvastext;

package/dist/styles/think-routine-library.css

@@ -61,36 +61,6 @@
   block-size: 100%;
 }
 
-.think-routine-library__app-title {
-  display: none;
-}
-
-.think-routine-library__schedule-trigger {
-  display: inline-flex;
-  max-inline-size: min(22rem, 58vw);
-  min-inline-size: 0;
-  gap: var(--sigvelo-density-compact-control-gap);
-  color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-density-compact-control-font-size);
-  font-weight: var(--sigvelo-font-weight-semibold);
-}
-
-.think-routine-library__schedule-trigger span {
-  min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.think-routine-library__schedule-trigger > svg {
-  flex: 0 0 auto;
-  transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
-}
-
-.think-routine-library__schedule-trigger[aria-expanded="true"] > svg {
-  rotate: 180deg;
-}
-
 .think-routine-library__browser {
   min-inline-size: 0;
   min-block-size: 0;
@@ -208,12 +178,6 @@
   overflow: auto;
 }
 
-@container responsive-sidebar-shell (inline-size <= 56rem) {
-  .think-routine-library__layout .responsive-sidebar-shell__toggle {
-    display: none;
-  }
-}
-
 .think-routine-library__detail {
   inline-size: min(100%, 64rem);
   margin-inline: auto;
@@ -236,10 +200,6 @@
   min-inline-size: 0;
 }
 
-.think-routine-library__state {
-  margin-block-end: var(--sigvelo-spacing-2);
-}
-
 .think-routine-library__detail-header h1,
 .think-routine-library__create-header h1 {
   font-size: clamp(var(--sigvelo-text-lg), 2.5vw, var(--sigvelo-text-2xl));

package/dist/styles/think-thread-picker.css

@@ -6,7 +6,10 @@
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   overflow: hidden;
   border-inline-end: 0;
-  background: var(--sigvelo-color-surface-under);
+  /* No material of its own: it fills whatever holds it — the shell's rail, the
+     compact drawer, a host's own panel — and painting a colour here would
+     cover the one that surface chose. */
+  background: transparent;
   color: var(--sigvelo-color-text);
 }
 
@@ -69,7 +72,7 @@
 }
 
 .think-thread-status-indicators__item[data-status="attention"] {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-danger-text);
 }
 
 .think-thread-status-indicators__item[data-status="failed"] {
@@ -266,10 +269,12 @@
   color: var(--sigvelo-color-danger-text);
 }
 
+/* Stopped, not wrong: aborted/interrupted/skipped stay in the muted
+   monotone — colour is reserved for success, failure, and needs-a-human. */
 .think-thread-picker__thread[data-thread-status="aborted"] .think-thread-picker__thread-status,
 .think-thread-picker__thread[data-thread-status="interrupted"] .think-thread-picker__thread-status,
 .think-thread-picker__thread[data-thread-status="skipped"] .think-thread-picker__thread-status {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .think-thread-picker__empty {

package/dist/styles/transition-surface.css

@@ -1,8 +1,7 @@
+/* The exit transform is a hook: defaults live in the fallbacks at each use
+   site, and picking a `data-variant` declares a value on the element itself —
+   the component answering its own prop, which is meant to win. */
 .transition-surface {
-  --transition-surface-inline: 0;
-  --transition-surface-block: 0;
-  --transition-surface-scale: 1;
-
   opacity: 1;
   translate: 0;
   scale: 1;
@@ -29,16 +28,16 @@
 .transition-surface[hidden] {
   display: none;
   opacity: 0;
-  translate: var(--transition-surface-inline) var(--transition-surface-block);
-  scale: var(--transition-surface-scale);
+  translate: var(--transition-surface-inline, 0) var(--transition-surface-block, 0);
+  scale: var(--transition-surface-scale, 1);
   transition-timing-function: var(--sigvelo-motion-ease-exit);
 }
 
 @starting-style {
   .transition-surface {
     opacity: 0;
-    translate: var(--transition-surface-inline) var(--transition-surface-block);
-    scale: var(--transition-surface-scale);
+    translate: var(--transition-surface-inline, 0) var(--transition-surface-block, 0);
+    scale: var(--transition-surface-scale, 1);
   }
 }
 

package/dist/styles/utilities.css

@@ -97,6 +97,48 @@
   max-inline-size: var(--sigvelo-measure-wide-block);
 }
 
+/*
+ * The chevron on a disclosure trigger a consumer composed itself. Components
+ * that own their own trigger anatomy (Collapsible, MenuDisclosureGroup) style
+ * their marker directly; this is for app code putting an icon inside a
+ * `Collapsible.Trigger`, which otherwise re-derives the same two rules.
+ */
+.sigvelo-disclosure-chevron {
+  transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
+}
+
+:where([data-panel-open], [aria-expanded="true"]) .sigvelo-disclosure-chevron {
+  rotate: 180deg;
+}
+
+/*
+ * A prompt that has to outlive the reader's attention: a permission ask a
+ * browser will only grant from a gesture, an offer to reconnect. `Toast` is the
+ * wrong shape for these because it schedules its own dismissal, and these leave
+ * only when the reader acts. The layer is inert so the page underneath stays
+ * usable and only the control inside it takes the pointer back; the inset clears
+ * whatever the app already anchors to the bottom edge.
+ */
+.sigvelo-floating-prompt {
+  --sigvelo-floating-prompt-inset: var(--sigvelo-spacing-4);
+
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--sigvelo-floating-prompt-inset));
+  z-index: var(--sigvelo-z-toast);
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+/* Floating reads as a pill, not as a form control, so the recipe radius goes
+   fully round here rather than at each consumer's call site. */
+.sigvelo-floating-prompt > * {
+  --sigvelo-recipe-button-radius: var(--sigvelo-radius-full);
+
+  pointer-events: auto;
+}
+
 /*
  * Reader-controlled text size for prose. Scales the message body only —
  * toolbars, labels, and controls keep resolving through the rem type ramp,

package/dist/styles/web-preview.css

@@ -1,12 +1,17 @@
+/* The card's chrome row (the Ploy bar): one bar height everywhere, muted
+   controls resting directly on whatever plane hosts the preview, separated
+   from the scrolling content by one hairline and a breath of shadow. */
 .web-preview__nav {
+  position: relative;
   display: flex;
   align-items: center;
+  min-block-size: calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2));
   gap: var(--sigvelo-spacing-1-5);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-2-5);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  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);
 }
 
 .web-preview__nav-button {
@@ -29,7 +34,6 @@
   min-height: 16rem;
   width: 100%;
   border: none;
-  background-color: var(--sigvelo-color-canvas);
 }
 
 .web-preview__body--readonly {
@@ -66,7 +70,6 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--sigvelo-color-text-muted);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
   cursor: pointer;
 }
 
@@ -124,6 +127,26 @@
   border-block-end: none;
 }
 
+.web-preview__console-level {
+  min-inline-size: 2.5rem;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  text-transform: uppercase;
+}
+
+.web-preview__console-item--info .web-preview__console-level {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.web-preview__console-item--warn .web-preview__console-level {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.web-preview__console-item--error .web-preview__console-level {
+  color: var(--sigvelo-color-danger-text);
+}
+
 .web-preview__console-message {
   color: var(--sigvelo-color-text);
   word-break: break-word;