@mcp-b/react-components 0.16.0 → 0.16.1

package/dist/styles/think-routine-library.css

@@ -78,7 +78,7 @@
   min-inline-size: 0;
   min-block-size: 0;
   overflow: auto;
-  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2);
   border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   background: color-mix(
@@ -93,7 +93,7 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--sigvelo-spacing-2);
-  margin-block-end: var(--sigvelo-spacing-4);
+  margin-block-end: var(--sigvelo-spacing-2);
 }
 
 .think-routine-library__layout
@@ -115,7 +115,7 @@
 .think-routine-library__search {
   display: grid;
   gap: var(--sigvelo-spacing-1-5);
-  margin-block-end: var(--sigvelo-spacing-4);
+  margin-block-end: var(--sigvelo-spacing-2);
 }
 
 .think-routine-library__search > div {
@@ -156,12 +156,12 @@
 
 .think-routine-browser__routine {
   inline-size: 100%;
-  min-block-size: 5.75rem;
+  min-block-size: 3.5rem;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  gap: var(--sigvelo-spacing-2-5);
-  padding: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-2);
   border-radius: inherit;
   text-align: start;
 }
@@ -211,7 +211,7 @@
 .think-routine-library__detail {
   inline-size: min(100%, 64rem);
   margin-inline: auto;
-  padding: clamp(1.5rem, 4vw, 3.5rem);
+  padding: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__detail-header,
@@ -223,7 +223,7 @@
 
 .think-routine-library__detail-header {
   justify-content: space-between;
-  padding-block-end: clamp(2rem, 5vw, 4rem);
+  padding-block-end: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__detail-heading {
@@ -236,7 +236,7 @@
 
 .think-routine-library__detail-header h1,
 .think-routine-library__create-header h1 {
-  font-size: clamp(1.5rem, 3vw, 2.125rem);
+  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
   line-height: 1.12;
 }
 
@@ -251,8 +251,8 @@
 .think-routine-library__detail-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
-  gap: clamp(2rem, 6vw, 5rem);
-  padding-block-end: clamp(2.5rem, 6vw, 5rem);
+  gap: clamp(1rem, 3vw, 2rem);
+  padding-block-end: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__section-heading {
@@ -320,7 +320,7 @@
 }
 
 .think-routine-library__runs {
-  padding-block-end: clamp(2.5rem, 6vw, 5rem);
+  padding-block-end: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__run-list {
@@ -387,7 +387,7 @@
 }
 
 .think-routine-library__empty-list {
-  padding: var(--sigvelo-spacing-6) var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-3);
 }
 
 .think-routine-library__empty-list p,
@@ -400,19 +400,19 @@
   min-block-size: 100%;
   display: grid;
   place-content: center;
-  padding: var(--sigvelo-spacing-6);
+  padding: var(--sigvelo-spacing-4);
 }
 
 .think-routine-library__empty-detail h1 {
   margin: 0;
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-xl);
+  font-size: var(--sigvelo-text-lg);
 }
 
 .think-routine-library__create {
   min-block-size: 0;
   overflow: auto;
-  padding: clamp(1.5rem, 5vw, 4rem);
+  padding: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__create-header,
@@ -422,7 +422,7 @@
 }
 
 .think-routine-library__create-header {
-  margin-block-end: clamp(2rem, 5vw, 3.5rem);
+  margin-block-end: clamp(1rem, 3vw, 2rem);
 }
 
 .think-routine-library__create-header > div {
@@ -431,7 +431,7 @@
 
 .think-routine-library__form {
   display: grid;
-  gap: var(--sigvelo-spacing-6);
+  gap: var(--sigvelo-spacing-3);
 }
 
 .think-routine-library__form-row {

package/dist/styles/toast.css

@@ -12,7 +12,7 @@
 }
 
 .toast {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
 
   display: flex;
   flex-direction: column;
@@ -54,16 +54,16 @@
 
 .toast__title {
   margin: 0;
-  font-size: var(--sigvelo-text-sm);
-  font-weight: var(--sigvelo-font-weight-bold);
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
 }
 
 .toast__description {
   margin: 0;
-  font-size: var(--sigvelo-text-sm);
-  line-height: 1.5;
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -73,7 +73,7 @@
   justify-content: center;
   padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: var(--sigvelo-spacing-3);
-  margin-block-start: var(--sigvelo-spacing-3);
+  margin-block-start: var(--sigvelo-spacing-2);
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);

package/dist/styles/tooltip.css

@@ -1,5 +1,5 @@
 .tooltip__popup {
-  --sigvelo-recipe-surface-padding: 0.375rem 0.75rem;
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
   --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-sm);
 
   z-index: 50;

package/dist/styles/workspace-explorer.css

@@ -556,11 +556,7 @@
   }
 }
 
-@container (inline-size < 24rem) {
-  .workspace-explorer__heading {
-    max-inline-size: 34cqi;
-  }
-
+@container (inline-size < 30rem) {
   .workspace-explorer__filter {
     margin-inline: var(--sigvelo-spacing-1-5);
   }
@@ -570,6 +566,20 @@
     padding-inline: var(--sigvelo-spacing-4);
   }
 
+  .workspace-explorer__media-stage {
+    padding: var(--sigvelo-spacing-3);
+  }
+
+  .workspace-explorer__media-caption {
+    padding-inline: var(--sigvelo-spacing-3);
+  }
+}
+
+@container (inline-size < 24rem) {
+  .workspace-explorer__heading {
+    max-inline-size: 34cqi;
+  }
+
   .workspace-explorer__skill-metadata {
     grid-template-columns: 1fr;
     gap: 0;
@@ -579,13 +589,8 @@
     margin-block-start: var(--sigvelo-spacing-2);
   }
 
-  .workspace-explorer__media-stage {
-    padding: var(--sigvelo-spacing-3);
-  }
-
   .workspace-explorer__media-caption {
     align-items: flex-start;
     flex-direction: column;
-    padding-inline: var(--sigvelo-spacing-3);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "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": {
@@ -58,7 +58,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.16.0"
+    "@mcp-b/design-tokens": "0.16.1"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",