@mcp-b/react-components 0.39.0 → 0.41.0

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

@@ -61,36 +61,6 @@
   block-size: 100%;
 }
 
-.think-routine-library__app-title {
-  display: none;
-}
-
-.think-routine-library__schedule-trigger {
-  display: inline-flex;
-  max-inline-size: min(22rem, 58vw);
-  min-inline-size: 0;
-  gap: var(--sigvelo-density-compact-control-gap);
-  color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-density-compact-control-font-size);
-  font-weight: var(--sigvelo-font-weight-semibold);
-}
-
-.think-routine-library__schedule-trigger span {
-  min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.think-routine-library__schedule-trigger > svg {
-  flex: 0 0 auto;
-  transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
-}
-
-.think-routine-library__schedule-trigger[aria-expanded="true"] > svg {
-  rotate: 180deg;
-}
-
 .think-routine-library__browser {
   min-inline-size: 0;
   min-block-size: 0;
@@ -208,12 +178,6 @@
   overflow: auto;
 }
 
-@container responsive-sidebar-shell (inline-size <= 56rem) {
-  .think-routine-library__layout .responsive-sidebar-shell__toggle {
-    display: none;
-  }
-}
-
 .think-routine-library__detail {
   inline-size: min(100%, 64rem);
   margin-inline: auto;
@@ -236,10 +200,6 @@
   min-inline-size: 0;
 }
 
-.think-routine-library__state {
-  margin-block-end: var(--sigvelo-spacing-2);
-}
-
 .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));

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

@@ -6,7 +6,10 @@
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   overflow: hidden;
   border-inline-end: 0;
-  background: var(--sigvelo-color-surface-under);
+  /* No material of its own: it fills whatever holds it — the shell's rail, the
+     compact drawer, a host's own panel — and painting a colour here would
+     cover the one that surface chose. */
+  background: transparent;
   color: var(--sigvelo-color-text);
 }
 
@@ -69,7 +72,7 @@
 }
 
 .think-thread-status-indicators__item[data-status="attention"] {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-danger-text);
 }
 
 .think-thread-status-indicators__item[data-status="failed"] {
@@ -266,10 +269,12 @@
   color: var(--sigvelo-color-danger-text);
 }
 
+/* Stopped, not wrong: aborted/interrupted/skipped stay in the muted
+   monotone — colour is reserved for success, failure, and needs-a-human. */
 .think-thread-picker__thread[data-thread-status="aborted"] .think-thread-picker__thread-status,
 .think-thread-picker__thread[data-thread-status="interrupted"] .think-thread-picker__thread-status,
 .think-thread-picker__thread[data-thread-status="skipped"] .think-thread-picker__thread-status {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .think-thread-picker__empty {

package/dist/styles/transition-surface.css

@@ -1,8 +1,7 @@
+/* The exit transform is a hook: defaults live in the fallbacks at each use
+   site, and picking a `data-variant` declares a value on the element itself —
+   the component answering its own prop, which is meant to win. */
 .transition-surface {
-  --transition-surface-inline: 0;
-  --transition-surface-block: 0;
-  --transition-surface-scale: 1;
-
   opacity: 1;
   translate: 0;
   scale: 1;
@@ -29,16 +28,16 @@
 .transition-surface[hidden] {
   display: none;
   opacity: 0;
-  translate: var(--transition-surface-inline) var(--transition-surface-block);
-  scale: var(--transition-surface-scale);
+  translate: var(--transition-surface-inline, 0) var(--transition-surface-block, 0);
+  scale: var(--transition-surface-scale, 1);
   transition-timing-function: var(--sigvelo-motion-ease-exit);
 }
 
 @starting-style {
   .transition-surface {
     opacity: 0;
-    translate: var(--transition-surface-inline) var(--transition-surface-block);
-    scale: var(--transition-surface-scale);
+    translate: var(--transition-surface-inline, 0) var(--transition-surface-block, 0);
+    scale: var(--transition-surface-scale, 1);
   }
 }
 

package/dist/styles/utilities.css

@@ -97,6 +97,48 @@
   max-inline-size: var(--sigvelo-measure-wide-block);
 }
 
+/*
+ * The chevron on a disclosure trigger a consumer composed itself. Components
+ * that own their own trigger anatomy (Collapsible, MenuDisclosureGroup) style
+ * their marker directly; this is for app code putting an icon inside a
+ * `Collapsible.Trigger`, which otherwise re-derives the same two rules.
+ */
+.sigvelo-disclosure-chevron {
+  transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
+}
+
+:where([data-panel-open], [aria-expanded="true"]) .sigvelo-disclosure-chevron {
+  rotate: 180deg;
+}
+
+/*
+ * A prompt that has to outlive the reader's attention: a permission ask a
+ * browser will only grant from a gesture, an offer to reconnect. `Toast` is the
+ * wrong shape for these because it schedules its own dismissal, and these leave
+ * only when the reader acts. The layer is inert so the page underneath stays
+ * usable and only the control inside it takes the pointer back; the inset clears
+ * whatever the app already anchors to the bottom edge.
+ */
+.sigvelo-floating-prompt {
+  --sigvelo-floating-prompt-inset: var(--sigvelo-spacing-4);
+
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--sigvelo-floating-prompt-inset));
+  z-index: var(--sigvelo-z-toast);
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+/* Floating reads as a pill, not as a form control, so the recipe radius goes
+   fully round here rather than at each consumer's call site. */
+.sigvelo-floating-prompt > * {
+  --sigvelo-recipe-button-radius: var(--sigvelo-radius-full);
+
+  pointer-events: auto;
+}
+
 /*
  * Reader-controlled text size for prose. Scales the message body only —
  * toolbars, labels, and controls keep resolving through the rem type ramp,

package/dist/styles/web-preview.css

@@ -1,12 +1,17 @@
+/* The card's chrome row (the Ploy bar): one bar height everywhere, muted
+   controls resting directly on whatever plane hosts the preview, separated
+   from the scrolling content by one hairline and a breath of shadow. */
 .web-preview__nav {
+  position: relative;
   display: flex;
   align-items: center;
+  min-block-size: calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2));
   gap: var(--sigvelo-spacing-1-5);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-2-5);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  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);
+  box-shadow: var(--sigvelo-elevation-bar);
 }
 
 .web-preview__nav-button {
@@ -29,7 +34,6 @@
   min-height: 16rem;
   width: 100%;
   border: none;
-  background-color: var(--sigvelo-color-canvas);
 }
 
 .web-preview__body--readonly {
@@ -66,7 +70,6 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--sigvelo-color-text-muted);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
   cursor: pointer;
 }
 
@@ -124,6 +127,26 @@
   border-block-end: none;
 }
 
+.web-preview__console-level {
+  min-inline-size: 2.5rem;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  text-transform: uppercase;
+}
+
+.web-preview__console-item--info .web-preview__console-level {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.web-preview__console-item--warn .web-preview__console-level {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.web-preview__console-item--error .web-preview__console-level {
+  color: var(--sigvelo-color-danger-text);
+}
+
 .web-preview__console-message {
   color: var(--sigvelo-color-text);
   word-break: break-word;

package/dist/styles/workspace-explorer.css

@@ -10,19 +10,12 @@
   overflow: hidden;
   font-family: inherit;
   color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface-raised);
-  border-radius: var(--sigvelo-radius-xl);
-  box-shadow: var(--sigvelo-elevation-raised);
   container-type: inline-size;
 }
 
 .workspace-explorer:has(> .workspace-explorer__file[data-appearance="canvas"]) {
   block-size: auto;
   overflow: visible;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
 }
 
 .workspace-explorer__file[data-appearance="canvas"] {
@@ -86,10 +79,6 @@
     var(--sigvelo-color-neutral-border-subtle);
 }
 
-.workspace-explorer__header .app-top-bar__button {
-  padding: var(--sigvelo-spacing-1-5);
-}
-
 .workspace-explorer__heading {
   display: flex;
   align-items: baseline;
@@ -197,14 +186,13 @@
   flex: 1;
   min-block-size: 100%;
   border-radius: 0;
-  background-color: var(--sigvelo-color-surface);
+  background-color: transparent;
 }
 
 .workspace-explorer__markdown-scroll {
   flex: 1;
   min-block-size: 0;
   overflow: auto;
-  background-color: var(--sigvelo-color-surface);
 }
 
 .workspace-explorer__markdown {
@@ -255,7 +243,7 @@
     [data-streamdown="code-block-actions"],
     [data-streamdown="mermaid-block-actions"]
   ) {
-  background-color: var(--sigvelo-color-surface);
+  background-color: transparent;
 }
 
 .workspace-explorer__markdown-content [data-streamdown="heading-1"] {
@@ -336,13 +324,13 @@
 }
 
 .workspace-explorer__skill-status[data-invalid] {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-danger-text);
 }
 
 .workspace-explorer__skill-errors {
   margin-block: var(--sigvelo-spacing-2) 0;
   padding-inline-start: var(--sigvelo-spacing-6);
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-danger-text);
   font-size: var(--sigvelo-text-sm);
 }
 
@@ -352,7 +340,6 @@
   flex: 1;
   overflow: auto;
   color-scheme: inherit;
-  background-color: var(--sigvelo-color-surface);
 }
 
 .workspace-explorer__media-scroll:focus-visible {
@@ -366,7 +353,6 @@
   inline-size: 100%;
   min-block-size: 100%;
   margin: 0;
-  background-color: var(--sigvelo-color-surface);
 }
 
 .workspace-explorer__media-stage {
@@ -448,7 +434,6 @@
   padding-inline: var(--sigvelo-spacing-4);
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  background-color: var(--sigvelo-color-surface);
 }
 
 .workspace-explorer__media-details {
@@ -561,10 +546,6 @@
 }
 
 @container (inline-size < 24rem) {
-  .workspace-explorer__heading {
-    max-inline-size: 34cqi;
-  }
-
   .workspace-explorer__skill-metadata {
     grid-template-columns: 1fr;
     gap: 0;

package/dist/styles/workspace-mount-manager.css

@@ -22,3 +22,25 @@
 .workspace-mount-manager__path code {
   overflow-wrap: anywhere;
 }
+
+.workspace-mount-manager__permission {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-snug);
+}
+
+.workspace-mount-manager__permission > svg {
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
+}
+
+.workspace-mount-manager__permission[data-permission="granted"] {
+  color: var(--sigvelo-color-success-text);
+}
+
+.workspace-mount-manager__permission[data-permission="denied"] {
+  color: var(--sigvelo-color-danger-text);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.39.0",
+  "version": "0.41.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,52 +39,52 @@
   },
   "dependencies": {
     "@base-ui/react": "~1.6.0",
-    "@rrweb/replay": "^2.1.0",
+    "@rrweb/replay": "^2.1.1",
     "@shadcn/react": "^0.2.1",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
-    "@tanstack/react-virtual": "^3.14.8",
-    "agent-skills-ts-sdk": "^2.4.1",
+    "@tanstack/react-virtual": "^3.14.9",
+    "agent-skills-ts-sdk": "^2.4.2",
     "anser": "^2.3.5",
-    "lucide-react": "^1.24.0",
+    "lucide-react": "^1.31.0",
     "react-icons": "^5.7.0",
     "rehype-slug": "^6.0.0",
-    "shiki": "^4.3.1",
+    "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
-    "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.39.0"
+    "yet-another-react-lightbox": "^3.32.2",
+    "@mcp-b/design-tokens": "0.41.0"
   },
   "devDependencies": {
-    "@ai-sdk/react": "^3.0.230",
-    "@cloudflare/codemode": "^0.5.0",
+    "@ai-sdk/react": "^3.0.249",
+    "@cloudflare/codemode": "^0.5.1",
     "@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",
-    "@storybook/tanstack-react": "^10.5.2",
-    "@tanstack/react-form": "^1.33.2",
-    "@tanstack/react-query": "^5.101.2",
-    "@tanstack/react-router": "^1.170.18",
+    "@cloudflare/think": "^0.15.1",
+    "@cloudflare/voice": "^0.3.5",
+    "@cloudflare/workers-types": "^5.20260811.1",
+    "@storybook/addon-a11y": "^10.5.7",
+    "@storybook/addon-docs": "^10.5.7",
+    "@storybook/addon-vitest": "^10.5.7",
+    "@storybook/tanstack-react": "^10.5.7",
+    "@tanstack/react-form": "^1.33.4",
+    "@tanstack/react-query": "^5.101.4",
+    "@tanstack/react-router": "^1.170.25",
     "@tanstack/react-store": "^0.9.3",
-    "@tanstack/router-core": "^1.171.15",
-    "@types/hast": "^3.0.4",
-    "@types/node": "^26",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@tanstack/router-core": "^1.171.21",
+    "@types/hast": "^3.0.5",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@vitest/browser-playwright": "^4.1.10",
     "@vitest/coverage-v8": "^4.1.10",
     "@vitest/mocker": "^4.1.10",
-    "agents": "^0.19.0",
-    "ai": "^6.0.228",
+    "agents": "^0.20.1",
+    "ai": "^6.0.247",
     "cloudflare": "^7.0.0",
-    "playwright": "~1.61.0",
+    "playwright": "~1.61.1",
     "react": "19.3.0-canary-711c445b-20260722",
     "react-dom": "19.3.0-canary-711c445b-20260722",
-    "storybook": "^10.5.2",
+    "storybook": "^10.5.7",
     "typescript": "^6.0.3",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
     "vite-plus": "0.2.4",
@@ -92,14 +92,13 @@
   },
   "peerDependencies": {
     "@ai-sdk/react": "^3.0.230",
-    "@cloudflare/codemode": "^0.5.0",
+    "@cloudflare/codemode": "^0.5.1",
     "@cloudflare/shell": "^0.4.3",
-    "@cloudflare/think": "^0.15.0",
-    "@cloudflare/voice": "^0.3.4",
+    "@cloudflare/think": "^0.15.1",
+    "@cloudflare/voice": "^0.3.5",
     "@cloudflare/workers-types": "^5.20260715.1",
     "@tanstack/react-query": "^5.101.2",
-    "@tanstack/react-router": "^1.170.18",
-    "agents": "^0.19.0",
+    "agents": "^0.20.1",
     "ai": "^6.0.228",
     "cloudflare": "^7.0.0",
     "react": "19.3.0-canary-711c445b-20260722",
@@ -124,6 +123,9 @@
     "@cloudflare/workers-types": {
       "optional": true
     },
+    "@tanstack/react-query": {
+      "optional": true
+    },
     "agents": {
       "optional": true
     },
@@ -140,6 +142,6 @@
     "test": "vp test",
     "check": "vp check",
     "storybook": "storybook dev -p 6011",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build && node ../../scripts/audit-storybook-manifest.mjs --write-imports"
   }
 }

package/dist/ResponsiveSidebarShell-DWjULskY.d.ts

@@ -1,68 +0,0 @@
-import * as React from "react";
-
-//#region src/components/general-purpose/ResponsiveSidebarShell.d.ts
-interface ResponsiveSidebarShellControls {
-  /** Close the sidebar and move focus to the main content. */
-  closeSidebar: () => void;
-  /** Close only when the shell is currently using its compact drawer layout. */
-  closeSidebarOnCompact: () => void;
-}
-interface ResponsiveSidebarShellTopBarControls {
-  /** The shell-owned, labelled sidebar toggle to place in a top-bar slot. */
-  sidebarToggle: React.ReactNode;
-  /** Stable id for a caller-composed compact disclosure trigger. */
-  sidebarId: string;
-  /** Whether the shared sidebar surface is currently visible. */
-  sidebarOpen: boolean;
-  /** Toggle the sidebar and remember the invoking control for Escape focus restoration. */
-  toggleSidebar: (trigger?: HTMLElement) => void;
-}
-interface ResponsiveSidebarShellProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Navigation or other secondary surface shown beside the selected content. */
-  sidebar: React.ReactNode | ((controls: ResponsiveSidebarShellControls) => React.ReactNode);
-  /**
-   * Optional composable application bar. The render form receives the
-   * shell-owned sidebar toggle so callers can place it beside their own icon
-   * groups without duplicating drawer behavior.
-   */
-  topBar?: React.ReactNode | ((controls: ResponsiveSidebarShellTopBarControls) => React.ReactNode);
-  /** Short noun used by the toggle and resize control, such as “threads” or “schedules”. */
-  sidebarLabel: string;
-  /** Whether the sidebar is open. Omit for internal state. */
-  sidebarOpen?: boolean;
-  /** Initial sidebar state when `sidebarOpen` is uncontrolled. */
-  defaultSidebarOpen?: boolean;
-  /** Initial desktop sidebar width in CSS pixels. */
-  defaultSidebarWidth?: number;
-  /** Called when the sidebar is opened or closed. */
-  onSidebarOpenChange?: (open: boolean) => void;
-  /** Accessible name for the toolbar containing the sidebar toggle. */
-  toolbarLabel?: string;
-  /** Accessible name for the mobile preview target that returns to the main content. */
-  showMainLabel?: string;
-}
-/**
- * Responsive master-detail shell with a resizable desktop sidebar and a compact
- * floating sidebar that leaves the main content in place as a dismiss target.
- * The root exposes `data-sidebar-open="true" | "false"` as its public styling hook.
- */
-declare function ResponsiveSidebarShell({
-  sidebar,
-  topBar,
-  sidebarLabel,
-  sidebarOpen,
-  defaultSidebarOpen,
-  defaultSidebarWidth,
-  onSidebarOpenChange,
-  toolbarLabel,
-  showMainLabel,
-  className,
-  children,
-  ref,
-  style,
-  ...props
-}: ResponsiveSidebarShellProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-//#endregion
-export { ResponsiveSidebarShellTopBarControls as i, ResponsiveSidebarShellControls as n, ResponsiveSidebarShellProps as r, ResponsiveSidebarShell as t };

package/dist/components/agents-sdk/AgentActivityPreview.d.ts

@@ -1,46 +0,0 @@
-import { n as WorkspaceDestination } from "../../WorkspaceLink-Bh9-Jo1r.js";
-import { s as AgentActivitySummary } from "../../AgentActivity-Cc_oDYum.js";
-import * as React from "react";
-
-//#region src/components/agents-sdk/AgentActivityPreview.d.ts
-/** The three conditions that make an agent relevant to the transient preview. */
-type AgentActivityPreviewStatus = "running" | "input-required" | "unviewed";
-interface AgentActivityPreviewFavicon {
-  src: string;
-  label: string;
-}
-type AgentActivityPreviewItem = Omit<AgentActivitySummary, "mode"> & {
-  id: string;
-  status: AgentActivityPreviewStatus;
-  favicons?: readonly AgentActivityPreviewFavicon[];
-};
-interface AgentActivityPreviewProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onSelect"> {
-  /** Current agent summaries to show in the transient preview. */
-  items: readonly AgentActivityPreviewItem[];
-  /** App-authored TanStack Router Link for every durable agent destination. */
-  renderAgentLink: (item: AgentActivityPreviewItem) => React.ReactElement;
-  /** App-authored TanStack Router Link for a projected workspace file destination. */
-  renderWorkspaceFileLink?: (item: AgentActivityPreviewItem, destination: Extract<WorkspaceDestination, {
-    kind: "file";
-  }>) => React.ReactElement;
-  /** Hides the complete preview when the host supports dismissal. */
-  onDismiss?: () => void;
-  /** Product mark shown beside the agent rows. */
-  brandIcon?: React.ReactNode;
-}
-/** Compact multi-agent preview for a page overlay or secondary application rail. */
-declare function AgentActivityPreview({
-  "aria-label": ariaLabel,
-  brandIcon,
-  className,
-  items,
-  onDismiss,
-  renderAgentLink,
-  renderWorkspaceFileLink,
-  ref,
-  ...props
-}: AgentActivityPreviewProps & {
-  ref?: React.Ref<HTMLElement>;
-}): React.JSX.Element | null;
-//#endregion
-export { AgentActivityPreview, AgentActivityPreviewFavicon, AgentActivityPreviewItem, AgentActivityPreviewProps, AgentActivityPreviewStatus };