@mcp-b/react-components 0.37.0 → 0.39.0

package/dist/components/ai-sdk/Artifact.js

@@ -1,8 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { rt as XIcon } from "../../icons-B4mGvCvc.js";
+import { J as SpinnerIcon, rt as XIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
+import { Button, buttonVariants } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
+import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Artifact.tsx
 /**
 * A container for generated content (code, documents, outputs) with a header
@@ -107,5 +109,79 @@ function ArtifactContent({ className, children, ref, ...props }) {
 		children
 	});
 }
+/**
+* Controlled inline preview for host-hydrated generated UI runtimes.
+*
+* The design system owns artifact chrome, status copy, disclosure, responsive
+* layout, and accessible announcements. The host owns source reads, sandbox
+* policy, runtime messaging, and the rendered content element.
+*/
+function ArtifactPreview({ className, label, sourceLink, state, ref, ...props }) {
+	const liveMessage = state.status === "loading" ? "Loading interactive UI." : state.status === "error" ? `Interactive UI failed to load: ${state.message}` : state.status === "runtime-error" ? `Interactive UI error: ${state.message}` : "Interactive UI loaded.";
+	return /* @__PURE__ */ jsxs(Artifact, {
+		ref,
+		...props,
+		"aria-busy": state.status === "loading" || void 0,
+		"aria-label": props["aria-label"] ?? label,
+		className: cx("artifact-preview", className),
+		"data-state": state.status,
+		role: props.role ?? "region",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sigvelo-visually-hidden",
+				role: "status",
+				"aria-atomic": "true",
+				children: liveMessage
+			}),
+			/* @__PURE__ */ jsx(ArtifactHeader, {
+				className: "artifact-preview__header",
+				children: /* @__PURE__ */ jsx(NavigationLink, {
+					render: sourceLink,
+					className: buttonVariants({
+						variant: "ghost",
+						color: "neutral",
+						size: "xs"
+					}),
+					children: "View source"
+				})
+			}),
+			state.status === "loading" ? /* @__PURE__ */ jsxs(ArtifactContent, {
+				className: "artifact-preview__status",
+				children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), "Loading interactive UI…"]
+			}) : state.status === "error" ? /* @__PURE__ */ jsx(ArtifactPreviewError, {
+				message: state.message,
+				onRetry: state.onRetry
+			}) : /* @__PURE__ */ jsxs(ArtifactContent, {
+				className: "artifact-preview__frame-shell",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "artifact-preview__runtime",
+					inert: state.status === "runtime-error" || void 0,
+					children: state.content
+				}), state.status === "runtime-error" ? /* @__PURE__ */ jsx(ArtifactPreviewError, {
+					message: state.message,
+					onRetry: state.onRetry,
+					overlay: true
+				}) : null]
+			})
+		]
+	});
+}
+function ArtifactPreviewError({ message, onRetry, overlay = false }) {
+	return /* @__PURE__ */ jsxs(ArtifactContent, {
+		className: cx("artifact-preview__status", overlay && "artifact-preview__status--overlay"),
+		children: [
+			/* @__PURE__ */ jsx(WarningIcon, {}),
+			/* @__PURE__ */ jsx("span", { children: message }),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				color: "neutral",
+				size: "sm",
+				onClick: onRetry,
+				children: "Retry"
+			})
+		]
+	});
+}
 //#endregion
-export { Artifact, ArtifactAction, ArtifactActions, ArtifactClose, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle };
+export { Artifact, ArtifactAction, ArtifactActions, ArtifactClose, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactPreview, ArtifactTitle };

package/dist/components/ai-sdk/Message.d.ts

@@ -1,228 +1,2 @@
-import { n as IconButtonProps } from "../../IconButton-BAUFhUk8.js";
-import * as React from "react";
-import { FileUIPart, UIMessage } from "ai";
-import { StreamdownProps } from "streamdown";
-
-//#region src/components/ai-sdk/Message.d.ts
-type MessageRole = UIMessage["role"];
-interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * The originating role of the message. Controls alignment and styling via
-   * the `data-from` attribute (e.g. user messages align end).
-   */
-  from?: MessageRole;
-}
-/**
- * A chat message row. Aligns and styles itself based on {@link from}.
- * Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
- *
- * Compose with {@link MessageContent} for the bubble, {@link MessageActions}
- * for toolbar actions, and {@link MessageBranch} for multi-version responses.
- *
- * @example
- * ```tsx
- * <Message from="assistant">
- *   <MessageContent>Hello there!</MessageContent>
- *   <MessageActions>
- *     <MessageAction label="Copy" tooltip="Copy to clipboard">
- *       <CopyIcon />
- *     </MessageAction>
- *   </MessageActions>
- * </Message>
- * ```
- *
- * @see {@link https://elements.ai-sdk.dev/components/message | AI Elements Message}
- */
-declare function Message({
-  className,
-  from,
-  children,
-  ref,
-  ...props
-}: MessageProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {}
-/**
- * The visible bubble/body of a message. Styled differently based on the
- * parent {@link Message}'s `from` attribute.
- */
-declare function MessageContent({
-  className,
-  children,
-  ref,
-  ...props
-}: MessageContentProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-type MessageResponseProps = StreamdownProps;
-declare const MessageResponse: React.MemoExoticComponent<({
-  className,
-  components,
-  ...props
-}: MessageResponseProps) => React.JSX.Element>;
-interface MessageAttachmentProps extends Omit<React.HTMLAttributes<HTMLElement>, "color" | "part"> {
-  /** The AI SDK `file` part, taken whole. */
-  part: FileUIPart;
-}
-/**
- * A `file` part inside a message: images render inline (click to zoom),
- * anything else becomes a download chip. Covers both directions — files the
- * user attached and files the agent emitted.
- */
-declare function MessageAttachment({
-  part,
-  className,
-  ...props
-}: MessageAttachmentProps): React.JSX.Element;
-interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
-/**
- * Horizontal list of action buttons (copy, retry, thumbs-up, etc.) shown
- * alongside or beneath a message.
- */
-declare function MessageActions({
-  className,
-  children,
-  ref,
-  ...props
-}: MessageActionsProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-interface MessageActionProps extends Omit<IconButtonProps, "children"> {
-  children?: React.ReactNode;
-}
-/**
- * A single icon button inside {@link MessageActions}. Always has an accessible
- * name; shows a tooltip on hover/focus when {@link tooltip} is set.
- */
-declare function MessageAction({
-  className,
-  label,
-  tooltip,
-  variant,
-  color,
-  size,
-  children,
-  ref,
-  ...props
-}: MessageActionProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-interface MessageToolbarProps extends React.HTMLAttributes<HTMLDivElement> {}
-/**
- * Horizontal container that places children in a row with space between —
- * typically a {@link MessageBranchSelector} on one side and
- * {@link MessageActions} on the other.
- */
-declare function MessageToolbar({
-  className,
-  children,
-  ref,
-  ...props
-}: MessageToolbarProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-interface MessageBranchProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Number of response branches rendered by MessageBranchContent. */
-  branchCount: number;
-  /** Zero-based index of the initially selected branch. */
-  defaultBranch?: number;
-  /** Controlled branch index. */
-  branch?: number;
-  /** Called when the selected branch changes. */
-  onBranchChange?: (branchIndex: number) => void;
-}
-/**
- * Container for a message response with multiple versions. Tracks which
- * branch is active and exposes navigation through {@link MessageBranchSelector},
- * {@link MessageBranchPrevious}, {@link MessageBranchNext}, and {@link MessageBranchPage}.
- */
-declare function MessageBranch({
-  className,
-  branchCount,
-  defaultBranch,
-  branch,
-  onBranchChange,
-  children,
-  ref,
-  ...props
-}: MessageBranchProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-interface MessageBranchContentProps extends React.HTMLAttributes<HTMLDivElement> {}
-/**
- * Renders only the active branch's child. Expects siblings to represent
- * alternative versions of the same response.
- */
-declare function MessageBranchContent({
-  className,
-  children,
-  ref,
-  ...props
-}: MessageBranchContentProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-interface MessageBranchSelectorProps extends React.HTMLAttributes<HTMLDivElement> {}
-/**
- * Inline group containing branch navigation controls (previous / page /
- * next). Hidden automatically when there is only one branch.
- */
-declare function MessageBranchSelector({
-  className,
-  children,
-  ref,
-  ...props
-}: MessageBranchSelectorProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element | null;
-interface MessageBranchPreviousProps extends Omit<IconButtonProps, "children" | "label"> {
-  label?: string;
-  children?: React.ReactNode;
-}
-/** Button that selects the previous branch. Disabled at the first branch. */
-declare function MessageBranchPrevious({
-  className,
-  label,
-  variant,
-  color,
-  size,
-  children,
-  onClick,
-  ref,
-  ...props
-}: MessageBranchPreviousProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-interface MessageBranchNextProps extends Omit<IconButtonProps, "children" | "label"> {
-  label?: string;
-  children?: React.ReactNode;
-}
-/** Button that selects the next branch. Disabled at the last branch. */
-declare function MessageBranchNext({
-  className,
-  label,
-  variant,
-  color,
-  size,
-  children,
-  onClick,
-  ref,
-  ...props
-}: MessageBranchNextProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-interface MessageBranchPageProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Customize the displayed text. Defaults to `{index} / {count}`. */
-  format?: (currentIndex: number, total: number) => React.ReactNode;
-}
-/** Page indicator (e.g. "1 / 3") for the current branch selection. */
-declare function MessageBranchPage({
-  className,
-  format,
-  ref,
-  ...props
-}: MessageBranchPageProps & {
-  ref?: React.Ref<HTMLSpanElement>;
-}): React.JSX.Element;
-//#endregion
+import { C as MessageResponse, D as MessageToolbarProps, E as MessageToolbar, S as MessageProps, T as MessageRole, _ as MessageBranchProps, a as MessageActionsProps, b as MessageContent, c as MessageBranch, d as MessageBranchNext, f as MessageBranchNextProps, g as MessageBranchPreviousProps, h as MessageBranchPrevious, i as MessageActions, l as MessageBranchContent, m as MessageBranchPageProps, n as MessageAction, o as MessageAttachment, p as MessageBranchPage, r as MessageActionProps, s as MessageAttachmentProps, t as Message, u as MessageBranchContentProps, v as MessageBranchSelector, w as MessageResponseProps, x as MessageContentProps, y as MessageBranchSelectorProps } from "../../Message-DBsHHhcM.js";
 export { Message, MessageAction, MessageActionProps, MessageActions, MessageActionsProps, MessageAttachment, MessageAttachmentProps, MessageBranch, MessageBranchContent, MessageBranchContentProps, MessageBranchNext, MessageBranchNextProps, MessageBranchPage, MessageBranchPageProps, MessageBranchPrevious, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelector, MessageBranchSelectorProps, MessageContent, MessageContentProps, MessageProps, MessageResponse, MessageResponseProps, MessageRole, MessageToolbar, MessageToolbarProps };

package/dist/components/foundations/EmptyState.d.ts

@@ -21,10 +21,20 @@ interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ti
  * `children` land under the description, for the action that makes the region
  * non-empty.
  *
+ * A region waiting on data is empty too, and this is the shape for it:
+ * `icon={<SpinnerIcon />}` with a description of what is being waited on, in a
+ * `role="status"` container. The description is not optional there —
+ * `prefers-reduced-motion` stops the spinner outright, so an icon on its own
+ * leaves a still circle and no way to tell loading from broken.
+ *
  * @example
  * ```tsx
  * <EmptyState description="No runs yet." />
  *
+ * <div role="status">
+ *   <EmptyState icon={<SpinnerIcon />} description="Loading conversation" />
+ * </div>
+ *
  * <EmptyState
  *   icon={<MessageIcon />}
  *   title="Start a conversation"

package/dist/components/foundations/EmptyState.js

@@ -14,10 +14,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * `children` land under the description, for the action that makes the region
 * non-empty.
 *
+* A region waiting on data is empty too, and this is the shape for it:
+* `icon={<SpinnerIcon />}` with a description of what is being waited on, in a
+* `role="status"` container. The description is not optional there —
+* `prefers-reduced-motion` stops the spinner outright, so an icon on its own
+* leaves a still circle and no way to tell loading from broken.
+*
 * @example
 * ```tsx
 * <EmptyState description="No runs yet." />
 *
+* <div role="status">
+*   <EmptyState icon={<SpinnerIcon />} description="Loading conversation" />
+* </div>
+*
 * <EmptyState
 *   icon={<MessageIcon />}
 *   title="Start a conversation"

package/dist/components/foundations/ToggleGroup.d.ts

@@ -1,2 +1,2 @@
-import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../../ToggleGroup-_pQMyHGM.js";
+import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../../ToggleGroup-BrQZOQn_.js";
 export { ToggleGroup, ToggleGroupItemProps, ToggleGroupProps };

package/dist/components/foundations/ToggleGroup.js

@@ -3,8 +3,8 @@ import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { toggleVariants } from "./Toggle.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/foundations/ToggleGroup.tsx
 /**
 * Tracks the pressed item's box so the segmented thumb can slide to it instead

package/dist/components/general-purpose/PricingBillingToggle.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Badge } from "../foundations/Badge.js";
-import { Switch } from "../foundations/Switch.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
+import { Switch } from "../foundations/Switch.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/PricingBillingToggle.tsx
 /** Controlled billing-period selector composed from the shared Switch or ToggleGroup. */

package/dist/components/general-purpose/PricingUsageCalculator.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Separator } from "../foundations/Separator.js";
 import { Card } from "../foundations/Card.js";
-import { Progress } from "../foundations/Progress.js";
 import { Slider } from "../foundations/Slider.js";
+import { Progress } from "../foundations/Progress.js";
 import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/nanites/AgentToolDetail.js

@@ -1,11 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
+import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
+import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
+import { t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
-import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
-import { t as ThinkChat } from "../../ThinkChat-DQh59CeC.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";

package/dist/styles/agent-chat.css

@@ -59,14 +59,14 @@
 
 /* Takes the whole transcript region, the way the scroller it stands in for
    does, so nothing moves when the rows arrive. The composer floats over its
-   lower edge, so the spinner sits slightly high rather than under it. */
+   lower edge, so the state sits slightly high rather than under it. The
+   .empty-state inside brings its own type and colour. */
 .agent-chat__transcript-loading {
   display: grid;
   block-size: 100%;
   min-block-size: 0;
   place-items: center;
   padding-block-end: var(--agent-chat-composer-size, 5rem);
-  color: var(--sigvelo-color-text-muted);
 }
 
 .agent-chat[data-composer-hidden] .agent-chat__transcript-loading {

package/dist/styles/artifact.css

@@ -61,8 +61,73 @@
   overflow-wrap: anywhere;
 }
 
+.artifact-preview {
+  container-type: inline-size;
+  min-inline-size: 0;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  background: var(--sigvelo-color-surface);
+  box-shadow: none;
+}
+
+.artifact-preview__header {
+  min-inline-size: 0;
+  justify-content: flex-end;
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.artifact-preview__frame-shell {
+  position: relative;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+.artifact-preview__runtime {
+  min-inline-size: 0;
+}
+
+.artifact-preview__runtime > iframe {
+  display: block;
+  inline-size: 100%;
+  min-block-size: 12rem;
+  border: 0;
+  background: transparent;
+}
+
+.artifact-preview__status {
+  display: flex;
+  min-block-size: 12rem;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-4);
+  color: var(--sigvelo-color-text-muted);
+  text-align: center;
+}
+
+.artifact-preview__status--overlay {
+  position: absolute;
+  inset: 0;
+  color: var(--sigvelo-color-text);
+  background: color-mix(in srgb, var(--sigvelo-color-surface) 92%, transparent);
+}
+
+@media (any-pointer: coarse) {
+  .artifact-preview .button {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
 @media (forced-colors: active) {
   .artifact {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
+
+  .artifact-preview__header {
+    border-color: CanvasText;
+  }
 }

package/dist/styles/base.css

@@ -135,6 +135,10 @@ body {
   }
 }
 
+/* A spinner that cannot spin is a circle. Plenty of people — most of them on
+   phones — browse with this on, so nothing may rely on the rotation to say
+   "still working": pair the icon with text that reads the same either way.
+   `.empty-state` is that pairing for a whole region. */
 @media (prefers-reduced-motion: reduce) {
   .sigvelo-icon--spinner {
     animation: none;

package/dist/styles/browser-live-view.css

@@ -15,6 +15,18 @@
   overflow: hidden;
 }
 
+/* `fill`: the view is the surface, not a card on it. Nothing sits beside it to
+   be separated from, so the aspect box, the hairline and the corners go and the
+   frame takes whatever its container gives it. The picture still letterboxes
+   inside — `object-fit: contain` further down is what keeps the remote page's
+   own proportions honest at any shape. */
+.browser-live-view[data-fill] {
+  block-size: 100%;
+  aspect-ratio: auto;
+  border: 0;
+  border-radius: 0;
+}
+
 .browser-live-view__frame {
   inline-size: 100%;
   block-size: 100%;
@@ -60,6 +72,20 @@
   max-inline-size: 80%;
 }
 
+/* Host-drawn media. Styled by element rather than by class so a host that
+   renders its own picture into the frame inherits the shape without opting in:
+   `contain` keeps the remote viewport's proportions whatever the box is, and
+   the letterbox inherits the frame's fill, so a host that recolors the frame
+   recolors the bars with it. */
+.browser-live-view video,
+.browser-live-view canvas {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: contain;
+  background-color: inherit;
+}
+
 /* An expired view showing a screenshot fallback keeps the image flush */
 .browser-live-view[data-expired] > img {
   inline-size: 100%;
@@ -83,6 +109,25 @@
   z-index: 1;
 }
 
+/* A fault that leaves the picture running: a caption on the frame, opposite
+   the expand control, rather than an overlay that would hide what still
+   arrives. */
+.browser-live-view__notice {
+  position: absolute;
+  inset-block-end: var(--sigvelo-spacing-2);
+  inset-inline-start: var(--sigvelo-spacing-2);
+  z-index: 1;
+  max-inline-size: calc(100% - var(--sigvelo-spacing-12));
+  margin: 0;
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
+  border-radius: var(--sigvelo-radius-md);
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-raised);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  pointer-events: none;
+}
+
 /* Expand affordance, video-player style: quiet until the box is hovered or
    the button is focused */
 .browser-live-view__expand {

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

@@ -158,6 +158,12 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   );
 }
 
+/* The panel stands in for itself while its first read is in flight, so the
+   waiting state sits where the content will rather than in the top corner. */
+.think-full-app__workbench--loading {
+  justify-content: center;
+}
+
 .think-full-app__workbench.workspace-explorer {
   border: 0;
   border-radius: 0;

package/package.json

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