@mcp-b/react-components 0.14.2 → 0.16.1

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

@@ -15,35 +15,12 @@
 }
 
 .think-execution-workbench__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sigvelo-spacing-3);
   flex: 0 0 auto;
-  min-block-size: 2.75rem;
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2-5);
-  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: var(--sigvelo-spacing-1-5);
 }
 
 .think-execution-workbench__title {
-  min-inline-size: 0;
   margin: 0;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: 650;
-  line-height: 1;
-}
-
-.think-execution-workbench__refresh {
-  flex: 0 0 auto;
+  font: inherit;
 }
 
 .think-execution-workbench__error {
@@ -72,6 +49,13 @@
   overflow: auto;
 }
 
+.think-execution-detail {
+  display: grid;
+  align-content: start;
+  gap: var(--sigvelo-spacing-3);
+  min-inline-size: 0;
+}
+
 .think-execution-workbench__run-list {
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -82,8 +66,8 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  min-block-size: 3rem;
-  padding-inline: 0.875rem;
+  min-block-size: var(--sigvelo-control-height-lg);
+  padding-inline: var(--sigvelo-spacing-3);
 }
 
 .think-execution-workbench__list-header h3 {
@@ -102,7 +86,7 @@
 
 .think-execution-workbench__list {
   margin: 0;
-  padding: 0.25rem var(--sigvelo-spacing-3) var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   list-style: none;
   display: grid;
 }
@@ -131,31 +115,15 @@
 
 .think-execution-workbench__run {
   min-inline-size: 0;
-  min-block-size: 4.25rem;
+  min-block-size: 3.5rem;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: 0.25rem;
   border-radius: inherit;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
   text-align: start;
-  cursor: pointer;
-}
-
-.think-execution-workbench__run:hover:not(:disabled),
-.think-execution-workbench__run:focus-visible {
-  background: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.think-execution-workbench__run:focus-visible,
-.think-execution-workbench__run-actions:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: -2px;
 }
 
 .think-execution-workbench__run-copy {
@@ -216,26 +184,6 @@
   block-size: 1rem;
 }
 
-.think-execution-workbench__status[data-tone="success"] {
-  color: var(--sigvelo-color-success-text);
-}
-
-.think-execution-workbench__status[data-tone="danger"] {
-  color: var(--sigvelo-color-danger-text);
-}
-
-.think-execution-workbench__status[data-tone="warning"] {
-  color: var(--sigvelo-color-warning-text);
-}
-
-.think-execution-workbench__status[data-tone="primary"] {
-  color: var(--sigvelo-color-primary-text);
-}
-
-.think-execution-workbench__status[data-status="running"] svg {
-  animation: think-execution-workbench-spin 0.8s linear infinite;
-}
-
 .think-execution-workbench__run-actions {
   inline-size: 2rem;
   min-block-size: 2rem;
@@ -245,8 +193,8 @@
 .think-execution-workbench__detail {
   display: grid;
   align-content: start;
-  gap: 1rem;
-  padding: 1rem;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-3);
   background: var(--sigvelo-color-surface);
 }
 
@@ -302,12 +250,6 @@
   margin: 0;
 }
 
-@keyframes think-execution-workbench-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @container (width >= 44rem) {
   .think-execution-workbench__content {
     grid-template-rows: minmax(0, 1fr);
@@ -321,12 +263,6 @@
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .think-execution-workbench__status[data-status="running"] svg {
-    animation: none;
-  }
-}
-
 @media (forced-colors: active) {
   .think-execution-workbench {
     border: 1px solid canvastext;

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

@@ -1,11 +1,15 @@
 .think-full-app {
+  --think-full-app-header-block-size: calc(
+    var(--sigvelo-control-height-xs) + var(--sigvelo-spacing-2) + env(safe-area-inset-top, 0px)
+  );
+
   position: relative;
   block-size: 100%;
   min-block-size: 32rem;
   min-inline-size: 0;
   display: grid;
   grid-template-rows: minmax(0, 1fr);
-  grid-template-columns: minmax(0, 1fr) var(--think-full-app-workbench-w, 21.25rem);
+  grid-template-columns: minmax(0, 1fr) var(--resizable-side-panel-size, 21.25rem);
   background: var(--sigvelo-color-canvas);
   color: var(--sigvelo-color-text);
   font-family: inherit;
@@ -13,30 +17,39 @@
 }
 
 .think-full-app[data-has-workbench-topbar="true"] {
-  grid-template-rows: 2.75rem minmax(0, 1fr);
+  grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
+}
+
+.think-full-app[data-has-workbench="false"] {
+  grid-template-columns: minmax(0, 1fr);
 }
 
-.think-full-app__mobile-header {
+.think-full-app__mobile-view-switch {
   display: none;
 }
 
-.think-full-app__topbar {
+.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__view-switch .toggle-group__item[data-pressed] {
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  box-shadow: none;
+}
+
+.think-full-app > .think-full-app__app-bar {
   grid-column: 1 / -1;
   grid-row: 1;
   z-index: 20;
-  min-inline-size: 0;
-  min-block-size: 2.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  padding-inline: 0.5rem;
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 52%, transparent);
-  background: var(--sigvelo-color-surface);
 }
 
-.think-full-app__topbar[data-mobile-only="true"] {
+.think-full-app > .think-full-app__app-bar[data-compact-only="true"] {
   display: none;
 }
 
@@ -113,25 +126,10 @@
 
 .think-full-app__resizer {
   z-index: 5;
-  inset-inline-end: var(--think-full-app-workbench-w, 21.25rem);
-  margin-inline-end: -0.3125rem;
 }
 
 .think-full-app[data-has-workbench-topbar="true"] .think-full-app__resizer {
-  inset-block-start: 2.75rem;
-}
-
-body.is-resizing-think-full-app .think-full-app__resizer::before {
-  background: color-mix(in srgb, var(--sigvelo-color-primary-text) 38%, transparent);
-}
-
-body.is-resizing-think-full-app {
-  cursor: col-resize;
-  user-select: none;
-}
-
-body.is-resizing-think-full-app .think-full-app {
-  transition: none;
+  inset-block-start: var(--think-full-app-header-block-size);
 }
 
 .think-full-app__workbench-slot,
@@ -153,55 +151,24 @@ body.is-resizing-think-full-app .think-full-app {
   );
 }
 
-.think-full-app__workbench-view-switch {
-  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: 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%,
-    var(--sigvelo-color-surface)
-  );
+.think-full-app__workbench.workspace-explorer {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
 }
 
-.think-full-app__workbench-view-item {
-  min-block-size: 1.625rem;
-  min-inline-size: 1.75rem;
-  padding: 0.1875rem;
-  border-radius: 0.5rem;
+.think-full-app__embedded-view-switch {
+  flex: 0 0 auto;
 }
 
-.think-full-app__workbench-view-item svg {
-  display: block;
+.think-full-app__workbench-view-switch {
+  margin-inline-start: auto;
 }
 
 .think-full-app__workbench-panel {
   padding: 0;
 }
 
-.think-full-app__workbench .workspace-explorer__header {
-  min-block-size: 2.75rem;
-  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: var(--sigvelo-text-sm);
-  font-weight: 650;
-  line-height: 1;
-}
-
-.think-full-app__workbench .workspace-explorer__count {
-  font-size: var(--sigvelo-text-compact);
-  line-height: 1;
-}
-
-.think-full-app__workspace-back {
-  display: none;
-}
-
 @media (width <= 56rem) {
   .think-full-app {
     min-block-size: 0;
@@ -209,77 +176,65 @@ body.is-resizing-think-full-app .think-full-app {
     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);
+  .think-full-app[data-has-workbench-topbar="true"] {
+    grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
   }
 
-  .think-full-app__topbar,
-  .think-full-app__topbar[data-mobile-only="true"] {
+  .think-full-app[data-has-compact-app-bar="true"] {
+    grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
+  }
+
+  .think-full-app > .think-full-app__app-bar[data-compact-only="true"] {
+    display: grid;
+  }
+
+  .think-full-app__workbench-view-switch {
     display: none;
   }
 
-  .think-full-app[data-mobile-view="workbench"] .think-full-app__topbar,
-  .think-full-app[data-mobile-view="workbench"] .think-full-app__topbar[data-mobile-only="true"] {
-    grid-column: 1;
-    grid-row: 1;
-    min-block-size: calc(2.75rem + env(safe-area-inset-top, 0px));
+  .think-full-app__embedded-view-switch {
+    display: none;
+  }
+
+  .think-full-app__mobile-view-switch {
     display: flex;
-    padding-block: calc(0.25rem + env(safe-area-inset-top, 0px)) 0.25rem;
-    padding-inline: calc(var(--sigvelo-spacing-2-5) + env(safe-area-inset-left, 0px))
-      calc(0.625rem + env(safe-area-inset-right, 0px));
   }
 
-  .think-full-app[data-has-thread-sidebar="true"][data-mobile-view="workbench"]
-    .think-full-app__topbar {
-    padding-inline-start: calc(3.5rem + env(safe-area-inset-left, 0px));
+  .think-full-app__app-title {
+    display: none;
   }
 
-  .think-full-app__mobile-header {
-    position: absolute;
-    z-index: 30;
-    inset-block-start: 0;
-    inset-inline: 0;
-    display: flex;
-    align-items: center;
-    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(var(--sigvelo-spacing-2-5) + env(safe-area-inset-left, 0px))
-      calc(0.625rem + env(safe-area-inset-right, 0px));
-    pointer-events: none;
-  }
-
-  .think-full-app__mobile-action {
-    pointer-events: auto;
-    border-radius: 999rem;
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-      color-mix(in oklab, var(--sigvelo-color-neutral-border-subtle), transparent 36%);
-    background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 26%);
+  .think-full-app__thread-trigger {
+    inline-size: auto;
+    max-inline-size: min(22rem, 58vw);
+    min-inline-size: 0;
+    min-block-size: 2rem;
+    display: inline-flex;
+    gap: var(--sigvelo-spacing-1-5);
+    padding-inline: var(--sigvelo-spacing-2);
+    border-radius: var(--sigvelo-radius-md);
     color: var(--sigvelo-color-text);
-    box-shadow: var(--sigvelo-shadow-xs);
-    backdrop-filter: blur(14px) saturate(1.18);
-    -webkit-backdrop-filter: blur(14px) saturate(1.18);
+    font-size: var(--sigvelo-text-compact);
+    font-weight: var(--sigvelo-font-weight-semibold);
   }
 
-  .think-full-app__mobile-action:hover:not([data-disabled]),
-  .think-full-app__mobile-action:focus-visible {
-    background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 12%);
-    color: var(--sigvelo-color-primary-text);
+  .think-full-app__thread-trigger-title {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .think-full-app[data-mobile-view="workbench"] .think-full-app__workspace-back {
-    display: inline-flex;
+  .think-full-app__thread-trigger > svg {
     flex: 0 0 auto;
-    border-radius: 999rem;
-    background: transparent;
-    color: var(--sigvelo-color-text);
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    color: var(--sigvelo-color-text-muted);
+    transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
   }
 
-  .think-full-app[data-mobile-view="workbench"]
-    .think-full-app__workspace-back:hover:not([data-disabled]),
-  .think-full-app[data-mobile-view="workbench"] .think-full-app__workspace-back:focus-visible {
-    background: color-mix(in srgb, var(--sigvelo-color-surface) 76%, transparent);
-    color: var(--sigvelo-color-primary-text);
+  .think-full-app__thread-trigger[aria-expanded="true"] > svg {
+    transform: rotate(180deg);
   }
 
   .think-full-app__chat-surface,
@@ -293,10 +248,24 @@ body.is-resizing-think-full-app .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;
+    grid-row: 1;
     display: flex;
   }
 
+  .think-full-app[data-has-workbench-topbar="true"][data-mobile-view="workbench"]
+    .think-full-app__workbench-slot,
+  .think-full-app[data-has-workbench-topbar="true"][data-mobile-view="workbench"]
+    .think-full-app__workbench {
+    grid-row: 2;
+  }
+
+  .think-full-app[data-has-compact-app-bar="true"][data-mobile-view="workbench"]
+    .think-full-app__workbench-slot,
+  .think-full-app[data-has-compact-app-bar="true"][data-mobile-view="workbench"]
+    .think-full-app__workbench {
+    grid-row: 2;
+  }
+
   .think-full-app__aside {
     display: contents;
     border-inline-start: 0;
@@ -310,6 +279,11 @@ body.is-resizing-think-full-app .think-full-app {
     display: grid;
   }
 
+  .think-full-app[data-has-compact-app-bar="true"][data-mobile-view="chat"]
+    .think-full-app__chat-surface {
+    grid-row: 2;
+  }
+
   .think-full-app__chat,
   .think-full-app__chat-inner {
     --agent-chat-content-max-inline-size: 34rem;
@@ -325,13 +299,54 @@ body.is-resizing-think-full-app .think-full-app {
   }
 
   .think-full-app .think-full-app__chat .agent-chat__transcript-content {
-    padding-block-start: calc(2.5rem + env(safe-area-inset-top, 0px));
+    gap: var(--sigvelo-spacing-2-5);
+    padding-block-start: calc(var(--sigvelo-spacing-3) + env(safe-area-inset-top, 0px));
+    padding-inline: var(--sigvelo-spacing-3);
+  }
+
+  .think-full-app .agent-chat__composer {
+    padding: var(--sigvelo-spacing-2);
+    padding-block-start: var(--sigvelo-spacing-4);
+    background: linear-gradient(
+      to top,
+      var(--sigvelo-color-surface) calc(100% - var(--sigvelo-spacing-4)),
+      transparent
+    );
+  }
+
+  .think-full-app .prompt-input {
+    gap: var(--sigvelo-spacing-1);
+    padding-block: var(--sigvelo-spacing-2);
+    padding-inline: var(--sigvelo-spacing-2-5);
+    border-radius: var(--sigvelo-radius-lg);
+  }
+
+  .think-full-app .message__content {
+    line-height: 1.45;
+  }
+
+  .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: 2.25rem;
+    padding-block: 0;
+  }
+
+  .think-full-app .workspace-explorer__filter {
+    margin-block: var(--sigvelo-spacing-1);
+    margin-inline: var(--sigvelo-spacing-2);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .think-full-app,
-  .think-full-app__resizer::before {
+  .think-full-app {
+    transition: none;
+  }
+
+  .think-full-app__thread-trigger > svg {
     transition: none;
   }
 }
@@ -340,7 +355,7 @@ body.is-resizing-think-full-app .think-full-app {
   .think-full-app__chat-surface,
   .think-full-app__aside,
   .think-full-app__workbench,
-  .think-full-app__topbar,
+  .think-full-app__app-bar,
   .think-full-app__workbench-view-switch {
     border: 1px solid canvastext;
     background: canvas;