@mcp-b/react-components 0.14.2 → 0.16.0

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

@@ -5,7 +5,7 @@
   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,31 +13,36 @@
 }
 
 .think-full-app[data-has-workbench-topbar="true"] {
-  grid-template-rows: 2.75rem minmax(0, 1fr);
+  grid-template-rows: calc(2.75rem + env(safe-area-inset-top, 0px)) minmax(0, 1fr);
 }
 
-.think-full-app__mobile-header {
+.think-full-app[data-has-workbench="false"] {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.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"] {
-  display: none;
 }
 
 .think-full-app__chat-surface {
@@ -113,27 +118,12 @@
 
 .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;
-}
-
 .think-full-app__workbench-slot,
 .think-full-app__workbench,
 .think-full-app__workbench-panel {
@@ -155,53 +145,12 @@ 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-view-item {
-  min-block-size: 1.625rem;
-  min-inline-size: 1.75rem;
-  padding: 0.1875rem;
-  border-radius: 0.5rem;
-}
-
-.think-full-app__workbench-view-item svg {
-  display: block;
 }
 
 .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 +158,53 @@ body.is-resizing-think-full-app .think-full-app {
     grid-template-rows: minmax(0, 1fr);
   }
 
-  .think-full-app[data-mobile-view="workbench"] {
+  .think-full-app[data-has-workbench-topbar="true"] {
     grid-template-rows: calc(2.75rem + env(safe-area-inset-top, 0px)) minmax(0, 1fr);
   }
 
-  .think-full-app__topbar,
-  .think-full-app__topbar[data-mobile-only="true"] {
+  .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__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__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__app-title {
+    display: 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 +218,17 @@ 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__aside {
     display: contents;
     border-inline-start: 0;
@@ -325,13 +257,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 +313,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;