@mcp-b/react-components 0.34.1 → 0.36.0

package/dist/styles/slider.css

@@ -16,7 +16,7 @@
   min-block-size: var(--sigvelo-recipe-slider-min-length);
 }
 
-.slider__output {
+.slider__value {
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
@@ -94,7 +94,7 @@
   cursor: grabbing;
 }
 
-.slider__thumb:focus-visible {
+.slider__thumb:has(:focus-visible) {
   outline: none;
   box-shadow: var(--sigvelo-recipe-focus-shadow);
 }

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

@@ -58,6 +58,15 @@
   min-inline-size: 0;
 }
 
+/* Only the container concerns — the block inside is `EmptyState`, and this
+   component is documented as reusable outside the workbench, so it does not
+   reach for a workbench class to fill itself. */
+.think-execution-detail--empty {
+  align-content: center;
+  justify-items: center;
+  min-block-size: 12rem;
+}
+
 .think-execution-workbench__run-list {
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -187,19 +196,6 @@
   line-height: var(--sigvelo-leading-tight);
 }
 
-.think-execution-workbench__empty-detail {
-  min-block-size: 12rem;
-  display: grid;
-  place-items: center;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  text-align: center;
-}
-
-.think-execution-workbench__empty-detail p {
-  margin: 0;
-}
-
 @container (width >= 44rem) {
   .think-execution-workbench__content {
     grid-template-rows: minmax(0, 1fr);

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

@@ -355,38 +355,10 @@
     var(--sigvelo-color-neutral-border-subtle);
 }
 
-.think-routine-library__empty-list,
-.think-routine-library__empty-detail {
-  color: var(--sigvelo-color-text-muted);
-  text-align: center;
-}
-
-.think-routine-library__empty-list {
-  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-3);
-}
-
-.think-routine-library__empty-list p,
-.think-routine-library__empty-detail p {
-  margin: var(--sigvelo-spacing-1) 0 0;
-  font-size: var(--sigvelo-text-compact);
-}
-
+/* Filling the pane is all this adds — the muted, centred anatomy inside it is
+   `EmptyState`, which already centres itself and spaces its own action. */
 .think-routine-library__empty-detail {
   min-block-size: 100%;
-  display: grid;
-  place-content: center;
-  padding: var(--sigvelo-spacing-4);
-}
-
-.think-routine-library__empty-detail h1 {
-  margin: 0;
-  color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-lg);
-}
-
-.think-routine-library__empty-action {
-  justify-self: center;
-  margin-block-start: var(--sigvelo-spacing-4);
 }
 
 .think-routine-library__create {

package/dist/styles/tooltip.css

@@ -2,7 +2,6 @@
   --sigvelo-recipe-popup-arrow-size: var(--sigvelo-spacing-2);
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
 
-  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/utils/structured-code.d.ts

@@ -1,4 +1,4 @@
-import { O as CodeBlockLanguage } from "../CodeBlock-DzGhYyNe.js";
+import { O as CodeBlockLanguage } from "../CodeBlock-C380GD5t.js";
 
 //#region src/utils/structured-code.d.ts
 interface StructuredCodeDisplay {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.34.1",
+  "version": "0.36.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": {
@@ -39,18 +39,13 @@
   },
   "dependencies": {
     "@base-ui/react": "~1.6.0",
-    "@cloudflare/codemode": "^0.5.0",
-    "@cloudflare/workers-types": "^5.20260715.1",
     "@rrweb/replay": "^2.1.0",
     "@shadcn/react": "^0.2.1",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
-    "@streamdown/math": "^1.0.2",
-    "@streamdown/mermaid": "^1.0.2",
     "@tanstack/react-virtual": "^3.14.8",
     "agent-skills-ts-sdk": "^2.4.1",
     "anser": "^2.3.5",
-    "cloudflare": "^7.0.0",
     "lucide-react": "^1.24.0",
     "react-icons": "^5.7.0",
     "rehype-slug": "^6.0.0",
@@ -58,13 +53,15 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.34.1"
+    "@mcp-b/design-tokens": "0.36.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",
+    "@cloudflare/codemode": "^0.5.0",
     "@cloudflare/shell": "^0.4.3",
     "@cloudflare/think": "^0.15.0",
     "@cloudflare/voice": "^0.3.4",
+    "@cloudflare/workers-types": "^5.20260715.1",
     "@storybook/addon-a11y": "^10.5.2",
     "@storybook/addon-docs": "^10.5.2",
     "@storybook/addon-vitest": "^10.5.2",
@@ -83,6 +80,7 @@
     "@vitest/mocker": "^4.1.10",
     "agents": "^0.19.0",
     "ai": "^6.0.228",
+    "cloudflare": "^7.0.0",
     "playwright": "^1.61.0",
     "react": "19.3.0-canary-711c445b-20260722",
     "react-dom": "19.3.0-canary-711c445b-20260722",
@@ -94,13 +92,16 @@
   },
   "peerDependencies": {
     "@ai-sdk/react": "^3.0.230",
+    "@cloudflare/codemode": "^0.5.0",
     "@cloudflare/shell": "^0.4.3",
     "@cloudflare/think": "^0.15.0",
     "@cloudflare/voice": "^0.3.4",
+    "@cloudflare/workers-types": "^5.20260715.1",
     "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-router": "^1.170.18",
     "agents": "^0.19.0",
     "ai": "^6.0.228",
+    "cloudflare": "^7.0.0",
     "react": "19.3.0-canary-711c445b-20260722",
     "react-dom": "19.3.0-canary-711c445b-20260722"
   },
@@ -108,6 +109,9 @@
     "@ai-sdk/react": {
       "optional": true
     },
+    "@cloudflare/codemode": {
+      "optional": true
+    },
     "@cloudflare/shell": {
       "optional": true
     },
@@ -117,11 +121,17 @@
     "@cloudflare/voice": {
       "optional": true
     },
+    "@cloudflare/workers-types": {
+      "optional": true
+    },
     "agents": {
       "optional": true
     },
     "ai": {
       "optional": true
+    },
+    "cloudflare": {
+      "optional": true
     }
   },
   "scripts": {

package/dist/BrowserLiveView-tJTWkoyu.d.ts

@@ -1,48 +0,0 @@
-import * as React from "react";
-import { BrowserLiveViewUrl } from "agents/browser";
-
-//#region src/components/agents-sdk/BrowserLiveView.d.ts
-interface BrowserLiveViewProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Complete upstream value returned by `cdp.getLiveViewUrl()`. */
-  source: BrowserLiveViewUrl;
-  /** Epoch ms when `source` was received. Defaults to its first render. */
-  receivedAt?: number;
-  /** The page the session was showing — used for the ended-state text. */
-  pageTitle?: string;
-  /**
-   * Shown once the link expires — pass the last screenshot the agent took
-   * (`<img>`) to keep the final frame on screen. Defaults to a quiet
-   * "Live view ended" state.
-   */
-  fallback?: React.ReactNode;
-}
-/**
- * Embeds a Browser Run Live View — a real-time, interactive view of the
- * agent's browser session. Links expire (~5 minutes), so the iframe swaps to
- * `fallback` (e.g. the last screenshot) once `source.expiresInMs` passes.
- * While the hosted viewer connects, a quiet loading overlay hides the frame; if it
- * never loads, the view degrades to `fallback` or an unavailable state. An
- * expand button opens the same view in a fullscreen dialog.
- *
- * Where URLs come from (upstream: `agents/browser` in
- * github.com/cloudflare/agents — `BrowserLiveViewUrl`): the model calls
- * `cdp.getLiveViewUrl()` inside a `browser_execute` tool run, or the host
- * calls `connector.liveView()`/`sessionInfo()`. This package's chat rendering
- * derives the component automatically from links found in tool results.
- *
- * Styling rides `@mcp-b/react-components/styles` (browser-live-view.css),
- * which think-chat consumers load anyway.
- *
- * The iframe is unsandboxed by design: the hosted Live View UI needs scripts
- * and its own origin to stream the session. Only pass trusted Live View URLs.
- */
-declare function BrowserLiveView$1({
-  source,
-  receivedAt,
-  pageTitle,
-  fallback,
-  className,
-  ...props
-}: BrowserLiveViewProps): React.JSX.Element;
-//#endregion
-export { BrowserLiveViewProps as n, BrowserLiveView$1 as t };

package/dist/BrowserReplay-B0BQZr-N.d.ts

@@ -1,41 +0,0 @@
-import * as React from "react";
-import { BrowserRecording } from "agents/browser";
-
-//#region src/components/agents-sdk/BrowserReplay.d.ts
-interface BrowserReplayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
-  /**
-   * rrweb events for one tab, e.g. one
-   * `BrowserRecording.events[targetId]` entry from Cloudflare Browser Run.
-   */
-  events: BrowserRecording["events"][string];
-  /** Start playing on mount. */
-  autoPlay?: boolean;
-}
-/**
- * Replays a completed Cloudflare Browser Run recording locally with rrweb.
- *
- * This is intentionally not derived from Think chat message parts. Live view
- * links and screenshots ride the `browser_execute` stream and belong to
- * `BrowserLiveView`; replay events are fetched after a session closes with
- * Browser Run's `getBrowserRecording()`. Upstream currently shapes those
- * recordings as `Record<targetId, unknown[]>`, where each array is plain rrweb
- * JSON for one tab. Playback happens in the viewer's browser through
- * `@rrweb/replay`; no replay service is contacted at playback time.
- *
- * Styling rides `@mcp-b/react-components/styles` (browser-replay.css), which
- * think-chat consumers load anyway.
- *
- * @see https://github.com/cloudflare/agents/tree/main/packages/agents/src/browser
- * @see https://github.com/rrweb-io/rrweb/tree/main/packages/%40rrweb/replay
- */
-declare function BrowserReplay({
-  className,
-  events,
-  autoPlay,
-  ref,
-  ...props
-}: BrowserReplayProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-//#endregion
-export { BrowserReplayProps as n, BrowserReplay as t };

package/dist/Combobox-WrrDDaEv.d.ts

@@ -1,154 +0,0 @@
-import * as React from "react";
-import { Combobox } from "@base-ui/react/combobox";
-
-//#region src/components/foundations/Combobox.d.ts
-declare function ComboboxInputGroup({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.InputGroup> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-declare function ComboboxInput({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.Input> & {
-  ref?: React.Ref<HTMLInputElement>;
-}): React.JSX.Element;
-declare function ComboboxTrigger({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.Trigger> & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-declare function Clear({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.Clear> & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-declare function ComboboxPositioner({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.Positioner> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-declare function ComboboxPopup({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.Popup> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-declare function ComboboxList({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.List> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-declare function ComboboxItem({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.Item> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-declare function ItemIndicator({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.ItemIndicator> & {
-  ref?: React.Ref<HTMLSpanElement>;
-}): React.JSX.Element;
-declare function ComboboxEmpty({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.Empty> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-declare function ComboboxGroup({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.Group> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-declare function ComboboxGroupLabel({
-  className,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<typeof Combobox.GroupLabel> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/**
- * An input combined with a filterable list of predefined items.
- * Supports single and multiple selection, async search, and grouping.
- *
- * @example
- * ```tsx
- * // Basic single select
- * const fruits = [
- *   { label: 'Apple', value: 'apple' },
- *   { label: 'Banana', value: 'banana' },
- *   { label: 'Orange', value: 'orange' },
- * ];
- *
- * <Combobox.Root items={fruits}>
- *   <Combobox.InputGroup>
- *     <Combobox.Input placeholder="Select a fruit" />
- *     <Combobox.Trigger>
- *       <ChevronDownIcon />
- *     </Combobox.Trigger>
- *   </Combobox.InputGroup>
- *   <Combobox.Portal>
- *     <Combobox.Positioner>
- *       <Combobox.Popup>
- *         <Combobox.List>
- *           {(item) => (
- *             <Combobox.Item value={item}>
- *               <Combobox.ItemIndicator>
- *                 <CheckIcon />
- *               </Combobox.ItemIndicator>
- *               {item.label}
- *             </Combobox.Item>
- *           )}
- *         </Combobox.List>
- *         <Combobox.Empty>No results found</Combobox.Empty>
- *       </Combobox.Popup>
- *     </Combobox.Positioner>
- *   </Combobox.Portal>
- * </Combobox.Root>
- * ```
- *
- * @see {@link https://base-ui.com/react/components/combobox | Base UI Combobox}
- */
-declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
-declare const Combobox$1: {
-  Root: typeof Combobox.Root;
-  InputGroup: typeof ComboboxInputGroup;
-  Input: typeof ComboboxInput;
-  Trigger: typeof ComboboxTrigger;
-  Clear: typeof Clear;
-  Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-  Positioner: typeof ComboboxPositioner;
-  Popup: typeof ComboboxPopup;
-  List: typeof ComboboxList;
-  Item: typeof ComboboxItem;
-  ItemIndicator: typeof ItemIndicator;
-  Empty: typeof ComboboxEmpty;
-  Group: typeof ComboboxGroup;
-  GroupLabel: typeof ComboboxGroupLabel;
-  Value: typeof Combobox.Value;
-  Chips: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-  Chip: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-  Collection: typeof Combobox.Collection;
-  Separator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-};
-//#endregion
-export { useComboboxAnchor as n, Combobox$1 as t };