@mcp-b/react-components 0.16.1 → 0.17.0

package/dist/styles/subagent-run.css

@@ -1,33 +1,3 @@
-.subagent-run {
-  display: inline-flex;
-  flex-direction: column;
-  max-inline-size: 100%;
-  color: var(--sigvelo-color-text);
-  font-family: inherit;
-}
-
-.subagent-run__trigger {
-  align-items: safe center;
-  justify-content: flex-start;
-  max-inline-size: 18rem;
-  border-radius: var(--sigvelo-radius-full);
-  text-align: start;
-}
-
-.subagent-run__trigger[data-panel-open] {
-  border-color: var(--sigvelo-color-neutral-border-muted);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.subagent-run__trigger-content {
-  display: flex;
-  align-items: stretch;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: 0;
-  min-inline-size: 0;
-}
-
 .subagent-run__selector {
   max-inline-size: 14rem;
   justify-content: flex-start;
@@ -55,14 +25,22 @@
   min-inline-size: 0;
 }
 
-.subagent-run__heading {
-  display: flex;
-  align-items: safe center;
-  flex-wrap: nowrap;
+.subagent-run__list--adjacent {
+  margin-block-start: var(--sigvelo-spacing-2);
+}
+
+.subagent-run__tray {
+  display: grid;
   gap: var(--sigvelo-spacing-1-5);
   min-inline-size: 0;
 }
 
+.subagent-run__tray-label {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.4;
+}
+
 .subagent-run__title {
   min-inline-size: 0;
   overflow: hidden;
@@ -99,38 +77,6 @@
   color: var(--sigvelo-color-warning-text);
 }
 
-.subagent-run__description {
-  display: block;
-  overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  line-height: 1.5;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.subagent-run__description:empty {
-  display: none;
-}
-
-.subagent-run__status {
-  max-inline-size: 100%;
-}
-
-.subagent-run__content-inner {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-2);
-  min-inline-size: min(30rem, calc(100vw - var(--sigvelo-spacing-8)));
-  margin-block-start: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-2);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  background-color: var(--sigvelo-color-surface);
-}
-
 .subagent-run__progress {
   display: grid;
   gap: var(--sigvelo-spacing-1-5);
@@ -191,10 +137,6 @@
 }
 
 @media (forced-colors: active) {
-  .subagent-run__content-inner {
-    border-color: CanvasText;
-  }
-
   .subagent-run__milestone::before {
     border-color: CanvasText;
   }

package/dist/styles/task.css

@@ -1,11 +1,3 @@
-.task {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-}
-
 .task__trigger {
   display: flex;
   align-items: center;
@@ -53,14 +45,6 @@
   display: inline-flex;
 }
 
-.task__trigger-title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .task__list {
   display: flex;
   flex-direction: column;

package/dist/styles/test-results.css

@@ -1,16 +1,3 @@
-.test-results {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  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);
-  border-radius: var(--sigvelo-radius-md);
-  overflow: hidden;
-}
-
 .test-results__header {
   display: flex;
   flex-direction: column;

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

@@ -4,6 +4,7 @@
   );
 
   position: relative;
+  container: think-full-app / inline-size;
   block-size: 100%;
   min-block-size: 32rem;
   min-inline-size: 0;
@@ -20,6 +21,15 @@
   grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
 }
 
+.think-full-app[data-has-compact-app-bar="true"] {
+  grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
+}
+
+.think-full-app[data-has-compact-app-bar="true"] > .think-full-app__chat-surface,
+.think-full-app[data-has-compact-app-bar="true"] > .think-full-app__aside {
+  grid-row: 1 / -1;
+}
+
 .think-full-app[data-has-workbench="false"] {
   grid-template-columns: minmax(0, 1fr);
 }
@@ -80,28 +90,6 @@
   grid-template-rows: minmax(0, 1fr) auto;
 }
 
-.think-full-app__error {
-  inline-size: min(100%, var(--agent-chat-content-max-inline-size));
-  margin: 0 auto var(--sigvelo-spacing-1-5);
-  padding: 0.4375rem var(--sigvelo-spacing-2-5);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-danger-border-subtle);
-  border-radius: var(--sigvelo-radius-sm);
-  background: var(--sigvelo-color-danger-bg-subtle);
-  color: var(--sigvelo-color-danger-text);
-  font-size: var(--sigvelo-text-xs);
-}
-
-.think-full-app__error-dismiss {
-  margin-inline-start: 0.5rem;
-  min-height: auto;
-  padding: 0;
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  text-decoration: underline;
-}
-
 .think-full-app__aside {
   grid-column: 2;
   grid-row: 1;
@@ -169,21 +157,7 @@
   padding: 0;
 }
 
-@media (width <= 56rem) {
-  .think-full-app {
-    min-block-size: 0;
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: minmax(0, 1fr);
-  }
-
-  .think-full-app[data-has-workbench-topbar="true"] {
-    grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
-  }
-
-  .think-full-app[data-has-compact-app-bar="true"] {
-    grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
-  }
-
+@container think-full-app (inline-size <= 56rem) {
   .think-full-app > .think-full-app__app-bar[data-compact-only="true"] {
     display: grid;
   }
@@ -240,7 +214,7 @@
   .think-full-app__chat-surface,
   .think-full-app__workbench-slot,
   .think-full-app__workbench {
-    grid-column: 1;
+    grid-column: 1 / -1;
     grid-row: 1;
     min-block-size: 0;
     display: none;

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

@@ -55,19 +55,6 @@
   text-transform: uppercase;
 }
 
-.think-routine-library__status,
-.think-routine-library__title {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .think-routine-library__layout {
   grid-row: 1 / -1;
   min-block-size: 0;
@@ -96,15 +83,11 @@
   margin-block-end: var(--sigvelo-spacing-2);
 }
 
-.think-routine-library__layout
-  .responsive-sidebar-shell__frame[data-sidebar-open="true"]
-  .think-routine-library__browser-toolbar {
+.think-routine-library__layout[data-sidebar-open="true"] .think-routine-library__browser-toolbar {
   padding-inline-start: var(--sigvelo-spacing-12);
 }
 
-.think-routine-library__layout
-  .responsive-sidebar-shell__frame[data-sidebar-open="false"]
-  .think-routine-library__detail {
+.think-routine-library__layout[data-sidebar-open="false"] .think-routine-library__detail {
   padding-block-start: clamp(3.75rem, 6vw, 4.5rem);
 }
 
@@ -112,6 +95,10 @@
   inline-size: fit-content;
 }
 
+.think-routine-library__filters .toggle-group__item {
+  color: color-mix(in oklab, var(--sigvelo-color-text-muted), var(--sigvelo-color-text) 12%);
+}
+
 .think-routine-library__search {
   display: grid;
   gap: var(--sigvelo-spacing-1-5);
@@ -198,7 +185,7 @@
 
 .think-routine-library__routine-copy span,
 .think-routine-library__routine-copy small {
-  color: var(--sigvelo-color-text-muted);
+  color: color-mix(in oklab, var(--sigvelo-color-text-muted), var(--sigvelo-color-text) 12%);
   font-size: var(--sigvelo-text-xs);
 }
 
@@ -409,6 +396,11 @@
   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 {
   min-block-size: 0;
   overflow: auto;

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

@@ -238,6 +238,21 @@
   }
 }
 
+@container responsive-sidebar-shell (inline-size <= 56rem) {
+  .think-thread-picker {
+    block-size: auto;
+    max-block-size: inherit;
+    grid-template-rows: auto auto auto;
+  }
+
+  .think-thread-picker__nav,
+  .think-thread-picker__scroll,
+  .think-thread-picker__viewport {
+    block-size: auto;
+    max-block-size: 20rem;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .think-thread-status-indicators__item[data-status="running"] svg,
   .think-thread-picker__thread[data-status="pending"] .think-thread-picker__thread-status svg,

package/dist/styles/toast.css

@@ -60,13 +60,6 @@
   color: var(--sigvelo-color-text);
 }
 
-.toast__description {
-  margin: 0;
-  font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-normal);
-  color: var(--sigvelo-color-text-muted);
-}
-
 .toast__action {
   display: inline-flex;
   align-items: center;

package/dist/styles/utilities.css

@@ -0,0 +1,31 @@
+/*
+ * Small, intentional composition helpers. Utilities describe one reusable
+ * behavior and must not carry component anatomy or product-specific visuals.
+ */
+.sigvelo-visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.sigvelo-stack-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sigvelo-truncate {
+  min-inline-size: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/styles/web-preview.css

@@ -1,16 +1,3 @@
-.web-preview {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  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);
-  border-radius: var(--sigvelo-radius-md);
-  overflow: hidden;
-}
-
 .web-preview__nav {
   display: flex;
   align-items: center;
@@ -107,14 +94,6 @@
   overflow: auto;
 }
 
-.web-preview__console-list {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 .web-preview__console-empty {
   padding-block: var(--sigvelo-spacing-3);
   padding-inline: var(--sigvelo-spacing-3);

package/dist/styles/workspace-explorer.css

@@ -62,10 +62,11 @@
   text-overflow: ellipsis;
 }
 
-.workspace-explorer__body {
+.workspace-explorer__body,
+.workspace-explorer__file {
   display: flex;
   flex-direction: column;
-  min-height: 0;
+  min-block-size: 0;
   flex: 1;
   overflow: auto;
 }
@@ -77,18 +78,6 @@
   margin-inline: var(--sigvelo-spacing-2);
 }
 
-.workspace-explorer__filter-label {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .workspace-explorer__filter-control {
   position: relative;
 }
@@ -169,15 +158,6 @@
   text-align: center;
 }
 
-/* File preview fills the pane flush — no card-in-pane inset. */
-.workspace-explorer__file {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-  overflow: auto;
-}
-
 .workspace-explorer__code {
   flex: 1;
   min-block-size: 100%;
@@ -233,18 +213,6 @@
   cursor: not-allowed;
 }
 
-.workspace-link__visually-hidden {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .workspace-explorer__markdown-content
   :is(
     [data-streamdown="code-block"],
@@ -314,7 +282,8 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.workspace-explorer__skill-metadata dd {
+.workspace-explorer__skill-metadata dd,
+.workspace-explorer__media-details dd {
   min-inline-size: 0;
   margin: 0;
   overflow-wrap: anywhere;
@@ -466,13 +435,6 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.workspace-explorer__media-details dd {
-  min-inline-size: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-  font-family: var(--sigvelo-font-mono);
-}
-
 .workspace-explorer__media-transcript,
 .workspace-explorer__media-fallback a {
   color: var(--sigvelo-color-primary-text);
@@ -498,18 +460,6 @@
   display: none;
 }
 
-.workspace-explorer__visually-hidden {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .workspace-media-lightbox {
   --yarl__color_backdrop: var(--sigvelo-color-surface);
   --yarl__color_button: var(--sigvelo-color-text-muted);

package/dist/think-agent-Cip5KAPj.d.ts

@@ -0,0 +1,7 @@
+import { Think } from "@cloudflare/think";
+
+//#region src/components/_internal/think-agent.d.ts
+/** Shared complete Think specialization for stateful React agent hooks. */
+type ThinkAgent<State = unknown> = Think<object, State>;
+//#endregion
+export { ThinkAgent as t };

package/dist/utils/codex-model-catalog.d.ts

@@ -78,7 +78,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -98,7 +98,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -115,7 +115,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -132,7 +132,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];

package/dist/utils/structured-code.d.ts

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

package/dist/workspace-path-L_KmjRjq.js

@@ -0,0 +1,26 @@
+//#region src/components/_internal/workspace-path.ts
+/**
+* Canonicalize an absolute path using the workspace path grammar.
+*
+* This deliberately does not URL-decode or reject characters such as `\\` and
+* line breaks. Callers at URL or trust boundaries own those stricter checks.
+*/
+function canonicalizeAbsoluteWorkspacePath(path) {
+	if (!path.startsWith("/") || path.includes("\0")) return null;
+	const segments = [];
+	for (const segment of path.split("/")) {
+		if (!segment || segment === ".") continue;
+		if (segment === "..") segments.pop();
+		else segments.push(segment);
+	}
+	return `/${segments.join("/")}`;
+}
+/** Compare two workspace paths after applying the canonical workspace grammar. */
+function isWorkspacePathWithinRoot(path, root) {
+	const canonicalPath = canonicalizeAbsoluteWorkspacePath(path);
+	const canonicalRoot = canonicalizeAbsoluteWorkspacePath(root);
+	if (!canonicalPath || !canonicalRoot) return false;
+	return canonicalRoot === "/" || canonicalPath === canonicalRoot || canonicalPath.startsWith(`${canonicalRoot}/`);
+}
+//#endregion
+export { isWorkspacePathWithinRoot as n, canonicalizeAbsoluteWorkspacePath as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.16.1",
+  "version": "0.17.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": {
@@ -20,6 +20,7 @@
     "**/*.css"
   ],
   "exports": {
+    "./components/_internal/*": null,
     "./components/*": {
       "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js"
@@ -29,8 +30,6 @@
       "import": "./dist/utils/*.js"
     },
     "./styles": "./dist/styles/index.css",
-    "./styles/tokens": "./dist/styles/tokens.css",
-    "./styles/base": "./dist/styles/base.css",
     "./styles/*": "./dist/styles/*.css",
     "./styles/*.css": "./dist/styles/*.css",
     "./package.json": "./package.json"
@@ -58,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.16.1"
+    "@mcp-b/design-tokens": "0.17.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",

package/dist/class-names-9UtZwb0J.js

@@ -1,12 +0,0 @@
-//#region src/components/_internal/class-names.ts
-/**
-* Concatenates class-name parts, skipping falsy values.
-*
-* Matches the idiom used throughout existing components:
-* `[...].filter(Boolean).join(" ")`
-*/
-function cx(...parts) {
-	return parts.filter(Boolean).join(" ");
-}
-//#endregion
-export { cx as t };

package/dist/components/AppFrame.d.ts

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-//#region src/components/AppFrame.d.ts
-declare function Root({
-  className,
-  ref,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-declare function Body({
-  className,
-  ref,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/** Full-height application frame with a fixed chrome row and contained work surface. */
-declare const AppFrame: {
-  Root: typeof Root;
-  Body: typeof Body;
-};
-//#endregion
-export { AppFrame };

package/dist/components/AppFrame.js

@@ -1,25 +0,0 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/AppFrame.tsx
-function Root({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("app-frame", className),
-		...props
-	});
-}
-function Body({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("app-frame__body", className),
-		...props
-	});
-}
-/** Full-height application frame with a fixed chrome row and contained work surface. */
-const AppFrame = {
-	Root,
-	Body
-};
-//#endregion
-export { AppFrame };