@mcp-b/react-components 0.40.0 → 0.42.0

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { n as ArrowDownIcon } from "../../icons-MmIXciMO.js";
+import { n as ArrowDownIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
 import { t as messageScrollerContract } from "../../message-scroller-C8cplcQO.js";
 import * as React from "react";
@@ -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/Plan.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { d as CheckIcon, i as ArrowRightIcon, v as DotIcon } from "../../icons-MmIXciMO.js";
+import { _ as DotIcon, d as CheckIcon, i as ArrowRightIcon } from "../../icons-CVFSeTJn.js";
 import { Popover } from "../foundations/Popover.js";
 import { t as ProgressRing } from "../../progress-ring-BEocM1e3.js";
 import * as React from "react";

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

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FileIcon, I as MonitorIcon, P as MicrophoneIcon, U as PlusIcon, X as SquareIcon, Y as SpinnerIcon, Z as StopIcon, a as ArrowUpIcon, d as CheckIcon, f as ChevronDownIcon, it as XIcon, nt as WarningIcon, rt as WrenchIcon, w as FolderIcon, z as PaperclipIcon } from "../../icons-MmIXciMO.js";
+import { $ as WarningIcon, B as PlusIcon, C as FolderIcon, I as PaperclipIcon, J as StopIcon, K as SpinnerIcon, N as MonitorIcon, S as FileIcon, a as ArrowUpIcon, d as CheckIcon, et as WrenchIcon, f as ChevronDownIcon, j as MicrophoneIcon, q as SquareIcon, tt as XIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { IconButton } from "../foundations/IconButton.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/ai-sdk/Queue.d.ts

@@ -24,9 +24,9 @@ interface QueueProps extends React.HTMLAttributes<HTMLDivElement> {
  * Use for agent work queues, todo groups, and attachment queues. Do not use it
  * for navigation or arbitrary card lists.
  *
- * Sigvelo changes: uses shared Collapsible, ScrollArea, Badge, and Button
- * components; normalizes Vercel-compatible `completed` status to `complete`;
- * maps all styling to Sigvelo queue CSS tokens/classes.
+ * Sigvelo changes: uses shared Collapsible, ScrollArea, and Button components;
+ * normalizes Vercel-compatible `completed` status to `complete`; maps all
+ * styling to Sigvelo queue CSS tokens/classes.
  *
  * Section triggers inherit Collapsible keyboard behavior. Status indicators
  * are decorative, so visible item text must carry the real meaning. Add new
@@ -84,7 +84,7 @@ declare function QueueSectionTrigger({
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
 interface QueueSectionLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Optional count rendered as a trailing badge. */
+  /** Optional item total shown as ordinary label text. */
   count?: number;
   label?: string;
   icon?: React.ReactNode;

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

@@ -1,8 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { C as FileIcon, d as CheckIcon, m as ChevronRightIcon, v as DotIcon } from "../../icons-MmIXciMO.js";
+import { S as FileIcon, _ as DotIcon, d as CheckIcon, p as ChevronRightIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
-import { Badge } from "../foundations/Badge.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,9 +14,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Use for agent work queues, todo groups, and attachment queues. Do not use it
 * for navigation or arbitrary card lists.
 *
-* Sigvelo changes: uses shared Collapsible, ScrollArea, Badge, and Button
-* components; normalizes Vercel-compatible `completed` status to `complete`;
-* maps all styling to Sigvelo queue CSS tokens/classes.
+* Sigvelo changes: uses shared Collapsible, ScrollArea, and Button components;
+* normalizes Vercel-compatible `completed` status to `complete`; maps all
+* styling to Sigvelo queue CSS tokens/classes.
 *
 * Section triggers inherit Collapsible keyboard behavior. Status indicators
 * are decorative, so visible item text must carry the real meaning. Add new
@@ -79,20 +78,12 @@ function QueueSectionTrigger({ className, children, ref, ...props }) {
 	});
 }
 function QueueSectionLabel({ className, children, count, label, icon, ref, ...props }) {
-	const content = children ?? (label ? `${count ?? ""} ${label}`.trim() : null);
+	const content = children ?? label;
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
 		className: cx("queue__section-label", className),
 		...props,
-		children: [
-			icon,
-			/* @__PURE__ */ jsx("span", { children: content }),
-			children !== void 0 && count !== void 0 ? /* @__PURE__ */ jsx(Badge, {
-				color: "neutral",
-				size: "sm",
-				children: count
-			}) : null
-		]
+		children: [icon, /* @__PURE__ */ jsxs("span", { children: [content, count === void 0 ? null : ` · ${count}`] })]
 	});
 }
 function QueueList({ className, children, ref, ...props }) {

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Y as SpinnerIcon } from "../../icons-MmIXciMO.js";
+import { K as SpinnerIcon } from "../../icons-CVFSeTJn.js";
 import { Activity, ActivityContent, ActivityText, ActivityTrigger } from "./Activity.js";
 import { MessageResponse } from "./Message.js";
 import * as React from "react";

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { A as LinkIcon, m as ChevronRightIcon } from "../../icons-MmIXciMO.js";
+import { D as LinkIcon, p as ChevronRightIcon } from "../../icons-CVFSeTJn.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Sources.tsx

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

@@ -76,11 +76,11 @@ declare function TaskItem({
   ref?: React.Ref<HTMLLIElement>;
 }): React.JSX.Element;
 interface TaskItemFileProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** The file name or path to display. Used to derive the language badge. */
+  /** The file name or path to display. */
   name?: string;
 }
 /**
- * Inline file reference badge used inside TaskItem content.
+ * Inline file reference used inside TaskItem content.
  */
 declare function TaskItemFile({
   className,

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { C as FileIcon, K as SearchIcon, m as ChevronRightIcon } from "../../icons-MmIXciMO.js";
+import { S as FileIcon, U as SearchIcon, p as ChevronRightIcon } from "../../icons-CVFSeTJn.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Task.tsx
@@ -104,7 +104,7 @@ function TaskItem({ className, children, ref, ...props }) {
 	});
 }
 /**
-* Inline file reference badge used inside TaskItem content.
+* Inline file reference used inside TaskItem content.
 */
 function TaskItemFile({ className, name, children, ref, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {

package/dist/components/extension/ChatGptSignInScreen.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Y as SpinnerIcon } from "../../icons-MmIXciMO.js";
+import { K as SpinnerIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
 import { t as ProviderLogo } from "../../provider-logos-zjZycgV6.js";
 import "react";
@@ -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/extension/CodexModelSelector.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { G as RefreshIcon, d as CheckIcon, f as ChevronDownIcon, l as BrainIcon, m as ChevronRightIcon } from "../../icons-MmIXciMO.js";
+import { H as RefreshIcon, d as CheckIcon, f as ChevronDownIcon, l as BrainIcon, p as ChevronRightIcon } from "../../icons-CVFSeTJn.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { Menu } from "../foundations/Menu.js";
 import { o as titleCase } from "../../format-DB2mX9DA.js";

package/dist/components/extension/ConversationTabPicker.js

@@ -1,4 +1,4 @@
-import { nt as WarningIcon } from "../../icons-MmIXciMO.js";
+import { $ as WarningIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
 import { Menu } from "../foundations/Menu.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";

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

@@ -21,7 +21,6 @@ interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof Avatar$
 interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof Avatar$1.Fallback> {}
 interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface AvatarGroupCountProps extends React.HTMLAttributes<HTMLDivElement> {}
-interface AvatarBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {}
 /**
  * Container for the avatar. Renders a `<span>` element.
  *
@@ -80,13 +79,6 @@ declare function AvatarGroupCount({
 }: AvatarGroupCountProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function AvatarBadge({
-  className,
-  ref,
-  ...props
-}: AvatarBadgeProps & {
-  ref?: React.Ref<HTMLSpanElement>;
-}): React.JSX.Element;
 /**
  * An avatar component for displaying user profile pictures with fallback support.
  * Shows initials or an icon when the image fails to load or isn't provided.
@@ -125,7 +117,6 @@ declare const Avatar: {
   Fallback: typeof AvatarFallback;
   Group: typeof AvatarGroup;
   GroupCount: typeof AvatarGroupCount;
-  Badge: typeof AvatarBadge;
 };
 //#endregion
-export { Avatar, AvatarBadgeProps, AvatarFallbackProps, AvatarGroupCountProps, AvatarGroupProps, AvatarImageProps, AvatarRootProps };
+export { Avatar, AvatarFallbackProps, AvatarGroupCountProps, AvatarGroupProps, AvatarImageProps, AvatarRootProps };

package/dist/components/foundations/Avatar.js

@@ -69,14 +69,6 @@ function AvatarGroupCount({ className, ref, ...props }) {
 		...props
 	});
 }
-function AvatarBadge({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		ref,
-		"data-slot": "avatar-badge",
-		className: mergeBaseClassName("avatar__badge", className),
-		...props
-	});
-}
 /**
 * An avatar component for displaying user profile pictures with fallback support.
 * Shows initials or an icon when the image fails to load or isn't provided.
@@ -114,8 +106,7 @@ const Avatar = {
 	Image: AvatarImage,
 	Fallback: AvatarFallback,
 	Group: AvatarGroup,
-	GroupCount: AvatarGroupCount,
-	Badge: AvatarBadge
+	GroupCount: AvatarGroupCount
 };
 //#endregion
 export { Avatar };

package/dist/components/foundations/Checkbox.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { d as CheckIcon } from "../../icons-MmIXciMO.js";
+import { d as CheckIcon } from "../../icons-CVFSeTJn.js";
 import { jsx } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 //#region src/components/foundations/Checkbox.tsx

package/dist/components/foundations/CheckboxGroup.js

@@ -62,6 +62,7 @@ import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group"
 function CheckboxGroupRoot({ className, layout = "stack", ref, ...props }) {
 	return /* @__PURE__ */ jsx(CheckboxGroup$1, {
 		ref,
+		"data-slot": "checkbox-group",
 		"data-layout": layout,
 		className: mergeBaseClassName("checkbox-group", className),
 		...props

package/dist/components/foundations/ContextMenu.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { d as CheckIcon, v as DotIcon } from "../../icons-MmIXciMO.js";
+import { _ as DotIcon, d as CheckIcon } from "../../icons-CVFSeTJn.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";

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

@@ -1,10 +1,8 @@
 import { a as ButtonVariant, i as ButtonSize, n as ButtonColor } from "../../Button-CZt3yywF.js";
-import { AnchorHTMLAttributes } from "react";
+import { AnchorHTMLAttributes, ReactElement } from "react";
 
 //#region src/components/foundations/LinkButton.d.ts
-interface LinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** Destination of the link. */
-  href: string;
+interface LinkButtonStyleProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "href"> {
   /**
    * The visual rendering style of the button chrome.
    * @default 'normal'
@@ -21,22 +19,26 @@ interface LinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
    */
   size?: ButtonSize;
 }
+type LinkButtonProps = LinkButtonStyleProps & ({
+  /** Destination for a native anchor. */href: string;
+  render?: never;
+} | {
+  /** App-authored router link whose destination remains type-checked by the app. */render: ReactElement;
+  href?: never;
+});
 /**
  * A link that wears Button chrome. Renders a plain anchor composed through the
  * {@link buttonVariants} seam, so the element stays a genuine link.
  *
- * `Button render={<a />}` gives the same visuals in React, but a link styled as
- * a button still needs a component wrapper for non-React hosts: Astro templates
- * cannot construct the React element the `render` prop expects (a `.astro` `<a />`
- * is an Astro vnode, not a React element, and `@astrojs/react` rejects it). This
- * component is that wrapper, so Astro can render a button-styled link by passing
- * plain props.
+ * Pass `href` for a native anchor or an app-authored router link through
+ * `render`. The latter preserves the consuming app's route-tree inference.
  */
 declare function LinkButton({
   variant,
   color,
   size,
   className,
+  render,
   ref,
   ...props
 }: LinkButtonProps & {

package/dist/components/foundations/LinkButton.js

@@ -1,27 +1,31 @@
 import { buttonVariants } from "./Button.js";
+import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/foundations/LinkButton.tsx
 /**
 * A link that wears Button chrome. Renders a plain anchor composed through the
 * {@link buttonVariants} seam, so the element stays a genuine link.
 *
-* `Button render={<a />}` gives the same visuals in React, but a link styled as
-* a button still needs a component wrapper for non-React hosts: Astro templates
-* cannot construct the React element the `render` prop expects (a `.astro` `<a />`
-* is an Astro vnode, not a React element, and `@astrojs/react` rejects it). This
-* component is that wrapper, so Astro can render a button-styled link by passing
-* plain props.
+* Pass `href` for a native anchor or an app-authored router link through
+* `render`. The latter preserves the consuming app's route-tree inference.
 */
-function LinkButton({ variant, color, size, className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("a", {
-		ref,
+function LinkButton({ variant, color, size, className, render, ref, ...props }) {
+	const linkProps = {
+		...props,
 		className: buttonVariants({
 			variant,
 			color,
 			size,
 			className
-		}),
-		...props
+		})
+	};
+	return render ? /* @__PURE__ */ jsx(NavigationLink, {
+		render,
+		ref,
+		...linkProps
+	}) : /* @__PURE__ */ jsx("a", {
+		ref,
+		...linkProps
 	});
 }
 //#endregion

package/dist/components/foundations/Menubar.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { d as CheckIcon, v as DotIcon } from "../../icons-MmIXciMO.js";
+import { _ as DotIcon, d as CheckIcon } from "../../icons-CVFSeTJn.js";
 import { buttonVariants } from "./Button.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/foundations/SearchField.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { K as SearchIcon } from "../../icons-MmIXciMO.js";
+import { U as SearchIcon } from "../../icons-CVFSeTJn.js";
 import { Field } from "./Field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/foundations/SearchField.tsx

package/dist/components/foundations/Select.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { a as ArrowUpIcon, d as CheckIcon, n as ArrowDownIcon } from "../../icons-MmIXciMO.js";
+import { a as ArrowUpIcon, d as CheckIcon, n as ArrowDownIcon } from "../../icons-CVFSeTJn.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/foundations/Stepper.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { Y as SpinnerIcon, d as CheckIcon } from "../../icons-MmIXciMO.js";
+import { K as SpinnerIcon, d as CheckIcon } from "../../icons-CVFSeTJn.js";
 import { Tabs } from "./Tabs.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/foundations/Toast.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { it as XIcon } from "../../icons-MmIXciMO.js";
+import { tt as XIcon } from "../../icons-CVFSeTJn.js";
 import { buttonVariants } from "./Button.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,2 +1,80 @@
-import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../../ToggleGroup-_pQMyHGM.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/icons.d.ts

@@ -1,2 +1,2 @@
-import { $ as StopIcon, A as InfoIcon, B as MoveToFrontIcon, C as EyeOffIcon, D as HashIcon, E as FolderOpenIcon, F as MessageSquareIcon, G as PlusIcon, H as PauseIcon, I as MicrophoneIcon, J as SearchIcon, K as QueueIcon, L as MinusIcon, M as LinkIcon, N as MaximizeIcon, O as IconProps, P as McpIcon, Q as SquareIcon, R as MonitorIcon, S as EyeIcon, T as FolderIcon, U as PencilIcon, V as PaperclipIcon, W as PlayIcon, X as SlackIcon, Y as SidebarIcon, Z as SpinnerIcon, _ as CopyIcon, a as ArrowUpIcon, at as WrenchIcon, b as DownloadIcon, c as BoxIcon, d as CalendarIcon, et as SunIcon, f as CheckIcon, g as CodeIcon, h as ChevronRightIcon, i as ArrowRightIcon, it as WarningIcon, j as KeyboardIcon, k as ImageIcon, l as BrainIcon, m as ChevronLeftIcon, n as ArrowDownIcon, nt as TerminalIcon, o as ArrowUpRightIcon, ot as XIcon, p as ChevronDownIcon, q as RefreshIcon, r as ArrowLeftIcon, rt as TrashIcon, s as BookmarkIcon, t as ArchiveIcon, tt as TargetIcon, u as BrandIconProps, v as DiscordIcon, w as FileIcon, x as EllipsisIcon, y as DotIcon, z as MoonIcon } from "../../icons-DwgNir1Q.js";
-export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, BrandIconProps, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, IconProps, ImageIcon, InfoIcon, KeyboardIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SlackIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TargetIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };
+import { $ as TerminalIcon, A as MaximizeIcon, B as PencilIcon, C as FileIcon, D as InfoIcon, E as IconProps, F as MonitorIcon, G as SearchIcon, H as PlusIcon, I as MoonIcon, J as SpinnerIcon, K as SidebarIcon, L as MoveToFrontIcon, M as MessageSquareIcon, N as MicrophoneIcon, O as KeyboardIcon, P as MinusIcon, Q as TargetIcon, R as PaperclipIcon, S as EyeOffIcon, T as FolderOpenIcon, U as QueueIcon, V as PlayIcon, W as RefreshIcon, X as StopIcon, Y as SquareIcon, Z as SunIcon, _ as DiscordIcon, a as ArrowUpIcon, b as EllipsisIcon, c as BoxIcon, d as CalendarIcon, et as TrashIcon, f as CheckIcon, g as CopyIcon, h as CodeIcon, i as ArrowRightIcon, j as McpIcon, k as LinkIcon, l as BrainIcon, m as ChevronRightIcon, n as ArrowDownIcon, nt as WrenchIcon, o as ArrowUpRightIcon, p as ChevronDownIcon, q as SlackIcon, r as ArrowLeftIcon, rt as XIcon, s as BookmarkIcon, t as ArchiveIcon, tt as WarningIcon, u as BrandIconProps, v as DotIcon, w as FolderIcon, x as EyeIcon, y as DownloadIcon, z as PauseIcon } from "../../icons-0corjfxR.js";
+export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, BrandIconProps, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, InfoIcon, KeyboardIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SlackIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TargetIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/components/foundations/icons.js

@@ -1,2 +1,2 @@
-import { $ as TargetIcon, A as LinkIcon, B as PauseIcon, C as FileIcon, D as ImageIcon, E as HashIcon, F as MinusIcon, G as RefreshIcon, H as PlayIcon, I as MonitorIcon, J as SlackIcon, K as SearchIcon, L as MoonIcon, M as McpIcon, N as MessageSquareIcon, O as InfoIcon, P as MicrophoneIcon, Q as SunIcon, R as MoveToFrontIcon, S as EyeOffIcon, T as FolderOpenIcon, U as PlusIcon, V as PencilIcon, W as QueueIcon, X as SquareIcon, Y as SpinnerIcon, Z as StopIcon, _ as DiscordIcon, a as ArrowUpIcon, b as EllipsisIcon, c as BoxIcon, d as CheckIcon, et as TerminalIcon, f as ChevronDownIcon, g as CopyIcon, h as CodeIcon, i as ArrowRightIcon, it as XIcon, j as MaximizeIcon, k as KeyboardIcon, l as BrainIcon, m as ChevronRightIcon, n as ArrowDownIcon, nt as WarningIcon, o as ArrowUpRightIcon, p as ChevronLeftIcon, q as SidebarIcon, r as ArrowLeftIcon, rt as WrenchIcon, s as BookmarkIcon, t as ArchiveIcon, tt as TrashIcon, u as CalendarIcon, v as DotIcon, w as FolderIcon, x as EyeIcon, y as DownloadIcon, z as PaperclipIcon } from "../../icons-MmIXciMO.js";
-export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, ImageIcon, InfoIcon, KeyboardIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SlackIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TargetIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };
+import { $ as WarningIcon, A as MessageSquareIcon, B as PlusIcon, C as FolderIcon, D as LinkIcon, E as KeyboardIcon, F as MoveToFrontIcon, G as SlackIcon, H as RefreshIcon, I as PaperclipIcon, J as StopIcon, K as SpinnerIcon, L as PauseIcon, M as MinusIcon, N as MonitorIcon, O as MaximizeIcon, P as MoonIcon, Q as TrashIcon, R as PencilIcon, S as FileIcon, T as InfoIcon, U as SearchIcon, V as QueueIcon, W as SidebarIcon, X as TargetIcon, Y as SunIcon, Z as TerminalIcon, _ as DotIcon, a as ArrowUpIcon, b as EyeIcon, c as BoxIcon, d as CheckIcon, et as WrenchIcon, f as ChevronDownIcon, g as DiscordIcon, h as CopyIcon, i as ArrowRightIcon, j as MicrophoneIcon, k as McpIcon, l as BrainIcon, m as CodeIcon, n as ArrowDownIcon, o as ArrowUpRightIcon, p as ChevronRightIcon, q as SquareIcon, r as ArrowLeftIcon, s as BookmarkIcon, t as ArchiveIcon, tt as XIcon, u as CalendarIcon, v as DownloadIcon, w as FolderOpenIcon, x as EyeOffIcon, y as EllipsisIcon, z as PlayIcon } from "../../icons-CVFSeTJn.js";
+export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, InfoIcon, KeyboardIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SlackIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TargetIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };

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

@@ -6,6 +6,11 @@ import { useRender } from "@base-ui/react/use-render";
 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"> {}
@@ -33,6 +38,7 @@ interface AppTopBarControlProps extends ToolbarButtonProps {
 declare function AppTopBarRoot({
   children,
   className,
+  titleAlign,
   ...props
 }: AppTopBarRootProps): React.JSX.Element;
 declare function AppTopBarLeading({

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

@@ -10,9 +10,10 @@ import { useRender } from "@base-ui/react/use-render";
 * Stable application-level toolbar with composable leading, title, and trailing
 * slots. Descendant buttons share Base UI's roving focus and tooltip provider.
 */
-function AppTopBarRoot({ children, className, ...props }) {
+function AppTopBarRoot({ children, className, titleAlign = "center", ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsx(Toolbar.Root, {
 		className: mergeBaseClassName("app-top-bar", className),
+		"data-title-align": titleAlign,
 		...props,
 		children
 	}) });

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

@@ -13,7 +13,7 @@ interface CommitProps extends Omit<React.ComponentProps<typeof Collapsible.Root>
  * summaries with expandable file details. Do not use it as a generic
  * accordion; use Collapsible or Accordion directly.
  *
- * Styling consumes Sigvelo surface, border, spacing, radius, badge, and focus
+ * Styling consumes Sigvelo surface, border, spacing, radius, status, and focus
  * tokens. Add shared metadata/file affordances here instead of forking commit
  * cards in apps.
  *
@@ -190,7 +190,7 @@ declare function CommitFile({
 }: CommitFileProps & {
   ref?: React.Ref<HTMLLIElement>;
 }): React.JSX.Element;
-interface CommitFileStatusProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+interface CommitFileStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
   status: CommitFileStatusValue;
 }
 declare function CommitFileStatus({