@mcp-b/react-components 0.41.0 → 0.42.0

package/dist/components/agents-sdk/ThinkRoutineLibrary.js

@@ -1,13 +1,13 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as WarningIcon, K as SpinnerIcon, y as EllipsisIcon, z as PlayIcon } from "../../icons-CVFSeTJn.js";
+import { K as SpinnerIcon, y as EllipsisIcon, z as PlayIcon } from "../../icons-CVFSeTJn.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { Menu } from "../foundations/Menu.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
+import { AlertDialog } from "../foundations/AlertDialog.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
-import { AlertDialog } from "../foundations/AlertDialog.js";
 import { ThinkRoutineBrowser } from "./ThinkRoutineBrowser.js";
 import { ThinkRoutineDetail } from "./ThinkRoutineDetail.js";
 import * as React from "react";
@@ -83,7 +83,7 @@ function RoutineTopBarActions({ appBarActions, busy, onDelete, editLink, onRun,
 * and `ThinkRoutineRuns`; consumers compose `ThinkRoutineForm` in their create
 * route and may also use these surfaces independently.
 */
-function ThinkRoutineLibrary({ appBarActions, appBarLeading, className, createRoutineLink, error: catalogError, onDeleteRoutine, onRoutineEnabledChange, onRunRoutine, renderEditRoutineLink, renderRoutineLink, renderRoutineDetail, renderRunLink, ref, routines, selectedRoutineId, showOwner = true, ...props }) {
+function ThinkRoutineLibrary({ bar, className, createRoutineLink, error: catalogError, onDeleteRoutine, onRoutineEnabledChange, onRunRoutine, renderEditRoutineLink, renderRoutineLink, renderRoutineDetail, renderRunLink, ref, routines, selectedRoutineId, showOwner = true, ...props }) {
 	const [busy, setBusy] = React.useState(false);
 	const [announcement, setAnnouncement] = React.useState("");
 	const [actionError, setActionError] = React.useState(null);
@@ -108,73 +108,65 @@ function ThinkRoutineLibrary({ appBarActions, appBarLeading, className, createRo
 		renderRunLink: renderRunLink ? (run) => renderRunLink(selectedRoutine, run) : void 0,
 		onEnabledChange: onRoutineEnabledChange ? (enabled) => void perform(() => onRoutineEnabledChange(selectedRoutine, enabled), `${selectedRoutine.name} ${enabled ? "activated" : "paused"}.`) : void 0
 	} : void 0;
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(ResponsiveSidebarShell, {
 		ref,
 		className: cx("think-routine-library", className),
 		...props,
-		children: [
-			catalogError || actionError ? /* @__PURE__ */ jsxs("div", {
-				className: "think-routine-library__error",
-				role: "alert",
-				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: catalogError || actionError })]
-			}) : null,
-			/* @__PURE__ */ jsx(ResponsiveSidebarShell, {
-				className: "think-routine-library__layout",
-				sidebarLabel: "schedules",
-				showMainLabel: "Show selected schedule",
-				topBarProps: { "aria-label": "Schedule controls" },
-				topBarLeading: appBarLeading,
-				topBarTitle: selectedRoutine?.name ?? "Schedules",
-				compactTitleTrigger: selectedRoutine ? /* @__PURE__ */ jsx("span", { children: selectedRoutine.name }) : void 0,
-				topBarTrailing: /* @__PURE__ */ jsx(RoutineTopBarActions, {
-					appBarActions,
-					busy,
-					routineName: selectedRoutine?.name ?? "schedule",
-					editLink: selectedRoutine && renderEditRoutineLink ? renderEditRoutineLink(selectedRoutine) : void 0,
-					onRun: selectedRoutine && onRunRoutine ? () => void perform(() => onRunRoutine(selectedRoutine), `Started ${selectedRoutine.name}.`) : void 0,
-					onDelete: selectedRoutine && onDeleteRoutine ? () => void perform(() => onDeleteRoutine(selectedRoutine), `Deleted ${selectedRoutine.name}.`) : void 0
-				}),
-				sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkRoutineBrowser, {
-					routines,
-					selectedRoutineId,
-					showOwner,
-					renderRoutineLink,
-					createRoutineLink,
-					onRoutineLinkClick: (event) => {
-						if (!isPlainPrimaryLinkActivation(event)) return;
-						closeSidebarOnCompact();
-					}
-				}),
-				children: /* @__PURE__ */ jsx("main", {
-					className: "think-routine-library__main",
-					children: detailProps ? /* @__PURE__ */ jsx(React.Fragment, { children: renderRoutineDetail ? renderRoutineDetail({
-						...detailProps,
-						defaultDetail: /* @__PURE__ */ jsx(ThinkRoutineDetail, {
-							...detailProps,
-							showOwner
-						})
-					}) : /* @__PURE__ */ jsx(ThinkRoutineDetail, {
-						...detailProps,
-						showOwner
-					}) }, detailProps.routine.id) : /* @__PURE__ */ jsx(EmptyState, {
-						className: "think-routine-library__empty-detail",
-						title: selectedRoutineId ? "Schedule unavailable" : routines.length ? "Select a schedule" : "No schedules yet",
-						description: routines.length ? "Select an available schedule." : "Create a schedule to run recurring Think prompts.",
-						children: !routines.length && createRoutineLink ? /* @__PURE__ */ jsx(NavigationLink, {
-							render: createRoutineLink,
-							className: buttonVariants({ color: "primary" }),
-							children: "Create schedule"
-						}) : null
-					})
+		sidebarLabel: "schedules",
+		showMainLabel: "Show selected schedule",
+		error: catalogError || actionError || void 0,
+		bar: {
+			...bar,
+			label: "Schedule controls",
+			title: bar?.title ?? selectedRoutine?.name ?? "Schedules",
+			compactTitleTrigger: selectedRoutine ? /* @__PURE__ */ jsx("span", { children: selectedRoutine.name }) : void 0,
+			actions: /* @__PURE__ */ jsx(RoutineTopBarActions, {
+				appBarActions: bar?.actions,
+				busy,
+				routineName: selectedRoutine?.name ?? "schedule",
+				editLink: selectedRoutine && renderEditRoutineLink ? renderEditRoutineLink(selectedRoutine) : void 0,
+				onRun: selectedRoutine && onRunRoutine ? () => void perform(() => onRunRoutine(selectedRoutine), `Started ${selectedRoutine.name}.`) : void 0,
+				onDelete: selectedRoutine && onDeleteRoutine ? () => void perform(() => onDeleteRoutine(selectedRoutine), `Deleted ${selectedRoutine.name}.`) : void 0
+			})
+		},
+		sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkRoutineBrowser, {
+			routines,
+			selectedRoutineId,
+			showOwner,
+			renderRoutineLink,
+			createRoutineLink,
+			onRoutineLinkClick: (event) => {
+				if (!isPlainPrimaryLinkActivation(event)) return;
+				closeSidebarOnCompact();
+			}
+		}),
+		children: [/* @__PURE__ */ jsx("main", {
+			className: "think-routine-library__main",
+			children: detailProps ? /* @__PURE__ */ jsx(React.Fragment, { children: renderRoutineDetail ? renderRoutineDetail({
+				...detailProps,
+				defaultDetail: /* @__PURE__ */ jsx(ThinkRoutineDetail, {
+					...detailProps,
+					showOwner
 				})
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "think-routine-library__status sigvelo-visually-hidden",
-				role: "status",
-				"aria-atomic": "true",
-				children: announcement
+			}) : /* @__PURE__ */ jsx(ThinkRoutineDetail, {
+				...detailProps,
+				showOwner
+			}) }, detailProps.routine.id) : /* @__PURE__ */ jsx(EmptyState, {
+				className: "think-routine-library__empty-detail",
+				title: selectedRoutineId ? "Schedule unavailable" : routines.length ? "Select a schedule" : "No schedules yet",
+				description: routines.length ? "Select an available schedule." : "Create a schedule to run recurring Think prompts.",
+				children: !routines.length && createRoutineLink ? /* @__PURE__ */ jsx(NavigationLink, {
+					render: createRoutineLink,
+					className: buttonVariants({ color: "primary" }),
+					children: "Create schedule"
+				}) : null
 			})
-		]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "think-routine-library__status sigvelo-visually-hidden",
+			role: "status",
+			"aria-atomic": "true",
+			children: announcement
+		})]
 	});
 }
 //#endregion

package/dist/components/agents-sdk/ThinkThreadPicker.js

@@ -4,9 +4,9 @@ import { Button, buttonVariants } from "../foundations/Button.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
+import { AlertDialog } from "../foundations/AlertDialog.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { SearchField } from "../foundations/SearchField.js";
-import { AlertDialog } from "../foundations/AlertDialog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkThreadPicker.tsx
@@ -156,6 +156,7 @@ function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onSelect, onDe
 		ref,
 		className: cx("think-thread-picker", className),
 		...props,
+		"data-recipe": "fill-host",
 		children: [
 			/* @__PURE__ */ jsxs("header", {
 				className: "think-thread-picker__header",

package/dist/components/agents-sdk/WorkspaceExplorer.js

@@ -2,7 +2,7 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { a as WorkspaceNavigationRestorationBoundary, n as WorkspaceNavigationProvider, o as useRequiredWorkspaceNavigationRestoration, r as resolveWorkspaceLink } from "../../WorkspaceLink-DtH66bAY.js";
 import { WorkspaceBrowser } from "./WorkspaceBrowser.js";
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-D0yFwoDr.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-DwdXiKku.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/WorkspaceExplorer.tsx
@@ -89,6 +89,7 @@ function WorkspaceExplorerContent({ workspace, navigation, className, title = "W
 	return /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(explorerRef, ref),
 		className: cx("workspace-explorer", className),
+		"data-recipe": "fill-host",
 		...props,
 		children: fileDestination ? /* @__PURE__ */ jsx(WorkspaceNavigationProvider, {
 			root: workspace.root,

package/dist/components/agents-sdk/WorkspaceFileView.js

@@ -1,2 +1,2 @@
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-D0yFwoDr.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-DwdXiKku.js";
 export { WorkspaceFileView };

package/dist/components/ai-sdk/MessageScroller.js

@@ -17,7 +17,8 @@ function MessageScroller({ className, ...props }) {
 	return /* @__PURE__ */ jsx(MessageScroller$1.Root, {
 		"data-slot": messageScrollerContract.root.slot,
 		className: cx(messageScrollerContract.root.className, className),
-		...props
+		...props,
+		"data-recipe": "fill-host"
 	});
 }
 function MessageScrollerViewport({ "aria-label": ariaLabel = messageScrollerContract.viewport.ariaLabel, className, role = messageScrollerContract.viewport.role, tabIndex = messageScrollerContract.viewport.tabIndex, ...props }) {

package/dist/components/ai-sdk/MessageScrollerVirtual.js

@@ -77,6 +77,7 @@ function VirtualMessageScroller({ items, getItemKey, renderItem, estimateSize =
 		"data-slot": messageScrollerContract.root.slot,
 		className: cx(messageScrollerContract.root.className, className),
 		...props,
+		"data-recipe": "fill-host",
 		children: [/* @__PURE__ */ jsx("div", {
 			ref: viewportRef,
 			"aria-label": messageScrollerContract.viewport.ariaLabel,

package/dist/components/ai-sdk/PromptInput.js

@@ -26,21 +26,17 @@ function useAttachmentStore() {
 		revokeFileUrls(filesRef.current);
 	}, []);
 	const add = React.useCallback((incomingFiles) => {
-		const incoming = Array.from(incomingFiles);
-		setFiles((current) => [...current, ...incoming.map(fileToPart)]);
+		const incoming = Array.from(incomingFiles).map(fileToPart);
+		setFiles((current) => [...current, ...incoming]);
 	}, []);
 	const remove = React.useCallback((id) => {
-		setFiles((current) => {
-			const found = current.find((file) => file.id === id);
-			if (found?.url) URL.revokeObjectURL(found.url);
-			return current.filter((file) => file.id !== id);
-		});
+		const found = filesRef.current.find((file) => file.id === id);
+		if (found) revokeFileObjectUrl(found);
+		setFiles((current) => current.filter((file) => file.id !== id));
 	}, []);
 	const clear = React.useCallback(() => {
-		setFiles((current) => {
-			revokeFileUrls(current);
-			return [];
-		});
+		revokeFileUrls(filesRef.current);
+		setFiles([]);
 	}, []);
 	return React.useMemo(() => ({
 		add,
@@ -1207,17 +1203,27 @@ function defaultSubmitLabel(status) {
 		default: return "Send message";
 	}
 }
+const fileObjectUrls = /* @__PURE__ */ new WeakMap();
 function fileToPart(file) {
-	return {
+	const objectUrl = URL.createObjectURL(file);
+	const part = {
 		id: createId(),
 		type: "file",
 		filename: file.name,
 		mediaType: file.type,
-		url: URL.createObjectURL(file)
+		url: objectUrl
 	};
+	fileObjectUrls.set(part, objectUrl);
+	return part;
+}
+function revokeFileObjectUrl(file) {
+	const objectUrl = fileObjectUrls.get(file) ?? (file.url.startsWith("blob:") ? file.url : void 0);
+	if (!objectUrl) return;
+	fileObjectUrls.delete(file);
+	URL.revokeObjectURL(objectUrl);
 }
 function revokeFileUrls(files) {
-	for (const file of files) if (file.url.startsWith("blob:")) URL.revokeObjectURL(file.url);
+	for (const file of files) revokeFileObjectUrl(file);
 }
 async function resolveSubmittedFile(file) {
 	const { id: _id, ...part } = file;

package/dist/components/extension/ChatGptSignInScreen.js

@@ -23,6 +23,7 @@ function ChatGptSignInScreen({ busy = false, control, error, label = "Sign in wi
 		onPointerLeave: handlePointerLeave,
 		onPointerMove: handlePointerMove,
 		...props,
+		"data-recipe": "fill-host",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "chatgpt-sign-in__panel",
 			children: [

package/dist/components/foundations/ToggleGroup.d.ts

@@ -1,2 +1,80 @@
-import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../../ToggleGroup-BrQZOQn_.js";
+import { r as ToggleVariantsOptions } from "../../Toggle-DLrIf5YH.js";
+import * as React from "react";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+
+//#region src/components/foundations/ToggleGroup.d.ts
+type ToggleGroupSize = ToggleVariantsOptions["size"];
+type ToggleGroupProps<Value extends string = string> = ToggleGroup$1.Props<Value> & {
+  variant?: ToggleVariantsOptions["variant"];
+  /**
+   * The size of the toggle group.
+   * @default 'md'
+   */
+  size?: ToggleGroupSize;
+  spacing?: number;
+  /**
+   * Draws one shared thumb that slides between segments rather than lighting up
+   * each item's own background. This is the permission-mode / view-switch
+   * control; it is a presentation of this group, not a separate component.
+   *
+   * Only meaningful for single selection — a sliding thumb cannot be in two
+   * places, so a `multiple` group ignores it.
+   */
+  segmented?: boolean;
+};
+interface ToggleGroupItemProps extends React.ComponentPropsWithRef<typeof Toggle>, Omit<ToggleVariantsOptions, "className"> {}
+/**
+ * A toggle group component for selecting one or multiple options.
+ *
+ * @example
+ * ```tsx
+ * // Single selection (defaultValue is an array)
+ * <ToggleGroup.Root defaultValue={["center"]}>
+ *   <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
+ * </ToggleGroup.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple selection
+ * <ToggleGroup.Root multiple defaultValue={["bold", "italic"]}>
+ *   <ToggleGroup.Item value="bold">Bold</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="italic">Italic</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="underline">Underline</ToggleGroup.Item>
+ * </ToggleGroup.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toggle-group | Base UI Toggle Group}
+ */
+declare function ToggleGroupRoot<Value extends string>({
+  size,
+  spacing,
+  segmented,
+  variant,
+  className,
+  children,
+  style,
+  ref,
+  ...props
+}: ToggleGroupProps<Value>): React.JSX.Element;
+/**
+ * A single toggle item within a ToggleGroup.
+ */
+declare function ToggleGroupItem({
+  className,
+  variant,
+  size,
+  ref,
+  ...props
+}: ToggleGroupItemProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare const ToggleGroup: {
+  Root: typeof ToggleGroupRoot;
+  Item: typeof ToggleGroupItem;
+};
+//#endregion
 export { ToggleGroup, ToggleGroupItemProps, ToggleGroupProps };

package/dist/components/foundations/ToggleGroup.js

@@ -3,8 +3,8 @@ import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { toggleVariants } from "./Toggle.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 //#region src/components/foundations/ToggleGroup.tsx
 /**
 * Tracks the pressed item's box so the segmented thumb can slide to it instead

package/dist/components/foundations/Toolbar.d.ts

@@ -1,2 +1,152 @@
-import { a as ToolbarLinkProps, i as ToolbarInputProps, n as ToolbarButtonProps, o as ToolbarRootProps, r as ToolbarGroupProps, s as ToolbarSeparatorProps, t as Toolbar } from "../../Toolbar-CBOseBQr.js";
+import * as React from "react";
+import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+
+//#region src/components/foundations/Toolbar.d.ts
+/**
+ * Props for the Toolbar.Root component.
+ */
+interface ToolbarRootProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Root> {}
+/**
+ * Props for the Toolbar.Button component.
+ */
+interface ToolbarButtonProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Button> {
+  /** Skip the default Button chrome when a composed control owns its visuals. */
+  unstyled?: boolean;
+}
+/**
+ * Props for the Toolbar.Link component.
+ */
+interface ToolbarLinkProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Link> {
+  /** Skip the default Button chrome when a composed link owns its visuals. */
+  unstyled?: boolean;
+}
+/**
+ * Props for the Toolbar.Group component.
+ */
+interface ToolbarGroupProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Group> {}
+/**
+ * Props for the Toolbar.Separator component.
+ */
+interface ToolbarSeparatorProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Separator> {}
+/**
+ * Props for the Toolbar.Input component.
+ */
+interface ToolbarInputProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Input> {}
+/**
+ * Container for grouping toolbar buttons and controls.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar.Root>
+ *   <Toolbar.Button>Bold</Toolbar.Button>
+ *   <Toolbar.Button>Italic</Toolbar.Button>
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button>Align Left</Toolbar.Button>
+ * </Toolbar.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar}
+ */
+declare function ToolbarRoot({
+  className,
+  ref,
+  ...props
+}: ToolbarRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A clickable button within the toolbar.
+ */
+declare function ToolbarButton({
+  unstyled,
+  className,
+  ref,
+  ...props
+}: ToolbarButtonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * A link element within the toolbar.
+ */
+declare function ToolbarLink({
+  unstyled,
+  className,
+  ref,
+  ...props
+}: ToolbarLinkProps & {
+  ref?: React.Ref<HTMLAnchorElement>;
+}): React.JSX.Element;
+/**
+ * Groups toolbar items together.
+ */
+declare function ToolbarGroup({
+  className,
+  ref,
+  ...props
+}: ToolbarGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Visual separator between toolbar sections.
+ */
+declare function ToolbarSeparator({
+  className,
+  ref,
+  ...props
+}: ToolbarSeparatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Input element within the toolbar.
+ */
+declare function ToolbarInput({
+  className,
+  ref,
+  ...props
+}: ToolbarInputProps & {
+  ref?: React.Ref<HTMLInputElement>;
+}): React.JSX.Element;
+/**
+ * A container for grouping buttons and controls.
+ * Provides keyboard navigation between items.
+ *
+ * @example
+ * ```tsx
+ * // Text formatting toolbar
+ * <Toolbar.Root>
+ *   <Toolbar.Group>
+ *     <Toolbar.Button>Bold</Toolbar.Button>
+ *     <Toolbar.Button>Italic</Toolbar.Button>
+ *     <Toolbar.Button>Underline</Toolbar.Button>
+ *   </Toolbar.Group>
+ *   <Toolbar.Separator />
+ *   <Toolbar.Group>
+ *     <Toolbar.Button>Left</Toolbar.Button>
+ *     <Toolbar.Button>Center</Toolbar.Button>
+ *     <Toolbar.Button>Right</Toolbar.Button>
+ *   </Toolbar.Group>
+ * </Toolbar.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Vertical toolbar
+ * <Toolbar.Root orientation="vertical">
+ *   <Toolbar.Button>Item 1</Toolbar.Button>
+ *   <Toolbar.Button>Item 2</Toolbar.Button>
+ *   <Toolbar.Button>Item 3</Toolbar.Button>
+ * </Toolbar.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar}
+ */
+declare const Toolbar: {
+  Root: typeof ToolbarRoot;
+  Button: typeof ToolbarButton;
+  Link: typeof ToolbarLink;
+  Group: typeof ToolbarGroup;
+  Separator: typeof ToolbarSeparator;
+  Input: typeof ToolbarInput;
+};
+//#endregion
 export { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarInputProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps };

package/dist/components/general-purpose/AppFrame.js

@@ -6,6 +6,7 @@ function Root({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: cx("app-frame", className),
+		"data-recipe": "fill-host",
 		...props
 	});
 }

package/dist/components/general-purpose/AppTopBar.d.ts

@@ -1,2 +1,97 @@
-import { a as AppTopBarLinkProps, i as AppTopBarGroupProps, n as AppTopBarButtonProps, o as AppTopBarRootProps, r as AppTopBarControlProps, s as AppTopBarTitleProps, t as AppTopBar } from "../../AppTopBar-ZdgmB_Lu.js";
+import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps } from "../foundations/Toolbar.js";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/general-purpose/AppTopBar.d.ts
+interface AppTopBarRootProps extends React.ComponentPropsWithoutRef<typeof Toolbar.Root> {
+  /** Accessible name describing the controls in this application bar. */
+  "aria-label": string;
+  /**
+   * Where the title sits. An application bar centres it between the control
+   * groups; a panel header labels its leading edge instead.
+   */
+  titleAlign?: "center" | "start";
+}
+interface AppTopBarGroupProps extends ToolbarGroupProps {}
+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 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.
+ */
+declare function AppTopBarRoot({
+  children,
+  className,
+  titleAlign,
+  ...props
+}: AppTopBarRootProps): React.JSX.Element;
+declare function AppTopBarLeading({
+  className,
+  ...props
+}: AppTopBarGroupProps): React.JSX.Element;
+declare function AppTopBarTitle({
+  className,
+  render,
+  ref,
+  ...props
+}: AppTopBarTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function AppTopBarTrailing({
+  className,
+  ...props
+}: AppTopBarGroupProps): React.JSX.Element;
+declare function AppTopBarControl({
+  className,
+  ...props
+}: AppTopBarControlProps): React.JSX.Element;
+declare function AppTopBarButton({
+  children,
+  className,
+  disabled,
+  label,
+  render,
+  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. Use `Link` for navigation so an
+ * `href` or router-provided link keeps native link semantics.
+ */
+declare const AppTopBar: {
+  Root: typeof AppTopBarRoot;
+  Leading: typeof AppTopBarLeading;
+  Title: typeof AppTopBarTitle;
+  Trailing: typeof AppTopBarTrailing;
+  Control: typeof AppTopBarControl;
+  Button: typeof AppTopBarButton;
+  Link: typeof AppTopBarLink;
+};
+//#endregion
 export { AppTopBar, AppTopBarButtonProps, AppTopBarControlProps, AppTopBarGroupProps, AppTopBarLinkProps, AppTopBarRootProps, AppTopBarTitleProps };

package/dist/components/general-purpose/PricingBillingToggle.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import { Switch } from "../foundations/Switch.js";
+import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/PricingBillingToggle.tsx
 /** Controlled billing-period selector composed from the shared Switch or ToggleGroup. */

package/dist/components/general-purpose/PricingUsageCalculator.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Separator } from "../foundations/Separator.js";
 import { Card } from "../foundations/Card.js";
-import { Slider } from "../foundations/Slider.js";
 import { Progress } from "../foundations/Progress.js";
+import { Slider } from "../foundations/Slider.js";
 import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";