@mcp-b/react-components 0.16.1 → 0.18.0

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

@@ -25,7 +25,9 @@
 
 .think-execution-workbench__error {
   margin: var(--sigvelo-spacing-3) var(--sigvelo-spacing-3) 0;
-  padding: 0.4375rem var(--sigvelo-spacing-2-5);
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: 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);
@@ -65,7 +67,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   min-block-size: var(--sigvelo-control-height-lg);
   padding-inline: var(--sigvelo-spacing-3);
 }
@@ -97,6 +99,8 @@
   align-items: center;
   min-inline-size: 0;
   border-radius: var(--sigvelo-radius-sm);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .think-execution-workbench__list > li:not(:last-child) {
@@ -105,7 +109,6 @@
 }
 
 .think-execution-workbench__list > li[data-selected="true"] {
-  margin-block: 0.25rem;
   background: color-mix(
     in oklab,
     var(--sigvelo-color-primary-bg-subtle),
@@ -115,13 +118,13 @@
 
 .think-execution-workbench__run {
   min-inline-size: 0;
-  min-block-size: 3.5rem;
+  min-block-size: calc(var(--sigvelo-control-height-xl) + var(--sigvelo-spacing-3));
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
   gap: var(--sigvelo-spacing-2);
   padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: 0.25rem;
+  padding-inline: var(--sigvelo-spacing-1);
   border-radius: inherit;
   text-align: start;
 }
@@ -129,14 +132,14 @@
 .think-execution-workbench__run-copy {
   min-inline-size: 0;
   display: grid;
-  row-gap: 0.25rem;
+  row-gap: var(--sigvelo-spacing-1);
 }
 
 .think-execution-workbench__run-heading {
   min-inline-size: 0;
   display: flex;
   align-items: baseline;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
 }
 
 .think-execution-workbench__run-title {
@@ -171,8 +174,8 @@
 
 .think-execution-workbench__icon {
   flex: 0 0 auto;
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
+  inline-size: var(--sigvelo-spacing-6);
+  block-size: var(--sigvelo-spacing-6);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -180,14 +183,14 @@
 }
 
 .think-execution-workbench__icon svg {
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
 }
 
 .think-execution-workbench__run-actions {
-  inline-size: 2rem;
-  min-block-size: 2rem;
-  margin-inline-end: 0.25rem;
+  inline-size: var(--sigvelo-control-height-sm);
+  min-block-size: var(--sigvelo-control-height-sm);
+  margin-inline-end: var(--sigvelo-spacing-1);
 }
 
 .think-execution-workbench__detail {
@@ -214,7 +217,7 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
   text-align: end;

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

@@ -1,26 +1,46 @@
+.think-thread-shell {
+  container-name: responsive-sidebar-shell think-full-app;
+}
+
 .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)
+    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: 32rem;
   min-inline-size: 0;
   display: grid;
   grid-template-rows: minmax(0, 1fr);
-  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;
-  transition: grid-template-columns var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .think-full-app[data-has-workbench-topbar="true"] {
   grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
 }
 
-.think-full-app[data-has-workbench="false"] {
+.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);
+  transition: grid-template-columns var(--sigvelo-motion-duration-layout)
+    var(--sigvelo-motion-ease-change);
+}
+
+.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);
 }
 
@@ -38,21 +58,12 @@
   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;
 }
 
-.think-full-app > .think-full-app__app-bar[data-compact-only="true"] {
-  display: none;
-}
-
 .think-full-app__chat-surface {
   grid-column: 1;
   grid-row: 1;
@@ -80,28 +91,6 @@
   grid-template-rows: minmax(0, 1fr) auto;
 }
 
-.think-full-app__error {
-  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: var(--sigvelo-text-xs);
-}
-
-.think-full-app__error-dismiss {
-  margin-inline-start: 0.5rem;
-  min-height: auto;
-  padding: 0;
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  text-decoration: underline;
-}
-
 .think-full-app__aside {
   grid-column: 2;
   grid-row: 1;
@@ -119,11 +108,6 @@
   );
 }
 
-.think-full-app[data-has-workbench-topbar="true"] .think-full-app__chat-surface,
-.think-full-app[data-has-workbench-topbar="true"] .think-full-app__aside {
-  grid-row: 2;
-}
-
 .think-full-app__resizer {
   z-index: 5;
 }
@@ -132,6 +116,10 @@
   inset-block-start: var(--think-full-app-header-block-size);
 }
 
+body.is-resizing-side-panel .think-full-app__view-scope {
+  transition: none;
+}
+
 .think-full-app__workbench-slot,
 .think-full-app__workbench,
 .think-full-app__workbench-panel {
@@ -157,10 +145,6 @@
   box-shadow: none;
 }
 
-.think-full-app__embedded-view-switch {
-  flex: 0 0 auto;
-}
-
 .think-full-app__workbench-view-switch {
   margin-inline-start: auto;
 }
@@ -169,33 +153,16 @@
   padding: 0;
 }
 
-@media (width <= 56rem) {
-  .think-full-app {
-    min-block-size: 0;
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: 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[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-panel:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: -2px;
+}
 
+@container think-full-app (inline-size <= 56rem) {
   .think-full-app__workbench-view-switch {
     display: none;
   }
 
-  .think-full-app__embedded-view-switch {
-    display: none;
-  }
-
   .think-full-app__mobile-view-switch {
     display: flex;
   }
@@ -208,13 +175,13 @@
     inline-size: auto;
     max-inline-size: min(22rem, 58vw);
     min-inline-size: 0;
-    min-block-size: 2rem;
+    min-block-size: var(--sigvelo-density-compact-control-height);
     display: inline-flex;
-    gap: var(--sigvelo-spacing-1-5);
-    padding-inline: var(--sigvelo-spacing-2);
+    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-text-compact);
+    font-size: var(--sigvelo-density-compact-control-font-size);
     font-weight: var(--sigvelo-font-weight-semibold);
   }
 
@@ -227,20 +194,20 @@
 
   .think-full-app__thread-trigger > svg {
     flex: 0 0 auto;
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
+    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: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
   }
 
   .think-full-app__thread-trigger[aria-expanded="true"] > svg {
-    transform: rotate(180deg);
+    rotate: 180deg;
   }
 
   .think-full-app__chat-surface,
   .think-full-app__workbench-slot,
   .think-full-app__workbench {
-    grid-column: 1;
+    grid-column: 1 / -1;
     grid-row: 1;
     min-block-size: 0;
     display: none;
@@ -252,20 +219,6 @@
     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;
@@ -279,11 +232,6 @@
     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;
@@ -331,7 +279,7 @@
   }
 
   .think-full-app .workspace-explorer__header {
-    min-block-size: 2.25rem;
+    min-block-size: var(--sigvelo-density-compact-control-height);
     padding-block: 0;
   }
 
@@ -341,13 +289,16 @@
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .think-full-app {
-    transition: none;
+@container responsive-sidebar-shell (inline-size <= 56rem) {
+  .think-thread-shell:has(.think-full-app) .responsive-sidebar-shell__toggle {
+    display: none;
   }
 
-  .think-full-app__thread-trigger > svg {
-    transition: none;
+  .think-thread-shell[data-hide-app-bar-in-workbench]:has(
+      .think-full-app[data-mobile-view="workbench"]
+    )
+    > .app-top-bar {
+    display: none;
   }
 }
 

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

@@ -55,25 +55,42 @@
   text-transform: uppercase;
 }
 
-.think-routine-library__status,
-.think-routine-library__title {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .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;
@@ -96,15 +113,11 @@
   margin-block-end: var(--sigvelo-spacing-2);
 }
 
-.think-routine-library__layout
-  .responsive-sidebar-shell__frame[data-sidebar-open="true"]
-  .think-routine-library__browser-toolbar {
+.think-routine-library__layout[data-sidebar-open="true"] .think-routine-library__browser-toolbar {
   padding-inline-start: var(--sigvelo-spacing-12);
 }
 
-.think-routine-library__layout
-  .responsive-sidebar-shell__frame[data-sidebar-open="false"]
-  .think-routine-library__detail {
+.think-routine-library__layout[data-sidebar-open="false"] .think-routine-library__detail {
   padding-block-start: clamp(3.75rem, 6vw, 4.5rem);
 }
 
@@ -113,31 +126,13 @@
 }
 
 .think-routine-library__search {
+  --sigvelo-recipe-control-radius: var(--sigvelo-radius-full);
+
   display: grid;
   gap: var(--sigvelo-spacing-1-5);
   margin-block-end: var(--sigvelo-spacing-2);
 }
 
-.think-routine-library__search > div {
-  position: relative;
-}
-
-.think-routine-library__search svg {
-  position: absolute;
-  z-index: 1;
-  inset-block-start: 50%;
-  inset-inline-start: var(--sigvelo-spacing-2-5);
-  translate: 0 -50%;
-  color: var(--sigvelo-color-text-muted);
-  pointer-events: none;
-}
-
-.think-routine-browser__search-control {
-  inline-size: 100%;
-  padding-inline-start: 2.125rem;
-  border-radius: var(--sigvelo-radius-full);
-}
-
 .think-routine-library__routine-list {
   display: grid;
   gap: var(--sigvelo-spacing-1);
@@ -148,6 +143,8 @@
 
 .think-routine-library__routine-list li {
   border-radius: var(--sigvelo-radius-md);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .think-routine-library__routine-list li[data-selected="true"] {
@@ -171,6 +168,9 @@
   block-size: 0.5rem;
   border: var(--sigvelo-border-style) 1.5px var(--sigvelo-color-neutral-border);
   border-radius: var(--sigvelo-radius-full);
+  transition:
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .think-routine-library__routine-status[data-enabled="true"] {
@@ -198,7 +198,7 @@
 
 .think-routine-library__routine-copy span,
 .think-routine-library__routine-copy small {
-  color: var(--sigvelo-color-text-muted);
+  color: color-mix(in oklab, var(--sigvelo-color-text-muted), var(--sigvelo-color-text) 12%);
   font-size: var(--sigvelo-text-xs);
 }
 
@@ -208,6 +208,12 @@
   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;
@@ -409,6 +415,11 @@
   font-size: var(--sigvelo-text-lg);
 }
 
+.think-routine-library__empty-action {
+  justify-self: center;
+  margin-block-start: var(--sigvelo-spacing-4);
+}
+
 .think-routine-library__create {
   min-block-size: 0;
   overflow: auto;