@mcp-b/react-components 0.5.1 → 0.5.3

package/dist/components/WorkspaceExplorer.js

@@ -243,7 +243,7 @@ function WorkspaceExplorer({ workspace, className, title = "Workspace", actions,
 			children: [showFileView ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
 				color: "neutral",
-				size: "sm",
+				size: "xs",
 				onClick: () => setView("tree"),
 				"aria-label": "Back to files",
 				children: /* @__PURE__ */ jsx(ArrowLeftIcon, { "aria-hidden": "true" })
@@ -262,7 +262,7 @@ function WorkspaceExplorer({ workspace, className, title = "Workspace", actions,
 				children: [actions, /* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
 					color: "neutral",
-					size: "sm",
+					size: "xs",
 					onClick: refresh,
 					disabled: isLoading,
 					"aria-label": "Refresh workspace",

package/dist/styles/code-block.css

@@ -82,9 +82,15 @@
   counter-reset: line;
 }
 
+/* The plain fallback emits .line spans with no newline text nodes, so it
+   needs block to break lines. Shiki output keeps its "\n" nodes — block
+   there gives every newline its own empty line box (double-spaced code). */
+.code-block__content--numbered:is(pre) > code .line {
+  display: block;
+}
+
 .code-block__content--numbered:is(pre) > code .line,
 .code-block__content--numbered pre code .line {
-  display: block;
   counter-increment: line;
 }
 

package/dist/styles/streamdown.css

@@ -102,10 +102,47 @@ button[data-streamdown="link"] {
 }
 
 [data-streamdown="image-wrapper"] {
+  position: relative;
   display: inline-block;
   margin-block: 0.5rem;
 }
 
+/* The hover scrim and download button carry no data attributes, only
+   Tailwind classes we don't compile. The scrim adds nothing here; the
+   button becomes a hover-revealed overlay in the image corner. */
+[data-streamdown="image-wrapper"] > div {
+  display: none;
+}
+
+[data-streamdown="image-wrapper"] > button {
+  position: absolute;
+  inset-block-end: 0.375rem;
+  inset-inline-end: 0.375rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  background-color: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 120ms ease,
+    color 120ms ease;
+}
+
+[data-streamdown="image-wrapper"]:hover > button,
+[data-streamdown="image-wrapper"] > button:focus-visible {
+  opacity: 1;
+}
+
+[data-streamdown="image-wrapper"] > button:hover {
+  color: var(--sigvelo-color-text);
+}
+
 [data-streamdown="image"] {
   max-width: 100%;
   border-radius: var(--sigvelo-radius-md);

package/dist/styles/workspace-explorer.css

@@ -7,11 +7,13 @@
   color: var(--sigvelo-color-text);
 }
 
+/* Compact masthead, sized to the pre-design-system nanites workbench. */
 .workspace-explorer__header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
+  min-height: 2.5rem;
+  padding: 0.25rem 0.625rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -47,10 +49,10 @@
 .workspace-explorer__body {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.375rem;
   min-height: 0;
   flex: 1;
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.625rem;
   overflow: auto;
 }
 
@@ -58,6 +60,7 @@
   display: flex;
   align-items: center;
   gap: 0.375rem;
+  min-height: 2rem;
   padding-inline: 0.5rem;
   color: var(--sigvelo-color-text-muted);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -72,12 +75,12 @@
 .workspace-explorer__filter input {
   flex: 1;
   min-width: 0;
-  padding-block: 0.375rem;
+  padding-block: 0.25rem;
   border: none;
   background: transparent;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   outline: none;
 }
 
@@ -87,6 +90,20 @@
   padding-block: 0;
 }
 
+/* Rows hug their label — hover reads as a pill around the name, not a
+   full-width bar (carried over from the original nanites workbench). */
+.workspace-explorer__tree .file-tree__node {
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  gap: 0.5rem;
+  padding-block: 0.3125rem;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.workspace-explorer__tree .file-tree__name {
+  line-height: 1.4;
+}
+
 .workspace-explorer__empty {
   display: flex;
   flex: 1;
@@ -98,11 +115,22 @@
   text-align: center;
 }
 
+/* File preview fills the pane flush — no card-in-pane inset. */
 .workspace-explorer__file {
   display: flex;
   flex-direction: column;
   min-height: 0;
   flex: 1;
   overflow: auto;
-  padding: 0.5rem 0.75rem;
+}
+
+.workspace-explorer__code {
+  flex: 1;
+  border-radius: 0;
+}
+
+/* File contents read at gutter scale, like the original workbench preview. */
+.workspace-explorer__code :is(.code-block__content, .code-block__content pre) {
+  font-size: 0.75rem;
+  line-height: 1.6;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -49,7 +49,7 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.5.1"
+    "@mcp-b/design-tokens": "0.5.3"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",