@mcp-b/react-components 0.41.0 → 0.43.0

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

@@ -5,6 +5,7 @@ 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 { EmptyState } from "../foundations/EmptyState.js";
+import { LinkButton } from "../foundations/LinkButton.js";
 import { SearchField } from "../foundations/SearchField.js";
 import { AlertDialog } from "../foundations/AlertDialog.js";
 import * as React from "react";
@@ -108,7 +109,7 @@ function ThinkThreadStatusIndicators({ summary, className }) {
 * notes beside the parent Think agent because
 * `listThreads()`/`createThread()`/`deleteThread()` are app-owned.
 */
-function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onSelect, onDelete, className, title = "Recents", "aria-label": ariaLabel = "Threads", ref, ...props }) {
+function ThinkThreadPicker({ threads, renderThreadLink, createThreadLink, onSelect, onDelete, className, title = "Recents", "aria-label": ariaLabel = "Threads", ref, ...props }) {
 	const statusSummary = summarizeThinkThreads(threads);
 	const [query, setQuery] = React.useState("");
 	const [deleteOpen, setDeleteOpen] = React.useState(false);
@@ -156,6 +157,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",
@@ -257,16 +259,15 @@ function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onSelect, onDe
 					})]
 				})
 			}),
-			onCreate ? /* @__PURE__ */ jsx("div", {
+			createThreadLink ? /* @__PURE__ */ jsx("div", {
 				className: "think-thread-picker__footer",
-				children: /* @__PURE__ */ jsxs(Button, {
+				children: /* @__PURE__ */ jsxs(LinkButton, {
 					ref: createButtonRef,
-					type: "button",
 					variant: "normal",
 					color: "neutral",
 					size: "sm",
 					className: "think-thread-picker__create",
-					onClick: () => void onCreate(),
+					render: createThreadLink,
 					children: [/* @__PURE__ */ jsx(PlusIcon, {}), /* @__PURE__ */ jsx("span", { children: "New thread" })]
 				})
 			}) : null,

package/dist/components/agents-sdk/Workspace.d.ts

@@ -1,140 +1,2 @@
-import { a as WorkspaceMediaInfo, i as WorkspaceFileState, r as WorkspaceFileAssetResolver, t as WorkspaceFileAsset } from "../../WorkspaceFile-BLaFmMrt.js";
-import { DataTag, QueryKey, UnusedSkipTokenOptions } from "@tanstack/react-query";
-import { WorkspaceLike } from "@cloudflare/think";
-import { FileInfo, Workspace } from "@cloudflare/shell";
-
-//#region src/components/agents-sdk/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). */
-  source: WorkspaceSource;
-  /**
-   * Stable, non-secret identity for the endpoint/account/tenant/workspace
-   * behind `source`. Change it whenever that backing workspace changes.
-   */
-  sourceKey: string;
-  /** Root directory to list first. Defaults to "/". */
-  root?: string;
-  /** Route-owned selected file path. */
-  selectedPath: string | null;
-  /** Called when a non-link browser asks the app to select a file. */
-  onSelectedPathChange?: (path: string | null) => void;
-  /**
-   * 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.
-   * Keep this resolver semantically stable for a given `sourceKey`; function
-   * identity is intentionally excluded from serializable query keys.
-   */
-  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;
-  /** Ask the route owner to select a file. */
-  selectFile: (path: string | null) => void;
-  /** The selected file once its read settles; null while loading. */
-  selectedFile: WorkspaceFileState | null;
-  /** Initial root/info load or explicit refresh in flight. */
-  isLoading: boolean;
-  /** Directory and file paths with a query 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;
-}
-interface WorkspaceFileReadTarget {
-  requestedPath: string;
-  readPath: string;
-  info: FileInfo;
-  media: WorkspaceMediaInfo | null;
-}
-interface WorkspaceResolvedAsset {
-  asset: WorkspaceFileAsset;
-  media: WorkspaceMediaInfo;
-}
-type WorkspaceQueryOptions<TData, TQueryKey extends QueryKey> = UnusedSkipTokenOptions<TData, Error, TData, TQueryKey> & {
-  queryKey: DataTag<TQueryKey, TData, Error>;
-};
-/**
- * Source/root prefix for cache inspection, cancellation, or removal.
- * Do not broadly invalidate this prefix: active file queries must refresh in
- * stat → resolver → content order. Use a resource option key or `refresh()`.
- */
-declare function workspaceQueryKey(sourceKey: string, root: string): readonly ["workspace", string, string];
-type WorkspaceQueryKey = ReturnType<typeof workspaceQueryKey>;
-/** Directory-listing prefix for targeted cache invalidation. */
-declare function workspaceDirectoryQueryPrefix(sourceKey: string, root: string): readonly ["workspace", string, string, "directory"];
-/** Exact directory-listing key shared by query options and live hosts. */
-declare function workspaceDirectoryQueryKey(sourceKey: string, root: string, path: string): readonly ["workspace", string, string, "directory", string];
-type WorkspaceDirectoryQueryKey = ReturnType<typeof workspaceDirectoryQueryKey>;
-declare function workspaceFileQueryKey(sourceKey: string, root: string, requestedPath: string): readonly ["workspace", string, string, "file", string];
-type WorkspaceFileQueryKey = ReturnType<typeof workspaceFileQueryKey>;
-declare function workspaceFileVersion(target: WorkspaceFileReadTarget): {
-  readonly path: string;
-  readonly name: string;
-  readonly type: import("@cloudflare/shell").EntryType;
-  readonly mimeType: string;
-  readonly size: number;
-  readonly createdAt: number;
-  readonly updatedAt: number;
-  readonly target: string | null;
-};
-type WorkspaceFileVersion = ReturnType<typeof workspaceFileVersion>;
-type WorkspaceDirectoryQueryOptions = WorkspaceQueryOptions<readonly FileInfo[], WorkspaceDirectoryQueryKey>;
-type WorkspaceInfoQueryKey = readonly [...WorkspaceQueryKey, "info"];
-type WorkspaceInfoQueryOptions = WorkspaceQueryOptions<WorkspaceInfo | null, WorkspaceInfoQueryKey>;
-type WorkspaceFileStatQueryKey = readonly [...WorkspaceFileQueryKey, "stat"];
-type WorkspaceFileStatQueryOptions = WorkspaceQueryOptions<WorkspaceFileReadTarget, WorkspaceFileStatQueryKey>;
-type WorkspaceFileAssetQueryKey = readonly [...WorkspaceFileQueryKey, "asset", WorkspaceFileVersion];
-type WorkspaceFileAssetQueryOptions = WorkspaceQueryOptions<WorkspaceResolvedAsset | null, WorkspaceFileAssetQueryKey>;
-type WorkspaceTextFileQueryKey = readonly [...WorkspaceFileQueryKey, "text", WorkspaceFileVersion];
-type WorkspaceTextFileQueryOptions = WorkspaceQueryOptions<string | null, WorkspaceTextFileQueryKey>;
-type WorkspaceBinaryFileQueryKey = readonly [...WorkspaceFileQueryKey, "bytes", WorkspaceFileVersion, {
-  readonly maxInlineAssetBytes: number;
-}];
-type WorkspaceBinaryFileQueryOptions = WorkspaceQueryOptions<WorkspaceResolvedAsset | null, WorkspaceBinaryFileQueryKey>;
-/** Shared directory options for workspace components and route loaders. */
-declare function workspaceDirectoryQueryOptions(source: WorkspaceSource, sourceKey: string, root: string, path: string): WorkspaceDirectoryQueryOptions;
-/** Shared workspace-summary options for workspace components and route loaders. */
-declare function workspaceInfoQueryOptions(source: WorkspaceSource, sourceKey: string, root: string): WorkspaceInfoQueryOptions;
-/** Re-stat and validate a requested path before any resolver or file read. */
-declare function workspaceFileStatQueryOptions(source: WorkspaceSource, sourceKey: string, root: string, requestedPath: string): WorkspaceFileStatQueryOptions;
-/** Optional host asset resolution, scoped to the current stat result. */
-declare function workspaceFileAssetQueryOptions(sourceKey: string, root: string, target: WorkspaceFileReadTarget, resolveFileAsset: WorkspaceFileAssetResolver): WorkspaceFileAssetQueryOptions;
-/** Cached text read options, scoped to the validated stat result. */
-declare function workspaceTextFileQueryOptions(source: WorkspaceSource, sourceKey: string, root: string, target: WorkspaceFileReadTarget): WorkspaceTextFileQueryOptions;
-/** Active-file-only buffered asset options, scoped to the validated stat result. */
-declare function workspaceBinaryFileQueryOptions(source: WorkspaceSource, sourceKey: string, root: string, target: WorkspaceFileReadTarget, maxInlineAssetBytes: number): WorkspaceBinaryFileQueryOptions;
-/**
- * Headless state for browsing a Think workspace. TanStack Query owns remote
- * directory, metadata, resolver, text, and byte lifecycles; the route owns
- * selection, while this hook only keeps local tree expansion state.
- */
-declare function useWorkspace({
-  source,
-  sourceKey,
-  root,
-  selectedPath,
-  onSelectedPathChange,
-  resolveFileAsset,
-  maxInlineAssetBytes
-}: UseWorkspaceOptions): WorkspaceState;
-//#endregion
+import { A as workspaceQueryKey, C as workspaceBinaryFileQueryOptions, D as workspaceFileAssetQueryOptions, E as workspaceDirectoryQueryPrefix, O as workspaceFileStatQueryOptions, S as useWorkspace, T as workspaceDirectoryQueryOptions, _ as WorkspaceResolvedAsset, a as WorkspaceDirectoryQueryOptions, b as WorkspaceTextFileQueryKey, c as WorkspaceFileQueryKey, d as WorkspaceFileStatQueryOptions, f as WorkspaceFileVersion, g as WorkspaceQueryKey, h as WorkspaceInfoQueryOptions, i as WorkspaceDirectoryQueryKey, j as workspaceTextFileQueryOptions, k as workspaceInfoQueryOptions, l as WorkspaceFileReadTarget, m as WorkspaceInfoQueryKey, n as WorkspaceBinaryFileQueryKey, o as WorkspaceFileAssetQueryKey, p as WorkspaceInfo, r as WorkspaceBinaryFileQueryOptions, s as WorkspaceFileAssetQueryOptions, t as UseWorkspaceOptions, u as WorkspaceFileStatQueryKey, v as WorkspaceSource, w as workspaceDirectoryQueryKey, x as WorkspaceTextFileQueryOptions, y as WorkspaceState } from "../../Workspace-F3raHdYV.js";
 export { UseWorkspaceOptions, WorkspaceBinaryFileQueryKey, WorkspaceBinaryFileQueryOptions, WorkspaceDirectoryQueryKey, WorkspaceDirectoryQueryOptions, WorkspaceFileAssetQueryKey, WorkspaceFileAssetQueryOptions, WorkspaceFileQueryKey, WorkspaceFileReadTarget, WorkspaceFileStatQueryKey, WorkspaceFileStatQueryOptions, WorkspaceFileVersion, WorkspaceInfo, WorkspaceInfoQueryKey, WorkspaceInfoQueryOptions, WorkspaceQueryKey, WorkspaceResolvedAsset, WorkspaceSource, WorkspaceState, WorkspaceTextFileQueryKey, WorkspaceTextFileQueryOptions, useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions };

package/dist/components/agents-sdk/WorkspaceBrowser.d.ts

@@ -1,4 +1,4 @@
-import { WorkspaceState } from "./Workspace.js";
+import { y as WorkspaceState } from "../../Workspace-F3raHdYV.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/WorkspaceBrowser.d.ts

package/dist/components/agents-sdk/WorkspaceExplorer.d.ts

@@ -1,5 +1,5 @@
 import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
-import { WorkspaceState } from "./Workspace.js";
+import { y as WorkspaceState } from "../../Workspace-F3raHdYV.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/WorkspaceExplorer.d.ts

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-DWMKxX_u.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/WorkspaceExplorer.tsx
@@ -70,12 +70,12 @@ function WorkspaceExplorerContent({ workspace, navigation, className, title = "W
 		const surface = explorerRef.current;
 		const target = [...surface?.querySelectorAll(".file-tree__node") ?? []].find((candidate) => candidate.dataset.workspacePath === pending.path);
 		if (target) {
-			target.focus();
+			target.focus({ preventScroll: true });
 			pendingTreeFocusRef.current = null;
 			return;
 		}
 		if (isLoading || ancestors.some((path) => loadingPaths.has(path))) return;
-		(surface?.querySelector(".file-tree__node") ?? surface?.querySelector("[data-workspace-browser-focus-target]"))?.focus();
+		(surface?.querySelector(".file-tree__node") ?? surface?.querySelector("[data-workspace-browser-focus-target]"))?.focus({ preventScroll: true });
 		pendingTreeFocusRef.current = null;
 	}, [
 		entriesByDirectory,
@@ -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-DWMKxX_u.js";
 export { WorkspaceFileView };

package/dist/components/ai-sdk/AgentChatStartScreen.d.ts

@@ -1,2 +1,2 @@
-import { a as AgentChatStarterList, i as AgentChatStarterItem, n as AgentChatStartScreenProps, o as AgentChatStarterListProps, r as AgentChatStarter, s as AgentChatStarterProps, t as AgentChatStartScreen } from "../../AgentChatStartScreen-CO49yepa.js";
+import { a as AgentChatStarterList, i as AgentChatStarterItem, n as AgentChatStartScreenProps, o as AgentChatStarterListProps, r as AgentChatStarter, s as AgentChatStarterProps, t as AgentChatStartScreen } from "../../AgentChatStartScreen-Bkv7Avni.js";
 export { AgentChatStartScreen, AgentChatStartScreenProps, AgentChatStarter, AgentChatStarterItem, AgentChatStarterList, AgentChatStarterListProps, AgentChatStarterProps };

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

@@ -13,7 +13,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * the same live composer moves from the center of the empty view to the pinned
 * transcript position after the first message.
 */
-function AgentChatStartScreen({ heading = "What should we work on?", composer, composerTray, starters, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+function AgentChatStartScreen({ heading = "What should we work on?", composer, composerTray, lead, starters, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
 	const headingId = React.useId();
 	return /* @__PURE__ */ jsx("section", {
 		"data-slot": "agent-chat-start-screen",
@@ -37,7 +37,10 @@ function AgentChatStartScreen({ heading = "What should we work on?", composer, c
 						children: composerTray
 					}) : null]
 				})]
-			}), starters?.items.length ? /* @__PURE__ */ jsx("div", {
+			}), lead ? /* @__PURE__ */ jsx("div", {
+				className: "agent-chat-start-screen__lead",
+				children: lead
+			}) : starters?.items.length ? /* @__PURE__ */ jsx("div", {
 				className: "agent-chat-start-screen__starters",
 				children: /* @__PURE__ */ jsx(AgentChatStarterList, { ...starters })
 			}) : null]

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 { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
+
+//#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/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
 	});
 }