@mcp-b/react-components 0.20.5 → 0.21.0

package/dist/styles/stepper.css

@@ -119,7 +119,7 @@
 }
 
 .stepper__indicator[data-loading] .stepper__indicator-content {
-  animation: sigvelo-icon-spin 800ms linear infinite;
+  animation: sigvelo-icon-spin var(--sigvelo-motion-duration-spin) linear infinite;
 }
 
 .stepper__separator {
@@ -170,7 +170,7 @@
   margin-block-start: calc(var(--sigvelo-spacing-1) - var(--sigvelo-border-width));
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.35;
+  line-height: var(--sigvelo-leading-snug);
 }
 
 .stepper__panel {

package/dist/styles/streamdown.css

@@ -39,7 +39,7 @@ button[data-streamdown="link"] {
 }
 
 [data-streamdown="inline-code"] {
-  padding-block: 0.0625rem;
+  padding-block: 1px;
   padding-inline: var(--sigvelo-spacing-1);
   border-radius: var(--sigvelo-radius-xs);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
@@ -62,14 +62,15 @@ button[data-streamdown="link"] {
 [data-streamdown="heading-5"],
 [data-streamdown="heading-6"] {
   margin-block: var(--sigvelo-spacing-3) var(--sigvelo-spacing-1-5);
-  font-size: 1.125em;
+  font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-compact);
+  line-height: var(--sigvelo-text-base-leading);
 }
 
 [data-streamdown="heading-1"],
 [data-streamdown="heading-2"] {
-  font-size: 1.25em;
+  font-size: var(--sigvelo-text-lg);
+  line-height: var(--sigvelo-text-lg-leading);
 }
 
 [data-streamdown="blockquote"] {
@@ -222,7 +223,7 @@ button[data-streamdown="link"] {
   background-color: transparent;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.55;
+  line-height: var(--sigvelo-leading-normal);
   overflow: visible;
 }
 
@@ -288,7 +289,7 @@ button[data-streamdown="link"] {
 [data-streamdown="table-fullscreen"] {
   position: fixed;
   inset: 0;
-  z-index: 50;
+  z-index: var(--sigvelo-z-overlay);
   background-color: var(--sigvelo-color-surface);
 }
 
@@ -343,17 +344,17 @@ button[data-streamdown="link"] {
   position: absolute;
   top: 100%;
   right: 0;
-  z-index: 20;
+  z-index: var(--sigvelo-z-chrome);
   display: flex;
   flex-direction: column;
   min-width: 7.5rem;
   margin-block-start: var(--sigvelo-spacing-1);
   overflow: hidden;
-  border-radius: var(--sigvelo-radius-md);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  background-color: var(--sigvelo-color-surface);
-  box-shadow: var(--sigvelo-shadow-md);
+  /* Draws its edge from the overlay ring at the same radius as every other
+     popup in the system, rather than from a 1px border of its own. */
+  border-radius: var(--sigvelo-radius-lg);
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-overlay);
 }
 
 :is(

package/dist/styles/subagent-run.css

@@ -38,7 +38,7 @@
 .subagent-run__tray-label {
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.4;
+  line-height: var(--sigvelo-leading-snug);
 }
 
 .subagent-run__title {
@@ -57,8 +57,8 @@
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   color: var(--sigvelo-color-text-muted);
 }
 

package/dist/styles/switch.css

@@ -80,9 +80,7 @@
   block-size: var(--sigvelo-recipe-switch-thumb-size);
   background-color: var(--sigvelo-color-canvas);
   border-radius: var(--sigvelo-radius-full);
-  box-shadow:
-    0 1px 3px 0 color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 1px 2px -1px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
+  box-shadow: var(--sigvelo-elevation-raised);
   translate: 0;
   transition: translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }

package/dist/styles/tabs.css

@@ -186,7 +186,7 @@
 
 .tabs__panel:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--sigvelo-color-focus), transparent 80%);
+  box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
   border-radius: var(--sigvelo-radius-md);
 }
 

package/dist/styles/task.css

@@ -72,7 +72,7 @@
   position: relative;
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
 }
 
 .task__item::before {

package/dist/styles/terminal.css

@@ -51,7 +51,7 @@
   width: 100%;
   height: 100%;
   padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: 0.875rem;
+  padding-inline: var(--sigvelo-spacing-3-5);
   overflow: auto;
 }
 
@@ -59,7 +59,7 @@
   margin: 0;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
   color: var(--sigvelo-color-neutral-100);
   white-space: pre-wrap;
   word-break: break-word;

package/dist/styles/test-results.css

@@ -188,7 +188,6 @@
 
 .test-results__test-status--running {
   color: var(--sigvelo-color-primary-text);
-  animation: sigvelo-icon-spin 1.4s linear infinite;
 }
 
 .test-results__test-name {
@@ -226,7 +225,7 @@
   padding-inline: var(--sigvelo-spacing-3);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-2xs);
-  line-height: 1.55;
+  line-height: var(--sigvelo-leading-normal);
   color: var(--sigvelo-color-danger-text);
   background-color: var(--sigvelo-color-danger-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)

package/dist/styles/textarea.css

@@ -1,7 +1,7 @@
 .textarea {
   inline-size: 100%;
   block-size: auto;
-  min-block-size: 5rem;
+  min-block-size: var(--sigvelo-spacing-20);
   padding-block: var(--sigvelo-spacing-2);
   line-height: var(--sigvelo-leading-relaxed);
 }

package/dist/styles/theme-mode-control.css

@@ -12,7 +12,7 @@
 .theme-mode-control__item.radio {
   display: inline-flex;
   inline-size: auto;
-  min-inline-size: 2.75rem;
+  min-inline-size: var(--sigvelo-spacing-11);
   block-size: 2.75rem;
   align-items: center;
   justify-content: center;

package/dist/styles/think-execution-status.css

@@ -18,26 +18,7 @@
   color: var(--sigvelo-color-primary-text);
 }
 
-.think-execution-status:is(
-    [data-status="running"],
-    [data-status="pending"],
-    [data-status="queued"],
-    [data-status="waitingForPause"],
-    [data-status="rollingBack"]
-  )
-  svg {
-  animation: sigvelo-icon-spin 0.8s linear infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .think-execution-status:is(
-      [data-status="running"],
-      [data-status="pending"],
-      [data-status="queued"],
-      [data-status="waitingForPause"],
-      [data-status="rollingBack"]
-    )
-    svg {
-    animation: none;
-  }
-}
+/* Nothing spins the icon here. Exactly the statuses this file used to list are
+   the ones that resolve to the primary tone, and the primary tone renders
+   SpinnerIcon, which already spins itself and already stops under reduced
+   motion. The list was a copy of that mapping that could drift away from it. */

package/dist/styles/think-execution-workbench.css

@@ -80,10 +80,9 @@
 }
 
 .think-execution-workbench__empty {
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-2-5);
+
   margin: var(--sigvelo-spacing-3);
-  padding: var(--sigvelo-spacing-2-5) 0;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
 }
 
 .think-execution-workbench__list {

package/dist/styles/think-full-app.css

@@ -61,7 +61,7 @@
 .think-full-app > .think-full-app__app-bar {
   grid-column: 1 / -1;
   grid-row: 1;
-  z-index: 20;
+  z-index: var(--sigvelo-z-chrome);
 }
 
 .think-full-app__chat-surface {
@@ -267,7 +267,7 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   }
 
   .think-full-app .message__content {
-    line-height: 1.45;
+    line-height: var(--sigvelo-leading-normal);
   }
 
   .think-full-app .message[data-from="user"] .message__content {

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

@@ -153,7 +153,7 @@
 
 .think-routine-browser__routine {
   inline-size: 100%;
-  min-block-size: 3.5rem;
+  min-block-size: var(--sigvelo-spacing-14);
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
@@ -243,7 +243,7 @@
 .think-routine-library__detail-header h1,
 .think-routine-library__create-header h1 {
   font-size: clamp(var(--sigvelo-text-lg), 2.5vw, var(--sigvelo-text-2xl));
-  line-height: 1.12;
+  line-height: var(--sigvelo-leading-tight);
 }
 
 .think-routine-library__detail-heading > p:last-child,
@@ -262,7 +262,7 @@
 }
 
 .think-routine-library__section-heading {
-  min-block-size: 2rem;
+  min-block-size: var(--sigvelo-spacing-8);
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -280,7 +280,7 @@
   margin: 0;
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-text-sm);
-  line-height: 1.7;
+  line-height: var(--sigvelo-leading-relaxed);
   white-space: pre-wrap;
 }
 
@@ -348,15 +348,15 @@
 }
 
 .think-routine-library__run-marker {
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   flex: 0 0 auto;
 }
 
 .think-routine-library__run-marker svg {
   display: block;
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
 }
 
 .think-routine-library__run > span {
@@ -370,18 +370,14 @@
   text-overflow: ellipsis;
 }
 
-.think-routine-library__empty-runs {
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-}
-
 .think-routine-library__run-kind {
   text-transform: capitalize;
 }
 
+/* One rule, not two — this selector was declared twice in this file. */
 .think-routine-library__empty-runs {
-  margin: 0;
-  padding-block: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
+
   border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -486,8 +482,10 @@
 @container responsive-sidebar-shell (inline-size <= 56rem) {
   .think-routine-library__browser {
     inline-size: 100%;
+    /* Narrow enough that the browser stops being a column beside the detail
+       and starts covering it, so it takes the overlay stack. */
     border-inline-end: 0;
-    box-shadow: var(--sigvelo-shadow-lg);
+    box-shadow: var(--sigvelo-elevation-overlay);
   }
 }
 

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

@@ -56,7 +56,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-0-5);
-  min-inline-size: 1rem;
+  min-inline-size: var(--sigvelo-spacing-4);
 }
 
 .think-thread-status-indicators__item svg {
@@ -68,10 +68,6 @@
   color: var(--sigvelo-color-primary-text);
 }
 
-.think-thread-status-indicators__item[data-status="running"] svg {
-  animation: sigvelo-icon-spin 900ms linear infinite;
-}
-
 .think-thread-status-indicators__item[data-status="attention"] {
   color: var(--sigvelo-color-warning-text);
 }
@@ -112,7 +108,7 @@
 
 .think-thread-picker__list {
   display: grid;
-  gap: 0.0625rem;
+  gap: 1px;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -252,8 +248,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  inline-size: 1rem;
-  block-size: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -271,20 +267,10 @@
   color: var(--sigvelo-color-primary-text);
 }
 
-.think-thread-picker__thread[data-thread-status="pending"] .think-thread-picker__thread-status svg,
-.think-thread-picker__thread[data-thread-status="running"] .think-thread-picker__thread-status svg,
-.think-thread-picker__thread[data-thread-status="starting"] .think-thread-picker__thread-status svg,
-.think-thread-picker__thread[data-thread-status="streaming"]
-  .think-thread-picker__thread-status
-  svg,
-.think-thread-picker__thread[data-thread-status="submitted"]
-  .think-thread-picker__thread-status
-  svg,
-.think-thread-picker__thread[data-thread-status="recovering"]
-  .think-thread-picker__thread-status
-  svg {
-  animation: sigvelo-icon-spin 900ms linear infinite;
-}
+/* The six statuses this rule used to list were `isThreadBusy` written out a
+   second time, and those are exactly the ones that render SpinnerIcon, which
+   spins itself. A DotIcon never needed the rule and would have started turning
+   the moment the two lists disagreed. */
 
 .think-thread-picker__thread[data-thread-status="error"] .think-thread-picker__thread-status {
   color: var(--sigvelo-color-danger-text);
@@ -298,9 +284,6 @@
 
 .think-thread-picker__empty {
   margin: var(--sigvelo-spacing-2);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-snug);
 }
 
 .think-thread-picker__footer {

package/dist/styles/toast.css

@@ -2,7 +2,7 @@
   position: fixed;
   inset-block-end: var(--sigvelo-spacing-4);
   inset-inline-end: var(--sigvelo-spacing-4);
-  z-index: 100;
+  z-index: var(--sigvelo-z-toast);
   inline-size: min(24rem, calc(100dvi - var(--sigvelo-spacing-8)));
   max-inline-size: 100%;
   pointer-events: none;
@@ -15,7 +15,7 @@
   position: absolute;
   inset-inline: 0;
   inset-block-end: 0;
-  z-index: calc(100 - var(--toast-index));
+  z-index: calc(var(--sigvelo-z-toast) - var(--toast-index));
   display: flex;
   flex-direction: column;
   inline-size: 100%;

package/dist/styles/toggle-group.css

@@ -33,9 +33,7 @@
 .toggle-group__item[data-pressed] {
   background-color: var(--sigvelo-color-canvas);
   color: var(--sigvelo-color-text);
-  box-shadow:
-    0 1px 3px 0 color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 1px 2px -1px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
+  box-shadow: var(--sigvelo-elevation-raised);
 }
 
 @media (forced-colors: active) {
@@ -44,3 +42,78 @@
     outline-offset: -2px;
   }
 }
+
+/*
+ * Segmented: one thumb that travels, rather than each item lighting up its own
+ * background. Same anatomy, same track — a segmented control is how this group
+ * presents itself when the choice is a mode rather than a set of switches, so
+ * it is a modifier here instead of a second component with a second track.
+ *
+ * The position comes from JavaScript because nothing in CSS can produce it: see
+ * `useSegmentedThumb`.
+ */
+.toggle-group--segmented {
+  position: relative;
+}
+
+.toggle-group__thumb {
+  position: absolute;
+  /* Physical `left`, deliberately: it is fed `offsetLeft`, which is physical.
+     `translate` rather than moving `left` itself keeps the travel on the
+     compositor. */
+  left: 0;
+  inset-block: var(--sigvelo-spacing-1);
+  inline-size: var(--toggle-group-thumb-size, 0);
+  translate: var(--toggle-group-thumb-start, 0) 0;
+  border-radius: calc(var(--sigvelo-radius-md) - 2px);
+  background-color: var(--sigvelo-color-canvas);
+  box-shadow: var(--sigvelo-elevation-raised);
+  transition:
+    translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    inline-size var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.toggle-group--sm .toggle-group__thumb {
+  inset-block: var(--sigvelo-spacing-0-5);
+}
+
+.toggle-group--lg .toggle-group__thumb {
+  inset-block: var(--sigvelo-spacing-1-5);
+}
+
+/* Before the first measurement, and whenever the group allows an empty
+   selection, there is no segment for the thumb to sit on. */
+.toggle-group--segmented:not(:has(.toggle-group__item[data-pressed])) .toggle-group__thumb {
+  opacity: 0;
+}
+
+/* The thumb draws the pressed state now; leaving the item's own copy underneath
+   would double the elevation and show a second edge as the thumb slides off. */
+.toggle-group--segmented .toggle-group__item[data-pressed] {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.toggle-group--segmented .toggle-group__item {
+  position: relative;
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle-group__thumb {
+    transition: none;
+  }
+}
+
+:root[data-motion="reduce"] .toggle-group__thumb {
+  transition: none;
+}
+
+/* Backgrounds are dropped in forced colors, so the travelling thumb would
+   vanish and take the selected state with it. */
+@media (forced-colors: active) {
+  .toggle-group__thumb {
+    outline: var(--sigvelo-focus-ring-forced);
+    outline-offset: -2px;
+  }
+}

package/dist/styles/tooltip.css

@@ -1,9 +1,8 @@
 .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;
+  z-index: var(--sigvelo-z-overlay);
   max-inline-size: min(20rem, var(--available-width));
   overflow-block: auto;
   font-size: var(--sigvelo-text-xs);

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/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/package.json

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