@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/utils/mcp-server-catalog.d.ts

@@ -539,6 +539,50 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
       readonly url: "https://console.cloud.google.com/apis/credentials";
     }];
   };
+}, {
+  readonly id: "google-docs";
+  readonly name: "Google Docs";
+  readonly url: "https://docsmcp.googleapis.com/mcp/v1";
+  readonly description: "Read and update Google Docs";
+  readonly category: "Manual";
+  readonly icon: "https://cdn.simpleicons.org/googledocs/4285F4";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }];
+    };
+    readonly description: "Enable Docs and Docs MCP APIs, configure OAuth consent, and create a web OAuth client.";
+    readonly links: readonly [{
+      readonly label: "Setup guide";
+      readonly url: "https://developers.google.com/workspace/docs/api/guides/configure-mcp-server";
+    }, {
+      readonly label: "API reference";
+      readonly url: "https://developers.google.com/workspace/docs/api/reference/mcp";
+    }, {
+      readonly label: "OAuth consent";
+      readonly url: "https://console.cloud.google.com/apis/credentials/consent";
+    }, {
+      readonly label: "Credentials";
+      readonly url: "https://console.cloud.google.com/apis/credentials";
+    }];
+  };
 }, {
   readonly id: "google-drive";
   readonly name: "Google Drive";
@@ -627,6 +671,94 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
       readonly url: "https://console.cloud.google.com/apis/credentials";
     }];
   };
+}, {
+  readonly id: "google-sheets";
+  readonly name: "Google Sheets";
+  readonly url: "https://sheetsmcp.googleapis.com/mcp/v1";
+  readonly description: "Read and update spreadsheets";
+  readonly category: "Manual";
+  readonly icon: "https://cdn.simpleicons.org/googlesheets/34A853";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }];
+    };
+    readonly description: "Enable Sheets and Sheets MCP APIs, configure OAuth consent, and create a web OAuth client.";
+    readonly links: readonly [{
+      readonly label: "Setup guide";
+      readonly url: "https://developers.google.com/workspace/sheets/api/guides/configure-mcp-server";
+    }, {
+      readonly label: "API reference";
+      readonly url: "https://developers.google.com/workspace/sheets/api/reference/mcp";
+    }, {
+      readonly label: "OAuth consent";
+      readonly url: "https://console.cloud.google.com/apis/credentials/consent";
+    }, {
+      readonly label: "Credentials";
+      readonly url: "https://console.cloud.google.com/apis/credentials";
+    }];
+  };
+}, {
+  readonly id: "google-slides";
+  readonly name: "Google Slides";
+  readonly url: "https://slidesmcp.googleapis.com/mcp/v1";
+  readonly description: "Read and update presentations";
+  readonly category: "Manual";
+  readonly icon: "https://cdn.simpleicons.org/googleslides/FBBC04";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }];
+    };
+    readonly description: "Enable Slides and Slides MCP APIs, configure OAuth consent, and create a web OAuth client.";
+    readonly links: readonly [{
+      readonly label: "Setup guide";
+      readonly url: "https://developers.google.com/workspace/slides/api/guides/configure-mcp-server";
+    }, {
+      readonly label: "API reference";
+      readonly url: "https://developers.google.com/workspace/slides/api/reference/mcp";
+    }, {
+      readonly label: "OAuth consent";
+      readonly url: "https://console.cloud.google.com/apis/credentials/consent";
+    }, {
+      readonly label: "Credentials";
+      readonly url: "https://console.cloud.google.com/apis/credentials";
+    }];
+  };
 }, {
   readonly id: "google-workspace-search";
   readonly name: "Google Workspace Universal Search";

package/dist/utils/mcp-server-catalog.js

@@ -507,6 +507,36 @@ const MANUAL_MCP_SERVER_CARDS = [
 			]
 		}
 	},
+	{
+		id: "google-docs",
+		name: "Google Docs",
+		url: "https://docsmcp.googleapis.com/mcp/v1",
+		description: "Read and update Google Docs",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/googledocs/4285F4",
+		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClientSecret,
+			description: "Enable Docs and Docs MCP APIs, configure OAuth consent, and create a web OAuth client.",
+			links: [
+				{
+					label: "Setup guide",
+					url: "https://developers.google.com/workspace/docs/api/guides/configure-mcp-server"
+				},
+				{
+					label: "API reference",
+					url: "https://developers.google.com/workspace/docs/api/reference/mcp"
+				},
+				{
+					label: "OAuth consent",
+					url: "https://console.cloud.google.com/apis/credentials/consent"
+				},
+				{
+					label: "Credentials",
+					url: "https://console.cloud.google.com/apis/credentials"
+				}
+			]
+		}
+	},
 	{
 		id: "google-drive",
 		name: "Google Drive",
@@ -567,6 +597,66 @@ const MANUAL_MCP_SERVER_CARDS = [
 			]
 		}
 	},
+	{
+		id: "google-sheets",
+		name: "Google Sheets",
+		url: "https://sheetsmcp.googleapis.com/mcp/v1",
+		description: "Read and update spreadsheets",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/googlesheets/34A853",
+		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClientSecret,
+			description: "Enable Sheets and Sheets MCP APIs, configure OAuth consent, and create a web OAuth client.",
+			links: [
+				{
+					label: "Setup guide",
+					url: "https://developers.google.com/workspace/sheets/api/guides/configure-mcp-server"
+				},
+				{
+					label: "API reference",
+					url: "https://developers.google.com/workspace/sheets/api/reference/mcp"
+				},
+				{
+					label: "OAuth consent",
+					url: "https://console.cloud.google.com/apis/credentials/consent"
+				},
+				{
+					label: "Credentials",
+					url: "https://console.cloud.google.com/apis/credentials"
+				}
+			]
+		}
+	},
+	{
+		id: "google-slides",
+		name: "Google Slides",
+		url: "https://slidesmcp.googleapis.com/mcp/v1",
+		description: "Read and update presentations",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/googleslides/FBBC04",
+		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClientSecret,
+			description: "Enable Slides and Slides MCP APIs, configure OAuth consent, and create a web OAuth client.",
+			links: [
+				{
+					label: "Setup guide",
+					url: "https://developers.google.com/workspace/slides/api/guides/configure-mcp-server"
+				},
+				{
+					label: "API reference",
+					url: "https://developers.google.com/workspace/slides/api/reference/mcp"
+				},
+				{
+					label: "OAuth consent",
+					url: "https://console.cloud.google.com/apis/credentials/consent"
+				},
+				{
+					label: "Credentials",
+					url: "https://console.cloud.google.com/apis/credentials"
+				}
+			]
+		}
+	},
 	{
 		id: "google-workspace-search",
 		name: "Google Workspace Universal Search",

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-gV4kZeCI.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.18.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,18 +57,22 @@
     "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.18.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",
     "@cloudflare/shell": "^0.4.1",
     "@cloudflare/think": "^0.13.0",
     "@cloudflare/voice": "^0.3.4",
-    "@storybook/addon-a11y": "^10.5.0",
-    "@storybook/addon-docs": "^10.5.0",
-    "@storybook/addon-vitest": "^10.5.0",
-    "@storybook/react-vite": "^10.5.0",
+    "@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",
+    "@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",
@@ -82,7 +85,7 @@
     "playwright": "^1.61.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "storybook": "^10.5.0",
+    "storybook": "^10.5.2",
     "typescript": "^6.0.3",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
     "vite-plus": "0.2.4",
@@ -93,6 +96,8 @@
     "@cloudflare/shell": "^0.4.1",
     "@cloudflare/think": "^0.13.0",
     "@cloudflare/voice": "^0.3.4",
+    "@tanstack/react-query": "^5.101.2",
+    "@tanstack/react-router": "^1.170.18",
     "agents": "^0.17.4",
     "ai": "^6.0.182",
     "react": "^19.0.0",

package/dist/Workspace-D39LxGvP.d.ts

@@ -1,62 +0,0 @@
-import { i as WorkspaceFileState, r as WorkspaceFileAssetResolver } from "./WorkspaceFile-DOZkPwzu.js";
-import { WorkspaceLike } from "@cloudflare/think";
-import { FileInfo, Workspace } from "@cloudflare/shell";
-
-//#region src/components/Workspace.d.ts
-/** Workspace summary, as returned by `Workspace.getWorkspaceInfo()` upstream. */
-type WorkspaceInfo = Awaited<ReturnType<Workspace["getWorkspaceInfo"]>>;
-/** Whole upstream workspace shapes, accepted without narrowing or mirroring. */
-type WorkspaceSource = Workspace | WorkspaceLike;
-interface UseWorkspaceOptions {
-  /** Must be referentially stable (memoize in the app) — a new source resets the workspace. */
-  source: WorkspaceSource;
-  /** Root directory to list first. Defaults to "/". */
-  root?: string;
-  /**
-   * Optional host adapter called before text/binary reads. Return `null` for
-   * ordinary text files and prefer signed/range-friendly URLs for large media.
-   * The configured root scopes navigation; hosts must enforce authorization
-   * atomically when resolving assets across a trust boundary.
-   */
-  resolveFileAsset?: WorkspaceFileAssetResolver;
-  /** Maximum size for the built-in buffered-byte fallback. Defaults to 32 MiB. */
-  maxInlineAssetBytes?: number;
-}
-interface WorkspaceState {
-  root: string;
-  /** Loaded directory listings, keyed by directory path. */
-  entriesByDirectory: Readonly<Record<string, readonly FileInfo[]>>;
-  /** Every loaded entry, keyed by its path. */
-  entryByPath: ReadonlyMap<string, FileInfo>;
-  expandedPaths: ReadonlySet<string>;
-  /** Update expansion; newly expanded directories load lazily. */
-  setExpandedPaths: (next: Set<string>) => void;
-  selectedPath: string | null;
-  /** Select a file and load it. Text is cached; binary assets remain active-file only. */
-  selectFile: (path: string | null) => void;
-  /** The selected file once its read settles; null while loading. */
-  selectedFile: WorkspaceFileState | null;
-  /** Root listing in flight. */
-  isLoading: boolean;
-  /** Directory and file paths with a request in flight. */
-  loadingPaths: ReadonlySet<string>;
-  /** Root/directory listing failure. Per-file read errors live on the file state. */
-  error: string | null;
-  /** Workspace summary, when the source provides `getWorkspaceInfo`. */
-  info: WorkspaceInfo | null;
-  /** Reload the root, every expanded directory, and the selected file. */
-  refresh: () => void;
-}
-/**
- * Headless state for browsing a Think workspace: lazy directory loading,
- * cached file reads, expansion/selection, and refresh. Feed the result to
- * `WorkspaceExplorer`, or compose `WorkspaceBrowser` and `WorkspaceFileView`.
- */
-declare function useWorkspace({
-  source,
-  root,
-  resolveFileAsset,
-  maxInlineAssetBytes
-}: UseWorkspaceOptions): WorkspaceState;
-//#endregion
-export { useWorkspace as a, WorkspaceState as i, WorkspaceInfo as n, WorkspaceSource as r, UseWorkspaceOptions as t };

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 };

package/dist/components/Shell.d.ts

@@ -1,163 +0,0 @@
-import * as React from "react";
-
-//#region src/components/Shell.d.ts
-/**
- * Props for the Shell.Root component.
- */
-interface ShellRootProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Additional CSS class names */
-  className?: string;
-  /** The heading text displayed in the header */
-  heading?: string;
-}
-/**
- * Props for the Shell.ActionBar component.
- */
-interface ShellActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Additional CSS class names */
-  className?: string;
-}
-/**
- * Props for the Shell.Action component.
- */
-interface ShellActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Additional CSS class names */
-  className?: string;
-  /** Icon to display */
-  icon?: React.ReactNode;
-  /** Whether this action is currently active */
-  active?: boolean;
-  /** Accessible label for the action */
-  label?: string;
-}
-/**
- * Props for the Shell.Panel component.
- */
-interface ShellPanelProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Additional CSS class names */
-  className?: string;
-  /** The panel heading */
-  heading?: string;
-  /** Whether the panel is visible */
-  open?: boolean;
-}
-/**
- * Props for the Shell.Content component.
- */
-interface ShellContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Additional CSS class names */
-  className?: string;
-}
-/**
- * Root container for the shell layout.
- * Provides a structured layout with optional header, action bar, panel, and content areas.
- *
- * Built internally for dense tools with side actions and optional panels. Use
- * for app-like work surfaces, not marketing pages or generic sections.
- *
- * Styling consumes Sigvelo layout, border, surface, spacing, and focus tokens.
- * Actions need labels because the visible affordance is usually icon-only.
- *
- * @example
- * ```tsx
- * <Shell.Root heading="Project">
- *   <Shell.ActionBar>
- *     <Shell.Action icon={<FilterIcon />} label="Filter" />
- *   </Shell.ActionBar>
- *   <Shell.Content>Map or tool content</Shell.Content>
- * </Shell.Root>
- * ```
- */
-declare function ShellRoot({
-  className,
-  heading,
-  children,
-  ref,
-  ...props
-}: ShellRootProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/**
- * Container for action buttons that toggle panels.
- * Typically placed on the left side of the shell.
- */
-declare function ShellActionBar({
-  className,
-  children,
-  ref,
-  ...props
-}: ShellActionBarProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/**
- * An action button within the action bar.
- */
-declare function ShellAction({
-  className,
-  icon,
-  active,
-  label,
-  ref,
-  ...props
-}: ShellActionProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-/**
- * A collapsible panel that slides in from the side.
- */
-declare function ShellPanel({
-  className,
-  heading,
-  open,
-  children,
-  ref,
-  ...props
-}: ShellPanelProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/**
- * The main content area of the shell.
- */
-declare function ShellContent({
-  className,
-  children,
-  ref,
-  ...props
-}: ShellContentProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/**
- * A shell layout component with action bar, collapsible panel, and content areas.
- * Useful for map applications and other interactive tools.
- *
- * @example
- * ```tsx
- * const [filterOpen, setFilterOpen] = useState(false);
- *
- * <Shell.Root heading="My Map Application">
- *   <Shell.ActionBar>
- *     <Shell.Action
- *       icon={<FilterIcon />}
- *       active={filterOpen}
- *       onClick={() => setFilterOpen(!filterOpen)}
- *       label="Filter"
- *     />
- *   </Shell.ActionBar>
- *   <Shell.Panel heading="Filter" open={filterOpen}>
- *     <p>Filter controls here</p>
- *   </Shell.Panel>
- *   <Shell.Content>
- *     <div id="map" />
- *   </Shell.Content>
- * </Shell.Root>
- * ```
- */
-declare const Shell: {
-  Root: typeof ShellRoot;
-  ActionBar: typeof ShellActionBar;
-  Action: typeof ShellAction;
-  Panel: typeof ShellPanel;
-  Content: typeof ShellContent;
-};
-//#endregion
-export { Shell, ShellActionBarProps, ShellActionProps, ShellContentProps, ShellPanelProps, ShellRootProps };