@mcp-b/react-components 0.17.0 → 0.18.0

package/dist/styles/toolbar.css

@@ -1,9 +1,13 @@
 .toolbar {
+  --sigvelo-toolbar-control-height: var(--sigvelo-control-height-sm);
+  --sigvelo-toolbar-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
+  --sigvelo-toolbar-control-font-size: var(--sigvelo-control-text-sm);
+
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem;
-  container-type: inline-size;
+  gap: var(--sigvelo-spacing-1);
+  padding: var(--sigvelo-spacing-1);
   background-color: var(--sigvelo-color-canvas);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -23,9 +27,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem;
+  min-block-size: var(--sigvelo-toolbar-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-toolbar-control-padding-inline);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-toolbar-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   background-color: transparent;
@@ -33,8 +39,8 @@
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .toolbar__button:hover {
@@ -61,16 +67,18 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem;
+  min-block-size: var(--sigvelo-toolbar-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-toolbar-control-padding-inline);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-toolbar-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   text-decoration: none;
   border-radius: var(--sigvelo-radius-sm);
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .toolbar__link:hover {
@@ -94,16 +102,16 @@
 }
 
 .toolbar__separator {
-  width: 1px;
-  height: 1.5rem;
-  margin-inline: 0.25rem;
+  inline-size: var(--sigvelo-border-width);
+  block-size: var(--sigvelo-spacing-6);
+  margin-inline: var(--sigvelo-spacing-1);
   background-color: var(--sigvelo-color-neutral-border-muted);
 }
 
 .toolbar[data-orientation="vertical"] .toolbar__separator {
-  width: 100%;
-  height: 1px;
-  margin-block: 0.25rem;
+  inline-size: 100%;
+  block-size: var(--sigvelo-border-width);
+  margin-block: var(--sigvelo-spacing-1);
 }
 
 .toolbar__input {
@@ -117,13 +125,3 @@
   border-color: var(--sigvelo-color-focus);
   box-shadow: var(--sigvelo-recipe-focus-shadow-subtle);
 }
-
-@container (max-width: 20rem) {
-  .toolbar {
-    flex-wrap: wrap;
-  }
-
-  .toolbar__separator {
-    display: none;
-  }
-}

package/dist/styles/tooltip.css

@@ -1,41 +1,11 @@
 .tooltip__popup {
+  --sigvelo-recipe-popup-arrow-size: var(--sigvelo-spacing-2);
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
   --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-sm);
 
   z-index: 50;
   max-inline-size: min(20rem, var(--available-width));
-  overflow-y: auto;
+  overflow-block: auto;
   font-size: var(--sigvelo-text-xs);
   line-height: 1.25;
 }
-
-.tooltip__arrow {
-  width: 0.5rem;
-  height: 0.5rem;
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-right: none;
-  border-bottom: none;
-  transform: rotate(45deg);
-}
-
-[data-side="top"] .tooltip__arrow {
-  bottom: -0.25rem;
-  transform: rotate(-135deg);
-}
-
-[data-side="bottom"] .tooltip__arrow {
-  top: -0.25rem;
-  transform: rotate(45deg);
-}
-
-[data-side="left"] .tooltip__arrow {
-  right: -0.25rem;
-  transform: rotate(135deg);
-}
-
-[data-side="right"] .tooltip__arrow {
-  left: -0.25rem;
-  transform: rotate(-45deg);
-}

package/dist/styles/transition-surface.css

@@ -0,0 +1,55 @@
+.transition-surface {
+  --transition-surface-inline: 0;
+  --transition-surface-block: 0;
+  --transition-surface-scale: 1;
+
+  opacity: 1;
+  translate: 0;
+  scale: 1;
+  transition:
+    display var(--sigvelo-motion-duration-presence),
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter),
+    translate var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter),
+    scale var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
+  transition-behavior: allow-discrete;
+}
+
+.transition-surface[data-variant="scale"] {
+  --transition-surface-scale: var(--sigvelo-motion-presence-scale);
+}
+
+.transition-surface[data-variant="slide-block"] {
+  --transition-surface-block: var(--sigvelo-motion-distance-sm);
+}
+
+.transition-surface[data-variant="slide-inline"] {
+  --transition-surface-inline: var(--sigvelo-motion-distance-sm);
+}
+
+.transition-surface[hidden] {
+  display: none;
+  opacity: 0;
+  translate: var(--transition-surface-inline) var(--transition-surface-block);
+  scale: var(--transition-surface-scale);
+  transition-timing-function: var(--sigvelo-motion-ease-exit);
+}
+
+@starting-style {
+  .transition-surface {
+    opacity: 0;
+    translate: var(--transition-surface-inline) var(--transition-surface-block);
+    scale: var(--transition-surface-scale);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .transition-surface {
+    translate: none;
+    scale: 1;
+  }
+}
+
+:root[data-motion="reduce"] .transition-surface {
+  translate: none;
+  scale: 1;
+}

package/dist/styles/workspace-explorer.css

@@ -5,8 +5,8 @@
   display: flex;
   flex-direction: column;
   inline-size: 100%;
-  min-height: 0;
-  height: 100%;
+  min-block-size: 0;
+  block-size: 100%;
   overflow: hidden;
   font-family: inherit;
   color: var(--sigvelo-color-text);
@@ -18,9 +18,70 @@
   container-type: inline-size;
 }
 
+.workspace-explorer:has(> .workspace-explorer__file[data-appearance="canvas"]) {
+  block-size: auto;
+  overflow: visible;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.workspace-explorer__file[data-appearance="canvas"] {
+  overflow: visible;
+}
+
+.workspace-explorer__file[data-appearance="canvas"] > .workspace-explorer__header {
+  padding-inline: 0;
+  background: transparent;
+  border-block-end: 0;
+}
+
+.workspace-explorer__file[data-appearance="canvas"] .workspace-explorer__markdown-scroll {
+  overflow: visible;
+  background: transparent;
+}
+
+.workspace-explorer__file[data-appearance="canvas"] .workspace-explorer__markdown {
+  inline-size: 100%;
+  margin-inline: 0;
+  padding-block: var(--sigvelo-spacing-6) var(--sigvelo-spacing-8);
+  padding-inline: 0;
+}
+
+.workspace-explorer__file[data-appearance="canvas"] .workspace-explorer__skill {
+  margin-block-end: var(--sigvelo-spacing-4);
+  padding-block-end: 0;
+  border-block-end: 0;
+}
+
+.workspace-explorer__file[data-appearance="canvas"]
+  .workspace-explorer__skill:not([data-skill-identity])
+  .workspace-explorer__skill-status {
+  margin-block-start: 0;
+}
+
+.workspace-explorer__file[data-appearance="canvas"]
+  .workspace-explorer__markdown-content
+  [data-streamdown="heading-1"] {
+  margin-block-start: var(--sigvelo-spacing-4);
+}
+
+.workspace-explorer__file[data-appearance="canvas"]
+  .workspace-explorer__markdown-content
+  [data-streamdown="heading-2"] {
+  margin-block-start: var(--sigvelo-spacing-6);
+}
+
+.workspace-explorer__file[data-appearance="canvas"]
+  .workspace-explorer__markdown-content
+  :is([data-streamdown="heading-3"], [data-streamdown="heading-4"]) {
+  margin-block-start: var(--sigvelo-spacing-4);
+}
+
 .workspace-explorer__header {
   flex: 0 0 auto;
-  min-block-size: var(--sigvelo-control-height-sm);
+  min-block-size: var(--sigvelo-density-compact-control-height);
   padding-block: var(--sigvelo-spacing-0-5);
   padding-inline: var(--sigvelo-spacing-1-5);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -28,27 +89,27 @@
 }
 
 .workspace-explorer__header .app-top-bar__button {
-  inline-size: var(--sigvelo-control-height-xs);
-  min-inline-size: var(--sigvelo-control-height-xs);
-  block-size: var(--sigvelo-control-height-xs);
-  min-block-size: var(--sigvelo-control-height-xs);
+  inline-size: var(--sigvelo-density-compact-control-height);
+  min-inline-size: var(--sigvelo-density-compact-control-height);
+  block-size: var(--sigvelo-density-compact-control-height);
+  min-block-size: var(--sigvelo-density-compact-control-height);
   padding: var(--sigvelo-spacing-1-5);
 }
 
 .workspace-explorer__header .app-top-bar__button svg {
-  inline-size: var(--sigvelo-text-sm);
-  block-size: var(--sigvelo-text-sm);
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
 .workspace-explorer__heading {
   display: flex;
   align-items: baseline;
   gap: var(--sigvelo-spacing-1);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .workspace-explorer__count {
-  font-size: var(--sigvelo-text-2xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-normal);
   color: var(--sigvelo-color-text-muted);
 }
@@ -57,7 +118,7 @@
   display: block;
   overflow: hidden;
   font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-normal);
   text-overflow: ellipsis;
 }
@@ -71,34 +132,27 @@
   overflow: auto;
 }
 
-.workspace-explorer__filter {
-  inline-size: auto;
-  gap: 0;
-  margin-block: var(--sigvelo-spacing-1);
-  margin-inline: var(--sigvelo-spacing-2);
-}
-
-.workspace-explorer__filter-control {
+.workspace-explorer__file {
   position: relative;
 }
 
-.workspace-explorer__filter-control > svg {
+.workspace-explorer__file-close {
   position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: var(--sigvelo-spacing-1-5);
-  z-index: 1;
-  inline-size: var(--sigvelo-text-sm);
-  block-size: var(--sigvelo-text-sm);
-  translate: 0 -50%;
-  color: var(--sigvelo-color-text-muted);
-  pointer-events: none;
+  z-index: 2;
+  inset-block-start: calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2));
+  inset-inline-end: var(--sigvelo-spacing-2);
+  background-color: var(--sigvelo-color-surface);
+  box-shadow: var(--sigvelo-shadow-xs);
 }
 
-.workspace-explorer__filter-control > [data-slot="field-control"] {
-  block-size: var(--sigvelo-control-height-xs);
-  min-block-size: var(--sigvelo-control-height-xs);
-  padding-inline-start: calc(var(--sigvelo-spacing-1-5) + 1rem + var(--sigvelo-spacing-1));
-  font-size: var(--sigvelo-control-text-sm);
+.workspace-explorer__filter {
+  --sigvelo-recipe-control-height: var(--sigvelo-density-compact-control-height);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-density-compact-control-font-size);
+
+  inline-size: auto;
+  gap: 0;
+  margin-block: var(--sigvelo-spacing-1);
+  margin-inline: var(--sigvelo-spacing-2);
 }
 
 .workspace-explorer__tree {
@@ -112,23 +166,23 @@
 }
 
 .workspace-explorer__tree .file-tree__node {
-  min-block-size: var(--sigvelo-control-height-xs);
-  gap: var(--sigvelo-spacing-1);
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  gap: var(--sigvelo-density-compact-control-gap);
   padding-block: var(--sigvelo-spacing-0-5);
   padding-inline-end: var(--sigvelo-spacing-1-5);
   border-radius: var(--sigvelo-radius-sm);
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   line-height: var(--sigvelo-leading-snug);
 }
 
 .workspace-explorer__tree :is(.file-tree__chevron, .file-tree__icon) svg {
-  inline-size: var(--sigvelo-text-sm);
-  block-size: var(--sigvelo-text-sm);
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
 .workspace-explorer__tree .file-tree__chevron {
-  inline-size: var(--sigvelo-text-sm);
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
 .workspace-explorer__tree .file-tree__node--folder .file-tree__icon {
@@ -152,7 +206,8 @@
   flex: 1;
   align-items: center;
   justify-content: center;
-  padding: 1.5rem var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-6);
+  padding-inline: var(--sigvelo-spacing-3);
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text-muted);
   text-align: center;
@@ -471,13 +526,13 @@
   --yarl__button_filter: none;
   --yarl__button_margin: var(--sigvelo-spacing-1);
   --yarl__button_padding: var(--sigvelo-spacing-2);
-  --yarl__icon_size: 1.25rem;
+  --yarl__icon_size: var(--sigvelo-control-icon-size-xl);
   --yarl__toolbar_padding: var(--sigvelo-spacing-2);
 }
 
 .workspace-media-lightbox .yarl__button {
-  min-inline-size: 2.75rem;
-  min-block-size: 2.75rem;
+  min-inline-size: var(--sigvelo-control-height-xl);
+  min-block-size: var(--sigvelo-control-height-xl);
   border-radius: var(--sigvelo-radius-md);
 }
 

package/dist/summarize-tool-input-CqTcGRYy.js

@@ -0,0 +1,15 @@
+//#region src/components/_internal/summarize-tool-input.ts
+/** Explicit summary, or the first non-empty salient string input. */
+function summarizeToolInput(input) {
+	if (!input || typeof input !== "object") return null;
+	const summary = Reflect.get(input, "summary");
+	if (typeof summary === "string" && summary.trim()) return truncate(summary);
+	for (const value of Object.values(input)) if (typeof value === "string" && value.trim()) return truncate(value);
+	return null;
+}
+function truncate(value) {
+	const line = value.trim().split("\n", 1)[0] ?? "";
+	return line.length > 64 ? `${line.slice(0, 64)}…` : line;
+}
+//#endregion
+export { summarizeToolInput as t };

package/dist/utils/mcp-server-catalog.d.ts

@@ -539,6 +539,50 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
       readonly url: "https://console.cloud.google.com/apis/credentials";
     }];
   };
+}, {
+  readonly id: "google-docs";
+  readonly name: "Google Docs";
+  readonly url: "https://docsmcp.googleapis.com/mcp/v1";
+  readonly description: "Read and update Google Docs";
+  readonly category: "Manual";
+  readonly icon: "https://cdn.simpleicons.org/googledocs/4285F4";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }];
+    };
+    readonly description: "Enable Docs and Docs MCP APIs, configure OAuth consent, and create a web OAuth client.";
+    readonly links: readonly [{
+      readonly label: "Setup guide";
+      readonly url: "https://developers.google.com/workspace/docs/api/guides/configure-mcp-server";
+    }, {
+      readonly label: "API reference";
+      readonly url: "https://developers.google.com/workspace/docs/api/reference/mcp";
+    }, {
+      readonly label: "OAuth consent";
+      readonly url: "https://console.cloud.google.com/apis/credentials/consent";
+    }, {
+      readonly label: "Credentials";
+      readonly url: "https://console.cloud.google.com/apis/credentials";
+    }];
+  };
 }, {
   readonly id: "google-drive";
   readonly name: "Google Drive";
@@ -627,6 +671,94 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
       readonly url: "https://console.cloud.google.com/apis/credentials";
     }];
   };
+}, {
+  readonly id: "google-sheets";
+  readonly name: "Google Sheets";
+  readonly url: "https://sheetsmcp.googleapis.com/mcp/v1";
+  readonly description: "Read and update spreadsheets";
+  readonly category: "Manual";
+  readonly icon: "https://cdn.simpleicons.org/googlesheets/34A853";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }];
+    };
+    readonly description: "Enable Sheets and Sheets MCP APIs, configure OAuth consent, and create a web OAuth client.";
+    readonly links: readonly [{
+      readonly label: "Setup guide";
+      readonly url: "https://developers.google.com/workspace/sheets/api/guides/configure-mcp-server";
+    }, {
+      readonly label: "API reference";
+      readonly url: "https://developers.google.com/workspace/sheets/api/reference/mcp";
+    }, {
+      readonly label: "OAuth consent";
+      readonly url: "https://console.cloud.google.com/apis/credentials/consent";
+    }, {
+      readonly label: "Credentials";
+      readonly url: "https://console.cloud.google.com/apis/credentials";
+    }];
+  };
+}, {
+  readonly id: "google-slides";
+  readonly name: "Google Slides";
+  readonly url: "https://slidesmcp.googleapis.com/mcp/v1";
+  readonly description: "Read and update presentations";
+  readonly category: "Manual";
+  readonly icon: "https://cdn.simpleicons.org/googleslides/FBBC04";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }];
+    };
+    readonly description: "Enable Slides and Slides MCP APIs, configure OAuth consent, and create a web OAuth client.";
+    readonly links: readonly [{
+      readonly label: "Setup guide";
+      readonly url: "https://developers.google.com/workspace/slides/api/guides/configure-mcp-server";
+    }, {
+      readonly label: "API reference";
+      readonly url: "https://developers.google.com/workspace/slides/api/reference/mcp";
+    }, {
+      readonly label: "OAuth consent";
+      readonly url: "https://console.cloud.google.com/apis/credentials/consent";
+    }, {
+      readonly label: "Credentials";
+      readonly url: "https://console.cloud.google.com/apis/credentials";
+    }];
+  };
 }, {
   readonly id: "google-workspace-search";
   readonly name: "Google Workspace Universal Search";