@mcp-b/react-components 0.35.0 → 0.36.0

package/dist/styles/prompt-input.css

@@ -480,17 +480,19 @@
   display: inline-block;
 }
 
+.prompt-input__hover-card-trigger {
+  color: inherit;
+  text-decoration: none;
+  cursor: inherit;
+  transition: none;
+}
+
+.prompt-input__hover-card-trigger:hover {
+  color: inherit;
+}
+
 .prompt-input__hover-card-content {
-  position: absolute;
-  z-index: var(--sigvelo-z-chrome);
-  inset-block-start: calc(100% + var(--sigvelo-spacing-1-5));
-  inset-inline-start: 0;
   min-inline-size: 14rem;
-  padding: var(--sigvelo-spacing-3);
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface-raised);
-  border-radius: var(--sigvelo-radius-md);
-  box-shadow: var(--sigvelo-elevation-overlay);
 }
 
 .prompt-input__tab-label {
@@ -529,7 +531,7 @@
   overflow-block: auto;
 }
 
-.prompt-input__command-popup [data-slot="combobox-empty"]:empty {
+.prompt-input__command-popup [data-slot="autocomplete-empty"]:empty {
   display: none;
 }
 

package/dist/styles/recipes.css

@@ -521,8 +521,9 @@
   [data-slot="hover-card-arrow"],
   [data-slot="navigation-menu-arrow"]
 )[data-side="top"] {
-  border-block-start: none;
-  border-inline-start: none;
+  bottom: calc(var(--sigvelo-recipe-popup-arrow-size) * -0.5);
+  border-top: none;
+  border-left: none;
 }
 
 :where(
@@ -532,8 +533,9 @@
   [data-slot="hover-card-arrow"],
   [data-slot="navigation-menu-arrow"]
 )[data-side="bottom"] {
-  border-block-end: none;
-  border-inline-end: none;
+  top: calc(var(--sigvelo-recipe-popup-arrow-size) * -0.5);
+  border-right: none;
+  border-bottom: none;
 }
 
 :where(
@@ -542,9 +544,14 @@
   [data-slot="tooltip-arrow"],
   [data-slot="hover-card-arrow"],
   [data-slot="navigation-menu-arrow"]
-)[data-side="left"] {
-  border-block-end: none;
-  border-inline-start: none;
+):where(
+  [data-side="left"],
+  [data-side="inline-start"]:dir(ltr),
+  [data-side="inline-end"]:dir(rtl)
+) {
+  right: calc(var(--sigvelo-recipe-popup-arrow-size) * -0.5);
+  border-bottom: none;
+  border-left: none;
 }
 
 :where(
@@ -553,9 +560,14 @@
   [data-slot="tooltip-arrow"],
   [data-slot="hover-card-arrow"],
   [data-slot="navigation-menu-arrow"]
-)[data-side="right"] {
-  border-block-start: none;
-  border-inline-end: none;
+):where(
+  [data-side="right"],
+  [data-side="inline-end"]:dir(ltr),
+  [data-side="inline-start"]:dir(rtl)
+) {
+  left: calc(var(--sigvelo-recipe-popup-arrow-size) * -0.5);
+  border-top: none;
+  border-right: none;
 }
 
 :where([data-slot="context-menu-item-indicator"], [data-slot="menubar-item-indicator"]) {
@@ -618,7 +630,6 @@
 
 :where(
   [data-slot="combobox-trigger"],
-  [data-slot="combobox-clear"],
   [data-slot="autocomplete-trigger"],
   [data-slot="autocomplete-clear"]
 ) {
@@ -638,7 +649,6 @@
 
 :where(
   [data-slot="combobox-trigger"],
-  [data-slot="combobox-clear"],
   [data-slot="autocomplete-trigger"],
   [data-slot="autocomplete-clear"]
 ):hover:not([data-disabled]) {
@@ -648,7 +658,6 @@
 
 :where(
   [data-slot="combobox-trigger"],
-  [data-slot="combobox-clear"],
   [data-slot="autocomplete-trigger"],
   [data-slot="autocomplete-clear"]
 ):focus-visible {
@@ -658,7 +667,6 @@
 
 :where(
   [data-slot="combobox-trigger"],
-  [data-slot="combobox-clear"],
   [data-slot="autocomplete-trigger"],
   [data-slot="autocomplete-clear"]
 )[data-disabled] {

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/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.35.0",
+  "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.35.0"
+    "@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 };