@mcp-b/react-components 0.16.0 → 0.17.0

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

@@ -1,5 +1,10 @@
 .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;
+  container: think-full-app / inline-size;
   block-size: 100%;
   min-block-size: 32rem;
   min-inline-size: 0;
@@ -13,7 +18,16 @@
 }
 
 .think-full-app[data-has-workbench-topbar="true"] {
-  grid-template-rows: calc(2.75rem + env(safe-area-inset-top, 0px)) minmax(0, 1fr);
+  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[data-has-compact-app-bar="true"] > .think-full-app__chat-surface,
+.think-full-app[data-has-compact-app-bar="true"] > .think-full-app__aside {
+  grid-row: 1 / -1;
 }
 
 .think-full-app[data-has-workbench="false"] {
@@ -45,6 +59,10 @@
   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;
@@ -72,28 +90,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;
@@ -121,7 +117,7 @@
 }
 
 .think-full-app[data-has-workbench-topbar="true"] .think-full-app__resizer {
-  inset-block-start: 2.75rem;
+  inset-block-start: var(--think-full-app-header-block-size);
 }
 
 .think-full-app__workbench-slot,
@@ -143,6 +139,16 @@
   );
 }
 
+.think-full-app__workbench.workspace-explorer {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.think-full-app__embedded-view-switch {
+  flex: 0 0 auto;
+}
+
 .think-full-app__workbench-view-switch {
   margin-inline-start: auto;
 }
@@ -151,18 +157,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);
+@container think-full-app (inline-size <= 56rem) {
+  .think-full-app > .think-full-app__app-bar[data-compact-only="true"] {
+    display: grid;
   }
 
-  .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__workbench-view-switch {
+    display: none;
   }
 
-  .think-full-app__workbench-view-switch {
+  .think-full-app__embedded-view-switch {
     display: none;
   }
 
@@ -210,7 +214,7 @@
   .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;
@@ -229,6 +233,13 @@
     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;
@@ -242,6 +253,11 @@
     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;

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

@@ -55,19 +55,6 @@
   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;
@@ -78,7 +65,7 @@
   min-inline-size: 0;
   min-block-size: 0;
   overflow: auto;
-  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2);
   border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   background: color-mix(
@@ -93,18 +80,14 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--sigvelo-spacing-2);
-  margin-block-end: var(--sigvelo-spacing-4);
+  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);
 }
 
@@ -112,10 +95,14 @@
   inline-size: fit-content;
 }
 
+.think-routine-library__filters .toggle-group__item {
+  color: color-mix(in oklab, var(--sigvelo-color-text-muted), var(--sigvelo-color-text) 12%);
+}
+
 .think-routine-library__search {
   display: grid;
   gap: var(--sigvelo-spacing-1-5);
-  margin-block-end: var(--sigvelo-spacing-4);
+  margin-block-end: var(--sigvelo-spacing-2);
 }
 
 .think-routine-library__search > div {
@@ -156,12 +143,12 @@
 
 .think-routine-browser__routine {
   inline-size: 100%;
-  min-block-size: 5.75rem;
+  min-block-size: 3.5rem;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  gap: var(--sigvelo-spacing-2-5);
-  padding: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-2);
   border-radius: inherit;
   text-align: start;
 }
@@ -198,7 +185,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);
 }
 
@@ -211,7 +198,7 @@
 .think-routine-library__detail {
   inline-size: min(100%, 64rem);
   margin-inline: auto;
-  padding: clamp(1.5rem, 4vw, 3.5rem);
+  padding: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__detail-header,
@@ -223,7 +210,7 @@
 
 .think-routine-library__detail-header {
   justify-content: space-between;
-  padding-block-end: clamp(2rem, 5vw, 4rem);
+  padding-block-end: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__detail-heading {
@@ -236,7 +223,7 @@
 
 .think-routine-library__detail-header h1,
 .think-routine-library__create-header h1 {
-  font-size: clamp(1.5rem, 3vw, 2.125rem);
+  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
   line-height: 1.12;
 }
 
@@ -251,8 +238,8 @@
 .think-routine-library__detail-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
-  gap: clamp(2rem, 6vw, 5rem);
-  padding-block-end: clamp(2.5rem, 6vw, 5rem);
+  gap: clamp(1rem, 3vw, 2rem);
+  padding-block-end: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__section-heading {
@@ -320,7 +307,7 @@
 }
 
 .think-routine-library__runs {
-  padding-block-end: clamp(2.5rem, 6vw, 5rem);
+  padding-block-end: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__run-list {
@@ -387,7 +374,7 @@
 }
 
 .think-routine-library__empty-list {
-  padding: var(--sigvelo-spacing-6) var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-3);
 }
 
 .think-routine-library__empty-list p,
@@ -400,19 +387,24 @@
   min-block-size: 100%;
   display: grid;
   place-content: center;
-  padding: var(--sigvelo-spacing-6);
+  padding: var(--sigvelo-spacing-4);
 }
 
 .think-routine-library__empty-detail h1 {
   margin: 0;
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-xl);
+  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;
-  padding: clamp(1.5rem, 5vw, 4rem);
+  padding: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__create-header,
@@ -422,7 +414,7 @@
 }
 
 .think-routine-library__create-header {
-  margin-block-end: clamp(2rem, 5vw, 3.5rem);
+  margin-block-end: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__create-header > div {
@@ -431,7 +423,7 @@
 
 .think-routine-library__form {
   display: grid;
-  gap: var(--sigvelo-spacing-6);
+  gap: var(--sigvelo-spacing-3);
 }
 
 .think-routine-library__form-row {

package/dist/styles/think-thread-picker.css

@@ -238,6 +238,21 @@
   }
 }
 
+@container responsive-sidebar-shell (inline-size <= 56rem) {
+  .think-thread-picker {
+    block-size: auto;
+    max-block-size: inherit;
+    grid-template-rows: auto auto auto;
+  }
+
+  .think-thread-picker__nav,
+  .think-thread-picker__scroll,
+  .think-thread-picker__viewport {
+    block-size: auto;
+    max-block-size: 20rem;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .think-thread-status-indicators__item[data-status="running"] svg,
   .think-thread-picker__thread[data-status="pending"] .think-thread-picker__thread-status svg,

package/dist/styles/toast.css

@@ -12,7 +12,7 @@
 }
 
 .toast {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
 
   display: flex;
   flex-direction: column;
@@ -54,26 +54,19 @@
 
 .toast__title {
   margin: 0;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-bold);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
 }
 
-.toast__description {
-  margin: 0;
-  font-size: var(--sigvelo-text-sm);
-  line-height: 1.5;
-  color: var(--sigvelo-color-text-muted);
-}
-
 .toast__action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: var(--sigvelo-spacing-3);
-  margin-block-start: var(--sigvelo-spacing-3);
+  margin-block-start: var(--sigvelo-spacing-2);
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);

package/dist/styles/tooltip.css

@@ -1,5 +1,5 @@
 .tooltip__popup {
-  --sigvelo-recipe-surface-padding: 0.375rem 0.75rem;
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
   --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-sm);
 
   z-index: 50;

package/dist/styles/utilities.css

@@ -0,0 +1,31 @@
+/*
+ * Small, intentional composition helpers. Utilities describe one reusable
+ * behavior and must not carry component anatomy or product-specific visuals.
+ */
+.sigvelo-visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.sigvelo-stack-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sigvelo-truncate {
+  min-inline-size: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/styles/web-preview.css

@@ -1,16 +1,3 @@
-.web-preview {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  overflow: hidden;
-}
-
 .web-preview__nav {
   display: flex;
   align-items: center;
@@ -107,14 +94,6 @@
   overflow: auto;
 }
 
-.web-preview__console-list {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 .web-preview__console-empty {
   padding-block: var(--sigvelo-spacing-3);
   padding-inline: var(--sigvelo-spacing-3);

package/dist/styles/workspace-explorer.css

@@ -62,10 +62,11 @@
   text-overflow: ellipsis;
 }
 
-.workspace-explorer__body {
+.workspace-explorer__body,
+.workspace-explorer__file {
   display: flex;
   flex-direction: column;
-  min-height: 0;
+  min-block-size: 0;
   flex: 1;
   overflow: auto;
 }
@@ -77,18 +78,6 @@
   margin-inline: var(--sigvelo-spacing-2);
 }
 
-.workspace-explorer__filter-label {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .workspace-explorer__filter-control {
   position: relative;
 }
@@ -169,15 +158,6 @@
   text-align: center;
 }
 
-/* File preview fills the pane flush — no card-in-pane inset. */
-.workspace-explorer__file {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-  overflow: auto;
-}
-
 .workspace-explorer__code {
   flex: 1;
   min-block-size: 100%;
@@ -233,18 +213,6 @@
   cursor: not-allowed;
 }
 
-.workspace-link__visually-hidden {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .workspace-explorer__markdown-content
   :is(
     [data-streamdown="code-block"],
@@ -314,7 +282,8 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.workspace-explorer__skill-metadata dd {
+.workspace-explorer__skill-metadata dd,
+.workspace-explorer__media-details dd {
   min-inline-size: 0;
   margin: 0;
   overflow-wrap: anywhere;
@@ -466,13 +435,6 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.workspace-explorer__media-details dd {
-  min-inline-size: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-  font-family: var(--sigvelo-font-mono);
-}
-
 .workspace-explorer__media-transcript,
 .workspace-explorer__media-fallback a {
   color: var(--sigvelo-color-primary-text);
@@ -498,18 +460,6 @@
   display: none;
 }
 
-.workspace-explorer__visually-hidden {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .workspace-media-lightbox {
   --yarl__color_backdrop: var(--sigvelo-color-surface);
   --yarl__color_button: var(--sigvelo-color-text-muted);
@@ -556,11 +506,7 @@
   }
 }
 
-@container (inline-size < 24rem) {
-  .workspace-explorer__heading {
-    max-inline-size: 34cqi;
-  }
-
+@container (inline-size < 30rem) {
   .workspace-explorer__filter {
     margin-inline: var(--sigvelo-spacing-1-5);
   }
@@ -570,6 +516,20 @@
     padding-inline: var(--sigvelo-spacing-4);
   }
 
+  .workspace-explorer__media-stage {
+    padding: var(--sigvelo-spacing-3);
+  }
+
+  .workspace-explorer__media-caption {
+    padding-inline: var(--sigvelo-spacing-3);
+  }
+}
+
+@container (inline-size < 24rem) {
+  .workspace-explorer__heading {
+    max-inline-size: 34cqi;
+  }
+
   .workspace-explorer__skill-metadata {
     grid-template-columns: 1fr;
     gap: 0;
@@ -579,13 +539,8 @@
     margin-block-start: var(--sigvelo-spacing-2);
   }
 
-  .workspace-explorer__media-stage {
-    padding: var(--sigvelo-spacing-3);
-  }
-
   .workspace-explorer__media-caption {
     align-items: flex-start;
     flex-direction: column;
-    padding-inline: var(--sigvelo-spacing-3);
   }
 }

package/dist/think-agent-Cip5KAPj.d.ts

@@ -0,0 +1,7 @@
+import { Think } from "@cloudflare/think";
+
+//#region src/components/_internal/think-agent.d.ts
+/** Shared complete Think specialization for stateful React agent hooks. */
+type ThinkAgent<State = unknown> = Think<object, State>;
+//#endregion
+export { ThinkAgent as t };

package/dist/utils/codex-model-catalog.d.ts

@@ -78,7 +78,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -98,7 +98,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -115,7 +115,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -132,7 +132,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];

package/dist/utils/structured-code.d.ts

@@ -1,4 +1,4 @@
-import { A as CodeBlockLanguage } from "../CodeBlock-BRajW4QU.js";
+import { A as CodeBlockLanguage } from "../CodeBlock-Dnpr88ZQ.js";
 
 //#region src/utils/structured-code.d.ts
 interface StructuredCodeDisplay {