@mcp-b/react-components 0.7.0 → 0.8.0

package/dist/{copy-button-CB2MWcau.js → copy-button-C6JSKtFE.js}

@@ -1,4 +1,4 @@
-import { a as CheckIcon, l as CopyIcon } from "./icons-BCNawx-T.js";
+import { a as CheckIcon, l as CopyIcon } from "./icons-D2Q5n5C1.js";
 import { Button } from "./components/Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./components/Tooltip.js";
 import * as React from "react";

package/dist/{icons-BYpJY6L2.d.ts → icons-CbjtbIJK.d.ts}

@@ -35,8 +35,10 @@ declare const ArrowUpIcon: (props: IconProps) => React.JSX.Element;
 declare const DownloadIcon: (props: IconProps) => React.JSX.Element;
 declare const RefreshIcon: (props: IconProps) => React.JSX.Element;
 declare const DotIcon: (props: IconProps) => React.JSX.Element;
+declare const EllipsisIcon: (props: IconProps) => React.JSX.Element;
 declare const SpinnerIcon: (props: IconProps) => React.JSX.Element;
 declare const SearchIcon: (props: IconProps) => React.JSX.Element;
+declare const SidebarIcon: (props: IconProps) => React.JSX.Element;
 declare const TerminalIcon: (props: IconProps) => React.JSX.Element;
 declare const LinkIcon: (props: IconProps) => React.JSX.Element;
 declare const WarningIcon: (props: IconProps) => React.JSX.Element;
@@ -46,4 +48,4 @@ declare const ImageIcon: (props: IconProps) => React.JSX.Element;
 declare const MonitorIcon: (props: IconProps) => React.JSX.Element;
 declare const MaximizeIcon: (props: IconProps) => React.JSX.Element;
 //#endregion
-export { SearchIcon as A, MonitorIcon as C, PlayIcon as D, PencilIcon as E, WrenchIcon as F, XIcon as I, SquareIcon as M, TerminalIcon as N, PlusIcon as O, WarningIcon as P, MinusIcon as S, PauseIcon as T, IconProps as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, SpinnerIcon as j, RefreshIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, PaperclipIcon as w, MaximizeIcon as x, InfoIcon as y };
+export { RefreshIcon as A, MinusIcon as C, PencilIcon as D, PauseIcon as E, TerminalIcon as F, WarningIcon as I, WrenchIcon as L, SidebarIcon as M, SpinnerIcon as N, PlayIcon as O, SquareIcon as P, XIcon as R, MaximizeIcon as S, PaperclipIcon as T, FolderOpenIcon as _, CheckIcon as a, InfoIcon as b, ChevronRightIcon as c, DownloadIcon as d, EllipsisIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SearchIcon as j, PlusIcon as k, CopyIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, IconProps as v, MonitorIcon as w, LinkIcon as x, ImageIcon as y };

package/dist/{icons-BCNawx-T.js → icons-D2Q5n5C1.js}

@@ -152,6 +152,32 @@ const DotIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 		stroke: "none"
 	})
 });
+const EllipsisIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: "3.5",
+			cy: "8",
+			r: "0.75",
+			fill: "currentColor",
+			stroke: "none"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "0.75",
+			fill: "currentColor",
+			stroke: "none"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12.5",
+			cy: "8",
+			r: "0.75",
+			fill: "currentColor",
+			stroke: "none"
+		})
+	]
+});
 const SpinnerIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M8 1.5A6.5 6.5 0 1 1 1.5 8" })
@@ -164,6 +190,16 @@ const SearchIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 		r: "4.5"
 	}), /* @__PURE__ */ jsx("path", { d: "M13.5 13.5 10.5 10.5" })]
 });
+const SidebarIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
+	...props,
+	children: [/* @__PURE__ */ jsx("rect", {
+		x: "2.5",
+		y: "2.5",
+		width: "11",
+		height: "11",
+		rx: "1.5"
+	}), /* @__PURE__ */ jsx("path", { d: "M6 2.5v11" })]
+});
 const TerminalIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 	...props,
 	children: [
@@ -252,4 +288,4 @@ const MaximizeIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 	]
 });
 //#endregion
-export { SpinnerIcon as A, PaperclipIcon as C, PlusIcon as D, PlayIcon as E, XIcon as F, TerminalIcon as M, WarningIcon as N, RefreshIcon as O, WrenchIcon as P, MonitorIcon as S, PencilIcon as T, ImageIcon as _, CheckIcon as a, MaximizeIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, InfoIcon as v, PauseIcon as w, MinusIcon as x, LinkIcon as y };
+export { SearchIcon as A, MonitorIcon as C, PlayIcon as D, PencilIcon as E, WarningIcon as F, WrenchIcon as I, XIcon as L, SpinnerIcon as M, SquareIcon as N, PlusIcon as O, TerminalIcon as P, MinusIcon as S, PauseIcon as T, FolderOpenIcon as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EllipsisIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SidebarIcon as j, RefreshIcon as k, CopyIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, PaperclipIcon as w, MaximizeIcon as x, InfoIcon as y };

package/dist/styles/agent-connection.css

@@ -131,13 +131,8 @@
     inset 0 0 0 1px var(--sigvelo-color-primary-border-subtle);
 }
 
-.agent-connect .code-block {
-  min-inline-size: 0;
-}
-
 .agent-connect .code-block__container {
   max-block-size: 13.5rem;
-  overflow-y: auto;
 }
 
 .agent-connect .code-block__content,
@@ -297,6 +292,39 @@
   outline-offset: 2px;
 }
 
+.agent-connect__mcp-form {
+  display: grid;
+  gap: 0.75rem;
+  min-inline-size: 0;
+}
+
+.agent-connect__mcp-form--row {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+  align-items: end;
+  padding: 0.75rem;
+  background: var(--sigvelo-color-surface);
+}
+
+.agent-connect__mcp-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.agent-connect__mcp-form--row .agent-connect__mcp-form-actions {
+  align-self: end;
+}
+
+.agent-connect__mcp-form-status {
+  align-self: end;
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
 .agent-connect-trigger {
   inline-size: 100%;
 }

package/dist/styles/chatgpt-sign-in-screen.css

@@ -0,0 +1,224 @@
+.chatgpt-sign-in {
+  --chatgpt-sign-in-pointer-x: 50%;
+  --chatgpt-sign-in-pointer-y: 58%;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  block-size: 100%;
+  min-inline-size: 17.5rem;
+  display: grid;
+  place-items: center;
+  padding: clamp(1.25rem, 5vw, 3rem);
+  background-color: var(--sigvelo-color-canvas);
+  background-image:
+    linear-gradient(
+      color-mix(in oklab, var(--sigvelo-color-neutral-border-subtle), transparent 42%) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      90deg,
+      color-mix(in oklab, var(--sigvelo-color-neutral-border-subtle), transparent 42%) 1px,
+      transparent 1px
+    );
+  background-size: 2rem 2rem;
+  color: var(--sigvelo-color-text);
+  font-family: var(--sigvelo-font-sans);
+}
+
+.chatgpt-sign-in::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  background:
+    radial-gradient(
+      circle at var(--chatgpt-sign-in-pointer-x) var(--chatgpt-sign-in-pointer-y),
+      color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%),
+      transparent 12rem
+    ),
+    radial-gradient(
+      circle at var(--chatgpt-sign-in-pointer-x) var(--chatgpt-sign-in-pointer-y),
+      color-mix(in oklab, var(--sigvelo-color-primary-bg-muted), transparent 86%),
+      transparent 18rem
+    );
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+}
+
+.chatgpt-sign-in[data-pointer-active="true"]::before {
+  opacity: 1;
+}
+
+.chatgpt-sign-in__panel {
+  position: relative;
+  z-index: 1;
+  isolation: isolate;
+  display: grid;
+  gap: 1.25rem;
+  justify-items: center;
+  text-align: center;
+}
+
+.chatgpt-sign-in__brand {
+  display: grid;
+  gap: 0.375rem;
+  justify-items: center;
+}
+
+.chatgpt-sign-in__brand h1 {
+  margin: 0;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-2xl);
+  font-weight: var(--sigvelo-font-weight-bold);
+  letter-spacing: 0;
+  line-height: 1.1;
+}
+
+.chatgpt-sign-in__brand p {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.25;
+}
+
+.chatgpt-sign-in__brand-mark,
+.chatgpt-sign-in__logo {
+  display: inline-flex;
+}
+
+.chatgpt-sign-in__brand-mark :where(img, svg) {
+  inline-size: 1.35rem;
+  block-size: 1.35rem;
+  filter: drop-shadow(
+    0 0.25rem 0.5rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%)
+  );
+}
+
+.chatgpt-sign-in__button {
+  --chatgpt-sign-in-button-x: 50%;
+  --chatgpt-sign-in-button-y: 50%;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  min-inline-size: min(100%, 16.75rem);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 84%),
+    0 0.75rem 1.5rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 78%);
+  translate: 0;
+  scale: 1;
+  transition:
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    filter var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    translate var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.chatgpt-sign-in__button::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  background: radial-gradient(
+    circle at var(--chatgpt-sign-in-button-x) var(--chatgpt-sign-in-button-y),
+    color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 70%),
+    transparent 42%
+  );
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.chatgpt-sign-in__button::after {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  inset: 1px;
+  border-radius: inherit;
+  background: radial-gradient(
+    circle at var(--chatgpt-sign-in-button-x) var(--chatgpt-sign-in-button-y),
+    color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 88%),
+    transparent 55%
+  );
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.chatgpt-sign-in__button:hover:not([data-disabled]) {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in oklab, var(--sigvelo-color-primary-text-on-bg), transparent 76%),
+    0 0.9rem 1.9rem color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%);
+  translate: 0 -0.0625rem;
+}
+
+.chatgpt-sign-in__button:hover:not([data-disabled])::before {
+  opacity: 1;
+}
+
+.chatgpt-sign-in__button:active:not([data-disabled]) {
+  translate: 0 0.0625rem;
+  scale: 0.99;
+}
+
+.chatgpt-sign-in__button-icon,
+.chatgpt-sign-in__button-label {
+  position: relative;
+  z-index: 1;
+}
+
+.chatgpt-sign-in__button-icon {
+  display: inline-flex;
+  rotate: 0deg;
+  scale: 1;
+  transition:
+    rotate var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.chatgpt-sign-in__button:hover:not([data-disabled]) .chatgpt-sign-in__button-icon {
+  rotate: -4deg;
+  scale: 1.06;
+}
+
+.chatgpt-sign-in__logo {
+  color: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chatgpt-sign-in::before,
+  .chatgpt-sign-in__button,
+  .chatgpt-sign-in__button::before,
+  .chatgpt-sign-in__button-icon {
+    transition: none;
+  }
+}
+
+@media (hover: none), (pointer: coarse) {
+  .chatgpt-sign-in::before,
+  .chatgpt-sign-in__button::before,
+  .chatgpt-sign-in__button::after {
+    display: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .chatgpt-sign-in::before,
+  .chatgpt-sign-in__button::before,
+  .chatgpt-sign-in__button::after {
+    display: none;
+  }
+
+  .chatgpt-sign-in__button {
+    background-image: none;
+    box-shadow: none;
+    outline: 1px solid ButtonText;
+    outline-offset: 2px;
+  }
+}

package/dist/styles/code-block.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  min-inline-size: 0;
   font-family: var(--sigvelo-font-sans);
   /* Fill-based containment: no perimeter border */
   background-color: var(--sigvelo-color-neutral-bg-subtle);
@@ -47,8 +48,9 @@
 
 .code-block__container {
   position: relative;
+  min-inline-size: 0;
   overflow-x: auto;
-  overflow-y: clip;
+  overflow-y: auto;
 }
 
 .code-block__content {

package/dist/styles/index.css

@@ -72,6 +72,7 @@
 @import "./file-tree.css" layer(components);
 @import "./message.css" layer(components);
 @import "./model-selector.css" layer(components);
+@import "./chatgpt-sign-in-screen.css" layer(components);
 @import "./prompt-input.css" layer(components);
 @import "./queue.css" layer(components);
 @import "./reasoning.css" layer(components);
@@ -79,6 +80,8 @@
 @import "./task.css" layer(components);
 @import "./terminal.css" layer(components);
 @import "./test-results.css" layer(components);
+@import "./think-full-app.css" layer(components);
+@import "./think-thread-picker.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);
 

package/dist/styles/message-scroller.css

@@ -11,6 +11,9 @@
 }
 
 .message-scroller__viewport {
+  --message-scroller-fade-size: min(12%, 2.5rem);
+  --message-scroller-fade-t: 0px;
+  --message-scroller-fade-b: 0px;
   width: 100%;
   height: 100%;
   min-width: 0;
@@ -20,6 +23,26 @@
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   contain: content;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--message-scroller-fade-t),
+    #000 calc(100% - var(--message-scroller-fade-b)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--message-scroller-fade-t),
+    #000 calc(100% - var(--message-scroller-fade-b)),
+    transparent 100%
+  );
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.message-scroller__viewport[data-scrollable~="end"] {
+  --message-scroller-fade-b: var(--message-scroller-fade-b-size, var(--message-scroller-fade-size));
 }
 
 .message-scroller__content {
@@ -40,8 +63,8 @@
   inset-block-end: 1rem;
   z-index: 1;
   translate: -50% 0;
+  border-radius: 999rem;
   box-shadow: var(--sigvelo-shadow-sm);
-  background-color: var(--sigvelo-color-surface);
   transition:
     opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
     scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),

package/dist/styles/prompt-input.css

@@ -205,6 +205,7 @@
 
 .prompt-input__submit {
   flex-shrink: 0;
+  border-radius: 999rem;
 }
 
 .prompt-input__submit-spinner {