@mcp-b/react-components 0.21.0 → 0.23.0

package/dist/styles/recipes.css

@@ -150,6 +150,14 @@
   border-radius: var(--sigvelo-radius-md);
 }
 
+:where([data-recipe~="application-plane"]) {
+  margin-inline: var(--sigvelo-spacing-2);
+  margin-block-end: var(--sigvelo-spacing-2);
+  border-radius: var(--sigvelo-radius-lg);
+  background: var(--sigvelo-color-surface);
+  box-shadow: var(--sigvelo-elevation-floating);
+}
+
 :where([data-recipe~="disclosure-stack"]) {
   display: flex;
   flex-direction: column;
@@ -158,12 +166,19 @@
   color: var(--sigvelo-color-text);
 }
 
-/* Reveal scrollability by fading the top/bottom edges. Owns only the mask
-   structure; each scroller drives --sigvelo-scroll-fade-start/end (default 0px)
-   from its own overflow signal. */
+/* Reveal vertical scrollability by fading the top/bottom edges. Base UI
+   ScrollArea supplies live overflow distances; other scrollers can override
+   --sigvelo-scroll-fade-start/end from their own state. */
 :where([data-recipe~="scroll-fade-y"]) {
-  --sigvelo-scroll-fade-start: 0px;
-  --sigvelo-scroll-fade-end: 0px;
+  --sigvelo-scroll-fade-size: min(12%, 2.5rem);
+  --sigvelo-scroll-fade-start: min(
+    var(--sigvelo-scroll-fade-size),
+    var(--scroll-area-overflow-y-start, 0px)
+  );
+  --sigvelo-scroll-fade-end: min(
+    var(--sigvelo-scroll-fade-size),
+    var(--scroll-area-overflow-y-end, 0px)
+  );
   -webkit-mask-image: linear-gradient(
     to bottom,
     transparent 0,
@@ -814,6 +829,13 @@
     --sigvelo-recipe-surface-border: CanvasText;
   }
 
+  :where([data-recipe~="application-plane"]) {
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: none;
+  }
+
   :where(
     [data-slot="input"],
     [data-slot="select-trigger"],

package/dist/styles/responsive-sidebar-shell.css

@@ -5,12 +5,15 @@
   min-block-size: 0;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
+  background: var(--sigvelo-color-surface-under);
+}
+
+.responsive-sidebar-shell > .app-top-bar {
+  background: var(--sigvelo-color-surface-under);
 }
 
 .responsive-sidebar-shell__frame {
-  --responsive-sidebar-mobile-w: min(80cqi, 22rem);
   --responsive-sidebar-closed-translate: -100%;
-  --responsive-sidebar-main-translate: var(--responsive-sidebar-mobile-w);
 
   position: relative;
   isolation: isolate;
@@ -21,7 +24,7 @@
   grid-template-columns: var(--resizable-side-panel-size, 16rem) minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr);
   overflow: hidden;
-  background: var(--sigvelo-color-canvas);
+  background: var(--sigvelo-color-surface-under);
   color: var(--sigvelo-color-text);
   font-family: inherit;
   transition: grid-template-columns var(--sigvelo-motion-duration-layout)
@@ -30,7 +33,6 @@
 
 .responsive-sidebar-shell__frame:dir(rtl) {
   --responsive-sidebar-closed-translate: 100%;
-  --responsive-sidebar-main-translate: calc(var(--responsive-sidebar-mobile-w) * -1);
 }
 
 .responsive-sidebar-shell__sidebar,
@@ -56,6 +58,14 @@
   display: none;
 }
 
+@media (forced-colors: active) {
+  .responsive-sidebar-shell,
+  .responsive-sidebar-shell__frame {
+    background: canvas;
+    color: canvastext;
+  }
+}
+
 .responsive-sidebar-shell__resizer {
   z-index: var(--sigvelo-z-panel);
 }
@@ -132,10 +142,6 @@
     transition-timing-function: var(--sigvelo-motion-ease-exit);
   }
 
-  .responsive-sidebar-shell__main {
-    transition: none;
-  }
-
   .responsive-sidebar-shell[data-sidebar-open="true"]
     > .responsive-sidebar-shell__frame
     > .responsive-sidebar-shell__main {

package/dist/styles/search-field.css

@@ -1,3 +1,12 @@
+.search-field {
+  --sigvelo-recipe-control-height: var(--sigvelo-control-height-md);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-md);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-control-line-height: var(--sigvelo-control-line-height-md);
+  --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-md);
+  --sigvelo-recipe-control-radius: var(--sigvelo-radius-full);
+}
+
 .search-field__control {
   position: relative;
 }

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

@@ -15,7 +15,7 @@
   min-inline-size: 0;
   display: grid;
   grid-template-rows: minmax(0, 1fr);
-  background: var(--sigvelo-color-canvas);
+  background: var(--sigvelo-color-surface-under);
   color: var(--sigvelo-color-text);
   font-family: inherit;
 }
@@ -32,10 +32,28 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--resizable-side-panel-size, 21.25rem);
   grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
   transition: grid-template-columns var(--sigvelo-motion-duration-layout)
     var(--sigvelo-motion-ease-change);
 }
 
+.think-full-app[data-has-workbench-topbar="false"] > .think-full-app__view-scope {
+  margin-block-start: var(--sigvelo-spacing-2);
+}
+
+/* ResponsiveSidebarShell owns the outer material when a thread sidebar is
+   present. Flatten the nested app so the hierarchy still has exactly one
+   raised primary plane. */
+.think-full-app[data-has-thread-sidebar="true"] {
+  background: var(--sigvelo-color-surface);
+}
+
+.think-full-app[data-has-thread-sidebar="true"] > .think-full-app__view-scope {
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
 .think-full-app[data-has-workbench-topbar="true"] > .think-full-app__view-scope {
   grid-row: 2;
 }
@@ -62,6 +80,7 @@
   grid-column: 1 / -1;
   grid-row: 1;
   z-index: var(--sigvelo-z-chrome);
+  background: var(--sigvelo-color-surface-under);
 }
 
 .think-full-app__chat-surface {
@@ -245,7 +264,7 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 
   .think-full-app .think-full-app__chat .agent-chat__transcript-content {
     gap: var(--sigvelo-spacing-2-5);
-    padding-block-start: calc(var(--sigvelo-spacing-3) + env(safe-area-inset-top, 0px));
+    padding-block-start: calc(var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px));
     padding-inline: var(--sigvelo-spacing-3);
   }
 
@@ -300,6 +319,7 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 }
 
 @media (forced-colors: active) {
+  .think-full-app,
   .think-full-app__chat-surface,
   .think-full-app__aside,
   .think-full-app__workbench,

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

@@ -6,7 +6,7 @@
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   overflow: hidden;
   border-inline-end: 0;
-  background: var(--sigvelo-color-surface);
+  background: var(--sigvelo-color-surface-under);
   color: var(--sigvelo-color-text);
 }
 
@@ -91,16 +91,6 @@
 }
 
 .think-thread-picker__viewport {
-  --think-thread-picker-fade-size: min(12%, 2.5rem);
-  --sigvelo-scroll-fade-start: min(
-    var(--think-thread-picker-fade-size),
-    var(--scroll-area-overflow-y-start, 0px)
-  );
-  --sigvelo-scroll-fade-end: min(
-    var(--think-thread-picker-fade-size),
-    var(--scroll-area-overflow-y-end, 0px)
-  );
-
   padding: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
   overscroll-behavior: contain;
   scrollbar-gutter: stable;

package/dist/styles/toast.css

@@ -77,37 +77,16 @@
   position: absolute;
   inset-block-start: var(--sigvelo-spacing-2);
   inset-inline-end: var(--sigvelo-spacing-2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--sigvelo-control-height-xs);
-  block-size: var(--sigvelo-control-height-xs);
-  padding: 0;
-  font-size: var(--sigvelo-text-base);
   color: var(--sigvelo-color-text-muted);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--sigvelo-radius-sm);
-  cursor: pointer;
   opacity: 0;
-  transition:
-    opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
-    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .toast:is(:hover, :focus-within) .toast__close {
   opacity: 1;
 }
 
-.toast__close:hover {
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-neutral-text-on-subtle);
-}
-
 .toast__close:focus-visible {
   opacity: 1;
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 @media (hover: none) {

package/dist/styles/tokens.css

@@ -1 +1,7 @@
 @import "@mcp-b/design-tokens";
+
+/* Opt-in accent and design-language presets, inert until data-preset or
+   data-style is set on the root. Imported after the main tokens so their
+   equal-specificity overrides win by order. */
+@import "@mcp-b/design-tokens/color-presets";
+@import "@mcp-b/design-tokens/style-presets";

package/dist/styles/web-preview.css

@@ -83,6 +83,11 @@
   transform: rotate(180deg);
 }
 
+.web-preview__console-panel {
+  min-block-size: 0;
+  overflow: hidden;
+}
+
 .web-preview__console-scroll {
   flex: 1;
   min-height: 0;

package/dist/utils/favicon.d.ts

@@ -0,0 +1,10 @@
+//#region src/utils/favicon.d.ts
+/**
+ * Infer an origin's conventional `/favicon.ico` URL from an HTTP(S) page or endpoint URL.
+ *
+ * This does not fetch or inspect the page. Browser hosts that can read a document's
+ * `<link rel="icon">` should prefer that resolved URL because it may point elsewhere.
+ */
+declare function inferFaviconUrl(url: string): string | undefined;
+//#endregion
+export { inferFaviconUrl };

package/dist/utils/favicon.js

@@ -0,0 +1,18 @@
+//#region src/utils/favicon.ts
+/**
+* Infer an origin's conventional `/favicon.ico` URL from an HTTP(S) page or endpoint URL.
+*
+* This does not fetch or inspect the page. Browser hosts that can read a document's
+* `<link rel="icon">` should prefer that resolved URL because it may point elsewhere.
+*/
+function inferFaviconUrl(url) {
+	try {
+		const parsed = new URL(url);
+		if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return void 0;
+		return new URL("/favicon.ico", parsed.origin).href;
+	} catch {
+		return;
+	}
+}
+//#endregion
+export { inferFaviconUrl };