@mcp-b/react-components 0.20.5 → 0.22.0

package/dist/styles/utilities.css

@@ -33,3 +33,76 @@
   min-inline-size: 0;
   flex: 1;
 }
+
+/*
+ * Truncation by fade rather than by ellipsis. An ellipsis is a character the
+ * reader has to parse — in a value slot ("gpt-5.1-codex-m…") it reads as part
+ * of the value. A mask just stops. Use it where the text is data; keep
+ * .sigvelo-truncate where the text is a sentence and the ellipsis is a
+ * legitimate signal that words were dropped.
+ */
+.sigvelo-truncate-fade {
+  --sigvelo-truncate-fade-distance: 1rem;
+  overflow: hidden;
+  white-space: nowrap;
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - var(--sigvelo-truncate-fade-distance)),
+    transparent 100%
+  );
+}
+
+/* Clamp to N lines. -1 keeps the mechanism while removing the limit, so a
+   component can drop the cap from script without swapping classes. */
+.sigvelo-line-clamp {
+  --sigvelo-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--sigvelo-line-clamp);
+  overflow: hidden;
+}
+
+/*
+ * Scrollbars that appear on hover or keyboard focus and stay out of the way
+ * otherwise. scrollbar-gutter reserves the track either way, so revealing the
+ * bar never reflows the content beside it. Coarse pointers have no hover to
+ * key off and overlay their scrollbars anyway, so they are left alone.
+ */
+@media (any-pointer: fine) {
+  .sigvelo-scrollbar-on-hover {
+    scrollbar-gutter: stable;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color var(--sigvelo-motion-duration-interaction)
+      var(--sigvelo-motion-ease-change);
+  }
+
+  .sigvelo-scrollbar-on-hover:hover,
+  .sigvelo-scrollbar-on-hover:focus-within {
+    scrollbar-color: var(--sigvelo-color-neutral-border) transparent;
+  }
+}
+
+/*
+ * Comfortable reading measure for long-form agent output. Applied to the prose
+ * container, not the panel: the panel still fills the pane, the paragraphs stop
+ * at a readable line length inside it.
+ */
+.sigvelo-measure {
+  max-inline-size: var(--sigvelo-measure-prose);
+}
+
+/* Code, tables, and diagrams read worse wrapped than wide, so they opt out of
+   the prose measure without leaving the same container. */
+.sigvelo-measure-wide {
+  max-inline-size: var(--sigvelo-measure-wide-block);
+}
+
+/*
+ * Reader-controlled text size for prose. Scales the message body only —
+ * toolbars, labels, and controls keep resolving through the rem type ramp,
+ * because a reader asking for larger message text is not asking for a taller
+ * composer. Descendants that should scale with it must size in em.
+ */
+.sigvelo-reader-text {
+  font-size: calc(1em * var(--sigvelo-chat-font-scale));
+}

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/styles/workspace-explorer.css

@@ -10,11 +10,9 @@
   overflow: hidden;
   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);
+  background-color: var(--sigvelo-color-surface-raised);
   border-radius: var(--sigvelo-radius-xl);
-  box-shadow: var(--sigvelo-shadow-xs);
+  box-shadow: var(--sigvelo-elevation-raised);
   container-type: inline-size;
 }
 
@@ -132,8 +130,8 @@
   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);
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-floating);
 }
 
 .workspace-explorer__filter {

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 };