@mcp-b/react-components 0.24.0 → 0.25.0

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

@@ -178,6 +178,20 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 }
 
 @container think-full-app (inline-size <= 56rem) {
+  /* A side panel or phone has no desktop chrome around the app, so the
+     floating application plane reads as a card in a frame. Flatten to one
+     edge-to-edge surface, app bar included — the frame never shows. */
+  .think-full-app > .think-full-app__view-scope,
+  .think-full-app[data-has-workbench-topbar="false"] > .think-full-app__view-scope {
+    margin: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .think-full-app > .think-full-app__app-bar {
+    background: var(--sigvelo-color-surface);
+  }
+
   .think-full-app__workbench-view-switch {
     display: none;
   }
@@ -254,28 +268,22 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   }
 
   .think-full-app .think-full-app__chat .message-scroller__viewport {
-    --message-scroller-fade-t-size: 3rem;
-    --message-scroller-fade-b-size: 3rem;
-  }
-
-  .think-full-app .think-full-app__chat .message-scroller__viewport[data-scrollable~="start"] {
-    --message-scroller-fade-t: var(--message-scroller-fade-t-size);
+    --message-scroller-fade-size: 3rem;
   }
 
   .think-full-app .think-full-app__chat .agent-chat__transcript-content {
-    gap: var(--sigvelo-spacing-2-5);
-    padding-block-start: calc(var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px));
+    --message-scroller-virtual-block-start: calc(
+      var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px)
+    );
+
+    padding-block-start: var(--message-scroller-virtual-block-start);
+    /* Matches Codex's side-panel gutter (--padding-panel: 12px). */
     padding-inline: var(--sigvelo-spacing-3);
   }
 
+  /* The base composer scrim already dissolves the transcript above the box. */
   .think-full-app .agent-chat__composer {
     padding: var(--sigvelo-spacing-2);
-    padding-block-start: var(--sigvelo-spacing-4);
-    background: linear-gradient(
-      to top,
-      var(--sigvelo-color-surface) calc(100% - var(--sigvelo-spacing-4)),
-      transparent
-    );
   }
 
   .think-full-app .prompt-input {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.24.0",
+  "version": "0.25.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": {
@@ -47,6 +47,7 @@
     "@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",
@@ -57,7 +58,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.24.0"
+    "@mcp-b/design-tokens": "0.25.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",
@@ -83,8 +84,8 @@
     "agents": "^0.17.4",
     "ai": "^6.0.220",
     "playwright": "^1.61.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "19.3.0-canary-711c445b-20260722",
+    "react-dom": "19.3.0-canary-711c445b-20260722",
     "storybook": "^10.5.2",
     "typescript": "^6.0.3",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
@@ -100,8 +101,8 @@
     "@tanstack/react-router": "^1.170.18",
     "agents": "^0.17.4",
     "ai": "^6.0.182",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "19.3.0-canary-711c445b-20260722",
+    "react-dom": "19.3.0-canary-711c445b-20260722"
   },
   "peerDependenciesMeta": {
     "@ai-sdk/react": {

package/dist/view-transitions-DyUP0lSg.js

@@ -1,77 +0,0 @@
-import { flushSync } from "react-dom";
-//#region src/components/_internal/view-transitions.ts
-let documentScopeSequence = 0;
-let restoreActiveDocumentScope = null;
-/**
-* Reports whether motion should be suppressed, honoring both the app-level
-* `data-motion="reduce"` override and the `prefers-reduced-motion` media query.
-* Returns `true` (reduced) when there is no document, e.g. during SSR.
-*/
-function motionIsReduced() {
-	if (typeof document === "undefined") return true;
-	if (document.documentElement.dataset.motion === "reduce") return true;
-	return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
-}
-function isReactTestEnvironment() {
-	return globalThis.IS_REACT_ACT_ENVIRONMENT;
-}
-function scopeDocumentTransition(scope) {
-	if (!(scope instanceof HTMLElement || scope instanceof SVGElement)) return null;
-	restoreActiveDocumentScope?.();
-	const rootStyle = document.documentElement.style;
-	const scopeStyle = scope.style;
-	const rootValue = rootStyle.getPropertyValue("view-transition-name");
-	const rootPriority = rootStyle.getPropertyPriority("view-transition-name");
-	const scopeValue = scopeStyle.getPropertyValue("view-transition-name");
-	const scopePriority = scopeStyle.getPropertyPriority("view-transition-name");
-	rootStyle.setProperty("view-transition-name", "none", "important");
-	scopeStyle.setProperty("view-transition-name", `sigvelo-transition-scope-${++documentScopeSequence}`, "important");
-	let active = true;
-	const restore = () => {
-		if (!active) return;
-		active = false;
-		if (rootValue) rootStyle.setProperty("view-transition-name", rootValue, rootPriority);
-		else rootStyle.removeProperty("view-transition-name");
-		if (scopeValue) scopeStyle.setProperty("view-transition-name", scopeValue, scopePriority);
-		else scopeStyle.removeProperty("view-transition-name");
-		if (restoreActiveDocumentScope === restore) restoreActiveDocumentScope = null;
-	};
-	restoreActiveDocumentScope = restore;
-	return restore;
-}
-/**
-* Runs one synchronous React update inside the narrowest supported native view
-* transition. Unsupported and reduced-motion environments commit immediately.
-*/
-function runViewTransition({ scope, update }) {
-	let committed = false;
-	const commitOnce = () => {
-		if (committed) return;
-		committed = true;
-		flushSync(update);
-	};
-	if (typeof document === "undefined" || motionIsReduced() || isReactTestEnvironment()) {
-		commitOnce();
-		return null;
-	}
-	const scopedHost = scope;
-	const documentHost = document;
-	const useScopedHost = typeof scopedHost?.startViewTransition === "function";
-	const host = useScopedHost ? scopedHost : typeof documentHost.startViewTransition === "function" ? documentHost : null;
-	if (!host?.startViewTransition) {
-		commitOnce();
-		return null;
-	}
-	const restoreDocumentScope = useScopedHost ? null : scopeDocumentTransition(scope);
-	try {
-		const transition = host.startViewTransition(commitOnce);
-		if (restoreDocumentScope) transition.finished.finally(restoreDocumentScope).catch(() => void 0);
-		return transition;
-	} catch {
-		restoreDocumentScope?.();
-		commitOnce();
-		return null;
-	}
-}
-//#endregion
-export { runViewTransition as n, motionIsReduced as t };