@mcp-b/react-components 0.40.0 → 0.42.0

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

@@ -1,73 +1,23 @@
-.think-thread-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%;
-  min-block-size: 0;
-  min-inline-size: 0;
   display: grid;
-  grid-template-rows: minmax(0, 1fr);
-  background: var(--sigvelo-color-surface-under);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
+  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);
-  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);
-}
-
-.think-full-app__mobile-view-switch {
-  display: none;
-}
-
-.think-full-app__thread-trigger {
-  display: none;
+  /* Conversation first and sized, workbench second and greedy. */
+  grid-template-columns: auto var(--sigvelo-layout-track-fill);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
+  margin: var(--sigvelo-layout-gutter);
 }
 
 .think-full-app__view-switch {
@@ -76,67 +26,65 @@
   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__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(--think-full-app-conversation-size, var(--sigvelo-layout-conversation));
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
   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-layout-gutter) * 2);
+}
+
+body.is-resizing-side-panel .think-full-app__chat-surface {
+  transition: none;
 }
 
 .think-full-app__chat,
 .think-full-app__chat-inner {
-  --agent-chat-content-max-inline-size: 46rem;
+  --agent-chat-content-max-inline-size: var(--sigvelo-measure-wide-block);
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
   overflow: hidden;
 }
 
 .think-full-app__chat-inner {
-  grid-template-rows: minmax(0, 1fr) auto;
+  grid-template-rows: var(--sigvelo-layout-track-fill) 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;
   min-inline-size: 0;
   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%
-  );
+  grid-template-rows: var(--sigvelo-layout-track-fill);
+  /* 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-layout-gap);
 }
 
 .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-layout-gap) * 1.5) 0;
 }
 
 .think-full-app__workbench-slot,
@@ -150,12 +98,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,84 +111,53 @@ 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;
 }
 
+/* 56rem matches --sigvelo-layout-break-compact. Container queries cannot read var(). */
 @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);
-  }
-
-  /* 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 {
+    grid-template-columns: var(--sigvelo-layout-track-fill);
     margin: 0;
-    border-radius: 0;
-    box-shadow: none;
-  }
-
-  .think-full-app > .think-full-app__app-bar {
-    background: var(--sigvelo-color-surface);
-  }
-
-  .think-full-app__workbench-view-switch {
-    display: none;
-  }
-
-  .think-full-app__mobile-view-switch {
-    display: flex;
+    overflow: hidden;
   }
 
-  .think-full-app__app-title {
-    display: none;
+  .think-full-app__aside {
+    margin-inline-start: 0;
   }
 
-  .think-full-app__thread-trigger {
+  /* Compact swaps between the two rather than seating them side by side, so
+     neither carries the desktop split's width. Repeat the closed-workbench
+     attribute so this beats `.think-full-app[data-has-workbench="false"]`. */
+  .think-full-app .think-full-app__chat-surface,
+  .think-full-app[data-has-workbench="false"] .think-full-app__chat-surface {
     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;
+    transition: none;
   }
 
-  .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__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__chat-surface,
@@ -261,7 +177,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 {
@@ -274,85 +189,20 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 
   .think-full-app__chat,
   .think-full-app__chat-inner {
-    --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 {
-    display: none;
+    /* Codex side panel: --thread-content-max-width: 100% and
+       --padding-toolbar: spacing*2 (8px). A 68ch cap left the transcript
+       as a start-aligned island in the pane. */
+    --agent-chat-content-max-inline-size: 100%;
+    --agent-chat-column-inset: var(--sigvelo-spacing-2);
   }
 }
 
 @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

@@ -1,14 +1,7 @@
+/* The shell is the library's root element; only its overrides live here. */
 .think-routine-library {
-  position: relative;
-  min-inline-size: 0;
   min-block-size: 38rem;
-  block-size: 100%;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  overflow: hidden;
-  color: var(--sigvelo-color-text);
   background: var(--sigvelo-color-canvas);
-  container-type: inline-size;
 }
 
 .think-routine-detail,
@@ -20,25 +13,6 @@
   block-size: 100%;
 }
 
-.think-routine-library__error {
-  position: absolute;
-  z-index: 2;
-  inset-block-start: var(--sigvelo-spacing-3);
-  inset-inline: 50% auto;
-  max-inline-size: min(32rem, calc(100% - 2rem));
-  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-danger-border-subtle);
-  border-radius: var(--sigvelo-radius-sm);
-  translate: -50% 0;
-  display: flex;
-  align-items: center;
-  gap: var(--sigvelo-spacing-2);
-  color: var(--sigvelo-color-danger-text);
-  background: var(--sigvelo-color-danger-bg-subtle);
-  font-size: var(--sigvelo-text-compact);
-}
-
 .think-routine-library__detail-header h1,
 .think-routine-library__create-header h1 {
   margin: 0;
@@ -55,47 +29,11 @@
   text-transform: uppercase;
 }
 
-.think-routine-library__layout {
-  grid-row: 1 / -1;
-  min-block-size: 0;
-  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;
   overflow: auto;
-  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-layout-gutter) var(--sigvelo-layout-cluster);
   border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   background: color-mix(
@@ -109,15 +47,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   margin-block-end: var(--sigvelo-spacing-2);
 }
 
-.think-routine-library__layout[data-sidebar-open="true"] .think-routine-library__browser-toolbar {
+.think-routine-library[data-sidebar-open="true"] .think-routine-library__browser-toolbar {
   padding-inline-start: var(--sigvelo-spacing-12);
 }
 
-.think-routine-library__layout[data-sidebar-open="false"] .think-routine-library__detail {
+.think-routine-library[data-sidebar-open="false"] .think-routine-library__detail {
   padding-block-start: clamp(3.75rem, 6vw, 4.5rem);
 }
 
@@ -155,7 +93,7 @@
   inline-size: 100%;
   min-block-size: var(--sigvelo-spacing-14);
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto var(--sigvelo-layout-track-fill);
   align-items: center;
   gap: var(--sigvelo-spacing-2);
   padding: var(--sigvelo-spacing-2);
@@ -208,38 +146,28 @@
   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);
+  inline-size: min(100%, var(--sigvelo-layout-content));
   margin-inline: auto;
-  padding: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
+  padding: clamp(var(--sigvelo-layout-stack), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__detail-header,
 .think-routine-library__create-header {
   display: flex;
   align-items: flex-start;
-  gap: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-stack);
 }
 
 .think-routine-library__detail-header {
   justify-content: space-between;
-  padding-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
+  padding-block-end: clamp(var(--sigvelo-layout-stack), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__detail-heading {
   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));
@@ -290,7 +218,7 @@
 
 .think-routine-library__facts > div {
   display: grid;
-  grid-template-columns: 5.5rem minmax(0, 1fr);
+  grid-template-columns: 5.5rem var(--sigvelo-layout-track-fill);
   gap: var(--sigvelo-spacing-3);
   padding-block: var(--sigvelo-spacing-2-5);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -349,7 +277,7 @@
 
 /* One rule, not two — this selector was declared twice in this file. */
 .think-routine-library__empty-runs {
-  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-layout-stack);
 
   border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -369,7 +297,7 @@
 
 .think-routine-library__create-header,
 .think-routine-library__form {
-  inline-size: min(100%, 46rem);
+  inline-size: min(100%, var(--sigvelo-layout-content));
   margin-inline: auto;
 }
 
@@ -383,47 +311,50 @@
 
 .think-routine-library__form {
   display: grid;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gutter);
 }
 
 .think-routine-library__form-row {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--sigvelo-spacing-4);
+  grid-template-columns: repeat(2, var(--sigvelo-layout-track-fill));
+  gap: var(--sigvelo-layout-stack);
 }
 
 .think-routine-library__select-field {
   min-inline-size: 0;
   display: grid;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gutter);
 }
 
 .think-routine-library__form-actions {
   display: flex;
   justify-content: flex-end;
-  gap: var(--sigvelo-spacing-2);
-  padding-block-start: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block-start: var(--sigvelo-layout-stack);
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
 
-@container (width < 52rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container (inline-size < 52rem) {
   .think-routine-library__detail-grid {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: var(--sigvelo-layout-track-fill);
   }
 }
 
-@container (width < 40rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container (inline-size < 40rem) {
   .think-routine-library__detail-header,
   .think-routine-library__create-header {
     flex-wrap: wrap;
   }
 
   .think-routine-library__form-row {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: var(--sigvelo-layout-track-fill);
   }
 }
 
+/* 56rem matches --sigvelo-layout-break-compact. Container queries cannot read var(). */
 @container responsive-sidebar-shell (inline-size <= 56rem) {
   .think-routine-library__browser {
     inline-size: 100%;