@bysages/react 0.3.0 → 0.4.0

package/dist/components/virtual-list/index.mjs

@@ -1,13 +1,17 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/components/virtual-list/index.tsx
+function toCssLength(length) {
+	return typeof length === "number" ? `${length}px` : length;
+}
 /** A ledger that only mounts the rows on stage: the viewport keeps its
 * scroll length by a spacer sized from the row height, the rows
 * themselves are positioned against it — a ten-thousand-row list
 * costs the DOM a window, not the ledger. */
-function VirtualList({ items, itemHeight = 40, height = 320, renderItem, ...rest }) {
+function VirtualListImpl({ items, itemHeight = 40, height = 320, renderItem, ...rest }) {
 	injectComponentStyle("virtual-list");
 	const viewport = useRef(null);
 	const virtualizer = useVirtualizer({
@@ -19,34 +23,29 @@ function VirtualList({ items, itemHeight = 40, height = 320, renderItem, ...rest
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		ref: viewport,
+		tabIndex: 0,
 		"data-scope": "virtual-list",
 		"data-part": "root",
 		style: {
 			...rest.style,
-			blockSize: typeof height === "number" ? `${height}px` : height
+			"--bs-virtual-list-height": toCssLength(height)
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			"data-scope": "virtual-list",
 			"data-part": "inner",
-			style: {
-				blockSize: virtualizer.getTotalSize(),
-				position: "relative"
-			},
+			style: { "--bs-virtual-list-total": `${virtualizer.getTotalSize()}px` },
 			children: virtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx("div", {
 				"data-scope": "virtual-list",
 				"data-part": "row",
 				style: {
-					position: "absolute",
-					top: 0,
-					insetInlineStart: 0,
-					inlineSize: "100%",
-					transform: `translateY(${row.start}px)`,
-					blockSize: row.size
+					"--bs-virtual-list-row-start": `${row.start}px`,
+					"--bs-virtual-list-row-size": `${row.size}px`
 				},
 				children: renderItem?.(items[row.index], row.index)
 			}, String(row.key)))
 		})
 	});
 }
+const VirtualList = withSelfRoot(VirtualListImpl);
 //#endregion
 export { VirtualList };

package/dist/components/watermark/index.d.mts

@@ -12,5 +12,8 @@ export interface WatermarkProps extends HTMLAttributes<HTMLDivElement> {
  * density) and the marks layer repeats it over the children. The seal
  * redraws itself when a prop turns — and it never takes a pointer.
  */
-export declare function Watermark({ content, opacity, rotate, fontSize, children, ...rest }: WatermarkProps): import("react").JSX.Element;
+declare function WatermarkImpl({ content, opacity, rotate, fontSize, children, ...rest }: WatermarkProps): import("react").JSX.Element;
+export declare const Watermark: typeof WatermarkImpl & {
+  Root: typeof WatermarkImpl;
+};
 //#endregion

package/dist/components/watermark/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
@@ -17,7 +18,7 @@ function toPx(size) {
 * density) and the marks layer repeats it over the children. The seal
 * redraws itself when a prop turns — and it never takes a pointer.
 */
-function Watermark({ content, opacity = .06, rotate = -20, fontSize = "0.875rem", children, ...rest }) {
+function WatermarkImpl({ content, opacity = .06, rotate = -20, fontSize = "0.875rem", children, ...rest }) {
 	injectComponentStyle("watermark");
 	const [root, setRoot] = useState(null);
 	const [tile, setTile] = useState("");
@@ -72,9 +73,10 @@ function Watermark({ content, opacity = .06, rotate = -20, fontSize = "0.875rem"
 			"data-scope": "watermark",
 			"data-part": "marks",
 			"aria-hidden": "true",
-			style: { backgroundImage: tile }
+			style: { "--bs-watermark-image": tile }
 		})]
 	});
 }
+const Watermark = withSelfRoot(WatermarkImpl);
 //#endregion
 export { Watermark };

package/dist/family-DE_GQeeM.mjs

@@ -0,0 +1,9 @@
+//#region src/internal/family.ts
+/** Gives a single-component family the same callable + Root surface. */
+function withSelfRoot(component) {
+	const family = component;
+	family.Root = component;
+	return family;
+}
+//#endregion
+export { withSelfRoot as t };

package/dist/icon-BALgGtNK.mjs

@@ -0,0 +1,18 @@
+import { getIcon } from "@bysages/core/icons";
+import { jsx } from "react/jsx-runtime";
+//#region src/internal/icon.tsx
+/** Render a curated registry icon as a bare svg element — the components
+* own default icons. No span shell: the part rules size the svg directly.
+* Extra body appends after the icon's own body, for composed marks. */
+function iconNode(name, attrs = {}, extraBody = "") {
+	const icon = getIcon(name);
+	if (!icon) throw new Error(`Unknown icon "${name}" in the curated core registry`);
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: `0 0 ${icon.width} ${icon.height}`,
+		"aria-hidden": "true",
+		...attrs,
+		dangerouslySetInnerHTML: { __html: icon.body + extraBody }
+	});
+}
+//#endregion
+export { iconNode as t };

package/dist/id-C37UYLwJ.mjs

@@ -0,0 +1,13 @@
+import { useId } from "react";
+//#region src/internal/id.ts
+/** Zag composes owned-part ids with separators, so React's generated id
+* is narrowed to characters that survive both markup and selectors. */
+const UNSAFE_ID_CHARACTERS = /[^a-zA-Z0-9_-]/g;
+/** Generates an SSR-stable machine base id while honoring an explicit id. */
+function useElementId(scope, props = {}) {
+	const generated = useId();
+	const explicit = props.id;
+	return typeof explicit === "string" && explicit ? explicit : `bs-${scope}-${generated.replace(UNSAFE_ID_CHARACTERS, "-")}`;
+}
+//#endregion
+export { useElementId as t };

package/dist/image-viewer-Cf6thHax.mjs

@@ -0,0 +1,141 @@
+import { t as iconNode } from "./icon-BALgGtNK.mjs";
+import { t as useElementId } from "./id-C37UYLwJ.mjs";
+import { n as useComponentMessages } from "./messages-1jJWtaYU.mjs";
+import { Button } from "./components/button/index.mjs";
+import { ButtonGroup } from "./components/button-group/index.mjs";
+import { Dialog as Dialog$1 } from "./components/dialog/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Portal } from "@ark-ui/react/portal";
+import { Dialog } from "@ark-ui/react/dialog";
+//#region src/components/image-viewer/preview.tsx
+/** The default doorway is the curated preview icon; custom content keeps
+* that icon as its hover and focus affordance. */
+function ImageViewerPreview({ label, children, "data-part": dataPart, ...rest }) {
+	injectComponentStyle("image-viewer");
+	const messages = useComponentMessages();
+	const parts = [dataPart, "preview"].filter(Boolean).join(" ");
+	const isIcon = children == null;
+	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		"data-scope": "image-viewer",
+		"data-part": parts,
+		...isIcon ? {
+			"data-empty": "true",
+			"aria-label": messages.imageViewer.preview
+		} : {},
+		children: [children ?? iconNode("eye"), isIcon ? null : /* @__PURE__ */ jsxs("span", {
+			"data-scope": "image-viewer",
+			"data-part": "preview-overlay",
+			"aria-hidden": true,
+			children: [iconNode("eye"), label ? /* @__PURE__ */ jsx("span", {
+				"data-part": "preview-label",
+				children: label
+			}) : null]
+		})]
+	});
+}
+//#endregion
+//#region src/components/image-viewer/index.tsx
+const MIN_SCALE = .5;
+const MAX_SCALE = 3;
+const SCALE_STEP = .25;
+const TOOL_ICONS = {
+	zoomIn: "zoom-in",
+	zoomOut: "zoom-out",
+	rotate: "rotate-cw",
+	close: "x"
+};
+function ImageViewerImpl({ src, alt = "", open, zoomable = true, width, height, children, onOpenChange, id }) {
+	injectComponentStyle("image-viewer");
+	const hostId = useElementId("image-viewer", { id });
+	const messages = useComponentMessages();
+	const [localOpen, setLocalOpen] = useState(false);
+	const [scale, setScale] = useState(1);
+	const [rotation, setRotation] = useState(0);
+	const isOpen = open ?? localOpen;
+	const setOpen = (value) => {
+		if (open === void 0) setLocalOpen(value);
+		onOpenChange?.(value);
+	};
+	useEffect(() => {
+		if (isOpen) {
+			setScale(1);
+			setRotation(0);
+		}
+	}, [isOpen]);
+	function zoom(step) {
+		setScale((current) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, current + step)));
+	}
+	function rotate() {
+		setRotation((current) => (current + 90) % 360);
+	}
+	function toolButton(label, icon, onClick) {
+		return /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			square: true,
+			size: "lg",
+			"aria-label": label,
+			onClick,
+			children: iconNode(icon)
+		});
+	}
+	function closeToolButton(label, icon) {
+		return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				square: true,
+				size: "lg",
+				"aria-label": label,
+				children: iconNode(icon)
+			})
+		});
+	}
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		id: `${hostId}:dialog`,
+		open: isOpen,
+		onOpenChange: (details) => setOpen(details.open),
+		lazyMount: true,
+		unmountOnExit: true,
+		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+			asChild: true,
+			"data-scope": "image-viewer",
+			"data-part": "trigger",
+			children: children ?? /* @__PURE__ */ jsx(ImageViewerPreview, {})
+		}), /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "bs-image-viewer-backdrop" }), /* @__PURE__ */ jsx(Dialog.Positioner, {
+			className: "bs-image-viewer-positioner",
+			children: /* @__PURE__ */ jsxs(Dialog.Content, {
+				className: "bs-image-viewer-content",
+				"aria-label": alt || "Image preview",
+				onClick: (event) => {
+					if (event.target === event.currentTarget) setOpen(false);
+				},
+				children: [/* @__PURE__ */ jsx("img", {
+					"data-scope": "image-viewer",
+					"data-part": "viewport",
+					src,
+					alt,
+					width,
+					height,
+					style: { "--bs-image-viewer-transform": `scale(${scale}) rotate(${rotation}deg)` }
+				}), /* @__PURE__ */ jsx("div", {
+					"data-scope": "image-viewer",
+					"data-part": "toolbar",
+					children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+						zoomable ? [toolButton(messages.imageViewer.zoomIn, TOOL_ICONS.zoomIn, () => zoom(SCALE_STEP)), toolButton(messages.imageViewer.zoomOut, TOOL_ICONS.zoomOut, () => zoom(-.25))] : null,
+						toolButton(messages.imageViewer.rotate, TOOL_ICONS.rotate, rotate),
+						closeToolButton(messages.imageViewer.close, TOOL_ICONS.close)
+					] })
+				})]
+			})
+		})] })]
+	});
+}
+const ImageViewer = Object.assign(ImageViewerImpl, {
+	...Dialog$1,
+	Preview: ImageViewerPreview
+});
+//#endregion
+export { ImageViewer as t };

package/dist/{index-Uefyw7Im.d.mts → index-Bbg4heDO.d.mts}

@@ -1,3 +1,4 @@
+import { t as Popover } from "./index-Eu-Bttta.mjs";
 import { HTMLAttributes } from "react";
 //#region src/components/mentions/use-mentions.d.ts
 interface UseMentionsOptions {
@@ -45,6 +46,7 @@ interface MentionEntry {
   value: string;
 }
 interface MentionsVesselProps {
+  id?: string;
   /** The host field's rung, so the rows keep the field's register. */
   size?: "sm" | "md" | "lg";
   /** Whether the candidates are up. */
@@ -67,7 +69,10 @@ interface MentionsVesselProps {
  * its own anatomy (the textarea rides where the host puts it) and the
  * vessel still points at the right place. Shares the detection state
  * with the host through `useMentions`. */
-declare function MentionsVessel({ size, open, matches, active, anchor, onInsert, onActiveChange, onOpenChange }: MentionsVesselProps): import("react").JSX.Element;
+declare function MentionsVesselImpl({ size, open, matches, active, anchor, onInsert, onActiveChange, onOpenChange, id }: MentionsVesselProps): import("react").JSX.Element;
+declare const MentionsVessel: typeof MentionsVesselImpl & {
+  Root: typeof MentionsVesselImpl;
+};
 /**
  * @-mentions: a plain textarea that, when the text before the caret ends
  * with the trigger character followed by a token, offers the matching
@@ -77,11 +82,10 @@ declare function MentionsVessel({ size, open, matches, active, anchor, onInsert,
  *
  * The field is the shared `Field.Textarea` — field wiring (label ids,
  * the invalid state, autoresize) rides on it for free — and the vessel
- * anchors to the field as a whole (popover machinery), not to the caret
- * coordinates; caret-precise positioning would need a second
- * positioning system for no practical gain at typical field sizes.
- * Composers that keep their own field anatomy (the AI prompt input)
- * skip this shell and wire `useMentions` plus `MentionsVessel`
+ * anchors through the popover's own `Anchor` part wrapped around the
+ * field, so the machine, not a local rectangle, points the popup at the
+ * input. Composers that keep their own field anatomy (the AI prompt
+ * input) skip this shell and wire `useMentions` plus `MentionsVessel`
  * themselves.
  */
 interface MentionsProps extends HTMLAttributes<HTMLDivElement> {
@@ -103,6 +107,7 @@ interface MentionsProps extends HTMLAttributes<HTMLDivElement> {
   /** Reports the field's next text. */
   onValueChange?: (value: string) => void;
 }
-declare function Mentions({ items, value, trigger, placeholder, autoresize, invalid, size, onValueChange, children, ...rest }: MentionsProps): import("react").JSX.Element;
+declare function MentionsImpl({ items, value, trigger, placeholder, autoresize, invalid, size, onValueChange, children, ...rest }: MentionsProps): import("react").JSX.Element;
+declare const Mentions: typeof MentionsImpl & typeof Popover;
 //#endregion
 export { MentionsVesselProps as a, useMentions as c, MentionsVessel as i, Mentions as n, UseMentionsHandlers as o, MentionsProps as r, UseMentionsOptions as s, MentionEntry as t };

package/dist/index-BcRdWGY-.d.mts

@@ -0,0 +1,115 @@
+import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/media-player/parts.d.ts
+type MediaPartProps = HTMLAttributes<HTMLElement>;
+type ButtonPartProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  label?: string;
+};
+type InputPartProps = InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+};
+type DivPartProps = HTMLAttributes<HTMLDivElement> & {
+  label?: string;
+};
+/** The native media element, framed by the shared shell's state machine. */
+declare function Media(props: MediaPartProps): import("react").JSX.Element;
+/** Play and pause share one seal-cut control: the state changes the mark,
+ * never the control's place in the hand. */
+declare function PlayButton({ label, ...props }: ButtonPartProps): import("react").JSX.Element;
+/** The elapsed and total time bracket the timeline. */
+declare function Time(props: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+/** Seeking writes straight to currentTime; buffered ranges can later
+ * ride the same part as a second ink wash. */
+declare function Timeline({ label, ...props }: InputPartProps): import("react").JSX.Element;
+/** Muting stays at the left of the volume well, the way a hand expects. */
+declare function MuteButton({ label, ...props }: ButtonPartProps): import("react").JSX.Element;
+declare function Volume({ label, ...props }: InputPartProps): import("react").JSX.Element;
+/** Playback rate is a real choice, not hidden behind native menus. */
+declare function Rate({ label, ...props }: DivPartProps): import("react").JSX.Element;
+/** Text tracks use the browser's native model; the control chooses a
+ * track index, while rendering stays with the media element. */
+declare function Captions({ label, ...props }: DivPartProps): import("react").JSX.Element | null;
+/** Picture-in-picture is video-only and capability-detected. */
+declare function PipButton({ label, ...props }: ButtonPartProps): import("react").JSX.Element | null;
+/** Fullscreen takes the whole vessel, not just the moving picture. */
+declare function FullscreenButton({ label, ...props }: MediaPartProps & {
+  label?: string;
+}): import("react").JSX.Element;
+//#endregion
+//#region src/components/media-player/use-media-controls.d.ts
+/** One alternative encoding offered to the browser before playback. */
+interface MediaSourceOption {
+  src: string;
+  type?: string;
+}
+/** A WebVTT track handed to the native text-track model. */
+interface MediaTextTrackOption {
+  src: string;
+  kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
+  label?: string;
+  srcLang?: string;
+  default?: boolean;
+}
+/** A compact clock for player chrome: hours only when the media asks
+ * for them, stable digits so the time never jitters the controls. */
+declare function formatMediaTime(seconds: number): string;
+//#endregion
+//#region src/components/media-player/shell.d.ts
+interface MediaPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onPlay" | "onPause" | "onEnded" | "onTimeUpdate" | "onVolumeChange" | "onRateChange" | "onError"> {
+  label?: string;
+  src?: string;
+  sources?: MediaSourceOption[];
+  tracks?: MediaTextTrackOption[];
+  autoplay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  preload?: "none" | "metadata" | "auto";
+  volume?: number;
+  playbackRate?: number;
+  playbackRates?: number[];
+  disabled?: boolean;
+  poster?: string;
+  playsInline?: boolean;
+  onPlay?: (event: Event) => void;
+  onPause?: (event: Event) => void;
+  onEnded?: (event: Event) => void;
+  onTimeupdate?: (event: Event) => void;
+  onVolumechange?: (event: Event) => void;
+  onRatechange?: (event: Event) => void;
+  onError?: (event: Event) => void;
+}
+//#endregion
+//#region src/components/media-player/index.d.ts
+/** Audio and video share one instrument: the same state, the same keys,
+ * and the same control rhythm, while each face keeps its native element's
+ * own semantics. The parts — Root, Stage, Media, Controls, PlayButton,
+ * Timeline, Time, MuteButton, Volume, Rate, Captions, PipButton,
+ * FullscreenButton. */
+declare const Audio: ((props: MediaPlayerProps) => import("react").JSX.Element) & {
+  Root: (props: MediaPlayerProps) => import("react").JSX.Element;
+  Stage: (props: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+  Media: typeof Media;
+  Controls: (props: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+  PlayButton: typeof PlayButton;
+  Timeline: typeof Timeline;
+  Time: typeof Time;
+  MuteButton: typeof MuteButton;
+  Volume: typeof Volume;
+  Rate: typeof Rate;
+};
+declare const Video: ((props: MediaPlayerProps) => import("react").JSX.Element) & {
+  Root: (props: MediaPlayerProps) => import("react").JSX.Element;
+  Stage: (props: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+  Media: typeof Media;
+  Controls: (props: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+  PlayButton: typeof PlayButton;
+  Timeline: typeof Timeline;
+  Time: typeof Time;
+  MuteButton: typeof MuteButton;
+  Volume: typeof Volume;
+  Rate: typeof Rate;
+  Captions: typeof Captions;
+  PipButton: typeof PipButton;
+  FullscreenButton: typeof FullscreenButton;
+};
+//#endregion
+export { MediaTextTrackOption as a, MediaSourceOption as i, Video as n, formatMediaTime as o, MediaPlayerProps as r, Audio as t };

package/dist/{index-DFN9F5Zt.d.mts → index-D_iKc2Uw.d.mts}

@@ -22,7 +22,7 @@ interface NativeSelectProps extends Omit<HTMLAttributes<HTMLSpanElement>, "child
   disabled?: boolean;
   onValueChange?: (value: string) => void;
 }
-declare function NativeSelect({ value, options, size, invalid, placeholder, disabled, onValueChange, ...rest }: NativeSelectProps): import("react").JSX.Element;
+declare function NativeSelect({ value, options, size, invalid, placeholder, disabled, onValueChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rest }: NativeSelectProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/select/index.d.ts
 /** Ark's Select, dressed in the paper-and-ink system: the trigger is the
@@ -35,8 +35,37 @@ type SelectOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function SelectRoot<T extends CollectionItem>(props: SelectRootComponentProps<T, SelectOwnProps>): import("react").JSX.Element;
-declare const Select$1: Omit<typeof Select, "Root"> & {
+type SelectFacadeValue = string | string[];
+type SelectParts = Omit<typeof Select, "Root"> & {
   Root: typeof SelectRoot;
 };
+interface SelectFacadeProps {
+  value?: SelectFacadeValue;
+  defaultValue?: SelectFacadeValue;
+  options: NativeSelectOption[];
+  multiple?: boolean;
+  deselectable?: boolean;
+  /** Show the clear-value control when the machine allows it. */
+  clearable?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  label?: string;
+  /** Heading above the flat option list. */
+  groupLabel?: string;
+  placeholder?: string;
+  name?: string;
+  form?: string;
+  autoComplete?: string;
+  /** One rung of the control-height ladder for the trigger. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string | string[]) => void;
+}
+declare function SelectFacade({ value, defaultValue, options, multiple, deselectable, clearable, disabled, invalid, required, readOnly, label, groupLabel, placeholder, name, form, autoComplete, size, onValueChange }: SelectFacadeProps): import("react").JSX.Element;
+declare namespace SelectFacade {
+  var displayName: string;
+}
+declare const Select$1: typeof SelectFacade & SelectParts;
 //#endregion
-export { NativeSelectProps as i, NativeSelect as n, NativeSelectOption as r, Select$1 as t };
+export { NativeSelectProps as a, NativeSelectOption as i, SelectFacadeProps as n, NativeSelect as r, Select$1 as t };

package/dist/{index-CsfxYv6J.d.mts → index-DdNKngUQ.d.mts}

@@ -1,11 +1,11 @@
-import { Action } from "./components/ai-action/index.mjs";
-import { AiMessage as Message } from "./components/ai-message/index.mjs";
-import { AiPromptInput as PromptInput } from "./components/ai-prompt-input/index.mjs";
-import { AiReasoning as Reasoning } from "./components/ai-reasoning/index.mjs";
-import { AiResponse as Response$1 } from "./components/ai-response/index.mjs";
-import { AiSource as Source$1, AiSources as Sources } from "./components/ai-source/index.mjs";
-import { AiSuggestion as Suggestion } from "./components/ai-suggestion/index.mjs";
-import { AiTool as Tool$1 } from "./components/ai-tool/index.mjs";
+import { ActionProps } from "./components/ai-action/index.mjs";
+import { MessageProps } from "./components/ai-message/index.mjs";
+import { PromptInputProps } from "./components/ai-prompt-input/index.mjs";
+import { ReasoningProps } from "./components/ai-reasoning/index.mjs";
+import { ResponseProps } from "./components/ai-response/index.mjs";
+import { SourceProps, SourcesProps } from "./components/ai-source/index.mjs";
+import { SuggestionProps } from "./components/ai-suggestion/index.mjs";
+import { ToolProps } from "./components/ai-tool/index.mjs";
 import { HTMLAttributes } from "react";
 import { JSONSchema7, JSONSchema7 as JSONSchema7$1 } from "json-schema";
 import { $ZodType } from "zod/v4/core";
@@ -10327,57 +10327,81 @@ declare global {
 //#region src/components/ai/index.d.ts
 /** The log itself: the column every stroke lands in, a landmark to
  * screen readers. */
-declare const AiConversation: {
-  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-  displayName: string;
-};
+declare function AiConversation({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
 /** The bubble's inner measure — content that belongs to neither side
  * specifically. */
 declare const AiContent: {
   ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
   displayName: string;
+} & {
+  Root: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
 };
 /** The quiet row under a message — copy, retry, feedback. */
 declare const AiActions: {
   ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
   displayName: string;
-};
-/** The while-it-works whisper for the in-flight turns. */
-declare const AiLoader: {
-  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-  displayName: string;
-};
-/** The whole family under one handle — `Ai.Conversation`,
- * `Ai.Message`, and the rest, exactly as before the split. */
-declare const Ai: {
-  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-  displayName: string;
 } & {
-  Conversation: {
+  Root: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;
   };
+};
+/** The while-it-works whisper for the in-flight turns. */
+declare function AiLoader({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+/** The whole family under one handle — `Ai.Conversation`,
+ * `Ai.Message`, and the rest, exactly as before the split. */
+declare const Ai: typeof AiConversation & {
+  Root: typeof AiConversation;
+  Conversation: typeof AiConversation;
   MessageContent: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;
+  } & {
+    Root: {
+      ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+      displayName: string;
+    };
   };
   Actions: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;
+  } & {
+    Root: {
+      ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+      displayName: string;
+    };
   };
-  Loader: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-    displayName: string;
+  Loader: typeof AiLoader;
+  Message: (({ role, children, ...rest }: MessageProps) => import("react").JSX.Element) & {
+    Root: ({ role, children, ...rest }: MessageProps) => import("react").JSX.Element;
+  };
+  Response: (({ content, highlighter, copyLabel, copiedLabel, ...rest }: ResponseProps) => import("react").JSX.Element) & {
+    Root: ({ content, highlighter, copyLabel, copiedLabel, ...rest }: ResponseProps) => import("react").JSX.Element;
+  };
+  Reasoning: (({ label, children, ...rest }: ReasoningProps) => import("react").JSX.Element) & {
+    Root: ({ label, children, ...rest }: ReasoningProps) => import("react").JSX.Element;
   };
-  Message: typeof Message;
-  Response: typeof Response$1;
-  Reasoning: typeof Reasoning;
-  Tool: typeof Tool$1;
-  Sources: typeof Sources;
-  Source: typeof Source$1;
-  Action: typeof Action;
-  Suggestion: typeof Suggestion;
-  PromptInput: typeof PromptInput;
-};
-//#endregion
-export { AiLoader as a, ReasoningUIPart as c, StepStartUIPart as d, TextUIPart as f, UIMessagePart as h, AiConversation as i, SourceDocumentUIPart as l, UIMessage as m, AiActions as n, DataUIPart as o, ToolUIPart as p, AiContent as r, FileUIPart as s, Ai as t, SourceUrlUIPart as u };
+  Tool: (({ name, label, status, input, output, ...rest }: ToolProps) => import("react").JSX.Element) & {
+    Root: ({ name, label, status, input, output, ...rest }: ToolProps) => import("react").JSX.Element;
+  };
+  Sources: (({ children, ...rest }: SourcesProps) => import("react").JSX.Element) & {
+    Root: ({ children, ...rest }: SourcesProps) => import("react").JSX.Element;
+  };
+  Source: (({ href, children, ...rest }: SourceProps) => import("react").JSX.Element) & {
+    Root: ({ href, children, ...rest }: SourceProps) => import("react").JSX.Element;
+  };
+  Action: (({ label, children, ...rest }: ActionProps) => import("react").JSX.Element) & {
+    Root: ({ label, children, ...rest }: ActionProps) => import("react").JSX.Element;
+  };
+  Suggestion: (({ prompt, onSelect, ...rest }: SuggestionProps) => import("react").JSX.Element) & {
+    Root: ({ prompt, onSelect, ...rest }: SuggestionProps) => import("react").JSX.Element;
+  };
+  PromptInput: (({ value, onValueChange, onSubmit, onStop, placeholder, "aria-label": ariaLabel, disabled, busy, mentions, header, leading, trailing, footer, footerEnd, ...rest }: PromptInputProps) => import("react").JSX.Element) & {
+    Root: ({ value, onValueChange, onSubmit, onStop, placeholder, "aria-label": ariaLabel, disabled, busy, mentions, header, leading, trailing, footer, footerEnd, ...rest }: PromptInputProps) => import("react").JSX.Element;
+  };
+};
+//#endregion
+export { FileUIPart as a, SourceUrlUIPart as c, ToolUIPart as d, UIMessage as f, DataUIPart as i, StepStartUIPart as l, AiActions as n, ReasoningUIPart as o, UIMessagePart as p, AiContent as r, SourceDocumentUIPart as s, Ai as t, TextUIPart as u };