@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/AgentMessageParts.js

@@ -0,0 +1,119 @@
+import { d as MessageContent, f as MessageResponse, i as MessageAttachment } from "../Message-BXtmfc9Q.js";
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
+import { Source, Sources, SourcesContent, SourcesTrigger } from "./Sources.js";
+import { ToolInvocation } from "./ToolInvocation.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isFileUIPart, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
+//#region src/components/AgentMessageParts.tsx
+/**
+* Per-message row-size compaction marker from `AIChatAgent` persistence.
+*
+* This is distinct from Session history compaction overlays. When a single
+* SQLite row approaches the Workers/SQLite size limit, Agents compacts large
+* tool outputs and, if necessary, truncates text before persistence. The
+* message remains in place and receives metadata keys documented by Agents:
+* `compactedToolOutputs` lists tool-call ids whose outputs were summarized;
+* `compactedTextParts` lists text-part indexes that were truncated. The UI
+* reads those keys structurally because they are persisted metadata rather than
+* exported AI SDK part variants, then adds a local visual note while preserving
+* the original `UIMessage` and part shapes.
+*
+* @see https://github.com/cloudflare/agents/blob/main/docs/agents/chat-agents.md#row-size-protection
+*/
+function isCompactedPart(message, part, partIndex) {
+	const metadata = message.metadata;
+	if (isTextUIPart(part)) return Array.isArray(metadata?.compactedTextParts) && metadata.compactedTextParts.includes(partIndex);
+	if (isToolUIPart(part)) return Array.isArray(metadata?.compactedToolOutputs) && metadata.compactedToolOutputs.includes(part.toolCallId);
+	return false;
+}
+function getPartKey(part, partIndex) {
+	if (isToolUIPart(part)) return part.toolCallId;
+	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
+	return `${part.type}-${partIndex}`;
+}
+/**
+* AI SDK exports concrete source part types but no public source-part guard.
+* Keep these local guards as exact discriminant checks, matching
+* `ai/src/ui/ui-messages.ts` and `ai/src/ui/process-ui-message-stream.ts`.
+* If AI SDK exports source or step guards later, replace these wrappers rather
+* than widening the local transcript contract.
+*/
+function isSourceUrlPart(part) {
+	return part?.type === "source-url";
+}
+function isSourceDocumentPart(part) {
+	return part?.type === "source-document";
+}
+function formatSourceTitle(part) {
+	if (part.title) return part.title;
+	if (part.type === "source-document") return part.filename ?? part.mediaType;
+	try {
+		return new URL(part.url).hostname.replace(/^www\./, "");
+	} catch {
+		return part.url;
+	}
+}
+function renderSources(parts) {
+	return /* @__PURE__ */ jsxs(Sources, { children: [/* @__PURE__ */ jsx(SourcesTrigger, { count: parts.length }), /* @__PURE__ */ jsx(SourcesContent, { children: parts.map((part) => part.type === "source-url" ? /* @__PURE__ */ jsx(Source, {
+		href: part.url,
+		title: formatSourceTitle(part)
+	}, part.sourceId) : /* @__PURE__ */ jsx(Source, {
+		title: formatSourceTitle(part),
+		description: part.filename ?? part.mediaType
+	}, part.sourceId)) })] });
+}
+function getSourceRun(parts, start) {
+	const sources = [];
+	for (let index = start; index < parts.length; index++) {
+		const candidate = parts[index];
+		if (!isSourceUrlPart(candidate) && !isSourceDocumentPart(candidate)) break;
+		sources.push(candidate);
+	}
+	return sources;
+}
+function renderDefaultPart(message, part, partIndex, status) {
+	if (isTextUIPart(part) && part.text) return /* @__PURE__ */ jsx(MessageResponse, { children: part.text });
+	if (isFileUIPart(part)) return /* @__PURE__ */ jsx(MessageAttachment, { part });
+	if (isReasoningUIPart(part)) {
+		if (partIndex !== message.parts.findIndex(isReasoningUIPart)) return null;
+		const reasoningText = message.parts.filter(isReasoningUIPart).map((reasoningPart) => reasoningPart.text).join("\n\n");
+		if (!reasoningText) return null;
+		const lastPart = message.parts.at(-1);
+		return /* @__PURE__ */ jsxs(Reasoning, {
+			isStreaming: status === "streaming" && lastPart !== void 0 && isReasoningUIPart(lastPart) && lastPart.state === "streaming",
+			children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: reasoningText })]
+		});
+	}
+	if (isToolUIPart(part)) return /* @__PURE__ */ jsx(ToolInvocation, { part });
+	return null;
+}
+/**
+* Renders the ordered parts of one whole AI SDK `UIMessage` without adding a
+* transcript, message wrapper, composer, or transport. Compose it inside
+* `Message` for read-only run previews and child-agent transcript rows.
+*/
+function AgentMessageParts({ message, status = "ready", renderPart }) {
+	return message.parts.map((part, partIndex) => {
+		const defaultRender = () => renderDefaultPart(message, part, partIndex, status);
+		const custom = renderPart?.({
+			message,
+			part,
+			partIndex,
+			defaultRender
+		});
+		if (isSourceUrlPart(part) || isSourceDocumentPart(part)) {
+			if (custom !== void 0) return custom ? /* @__PURE__ */ jsx(MessageContent, { children: custom }, getPartKey(part, partIndex)) : null;
+			const previous = message.parts[partIndex - 1];
+			if (isSourceUrlPart(previous) || isSourceDocumentPart(previous)) return null;
+			return /* @__PURE__ */ jsx(MessageContent, { children: renderSources(getSourceRun(message.parts, partIndex)) }, getPartKey(part, partIndex));
+		}
+		const rendered = custom === void 0 ? defaultRender() : custom;
+		return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
+			className: "message__compacted",
+			children: "Output truncated for storage"
+		}) : null] }, getPartKey(part, partIndex)) : null;
+	});
+}
+//#endregion
+export { AgentMessageParts };

package/dist/components/AgentToolDetail.d.ts

@@ -0,0 +1,57 @@
+import { n as ThinkChatValue } from "../ThinkChatContext-DrsZqdaO.js";
+import { ThinkChatMessagesProps } from "./ThinkChat.js";
+import { t as ThinkAgent } from "../think-agent-Cip5KAPj.js";
+import * as React from "react";
+import { UIMessage } from "ai";
+import { UseAgentOptions, useAgent } from "agents/react";
+import { AgentToolRunState } from "agents/agent-tools";
+
+//#region src/components/AgentToolDetail.d.ts
+interface AgentToolDetailProps<State = unknown, MessageT extends UIMessage = UIMessage> extends React.HTMLAttributes<HTMLDivElement> {
+  /** Whole retained run selected from the parent `useAgentToolEvents` result. */
+  run: AgentToolRunState<MessageT["parts"][number]>;
+  /** Whole child Think chat hook result; it owns the stored child transcript. */
+  chat: ThinkChatValue<State, MessageT>;
+  messages?: ThinkChatMessagesProps<MessageT>;
+  /** App-authored TanStack Router Link to the parent conversation. */
+  backLink?: React.ReactElement;
+}
+/**
+ * Live retained-child detail composed from upstream connection and chat values.
+ * The full child transcript comes from `chat.messages`; `run.parts` remains a
+ * compact parent-side stream projection and is never promoted to fake history.
+ */
+declare function AgentToolDetail<State = unknown, MessageT extends UIMessage = UIMessage>({
+  backLink,
+  chat,
+  className,
+  messages,
+  ref,
+  run,
+  ...props
+}: AgentToolDetailProps<State, MessageT> & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface SelectedAgentToolChildProps<ParentAgentT extends ThinkAgent<ParentState>, ParentState = unknown, ChildState = unknown, MessageT extends UIMessage = UIMessage> {
+  run: AgentToolRunState<MessageT["parts"][number]>;
+  /** Whole parent `useAgent` result used to derive the standard root-first route. */
+  parentAgent: ReturnType<typeof useAgent<ParentAgentT, ParentState>>;
+  /**
+   * Optional whole upstream connection options. Supply the same auth/query/base
+   * configuration as the parent; the selected `run.subAgent` is appended.
+   */
+  connectionOptions?: UseAgentOptions<ChildState>;
+  messages?: ThinkChatMessagesProps<MessageT>;
+  /** App-authored TanStack Router Link to the parent conversation. */
+  backLink?: React.ReactElement;
+}
+/** Lazily connects one selected retained child and renders its real Think chat. */
+declare function SelectedAgentToolChild<ParentAgentT extends ThinkAgent<ParentState>, ParentState = unknown, ChildState = unknown, MessageT extends UIMessage = UIMessage>({
+  backLink,
+  connectionOptions,
+  messages,
+  parentAgent,
+  run
+}: SelectedAgentToolChildProps<ParentAgentT, ParentState, ChildState, MessageT>): React.JSX.Element;
+//#endregion
+export { AgentToolDetail, AgentToolDetailProps, SelectedAgentToolChild, SelectedAgentToolChildProps };

package/dist/components/AgentToolDetail.js

@@ -0,0 +1,100 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { r as ArrowLeftIcon } from "../icons-CQJ-aMnI.js";
+import { TransitionSurface } from "./TransitionSurface.js";
+import { AppTopBar } from "./AppTopBar.js";
+import { NaniteMark } from "./NaniteScene.js";
+import { SubagentRunIndicator, getSubagentRunName } from "./SubagentRunIndicator.js";
+import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "./SubagentRunDetails.js";
+import { t as ThinkChat } from "../ThinkChat-15EhfvYJ.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAgentChat } from "@cloudflare/think/react";
+import { useAgent } from "agents/react";
+//#region src/components/AgentToolDetail.tsx
+/**
+* Live retained-child detail composed from upstream connection and chat values.
+* The full child transcript comes from `chat.messages`; `run.parts` remains a
+* compact parent-side stream projection and is never promoted to fake history.
+*/
+function AgentToolDetail({ backLink, chat, className, messages, ref, run, ...props }) {
+	const backRef = React.useRef(null);
+	const name = getSubagentRunName(run);
+	const progressLabel = run.progress?.message ?? run.progress?.phase;
+	React.useEffect(() => {
+		backRef.current?.focus();
+	}, [run.runId]);
+	return /* @__PURE__ */ jsxs(TransitionSurface, {
+		ref,
+		variant: "slide-inline",
+		"data-slot": "agent-tool-detail",
+		className: cx("agent-tool-detail", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(AppTopBar.Root, {
+				"aria-label": `${name} controls`,
+				children: [
+					/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [backLink ? /* @__PURE__ */ jsx(AppTopBar.Link, {
+						ref: backRef,
+						label: "Back to parent conversation",
+						render: backLink,
+						children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+					}) : null, /* @__PURE__ */ jsx(NaniteMark, { index: run.order })] }),
+					/* @__PURE__ */ jsx(AppTopBar.Title, { children: /* @__PURE__ */ jsx("h2", {
+						className: "agent-tool-detail__title",
+						children: name
+					}) }),
+					/* @__PURE__ */ jsx(AppTopBar.Trailing, { children: /* @__PURE__ */ jsx(SubagentRunIndicator, { run }) })
+				]
+			}),
+			progressLabel || run.milestones?.length || run.error || run.summary ? /* @__PURE__ */ jsxs("div", {
+				className: "agent-tool-detail__run-state",
+				children: [
+					progressLabel ? /* @__PURE__ */ jsx(SubagentRunProgress, {
+						label: progressLabel,
+						value: run.progress?.fraction
+					}) : null,
+					run.milestones?.length ? /* @__PURE__ */ jsx(SubagentRunMilestones, {
+						"aria-label": `${name} milestones`,
+						children: run.milestones.map((milestone) => /* @__PURE__ */ jsx(SubagentRunMilestone, { children: milestone.name }, milestone.sequence))
+					}) : null,
+					run.error ? /* @__PURE__ */ jsx("p", {
+						className: "agent-tool-detail__error",
+						children: run.error
+					}) : null,
+					!run.error && run.summary ? /* @__PURE__ */ jsx("p", {
+						className: "agent-tool-detail__summary",
+						children: run.summary
+					}) : null
+				]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "agent-tool-detail__chat",
+				children: /* @__PURE__ */ jsx(ThinkChat.Provider, {
+					chat,
+					children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
+						...messages,
+						showComposer: false
+					})
+				})
+			})
+		]
+	});
+}
+/** Lazily connects one selected retained child and renders its real Think chat. */
+function SelectedAgentToolChild({ backLink, connectionOptions, messages, parentAgent, run }) {
+	const [root, ...parentSubPath] = parentAgent.path;
+	return /* @__PURE__ */ jsx(AgentToolDetail, {
+		run,
+		chat: useAgentChat({ agent: useAgent({
+			...connectionOptions ?? {
+				agent: root?.agent ?? parentAgent.agent,
+				name: root?.name ?? parentAgent.name
+			},
+			sub: [...connectionOptions?.sub ?? parentSubPath, run.subAgent]
+		}) }),
+		messages,
+		backLink
+	}, run.runId);
+}
+//#endregion
+export { AgentToolDetail, SelectedAgentToolChild };

package/dist/components/AgentToolRunsContext.d.ts

@@ -0,0 +1,2 @@
+import { i as useOptionalAgentToolRuns, n as AgentToolRunsProvider, r as AgentToolRunsProviderProps, t as AgentToolEventsValue } from "../AgentToolRunsContext-BVe4stgw.js";
+export { AgentToolEventsValue, AgentToolRunsProvider, AgentToolRunsProviderProps, useOptionalAgentToolRuns };

package/dist/components/AgentToolRunsContext.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/AgentToolRunsContext.tsx
+const AgentToolRunsContext = React.createContext(null);
+/** Provides one parent connection's retained Agent Tool event projection. */
+function AgentToolRunsProvider({ agentTools, children }) {
+	return /* @__PURE__ */ jsx(AgentToolRunsContext.Provider, {
+		value: agentTools,
+		children
+	});
+}
+function useOptionalAgentToolRuns() {
+	return React.useContext(AgentToolRunsContext);
+}
+//#endregion
+export { AgentToolRunsProvider, useOptionalAgentToolRuns };

package/dist/components/AlertDialog.d.ts

@@ -3,31 +3,19 @@ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 
 //#region src/components/AlertDialog.d.ts
 interface AlertDialogProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Root> {}
-interface AlertDialogTriggerProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Trigger>, "className"> {
-  className?: string;
-}
-interface AlertDialogBackdropProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Backdrop>, "className"> {
-  className?: string;
-}
-interface AlertDialogViewportProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Viewport>, "className"> {
-  className?: string;
-}
-interface AlertDialogPopupProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Popup>, "className"> {
-  className?: string;
+interface AlertDialogTriggerProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Trigger> {}
+interface AlertDialogBackdropProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Backdrop> {}
+interface AlertDialogViewportProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Viewport> {}
+interface AlertDialogPopupProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Popup> {
   /**
    * The size of the alert dialog.
    * @default 'md'
    */
   size?: "sm" | "md" | "lg";
 }
-interface AlertDialogTitleProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Title>, "className"> {
-  className?: string;
-}
-interface AlertDialogDescriptionProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Description>, "className"> {
-  className?: string;
-}
-interface AlertDialogCloseProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Close>, "className"> {
-  className?: string;
+interface AlertDialogTitleProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Title> {}
+interface AlertDialogDescriptionProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Description> {}
+interface AlertDialogCloseProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Close> {
   /**
    * The variant of the close button.
    * @default 'secondary'

package/dist/components/AlertDialog.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
@@ -30,8 +31,8 @@ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 */
-function AlertDialogTrigger({ className = "", ref, ...props }) {
-	const classes = ["alert-dialog__trigger", className].filter(Boolean).join(" ");
+function AlertDialogTrigger({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__trigger"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
 		ref,
 		"data-slot": "alert-dialog-trigger",
@@ -39,12 +40,8 @@ function AlertDialogTrigger({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogBackdrop({ className = "", ref, ...props }) {
-	const classes = [
-		"alert-dialog__backdrop",
-		"base-ui-backdrop",
-		className
-	].filter(Boolean).join(" ");
+function AlertDialogBackdrop({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__backdrop", "base-ui-backdrop"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
 		ref,
 		"data-slot": "alert-dialog-overlay",
@@ -52,8 +49,8 @@ function AlertDialogBackdrop({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogViewport({ className = "", ref, ...props }) {
-	const classes = ["alert-dialog__viewport", className].filter(Boolean).join(" ");
+function AlertDialogViewport({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__viewport"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Viewport, {
 		ref,
 		"data-slot": "alert-dialog-viewport",
@@ -61,12 +58,8 @@ function AlertDialogViewport({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogPopup({ size = "md", className = "", ref, ...props }) {
-	const classes = [
-		"alert-dialog__popup",
-		size !== "md" && `alert-dialog__popup--${size}`,
-		className
-	].filter(Boolean).join(" ");
+function AlertDialogPopup({ size = "md", className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__popup", size !== "md" && `alert-dialog__popup--${size}`].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
 		ref,
 		"data-slot": "alert-dialog-content",
@@ -74,32 +67,32 @@ function AlertDialogPopup({ size = "md", className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogHeader({ className = "", ref, ...props }) {
+function AlertDialogHeader({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "alert-dialog-header",
-		className: ["alert-dialog__header", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["alert-dialog__header"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function AlertDialogFooter({ className = "", ref, ...props }) {
+function AlertDialogFooter({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "alert-dialog-footer",
-		className: ["alert-dialog__footer", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["alert-dialog__footer"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function AlertDialogMedia({ className = "", ref, ...props }) {
+function AlertDialogMedia({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "alert-dialog-media",
-		className: ["alert-dialog__media", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["alert-dialog__media"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function AlertDialogTitle({ className = "", ref, ...props }) {
-	const classes = ["alert-dialog__title", className].filter(Boolean).join(" ");
+function AlertDialogTitle({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__title"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
 		ref,
 		"data-slot": "alert-dialog-title",
@@ -107,8 +100,8 @@ function AlertDialogTitle({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogDescription({ className = "", ref, ...props }) {
-	const classes = ["alert-dialog__description", className].filter(Boolean).join(" ");
+function AlertDialogDescription({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__description"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
 		ref,
 		"data-slot": "alert-dialog-description",
@@ -116,12 +109,8 @@ function AlertDialogDescription({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogClose({ variant = "secondary", className = "", ref, ...props }) {
-	const classes = [
-		"alert-dialog__action",
-		`alert-dialog__action--${variant}`,
-		className
-	].filter(Boolean).join(" ");
+function AlertDialogClose({ variant = "secondary", className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__action", `alert-dialog__action--${variant}`].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
 		ref,
 		"data-slot": "alert-dialog-close",

package/dist/components/AppTopBar.d.ts

@@ -1,5 +1,6 @@
-import { Toolbar, ToolbarButtonProps, ToolbarGroupProps } from "./Toolbar.js";
+import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps } from "./Toolbar.js";
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/AppTopBar.d.ts
 interface AppTopBarRootProps extends React.ComponentPropsWithoutRef<typeof Toolbar.Root> {
@@ -7,14 +8,24 @@ interface AppTopBarRootProps extends React.ComponentPropsWithoutRef<typeof Toolb
   "aria-label": string;
 }
 interface AppTopBarGroupProps extends ToolbarGroupProps {}
-interface AppTopBarTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface AppTopBarTitleProps extends useRender.ComponentProps<"div"> {}
 interface AppTopBarButtonProps extends Omit<ToolbarButtonProps, "aria-label"> {
+  ref?: React.Ref<HTMLButtonElement>;
   /** Accessible name and default tooltip text for the icon-only control. */
   label: string;
   /** Tooltip text when it should differ from the accessible name. */
   tooltip?: React.ReactNode;
 }
-interface AppTopBarControlProps extends ToolbarButtonProps {}
+interface AppTopBarLinkProps extends Omit<ToolbarLinkProps, "aria-label"> {
+  ref?: React.Ref<HTMLAnchorElement>;
+  /** Accessible name and default tooltip text for the icon-only link. */
+  label: string;
+  /** Tooltip text when it should differ from the accessible name. */
+  tooltip?: React.ReactNode;
+}
+interface AppTopBarControlProps extends ToolbarButtonProps {
+  ref?: React.Ref<HTMLButtonElement>;
+}
 /**
  * Stable application-level toolbar with composable leading, title, and trailing
  * slots. Descendant buttons share Base UI's roving focus and tooltip provider.
@@ -30,11 +41,10 @@ declare function AppTopBarLeading({
 }: AppTopBarGroupProps): React.JSX.Element;
 declare function AppTopBarTitle({
   className,
+  render,
   ref,
   ...props
-}: AppTopBarTitleProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: AppTopBarTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function AppTopBarTrailing({
   className,
   ...props
@@ -52,12 +62,21 @@ declare function AppTopBarButton({
   tooltip,
   ...props
 }: AppTopBarButtonProps): React.JSX.Element;
+declare function AppTopBarLink({
+  children,
+  className,
+  label,
+  render,
+  tooltip,
+  ...props
+}: AppTopBarLinkProps): React.JSX.Element;
 /**
  * Composable application top bar with stable leading, title, and trailing
  * slots. Icon controls use shared Toolbar roving focus and coordinated Tooltip
  * behavior; their fixed slots do not resize when state icons change. Render an
  * existing behavior-rich button through `Control` to retain those toolbar
- * semantics without rebuilding the control.
+ * semantics without rebuilding the control. Use `Link` for navigation so an
+ * `href` or router-provided link keeps native link semantics.
  */
 declare const AppTopBar: {
   Root: typeof AppTopBarRoot;
@@ -66,6 +85,7 @@ declare const AppTopBar: {
   Trailing: typeof AppTopBarTrailing;
   Control: typeof AppTopBarControl;
   Button: typeof AppTopBarButton;
+  Link: typeof AppTopBarLink;
 };
 //#endregion
-export { AppTopBar, AppTopBarButtonProps, AppTopBarControlProps, AppTopBarGroupProps, AppTopBarRootProps, AppTopBarTitleProps };
+export { AppTopBar, AppTopBarButtonProps, AppTopBarControlProps, AppTopBarGroupProps, AppTopBarLinkProps, AppTopBarRootProps, AppTopBarTitleProps };

package/dist/components/AppTopBar.js

@@ -1,9 +1,10 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
+import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Toolbar } from "./Toolbar.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/AppTopBar.tsx
 /**
 * Stable application-level toolbar with composable leading, title, and trailing
@@ -11,33 +12,38 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 function AppTopBarRoot({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsx(Toolbar.Root, {
-		className: cx("app-top-bar", className),
+		className: mergeBaseClassName("app-top-bar", className),
 		...props,
 		children
 	}) });
 }
 function AppTopBarLeading({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toolbar.Group, {
-		className: cx("app-top-bar__leading", className),
+		className: mergeBaseClassName("app-top-bar__leading", className),
 		...props
 	});
 }
-function AppTopBarTitle({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function AppTopBarTitle({ className, render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		className: cx("app-top-bar__title", className),
-		...props
+		props: {
+			...props,
+			"data-slot": "app-top-bar-title",
+			className: cx("app-top-bar__title", className)
+		}
 	});
 }
 function AppTopBarTrailing({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toolbar.Group, {
-		className: cx("app-top-bar__trailing", className),
+		className: mergeBaseClassName("app-top-bar__trailing", className),
 		...props
 	});
 }
 function AppTopBarControl({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toolbar.Button, {
-		className: cx("app-top-bar__button", className),
+		className: mergeBaseClassName("app-top-bar__button", className),
 		...props
 	});
 }
@@ -50,7 +56,8 @@ function AppTopBarButton({ children, className, disabled, label, render, tooltip
 				type: "button",
 				variant: "ghost",
 				color: "neutral",
-				size: "icon-sm",
+				size: "sm",
+				iconOnly: true,
 				disabled
 			}),
 			disabled,
@@ -63,12 +70,28 @@ function AppTopBarButton({ children, className, disabled, label, render, tooltip
 		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: tooltip })
 	}) })] });
 }
+function AppTopBarLink({ children, className, label, render, tooltip = label, ...props }) {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+		render: /* @__PURE__ */ jsx(Toolbar.Link, {
+			className: mergeBaseClassName("app-top-bar__button", className),
+			"aria-label": label,
+			render,
+			...props
+		}),
+		children
+	}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side: "bottom",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: tooltip })
+	}) })] });
+}
 /**
 * Composable application top bar with stable leading, title, and trailing
 * slots. Icon controls use shared Toolbar roving focus and coordinated Tooltip
 * behavior; their fixed slots do not resize when state icons change. Render an
 * existing behavior-rich button through `Control` to retain those toolbar
-* semantics without rebuilding the control.
+* semantics without rebuilding the control. Use `Link` for navigation so an
+* `href` or router-provided link keeps native link semantics.
 */
 const AppTopBar = {
 	Root: AppTopBarRoot,
@@ -76,7 +99,8 @@ const AppTopBar = {
 	Title: AppTopBarTitle,
 	Trailing: AppTopBarTrailing,
 	Control: AppTopBarControl,
-	Button: AppTopBarButton
+	Button: AppTopBarButton,
+	Link: AppTopBarLink
 };
 //#endregion
 export { AppTopBar };