@bysages/react 0.3.0 → 0.4.0

package/dist/{ai-response-jZy-0Tvv.mjs → ai-response-B4DX7nmJ.mjs}

@@ -1,3 +1,5 @@
+import { t as withSelfRoot } from "./family-DE_GQeeM.mjs";
+import { n as useComponentMessages } from "./messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
@@ -99,20 +101,23 @@ function wrapResponseTables(root) {
 }
 //#endregion
 //#region src/components/ai-response/index.tsx
-function Response({ content, highlighter, copyLabel = "Copy code", copiedLabel = "Copied", ...rest }) {
+function ResponseImpl({ content, highlighter, copyLabel, copiedLabel, ...rest }) {
 	injectComponentStyle("ai");
+	const messages = useComponentMessages();
+	const resolvedCopyLabel = copyLabel ?? messages.ai.copyCode;
+	const resolvedCopiedLabel = copiedLabel ?? messages.ai.copied;
 	const root = useRef(null);
 	useEffect(() => {
 		const host = root.current;
-		if (host) decorateCodeCopy(host, copyLabel);
+		if (host) decorateCodeCopy(host, resolvedCopyLabel);
 		if (host) wrapResponseTables(host);
 	}, [
 		content,
 		highlighter,
-		copyLabel
+		resolvedCopyLabel
 	]);
 	const onClick = (event) => {
-		clickCodeCopy(event.nativeEvent, copyLabel, copiedLabel);
+		clickCodeCopy(event.nativeEvent, resolvedCopyLabel, resolvedCopiedLabel);
 	};
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -123,5 +128,6 @@ function Response({ content, highlighter, copyLabel = "Copy code", copiedLabel =
 		dangerouslySetInnerHTML: { __html: renderHtml(content, highlighter ? { highlighter } : void 0) }
 	});
 }
+const Response = withSelfRoot(ResponseImpl);
 //#endregion
 export { Response as t };

package/dist/chevron-a2nIZKN4.mjs

@@ -0,0 +1,6 @@
+import { t as iconNode } from "./icon-BALgGtNK.mjs";
+//#region src/components/ai/chevron.tsx
+/** The folding chevron the shared indicator turns. */
+const chevron = iconNode("chevron-right");
+//#endregion
+export { chevron as t };

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

@@ -1,7 +1,25 @@
 import { Accordion as Accordion$1 } from "@ark-ui/react/accordion";
 //#region src/components/accordion/index.d.ts
-/** Ark's Accordion, dressed in the paper-and-ink system: a ruled sheet
- * folded by quiet rows, unfolding with a spring-chevoned dissolve. The
- * API is Ark's own — Root, Item, ItemTrigger, ItemContent, ItemIndicator. */
-export declare const Accordion: typeof Accordion$1;
+export type AccordionItem = {
+  value: string;
+  title: string;
+  content: string;
+};
+export interface AccordionFacadeProps {
+  value?: string[];
+  defaultValue?: string[];
+  items: AccordionItem[];
+  multiple?: boolean;
+  collapsible?: boolean;
+  disabled?: boolean;
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+  onValueChange?: (value: string[]) => void;
+}
+declare function AccordionFacade({ value, defaultValue, items, multiple, collapsible, disabled, orientation, className, onValueChange }: AccordionFacadeProps): import("react").JSX.Element;
+declare namespace AccordionFacade {
+  var displayName: string;
+}
+type AccordionParts = typeof Accordion$1;
+export declare const Accordion: typeof AccordionFacade & AccordionParts;
 //#endregion

package/dist/components/accordion/index.mjs

@@ -1,10 +1,40 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { Accordion as Accordion$1 } from "@ark-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion/index.tsx
 /** Ark's Accordion, dressed in the paper-and-ink system: a ruled sheet
 * folded by quiet rows, unfolding with a spring-chevoned dissolve. The
 * API is Ark's own — Root, Item, ItemTrigger, ItemContent, ItemIndicator. */
-const Accordion = Accordion$1;
+function AccordionRoot(props) {
+	const id = useElementId("accordion", props);
+	return /* @__PURE__ */ jsx(Accordion$1.Root, {
+		...props,
+		id
+	});
+}
+function AccordionFacade({ value, defaultValue, items, multiple = false, collapsible = true, disabled = false, orientation = "vertical", className, onValueChange }) {
+	return /* @__PURE__ */ jsx(AccordionRoot, {
+		className,
+		disabled,
+		multiple,
+		collapsible,
+		orientation,
+		defaultValue,
+		...value === void 0 ? {} : { value },
+		onValueChange: (details) => onValueChange?.(details.value),
+		children: items.map((item) => /* @__PURE__ */ jsxs(Accordion$1.Item, {
+			value: item.value,
+			children: [/* @__PURE__ */ jsxs(Accordion$1.ItemTrigger, { children: [item.title, /* @__PURE__ */ jsx(Accordion$1.ItemIndicator, { children: iconNode("chevron-down") })] }), /* @__PURE__ */ jsx(Accordion$1.ItemContent, { children: /* @__PURE__ */ jsx("p", { children: item.content }) })]
+		}, item.value))
+	});
+}
+AccordionFacade.displayName = "SAccordion";
+const Accordion = Object.assign(AccordionFacade, {
+	...Accordion$1,
+	Root: AccordionRoot
+});
 injectComponentStyle("accordion");
 //#endregion
 export { Accordion };

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

@@ -16,5 +16,8 @@ export interface AffixProps extends HTMLAttributes<HTMLDivElement> {
   /** Where it pins from the bottom instead, for footers and action bars. */
   offsetBottom?: string;
 }
-export declare function Affix({ offsetTop, offsetBottom, ...rest }: AffixProps): import("react").JSX.Element;
+declare function AffixImpl({ offsetTop, offsetBottom, ...rest }: AffixProps): import("react").JSX.Element;
+export declare const Affix: typeof AffixImpl & {
+  Root: typeof AffixImpl;
+};
 //#endregion

package/dist/components/affix/index.mjs

@@ -1,18 +1,20 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/affix/index.tsx
-function Affix({ offsetTop = "0px", offsetBottom = "0px", ...rest }) {
+function AffixImpl({ offsetTop = "0px", offsetBottom = "0px", ...rest }) {
 	injectComponentStyle("affix");
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		style: {
 			...rest.style,
-			top: offsetTop,
-			bottom: offsetBottom
+			"--bs-affix-top": offsetTop,
+			"--bs-affix-bottom": offsetBottom
 		},
 		"data-scope": "affix",
 		"data-part": "root"
 	});
 }
+const Affix = withSelfRoot(AffixImpl);
 //#endregion
 export { Affix };

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

@@ -1,2 +1,2 @@
-import { a as AiLoader, c as ReasoningUIPart, d as StepStartUIPart, f as TextUIPart, h as UIMessagePart, i as AiConversation, l as SourceDocumentUIPart, m as UIMessage, n as AiActions, o as DataUIPart, p as ToolUIPart, r as AiContent, s as FileUIPart, t as Ai, u as SourceUrlUIPart } from "../../index-CsfxYv6J.mjs";
-export { Ai, AiActions, AiContent, AiConversation, AiLoader, type DataUIPart, type FileUIPart, type ReasoningUIPart, type SourceDocumentUIPart, type SourceUrlUIPart, type StepStartUIPart, type TextUIPart, type ToolUIPart, type UIMessage, type UIMessagePart };
+import { a as FileUIPart, c as SourceUrlUIPart, d as ToolUIPart, f as UIMessage, i as DataUIPart, l as StepStartUIPart, n as AiActions, o as ReasoningUIPart, p as UIMessagePart, r as AiContent, s as SourceDocumentUIPart, t as Ai, u as TextUIPart } from "../../index-DdNKngUQ.mjs";
+export { Ai, AiActions, AiContent, type DataUIPart, type FileUIPart, type ReasoningUIPart, type SourceDocumentUIPart, type SourceUrlUIPart, type StepStartUIPart, type TextUIPart, type ToolUIPart, type UIMessage, type UIMessagePart };

package/dist/components/ai/index.mjs

@@ -1,8 +1,10 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Action } from "../ai-action/index.mjs";
 import { AiMessage as Message } from "../ai-message/index.mjs";
 import { AiPromptInput as PromptInput } from "../ai-prompt-input/index.mjs";
 import { AiReasoning as Reasoning } from "../ai-reasoning/index.mjs";
-import { t as Response } from "../../ai-response-jZy-0Tvv.mjs";
+import { t as Response } from "../../ai-response-B4DX7nmJ.mjs";
 import { AiSource as Source, AiSources as Sources } from "../ai-source/index.mjs";
 import { AiSuggestion as Suggestion } from "../ai-suggestion/index.mjs";
 import { AiTool as Tool } from "../ai-tool/index.mjs";
@@ -29,23 +31,38 @@ function part(name, tag, extra = {}) {
 }
 /** The log itself: the column every stroke lands in, a landmark to
 * screen readers. */
-const AiConversation = part("Conversation", "div", {
-	role: "log",
-	"aria-label": "Conversation"
-});
+function AiConversation({ children, ...rest }) {
+	const messages = useComponentMessages();
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "log",
+		"aria-label": rest["aria-label"] ?? messages.ai.conversation,
+		"data-scope": "ai",
+		"data-part": "conversation",
+		children
+	});
+}
 /** The bubble's inner measure — content that belongs to neither side
 * specifically. */
-const AiContent = part("Content", "div");
+const AiContent = withSelfRoot(part("Content", "div"));
 /** The quiet row under a message — copy, retry, feedback. */
-const AiActions = part("Actions", "div");
+const AiActions = withSelfRoot(part("Actions", "div"));
 /** The while-it-works whisper for the in-flight turns. */
-const AiLoader = part("Loader", "span", {
-	role: "status",
-	"aria-label": "Loading"
-});
+function AiLoader({ children, ...rest }) {
+	const messages = useComponentMessages();
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		role: "status",
+		"aria-label": rest["aria-label"] ?? messages.ai.loading,
+		"data-scope": "ai",
+		"data-part": "loader",
+		children
+	});
+}
 /** The whole family under one handle — `Ai.Conversation`,
 * `Ai.Message`, and the rest, exactly as before the split. */
 const Ai = Object.assign(AiConversation, {
+	Root: AiConversation,
 	Conversation: AiConversation,
 	MessageContent: AiContent,
 	Actions: AiActions,
@@ -62,4 +79,4 @@ const Ai = Object.assign(AiConversation, {
 });
 injectComponentStyle("ai");
 //#endregion
-export { Ai, AiActions, AiContent, AiConversation, AiLoader };
+export { Ai, AiActions, AiContent };

package/dist/components/ai-action/index.d.mts

@@ -9,6 +9,9 @@ export interface ActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   label: string;
   children?: ReactNode;
 }
-export declare function Action({ label, children, ...rest }: ActionProps): import("react").JSX.Element;
+declare function ActionImpl({ label, children, ...rest }: ActionProps): import("react").JSX.Element;
+export declare const Action: typeof ActionImpl & {
+  Root: typeof ActionImpl;
+};
 //#endregion
 export { Action as AiAction };

package/dist/components/ai-action/index.mjs

@@ -1,8 +1,9 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai-action/index.tsx
-function Action({ label, children, ...rest }) {
+function ActionImpl({ label, children, ...rest }) {
 	injectComponentStyle("ai");
 	return /* @__PURE__ */ jsx(Button, {
 		variant: "ghost",
@@ -14,5 +15,6 @@ function Action({ label, children, ...rest }) {
 		children
 	});
 }
+const Action = withSelfRoot(ActionImpl);
 //#endregion
 export { Action, Action as AiAction };

package/dist/components/ai-attachments/index.d.mts

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from "react";
 //#region src/components/ai-attachments/index.d.ts
-/** One file riding the prompt: its glyph by extension, its name and
+/** One file riding the prompt: its icon by extension, its name and
  * human size, and a quiet way to take it back off. Uploading reads as
  * a dashed ghost, error as danger ink. */
 export interface AttachmentProps extends HTMLAttributes<HTMLSpanElement> {
-  /** The file's name — it picks the glyph by extension. */
+  /** The file's name — it picks the icon by extension. */
   name: string;
   /** The file's size in bytes, when known — rendered human. */
   size?: number;
@@ -12,8 +12,14 @@ export interface AttachmentProps extends HTMLAttributes<HTMLSpanElement> {
   status?: "uploading" | "ready" | "error";
   onRemove?: () => void;
 }
-export declare function Attachment({ name, size, status, onRemove, ...rest }: AttachmentProps): import("react").JSX.Element;
+declare function AttachmentImpl({ name, size, status, onRemove, ...rest }: AttachmentProps): import("react").JSX.Element;
+export declare const Attachment: typeof AttachmentImpl & {
+  Root: typeof AttachmentImpl;
+};
 /** The row the files ride in — a wrapping line of chips. */
-export declare function Attachments({ children, ...rest }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+declare function AttachmentsImpl({ children, ...rest }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export declare const Attachments: typeof AttachmentsImpl & {
+  Root: typeof AttachmentsImpl;
+};
 //#endregion
 export { Attachment as AiAttachment, Attachments as AiAttachments };

package/dist/components/ai-attachments/index.mjs

@@ -1,49 +1,20 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-attachments/index.tsx
-const imageGlyph = /* @__PURE__ */ jsxs("svg", {
-	viewBox: "0 0 16 16",
-	"aria-hidden": "true",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 1.5,
-	strokeLinecap: "square",
-	children: [
-		/* @__PURE__ */ jsx("rect", {
-			x: 2.5,
-			y: 3.5,
-			width: 11,
-			height: 9
-		}),
-		/* @__PURE__ */ jsx("path", { d: "M2.5 10.5 6 7l3 3 2-1.5 2.5 2" }),
-		/* @__PURE__ */ jsx("circle", {
-			cx: 6,
-			cy: 6,
-			r: .75,
-			fill: "currentColor",
-			stroke: "none"
-		})
-	]
+const imageIcon = iconNode("image", {
+	width: 16,
+	height: 16
 });
-const fileGlyph = /* @__PURE__ */ jsxs("svg", {
-	viewBox: "0 0 16 16",
-	"aria-hidden": "true",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 1.5,
-	strokeLinecap: "square",
-	children: [/* @__PURE__ */ jsx("path", { d: "M4 2.5h5l3 3V13.5H4z" }), /* @__PURE__ */ jsx("path", { d: "M9 2.5v3h3" })]
+const fileIcon = iconNode("file", {
+	width: 16,
+	height: 16
 });
-const removeGlyph = /* @__PURE__ */ jsx("svg", {
-	viewBox: "0 0 16 16",
+const removeIcon = iconNode("x", {
 	width: 12,
-	height: 12,
-	"aria-hidden": "true",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 1.5,
-	strokeLinecap: "square",
-	children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+	height: 12
 });
 const IMAGE_EXTS = [
 	"png",
@@ -72,29 +43,31 @@ const humanSize = (bytes) => {
 	} while (value >= 1024 && unit < units.length - 1);
 	return `${value.toFixed(1)} ${units[unit]}`;
 };
-function Attachment({ name, size, status = "ready", onRemove, ...rest }) {
+function AttachmentImpl({ name, size, status = "ready", onRemove, ...rest }) {
 	injectComponentStyle("ai");
+	const messages = useComponentMessages();
 	return /* @__PURE__ */ jsxs("span", {
 		...rest,
 		"data-scope": "ai",
 		"data-part": "attachment",
 		"data-status": status,
 		children: [
-			isImage(name) ? imageGlyph : fileGlyph,
+			isImage(name) ? imageIcon : fileIcon,
 			/* @__PURE__ */ jsx("span", { children: name }),
 			size !== void 0 ? /* @__PURE__ */ jsx("span", { children: humanSize(size) }) : null,
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"data-remove": "",
-				"aria-label": `Remove ${name}`,
+				"aria-label": formatMessage(messages.ai.removeAttachment, { name }),
 				onClick: () => onRemove?.(),
-				children: removeGlyph
+				children: removeIcon
 			})
 		]
 	});
 }
+const Attachment = withSelfRoot(AttachmentImpl);
 /** The row the files ride in — a wrapping line of chips. */
-function Attachments({ children, ...rest }) {
+function AttachmentsImpl({ children, ...rest }) {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
 		"data-scope": "ai",
@@ -102,5 +75,6 @@ function Attachments({ children, ...rest }) {
 		children
 	});
 }
+const Attachments = withSelfRoot(AttachmentsImpl);
 //#endregion
 export { Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments };

package/dist/components/ai-message/index.d.mts

@@ -6,6 +6,9 @@ export interface MessageProps extends HTMLAttributes<HTMLElement> {
   role?: "user" | "assistant" | "system";
   children?: ReactNode;
 }
-export declare function Message({ role, children, ...rest }: MessageProps): import("react").JSX.Element;
+declare function MessageImpl({ role, children, ...rest }: MessageProps): import("react").JSX.Element;
+export declare const Message: typeof MessageImpl & {
+  Root: typeof MessageImpl;
+};
 //#endregion
 export { Message as AiMessage };

package/dist/components/ai-message/index.mjs

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai-message/index.tsx
-function Message({ role = "assistant", children, ...rest }) {
+function MessageImpl({ role = "assistant", children, ...rest }) {
 	injectComponentStyle("ai");
 	return /* @__PURE__ */ jsx("article", {
 		...rest,
@@ -11,5 +12,6 @@ function Message({ role = "assistant", children, ...rest }) {
 		children
 	});
 }
+const Message = withSelfRoot(MessageImpl);
 //#endregion
 export { Message as AiMessage, Message };

package/dist/components/ai-prompt-input/index.d.mts

@@ -1,4 +1,4 @@
-import { t as MentionEntry } from "../../index-Uefyw7Im.mjs";
+import { t as MentionEntry } from "../../index-Bbg4heDO.mjs";
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/components/ai-prompt-input/index.d.ts
 /**
@@ -42,6 +42,9 @@ export interface PromptInputProps extends Omit<HTMLAttributes<HTMLFormElement>,
   footer?: ReactNode;
   footerEnd?: ReactNode;
 }
-export declare function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder, disabled, busy, mentions, header, leading, trailing, footer, footerEnd, ...rest }: PromptInputProps): import("react").JSX.Element;
+declare function PromptInputImpl({ value, onValueChange, onSubmit, onStop, placeholder, "aria-label": ariaLabel, disabled, busy, mentions, header, leading, trailing, footer, footerEnd, ...rest }: PromptInputProps): import("react").JSX.Element;
+export declare const PromptInput: typeof PromptInputImpl & {
+  Root: typeof PromptInputImpl;
+};
 //#endregion
 export { PromptInput as AiPromptInput };

package/dist/components/ai-prompt-input/index.mjs

@@ -1,22 +1,18 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
 import { Field } from "../field/index.mjs";
-import { n as MentionsVessel, r as useMentions } from "../../mentions-DMIBCBOd.mjs";
+import { n as MentionsVessel, r as useMentions } from "../../mentions-BuWibdci.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 //#region src/components/ai-prompt-input/index.tsx
-const arrowUpGlyph = /* @__PURE__ */ jsx("svg", {
-	viewBox: "0 0 16 16",
+const arrowUpIcon = iconNode("arrow-up", {
 	width: 14,
-	height: 14,
-	"aria-hidden": "true",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 1.5,
-	strokeLinecap: "square",
-	children: /* @__PURE__ */ jsx("path", { d: "M8 13V3M3.5 7.5 8 3l4.5 4.5" })
+	height: 14
 });
-const stopGlyph = /* @__PURE__ */ jsx("svg", {
+const stopIcon = /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 0 16 16",
 	width: 14,
 	height: 14,
@@ -39,9 +35,11 @@ function row(part, content) {
 		children: content
 	});
 }
-function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Send a message", disabled = false, busy = false, mentions, header, leading, trailing, footer, footerEnd, ...rest }) {
+function PromptInputImpl({ value, onValueChange, onSubmit, onStop, placeholder, "aria-label": ariaLabel, disabled = false, busy = false, mentions, header, leading, trailing, footer, footerEnd, ...rest }) {
 	injectComponentStyle("ai");
 	const fieldRef = useRef(null);
+	const messages = useComponentMessages();
+	const placeholderText = placeholder ?? messages.ai.conversation;
 	const mentionState = useMentions(() => ({
 		items: mentions?.items ?? [],
 		trigger: mentions?.trigger
@@ -61,18 +59,18 @@ function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Se
 		size: "sm",
 		square: true,
 		type: "button",
-		"aria-label": "Stop",
+		"aria-label": messages.ai.stop,
 		disabled,
 		onClick: () => onStop?.(),
-		children: stopGlyph
+		children: stopIcon
 	}) : /* @__PURE__ */ jsx(Button, {
 		variant: "solid",
 		size: "sm",
 		square: true,
 		type: "submit",
-		"aria-label": "Send",
+		"aria-label": messages.ai.send,
 		disabled: disabled || !value.trim(),
-		children: arrowUpGlyph
+		children: arrowUpIcon
 	});
 	const hasFooter = footer != null && (!Array.isArray(footer) || footer.length > 0);
 	return /* @__PURE__ */ jsxs("form", {
@@ -95,7 +93,8 @@ function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Se
 						autoresize: true,
 						rows: 1,
 						value,
-						placeholder,
+						placeholder: placeholderText,
+						"aria-label": ariaLabel ?? messages.ai.conversation,
 						disabled,
 						onChange: (event) => {
 							onValueChange?.(event.target.value);
@@ -131,5 +130,6 @@ function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Se
 		]
 	});
 }
+const PromptInput = withSelfRoot(PromptInputImpl);
 //#endregion
 export { PromptInput as AiPromptInput, PromptInput };

package/dist/components/ai-reasoning/index.d.mts

@@ -8,6 +8,9 @@ export interface ReasoningProps extends HTMLAttributes<HTMLDivElement> {
   defaultOpen?: boolean;
   children?: ReactNode;
 }
-export declare function Reasoning({ label, children, ...rest }: ReasoningProps): import("react").JSX.Element;
+declare function ReasoningImpl({ label, children, ...rest }: ReasoningProps): import("react").JSX.Element;
+export declare const Reasoning: typeof ReasoningImpl & {
+  Root: typeof ReasoningImpl;
+};
 //#endregion
 export { Reasoning as AiReasoning };

package/dist/components/ai-reasoning/index.mjs

@@ -1,9 +1,10 @@
-import { t as chevron } from "../../chevron-BeHvt46K.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as chevron } from "../../chevron-a2nIZKN4.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-reasoning/index.tsx
-function Reasoning({ label = "Thinking", children, ...rest }) {
+function ReasoningImpl({ label = "Thinking", children, ...rest }) {
 	injectComponentStyle("ai");
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		...rest,
@@ -15,5 +16,6 @@ function Reasoning({ label = "Thinking", children, ...rest }) {
 		}) })]
 	});
 }
+const Reasoning = withSelfRoot(ReasoningImpl);
 //#endregion
 export { Reasoning as AiReasoning, Reasoning };

package/dist/components/ai-response/index.d.mts

@@ -12,11 +12,16 @@ export interface ResponseProps extends HTMLAttributes<HTMLDivElement> {
   /** Optional code-highlighting function re-inking fenced blocks; the
    * component stays agnostic about which engine provides it. */
   highlighter?: (code: string, lang?: string) => string;
-  /** The copy stamp's accessible name before the copy lands. */
+  /** The copy stamp's accessible name before the copy lands; leave
+   * unset for the resolved default. */
   copyLabel?: string;
-  /** The copy stamp's accessible name once the text has landed. */
+  /** The copy stamp's accessible name once the text has landed; leave
+   * unset for the resolved default. */
   copiedLabel?: string;
 }
-export declare function Response({ content, highlighter, copyLabel, copiedLabel, ...rest }: ResponseProps): import("react").JSX.Element;
+declare function ResponseImpl({ content, highlighter, copyLabel, copiedLabel, ...rest }: ResponseProps): import("react").JSX.Element;
+export declare const Response: typeof ResponseImpl & {
+  Root: typeof ResponseImpl;
+};
 //#endregion
 export { Response as AiResponse };

package/dist/components/ai-response/index.mjs

@@ -1,2 +1,2 @@
-import { t as Response } from "../../ai-response-jZy-0Tvv.mjs";
+import { t as Response } from "../../ai-response-B4DX7nmJ.mjs";
 export { Response as AiResponse, Response };

package/dist/components/ai-source/index.d.mts

@@ -7,11 +7,17 @@ export interface SourceProps extends HTMLAttributes<HTMLAnchorElement> {
   href: string;
   children?: ReactNode;
 }
-export declare function Source({ href, children, ...rest }: SourceProps): import("react").JSX.Element;
+declare function SourceImpl({ href, children, ...rest }: SourceProps): import("react").JSX.Element;
+export declare const Source: typeof SourceImpl & {
+  Root: typeof SourceImpl;
+};
 /** The reading list under a response: where this ink came from. */
 export interface SourcesProps extends HTMLAttributes<HTMLOListElement> {
   children?: ReactNode;
 }
-export declare function Sources({ children, ...rest }: SourcesProps): import("react").JSX.Element;
+declare function SourcesImpl({ children, ...rest }: SourcesProps): import("react").JSX.Element;
+export declare const Sources: typeof SourcesImpl & {
+  Root: typeof SourcesImpl;
+};
 //#endregion
 export { Source as AiSource, Sources as AiSources };

package/dist/components/ai-source/index.mjs

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai-source/index.tsx
-function Source({ href, children, ...rest }) {
+function SourceImpl({ href, children, ...rest }) {
 	injectComponentStyle("ai");
 	return /* @__PURE__ */ jsx("li", {
 		"data-scope": "ai",
@@ -15,7 +16,8 @@ function Source({ href, children, ...rest }) {
 		})
 	});
 }
-function Sources({ children, ...rest }) {
+const Source = withSelfRoot(SourceImpl);
+function SourcesImpl({ children, ...rest }) {
 	return /* @__PURE__ */ jsx("ol", {
 		...rest,
 		"data-scope": "ai",
@@ -23,5 +25,6 @@ function Sources({ children, ...rest }) {
 		children
 	});
 }
+const Sources = withSelfRoot(SourcesImpl);
 //#endregion
 export { Source as AiSource, Source, Sources as AiSources, Sources };

package/dist/components/ai-suggestion/index.d.mts

@@ -8,6 +8,9 @@ export interface SuggestionProps extends Omit<HTMLAttributes<HTMLButtonElement>,
   prompt: string;
   onSelect?: (prompt: string) => void;
 }
-export declare function Suggestion({ prompt, onSelect, ...rest }: SuggestionProps): import("react").JSX.Element;
+declare function SuggestionImpl({ prompt, onSelect, ...rest }: SuggestionProps): import("react").JSX.Element;
+export declare const Suggestion: typeof SuggestionImpl & {
+  Root: typeof SuggestionImpl;
+};
 //#endregion
 export { Suggestion as AiSuggestion };