@mcp-b/react-components 0.40.0 → 0.42.0

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

@@ -3,10 +3,13 @@
   block-size: 100%;
   min-block-size: 0;
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto var(--sigvelo-layout-track-fill) auto;
   overflow: hidden;
   border-inline-end: 0;
-  background: var(--sigvelo-color-surface-under);
+  /* No material of its own: it fills whatever holds it — the shell's rail, the
+     compact drawer, a host's own panel — and painting a colour here would
+     cover the one that surface chose. */
+  background: transparent;
   color: var(--sigvelo-color-text);
 }
 
@@ -17,10 +20,8 @@
   align-items: center;
   gap: var(--sigvelo-density-compact-control-gap);
   padding-block: var(--sigvelo-spacing-1);
-  padding-inline: calc(
-      var(--sigvelo-density-compact-control-padding-inline) + env(safe-area-inset-left, 0px)
-    )
-    var(--sigvelo-density-compact-control-padding-inline);
+  padding-inline: calc(var(--sigvelo-layout-gutter) + env(safe-area-inset-left, 0px))
+    var(--sigvelo-layout-gutter);
 }
 
 .think-thread-picker__title {
@@ -69,7 +70,7 @@
 }
 
 .think-thread-status-indicators__item[data-status="attention"] {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-danger-text);
 }
 
 .think-thread-status-indicators__item[data-status="failed"] {
@@ -91,7 +92,7 @@
 }
 
 .think-thread-picker__viewport {
-  padding: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter) var(--sigvelo-layout-gutter);
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
 }
@@ -115,9 +116,9 @@
   min-inline-size: 0;
   min-block-size: var(--sigvelo-density-compact-control-height);
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   padding-block: 0;
-  padding-inline: var(--sigvelo-density-compact-control-padding-inline);
+  padding-inline: var(--sigvelo-layout-gutter);
   align-items: center;
   justify-content: flex-start;
   column-gap: var(--sigvelo-spacing-1);
@@ -129,7 +130,7 @@
 
 .think-thread-picker__item:has(.think-thread-picker__delete) .think-thread-picker__thread {
   grid-template-columns:
-    minmax(0, 1fr)
+    var(--sigvelo-layout-track-fill)
     minmax(var(--sigvelo-density-compact-control-height), max-content);
 }
 
@@ -266,10 +267,12 @@
   color: var(--sigvelo-color-danger-text);
 }
 
+/* Stopped, not wrong: aborted/interrupted/skipped stay in the muted
+   monotone — colour is reserved for success, failure, and needs-a-human. */
 .think-thread-picker__thread[data-thread-status="aborted"] .think-thread-picker__thread-status,
 .think-thread-picker__thread[data-thread-status="interrupted"] .think-thread-picker__thread-status,
 .think-thread-picker__thread[data-thread-status="skipped"] .think-thread-picker__thread-status {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .think-thread-picker__empty {
@@ -296,6 +299,7 @@
   flex: 0 0 auto;
 }
 
+/* 56rem matches --sigvelo-layout-break-compact. Container queries cannot read var(). */
 @container responsive-sidebar-shell (inline-size <= 56rem) {
   .think-thread-picker {
     block-size: auto;
@@ -326,6 +330,7 @@
   .think-thread-picker__scroll,
   .think-thread-picker__viewport {
     block-size: auto;
+    /* Compact drawer list cap. Not --sigvelo-layout-sidebar. */
     max-block-size: min(16rem, 42dvh);
   }
 

package/dist/styles/transition-surface.css

@@ -1,8 +1,7 @@
+/* The exit transform is a hook: defaults live in the fallbacks at each use
+   site, and picking a `data-variant` declares a value on the element itself —
+   the component answering its own prop, which is meant to win. */
 .transition-surface {
-  --transition-surface-inline: 0;
-  --transition-surface-block: 0;
-  --transition-surface-scale: 1;
-
   opacity: 1;
   translate: 0;
   scale: 1;
@@ -29,16 +28,16 @@
 .transition-surface[hidden] {
   display: none;
   opacity: 0;
-  translate: var(--transition-surface-inline) var(--transition-surface-block);
-  scale: var(--transition-surface-scale);
+  translate: var(--transition-surface-inline, 0) var(--transition-surface-block, 0);
+  scale: var(--transition-surface-scale, 1);
   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);
+    translate: var(--transition-surface-inline, 0) var(--transition-surface-block, 0);
+    scale: var(--transition-surface-scale, 1);
   }
 }
 

package/dist/styles/utilities.css

@@ -22,6 +22,39 @@
   list-style: none;
 }
 
+/* 1D compositions hosts assemble themselves. Components that already own
+   anatomy use the matching data-recipe; these are for app markup. */
+.sigvelo-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-layout-stack);
+  min-inline-size: 0;
+}
+
+.sigvelo-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sigvelo-layout-cluster);
+  min-inline-size: 0;
+}
+
+.sigvelo-fill {
+  min-inline-size: 0;
+  min-block-size: 0;
+  block-size: 100%;
+}
+
+.sigvelo-page {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: var(--sigvelo-layout-content);
+  margin-inline: auto;
+  padding-block: var(--sigvelo-layout-stack);
+  padding-inline: var(--sigvelo-layout-gutter);
+}
+
 .sigvelo-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -97,6 +130,48 @@
   max-inline-size: var(--sigvelo-measure-wide-block);
 }
 
+/*
+ * The chevron on a disclosure trigger a consumer composed itself. Components
+ * that own their own trigger anatomy (Collapsible, MenuDisclosureGroup) style
+ * their marker directly; this is for app code putting an icon inside a
+ * `Collapsible.Trigger`, which otherwise re-derives the same two rules.
+ */
+.sigvelo-disclosure-chevron {
+  transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
+}
+
+:where([data-panel-open], [aria-expanded="true"]) .sigvelo-disclosure-chevron {
+  rotate: 180deg;
+}
+
+/*
+ * A prompt that has to outlive the reader's attention: a permission ask a
+ * browser will only grant from a gesture, an offer to reconnect. `Toast` is the
+ * wrong shape for these because it schedules its own dismissal, and these leave
+ * only when the reader acts. The layer is inert so the page underneath stays
+ * usable and only the control inside it takes the pointer back; the inset clears
+ * whatever the app already anchors to the bottom edge.
+ */
+.sigvelo-floating-prompt {
+  --sigvelo-floating-prompt-inset: var(--sigvelo-spacing-4);
+
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--sigvelo-floating-prompt-inset));
+  z-index: var(--sigvelo-z-toast);
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+/* Floating reads as a pill, not as a form control, so the recipe radius goes
+   fully round here rather than at each consumer's call site. */
+.sigvelo-floating-prompt > * {
+  --sigvelo-recipe-button-radius: var(--sigvelo-radius-full);
+
+  pointer-events: auto;
+}
+
 /*
  * Reader-controlled text size for prose. Scales the message body only —
  * toolbars, labels, and controls keep resolving through the rem type ramp,

package/dist/styles/web-preview.css

@@ -1,12 +1,17 @@
+/* The card's chrome row (the Ploy bar): one bar height everywhere, muted
+   controls resting directly on whatever plane hosts the preview, separated
+   from the scrolling content by one hairline and a breath of shadow. */
 .web-preview__nav {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-1-5);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-2-5);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  min-block-size: var(--sigvelo-layout-chrome);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-layout-gutter);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
+  box-shadow: var(--sigvelo-elevation-bar);
 }
 
 .web-preview__nav-button {
@@ -15,21 +20,21 @@
 
 .web-preview__url-form {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .web-preview__url {
-  width: 100%;
+  inline-size: 100%;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
 }
 
 .web-preview__body {
   flex: 1;
-  min-height: 16rem;
-  width: 100%;
+  /* Preview canvas floor. Not --sigvelo-layout-sidebar. */
+  min-block-size: 16rem;
+  inline-size: 100%;
   border: none;
-  background-color: var(--sigvelo-color-canvas);
 }
 
 .web-preview__body--readonly {
@@ -51,22 +56,21 @@
   flex-direction: column;
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  max-height: 12rem;
+  max-block-size: 12rem;
 }
 
 .web-preview__console-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   border: 0;
   font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--sigvelo-color-text-muted);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
   cursor: pointer;
 }
 
@@ -90,18 +94,18 @@
 
 .web-preview__console-scroll {
   flex: 1;
-  min-height: 0;
+  min-block-size: 0;
 }
 
 .web-preview__console-viewport {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   overflow: auto;
 }
 
 .web-preview__console-empty {
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-gutter);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   text-align: center;
@@ -109,11 +113,11 @@
 
 .web-preview__console-item {
   display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: var(--sigvelo-spacing-2);
+  grid-template-columns: auto var(--sigvelo-layout-track-fill) auto;
+  gap: var(--sigvelo-layout-cluster);
   align-items: baseline;
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -124,6 +128,26 @@
   border-block-end: none;
 }
 
+.web-preview__console-level {
+  min-inline-size: 2.5rem;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  text-transform: uppercase;
+}
+
+.web-preview__console-item--info .web-preview__console-level {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.web-preview__console-item--warn .web-preview__console-level {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.web-preview__console-item--error .web-preview__console-level {
+  color: var(--sigvelo-color-danger-text);
+}
+
 .web-preview__console-message {
   color: var(--sigvelo-color-text);
   word-break: break-word;

package/dist/styles/workspace-explorer.css

@@ -10,19 +10,12 @@
   overflow: hidden;
   font-family: inherit;
   color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface-raised);
-  border-radius: var(--sigvelo-radius-xl);
-  box-shadow: var(--sigvelo-elevation-raised);
   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"] {
@@ -81,15 +74,11 @@
   flex: 0 0 auto;
   min-block-size: var(--sigvelo-density-compact-control-height);
   padding-block: var(--sigvelo-spacing-0-5);
-  padding-inline: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-layout-gutter);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
 
-.workspace-explorer__header .app-top-bar__button {
-  padding: var(--sigvelo-spacing-1-5);
-}
-
 .workspace-explorer__heading {
   display: flex;
   align-items: baseline;
@@ -186,9 +175,9 @@
   flex: 1;
   align-items: center;
   justify-content: center;
-  padding-block: var(--sigvelo-spacing-6);
-  padding-inline: var(--sigvelo-spacing-3);
-  font-size: var(--sigvelo-text-compact);
+  padding-block: var(--sigvelo-layout-stack);
+  padding-inline: var(--sigvelo-layout-gutter);
+  font-size: var(--sigvelo-text-prose);
   color: var(--sigvelo-color-text-muted);
   text-align: center;
 }
@@ -197,14 +186,13 @@
   flex: 1;
   min-block-size: 100%;
   border-radius: 0;
-  background-color: var(--sigvelo-color-surface);
+  background-color: transparent;
 }
 
 .workspace-explorer__markdown-scroll {
   flex: 1;
   min-block-size: 0;
   overflow: auto;
-  background-color: var(--sigvelo-color-surface);
 }
 
 .workspace-explorer__markdown {
@@ -213,8 +201,8 @@
   margin-inline: auto;
   padding-block: var(--sigvelo-spacing-8) var(--sigvelo-spacing-12);
   padding-inline: var(--sigvelo-spacing-6);
-  font-size: var(--sigvelo-text-fluid-base);
-  line-height: var(--sigvelo-leading-relaxed);
+  font-size: var(--sigvelo-text-prose);
+  line-height: var(--sigvelo-text-prose-leading);
 }
 
 .workspace-explorer__markdown-content > :first-child {
@@ -255,26 +243,20 @@
     [data-streamdown="code-block-actions"],
     [data-streamdown="mermaid-block-actions"]
   ) {
-  background-color: var(--sigvelo-color-surface);
+  background-color: transparent;
 }
 
 .workspace-explorer__markdown-content [data-streamdown="heading-1"] {
   margin-block: var(--sigvelo-spacing-8) var(--sigvelo-spacing-3);
-  font-size: var(--sigvelo-text-fluid-2xl);
-  font-weight: var(--sigvelo-font-weight-bold);
-  line-height: var(--sigvelo-leading-tight);
 }
 
 .workspace-explorer__markdown-content [data-streamdown="heading-2"] {
   margin-block: var(--sigvelo-spacing-8) var(--sigvelo-spacing-2);
-  font-size: var(--sigvelo-text-fluid-lg);
-  font-weight: var(--sigvelo-font-weight-bold);
 }
 
 .workspace-explorer__markdown-content
   :is([data-streamdown="heading-3"], [data-streamdown="heading-4"]) {
   margin-block: var(--sigvelo-spacing-6) var(--sigvelo-spacing-2);
-  font-size: var(--sigvelo-text-lg);
 }
 
 .workspace-explorer__skill {
@@ -287,7 +269,7 @@
 .workspace-explorer__skill-kicker {
   margin-block-end: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   font-weight: var(--sigvelo-font-weight-semibold);
   letter-spacing: var(--sigvelo-tracking-wider);
   text-transform: uppercase;
@@ -307,10 +289,10 @@
 
 .workspace-explorer__skill-metadata {
   display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
+  grid-template-columns: max-content var(--sigvelo-layout-track-fill);
   gap: var(--sigvelo-spacing-1) var(--sigvelo-spacing-3);
   margin-block: var(--sigvelo-spacing-4) 0;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-prose);
 }
 
 .workspace-explorer__skill-metadata dt {
@@ -331,19 +313,19 @@
   gap: var(--sigvelo-spacing-1-5);
   margin-block-start: var(--sigvelo-spacing-4);
   color: var(--sigvelo-color-success-text);
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-prose);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
 .workspace-explorer__skill-status[data-invalid] {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-danger-text);
 }
 
 .workspace-explorer__skill-errors {
   margin-block: var(--sigvelo-spacing-2) 0;
   padding-inline-start: var(--sigvelo-spacing-6);
-  color: var(--sigvelo-color-warning-text);
-  font-size: var(--sigvelo-text-sm);
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-prose);
 }
 
 .workspace-explorer__media-scroll {
@@ -352,7 +334,6 @@
   flex: 1;
   overflow: auto;
   color-scheme: inherit;
-  background-color: var(--sigvelo-color-surface);
 }
 
 .workspace-explorer__media-scroll:focus-visible {
@@ -366,7 +347,6 @@
   inline-size: 100%;
   min-block-size: 100%;
   margin: 0;
-  background-color: var(--sigvelo-color-surface);
 }
 
 .workspace-explorer__media-stage {
@@ -384,6 +364,7 @@
   display: flex;
   inline-size: 100%;
   block-size: 100%;
+  /* Image well floor. Not --sigvelo-layout-sidebar. */
   min-block-size: 16rem;
   align-items: center;
   justify-content: center;
@@ -448,7 +429,6 @@
   padding-inline: var(--sigvelo-spacing-4);
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  background-color: var(--sigvelo-color-surface);
 }
 
 .workspace-explorer__media-details {
@@ -457,7 +437,7 @@
   flex-wrap: wrap;
   gap: var(--sigvelo-spacing-2) var(--sigvelo-spacing-4);
   margin: 0;
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
 }
 
 .workspace-explorer__media-details > div {
@@ -479,7 +459,7 @@
 
 .workspace-explorer__media-transcript {
   flex: 0 0 auto;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-prose);
 }
 
 .workspace-explorer__media-fallback,
@@ -487,7 +467,7 @@
   max-inline-size: 42rem;
   margin: 0;
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-text-prose);
   text-align: center;
 }
 
@@ -541,6 +521,7 @@
   }
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container (inline-size < 30rem) {
   .workspace-explorer__filter {
     margin-inline: var(--sigvelo-spacing-1-5);
@@ -560,13 +541,10 @@
   }
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container (inline-size < 24rem) {
-  .workspace-explorer__heading {
-    max-inline-size: 34cqi;
-  }
-
   .workspace-explorer__skill-metadata {
-    grid-template-columns: 1fr;
+    grid-template-columns: var(--sigvelo-layout-track-fill);
     gap: 0;
   }
 

package/dist/styles/workspace-mount-manager.css

@@ -1,6 +1,6 @@
 .workspace-mount-manager__content {
   display: grid;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gutter);
 }
 
 .workspace-mount-manager__error,
@@ -11,7 +11,7 @@
 }
 
 .workspace-mount-manager__list {
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
 }
 
 .workspace-mount-manager__error {
@@ -22,3 +22,25 @@
 .workspace-mount-manager__path code {
   overflow-wrap: anywhere;
 }
+
+.workspace-mount-manager__permission {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-snug);
+}
+
+.workspace-mount-manager__permission > svg {
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
+}
+
+.workspace-mount-manager__permission[data-permission="granted"] {
+  color: var(--sigvelo-color-success-text);
+}
+
+.workspace-mount-manager__permission[data-permission="denied"] {
+  color: var(--sigvelo-color-danger-text);
+}

package/dist/utils/favicon.d.ts

@@ -6,5 +6,10 @@
  * `<link rel="icon">` should prefer that resolved URL because it may point elsewhere.
  */
 declare function inferFaviconUrl(url: string): string | undefined;
+/**
+ * Browsers block public pages from fetching loopback URLs (private network
+ * access). Skip those favicons when the document is not itself on loopback.
+ */
+declare function canRequestFavicon(src: string, documentOrigin?: string): boolean;
 //#endregion
-export { inferFaviconUrl };
+export { canRequestFavicon, inferFaviconUrl };

package/dist/utils/favicon.js

@@ -14,5 +14,22 @@ function inferFaviconUrl(url) {
 		return;
 	}
 }
+function isLoopbackHost(hostname) {
+	return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]";
+}
+/**
+* Browsers block public pages from fetching loopback URLs (private network
+* access). Skip those favicons when the document is not itself on loopback.
+*/
+function canRequestFavicon(src, documentOrigin = globalThis.location?.origin) {
+	try {
+		const favicon = new URL(src);
+		if (!documentOrigin) return true;
+		const page = new URL(documentOrigin);
+		return !(isLoopbackHost(favicon.hostname) && !isLoopbackHost(page.hostname));
+	} catch {
+		return false;
+	}
+}
 //#endregion
-export { inferFaviconUrl };
+export { canRequestFavicon, inferFaviconUrl };