@mcp-b/react-components 0.11.0 → 0.13.0

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

@@ -8,12 +8,8 @@
   grid-template-columns: minmax(0, 1fr) var(--think-full-app-workbench-w, 21.25rem);
   background: var(--sigvelo-color-canvas);
   color: var(--sigvelo-color-text);
-  font-family: var(--sigvelo-font-sans);
-  transition: grid-template-columns 160ms ease;
-}
-
-.think-full-app[data-has-workbench="false"] {
-  grid-template-columns: minmax(0, 1fr);
+  font-family: inherit;
+  transition: grid-template-columns var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .think-full-app[data-has-workbench-topbar="true"] {
@@ -57,6 +53,7 @@
 
 .think-full-app__chat,
 .think-full-app__chat-inner {
+  --agent-chat-content-max-inline-size: 46rem;
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
@@ -68,40 +65,16 @@
   grid-template-rows: minmax(0, 1fr) auto;
 }
 
-.think-full-app__chat .conversation__content {
-  inline-size: min(100%, 46rem);
-  margin-inline: auto;
-  gap: 0.375rem;
-  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
-}
-
-.think-full-app__chat .message__content {
-  max-inline-size: min(42rem, 94%);
-}
-
-.think-full-app__chat .message[data-from="assistant"] .message__content {
-  inline-size: min(42rem, 96%);
-}
-
-.think-full-app__chat .agent-chat__composer {
-  padding-inline: 1rem;
-}
-
-.think-full-app__chat .agent-chat__composer .prompt-input {
-  inline-size: min(100%, 46rem);
-  margin-inline: auto;
-}
-
 .think-full-app__error {
-  inline-size: min(100%, 46rem);
-  margin: 0 auto 0.375rem;
-  padding: 0.4375rem 0.625rem;
+  inline-size: min(100%, var(--agent-chat-content-max-inline-size));
+  margin: 0 auto var(--sigvelo-spacing-1-5);
+  padding: 0.4375rem 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: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
 }
 
 .think-full-app__error-dismiss {
@@ -137,59 +110,31 @@
 }
 
 .think-full-app__resizer {
-  position: absolute;
   z-index: 5;
-  inset-block: 0;
   inset-inline-end: var(--think-full-app-workbench-w, 21.25rem);
-  inline-size: 0.625rem;
   margin-inline-end: -0.3125rem;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: col-resize;
-  touch-action: pan-y;
-  appearance: none;
 }
 
 .think-full-app[data-has-workbench-topbar="true"] .think-full-app__resizer {
   inset-block-start: 2.75rem;
 }
 
-.think-full-app__resizer::before {
-  content: "";
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 50%;
-  inline-size: 1px;
-  transform: translateX(-50%);
-  background: transparent;
-  transition: background 120ms ease;
-}
-
-.think-full-app__resizer:hover::before,
-.think-full-app__resizer:focus-visible::before,
-body.is-resizing-columns .think-full-app__resizer::before {
+body.is-resizing-think-full-app .think-full-app__resizer::before {
   background: color-mix(in srgb, var(--sigvelo-color-primary-text) 38%, transparent);
 }
 
-.think-full-app__resizer:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: -2px;
-}
-
-body.is-resizing-columns {
+body.is-resizing-think-full-app {
   cursor: col-resize;
   user-select: none;
 }
 
-body.is-resizing-columns .think-full-app {
+body.is-resizing-think-full-app .think-full-app {
   transition: none;
 }
 
 .think-full-app__workbench-slot,
 .think-full-app__workbench,
-.think-full-app__workbench-panel,
-.think-execution-workbench {
+.think-full-app__workbench-panel {
   min-inline-size: 0;
   min-block-size: 0;
   display: flex;
@@ -198,8 +143,7 @@ body.is-resizing-columns .think-full-app {
   overflow: hidden;
 }
 
-.think-full-app__workbench,
-.think-execution-workbench {
+.think-full-app__workbench {
   background: color-mix(
     in oklab,
     var(--sigvelo-color-canvas),
@@ -211,7 +155,7 @@ body.is-resizing-columns .think-full-app {
   margin-inline-start: auto;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 58%, transparent);
-  border-radius: 0.75rem;
+  border-radius: var(--sigvelo-radius-lg);
   background: color-mix(
     in srgb,
     color-mix(in oklab, var(--sigvelo-color-canvas), var(--sigvelo-color-primary-bg-subtle) 18%) 72%,
@@ -236,332 +180,26 @@ body.is-resizing-columns .think-full-app {
 
 .think-full-app__workbench .workspace-explorer__header {
   min-block-size: 2.75rem;
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem 0.625rem;
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2-5);
   border-block-end-color: var(--sigvelo-color-neutral-border-subtle);
 }
 
 .think-full-app__workbench .workspace-explorer__title {
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: 650;
   line-height: 1;
 }
 
 .think-full-app__workbench .workspace-explorer__count {
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   line-height: 1;
 }
 
-.think-full-app__workbench .workspace-explorer__actions .button,
-.think-full-app__workbench .workspace-explorer__header > .button {
-  inline-size: 1.75rem;
-  min-block-size: 1.75rem;
-  padding: 0;
-  border-radius: 0.5rem;
-}
-
 .think-full-app__workspace-back {
   display: none;
 }
 
-.think-execution-workbench {
-  container-type: inline-size;
-  color: var(--sigvelo-color-text);
-}
-
-.think-execution-workbench__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  flex: 0 0 auto;
-  min-block-size: 2.75rem;
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem 0.625rem;
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.think-execution-workbench__heading {
-  display: inline-flex;
-  align-items: center;
-  min-inline-size: 0;
-  gap: 0.375rem;
-}
-
-.think-execution-workbench__title {
-  min-inline-size: 0;
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 650;
-  line-height: 1;
-}
-
-.think-execution-workbench__refresh {
-  flex: 0 0 auto;
-}
-
-.think-execution-workbench__error {
-  margin: 0.75rem 0.75rem 0;
-  padding: 0.4375rem 0.625rem;
-  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: 0.75rem;
-}
-
-.think-execution-workbench__sections {
-  min-block-size: 0;
-  display: grid;
-  align-content: start;
-  gap: 0.75rem;
-  overflow: auto;
-  padding: 0.75rem;
-}
-
-.think-execution-workbench__lists {
-  min-inline-size: 0;
-  display: grid;
-  align-content: start;
-  gap: 0.875rem;
-}
-
-.think-execution-workbench__section + .think-execution-workbench__section {
-  margin-block-start: 0;
-}
-
-.think-execution-workbench__section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-block-end: 0.5rem;
-}
-
-.think-execution-workbench__section-header h3 {
-  margin: 0;
-  font-size: 0.8125rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-tight);
-}
-
-.think-execution-workbench__empty {
-  margin: 0;
-  padding: 0.625rem 0.75rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-sm);
-  background: var(--sigvelo-color-surface);
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.8125rem;
-}
-
-.think-execution-workbench__list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.think-execution-workbench__item {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 0.5rem;
-  min-inline-size: 0;
-  padding: 0.5rem 0.25rem;
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.think-execution-workbench__item[data-selected="true"] {
-  margin-inline: -0.375rem;
-  padding-inline: 0.625rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-primary-border-muted);
-  border-radius: var(--sigvelo-radius-sm);
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-primary-bg-subtle),
-    var(--sigvelo-color-surface) 70%
-  );
-  box-shadow: inset 3px 0 0 var(--sigvelo-color-primary-border-muted);
-}
-
-.think-execution-workbench__row-main {
-  min-inline-size: 0;
-  display: grid;
-  gap: 0.25rem;
-}
-
-.think-execution-workbench__item-topline {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  min-inline-size: 0;
-}
-
-.think-execution-workbench__item-topline code,
-.think-execution-workbench__detail h3 code {
-  min-inline-size: 0;
-  overflow-wrap: anywhere;
-  font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
-}
-
-.think-execution-workbench__row-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.125rem 0.5rem;
-  margin: 0;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
-  line-height: var(--sigvelo-leading-snug);
-}
-
-.think-execution-workbench__status {
-  flex: 0 0 auto;
-  gap: 0.25rem;
-}
-
-.think-execution-workbench__status svg {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
-.think-execution-workbench__meta {
-  display: grid;
-  gap: 0.375rem;
-  margin: 0;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
-}
-
-.think-execution-workbench__meta div {
-  display: grid;
-  grid-template-columns: minmax(5rem, max-content) minmax(0, 1fr);
-  gap: 0.5rem;
-}
-
-.think-execution-workbench__meta dt {
-  color: var(--sigvelo-color-text-muted);
-}
-
-.think-execution-workbench__meta dd {
-  min-inline-size: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.think-execution-workbench__item-error {
-  margin: 0;
-  color: var(--sigvelo-color-danger-text);
-  font-size: 0.75rem;
-}
-
-.think-execution-workbench__actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.125rem;
-  opacity: 0.72;
-}
-
-.think-execution-workbench__item:hover .think-execution-workbench__actions,
-.think-execution-workbench__item:focus-within .think-execution-workbench__actions,
-.think-execution-workbench__item[data-selected="true"] .think-execution-workbench__actions {
-  opacity: 1;
-}
-
-.think-execution-workbench__detail {
-  min-inline-size: 0;
-  display: grid;
-  align-content: start;
-  gap: 0.625rem;
-  padding: 0.75rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-sm);
-  background: var(--sigvelo-color-surface);
-}
-
-.think-execution-workbench__detail-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-  min-inline-size: 0;
-}
-
-.think-execution-workbench__detail-header > div {
-  min-inline-size: 0;
-}
-
-.think-execution-workbench__detail h3 {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-tight);
-}
-
-.think-execution-workbench__eyebrow {
-  margin: 0 0 0.1875rem;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.6875rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-
-.think-execution-workbench__meta--detail {
-  padding-block-start: 0.25rem;
-}
-
-.think-execution-workbench__empty--detail {
-  border-style: dashed;
-  background: color-mix(in oklab, var(--sigvelo-color-canvas), transparent 30%);
-}
-
-.think-execution-workbench__inspection {
-  display: grid;
-  gap: 0.375rem;
-  padding: 0.625rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-sm);
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-canvas),
-    var(--sigvelo-color-primary-bg-subtle) 10%
-  );
-}
-
-.think-execution-workbench__inspection h4 {
-  margin: 0;
-  font-size: 0.75rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-}
-
-.think-execution-workbench__inspection pre {
-  max-block-size: 14rem;
-  margin: 0;
-  overflow: auto;
-  font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
-  white-space: pre-wrap;
-}
-
-@container (width >= 44rem) {
-  .think-execution-workbench__sections {
-    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.9fr);
-    align-items: start;
-  }
-}
-
 @media (width <= 56rem) {
   .think-full-app {
     min-block-size: 0;
@@ -569,10 +207,6 @@ body.is-resizing-columns .think-full-app {
     grid-template-rows: minmax(0, 1fr);
   }
 
-  .think-full-app[data-has-workbench="false"] {
-    grid-template-rows: minmax(0, 1fr);
-  }
-
   .think-full-app[data-mobile-view="workbench"] {
     grid-template-rows: calc(2.75rem + env(safe-area-inset-top, 0px)) minmax(0, 1fr);
   }
@@ -589,7 +223,7 @@ body.is-resizing-columns .think-full-app {
     min-block-size: calc(2.75rem + env(safe-area-inset-top, 0px));
     display: flex;
     padding-block: calc(0.25rem + env(safe-area-inset-top, 0px)) 0.25rem;
-    padding-inline: calc(0.625rem + env(safe-area-inset-left, 0px))
+    padding-inline: calc(var(--sigvelo-spacing-2-5) + env(safe-area-inset-left, 0px))
       calc(0.625rem + env(safe-area-inset-right, 0px));
   }
 
@@ -608,7 +242,7 @@ body.is-resizing-columns .think-full-app {
     justify-content: flex-end;
     min-block-size: calc(2.5rem + env(safe-area-inset-top, 0px));
     padding-block: calc(0.25rem + env(safe-area-inset-top, 0px)) 0.25rem;
-    padding-inline: calc(0.625rem + env(safe-area-inset-left, 0px))
+    padding-inline: calc(var(--sigvelo-spacing-2-5) + env(safe-area-inset-left, 0px))
       calc(0.625rem + env(safe-area-inset-right, 0px));
     pointer-events: none;
   }
@@ -658,6 +292,7 @@ body.is-resizing-columns .think-full-app {
   .think-full-app[data-mobile-view="workbench"] .think-full-app__workbench-slot,
   .think-full-app[data-mobile-view="workbench"] .think-full-app__workbench {
     grid-row: 2;
+    display: flex;
   }
 
   .think-full-app__aside {
@@ -673,40 +308,23 @@ body.is-resizing-columns .think-full-app {
     display: grid;
   }
 
-  .think-full-app[data-has-workbench="false"] .think-full-app__chat-surface {
-    grid-row: 1;
+  .think-full-app__chat,
+  .think-full-app__chat-inner {
+    --agent-chat-content-max-inline-size: 34rem;
   }
 
-  .think-full-app[data-mobile-view="workbench"] .think-full-app__workbench-slot,
-  .think-full-app[data-mobile-view="workbench"] .think-full-app__workbench {
-    display: flex;
-  }
-
-  .think-full-app__chat .conversation__content {
-    inline-size: min(100%, 34rem);
-    padding-inline: 1.5rem;
-  }
-
-  .think-full-app[data-has-workbench="true"] .think-full-app__chat .message-scroller__viewport {
+  .think-full-app .think-full-app__chat .message-scroller__viewport {
     --message-scroller-fade-t-size: 3rem;
     --message-scroller-fade-b-size: 3rem;
   }
 
-  .think-full-app[data-has-workbench="true"]
-    .think-full-app__chat
-    .message-scroller__viewport[data-scrollable~="start"] {
+  .think-full-app .think-full-app__chat .message-scroller__viewport[data-scrollable~="start"] {
     --message-scroller-fade-t: var(--message-scroller-fade-t-size);
   }
 
-  .think-full-app[data-has-workbench="true"] .think-full-app__chat .agent-chat__transcript-content {
+  .think-full-app .think-full-app__chat .agent-chat__transcript-content {
     padding-block-start: calc(2.5rem + env(safe-area-inset-top, 0px));
   }
-
-  .think-full-app__chat .message__content,
-  .think-full-app__chat .message[data-from="assistant"] .message__content {
-    max-inline-size: 100%;
-    inline-size: min(100%, 34rem);
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -721,8 +339,7 @@ body.is-resizing-columns .think-full-app {
   .think-full-app__aside,
   .think-full-app__workbench,
   .think-full-app__topbar,
-  .think-full-app__workbench-view-switch,
-  .think-execution-workbench {
+  .think-full-app__workbench-view-switch {
     border: 1px solid canvastext;
     background: canvas;
     color: canvastext;

package/dist/styles/think-resize-handle.css

@@ -0,0 +1,33 @@
+/* Shared implementation detail for the resizable Think shell separators. */
+.think-resize-handle {
+  position: absolute;
+  inset-block: 0;
+  inline-size: var(--sigvelo-spacing-2-5);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: pan-y;
+  appearance: none;
+}
+
+.think-resize-handle::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 50%;
+  inline-size: 1px;
+  transform: translateX(-50%);
+  background: transparent;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.think-resize-handle:hover::before,
+.think-resize-handle:focus-visible::before {
+  background: color-mix(in srgb, var(--sigvelo-color-primary-text) 38%, transparent);
+}
+
+.think-resize-handle:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: -2px;
+}