@bysages/react 0.3.1 → 0.4.1

package/dist/{ai-response-BfKTmtCt.mjs → ai-response-nhDOlELQ.mjs}

@@ -1,5 +1,6 @@
+import { t as withSelfRoot } from "./family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "./messages-1jJWtaYU.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { renderHtml } from "@tanstack/markdown/html";
@@ -100,7 +101,7 @@ function wrapResponseTables(root) {
 }
 //#endregion
 //#region src/components/ai-response/index.tsx
-function Response({ content, highlighter, copyLabel, copiedLabel, ...rest }) {
+function ResponseImpl({ content, highlighter, copyLabel, copiedLabel, ...rest }) {
 	injectComponentStyle("ai");
 	const messages = useComponentMessages();
 	const resolvedCopyLabel = copyLabel ?? messages.ai.copyCode;
@@ -127,5 +128,6 @@ function Response({ content, highlighter, copyLabel, copiedLabel, ...rest }) {
 		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 { injectComponentStyle } from "@bysages/core";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { Accordion as Accordion$1 } from "@ark-ui/react/accordion";
+import { injectComponentStyle } from "@bysages/core/styling";
+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 { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/affix/index.tsx
-function Affix({ offsetTop = "0px", offsetBottom = "0px", ...rest }) {
+function AffixImpl({ offsetTop, offsetBottom, ...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 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-Dn5mHf1g.mjs";
+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-B4twHAQC.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,13 +1,14 @@
+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-BfKTmtCt.mjs";
+import { t as Response } from "../../ai-response-nhDOlELQ.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";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai/index.tsx
 /** A conversation column: Root is the log, Message carries a role, and
@@ -43,9 +44,9 @@ function AiConversation({ children, ...rest }) {
 }
 /** 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. */
 function AiLoader({ children, ...rest }) {
 	const messages = useComponentMessages();
@@ -61,6 +62,7 @@ function AiLoader({ children, ...rest }) {
 /** 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,

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 { injectComponentStyle } from "@bysages/core/styling";
 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,50 +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 { injectComponentStyle } from "@bysages/core/styling";
 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",
@@ -73,7 +43,7 @@ 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", {
@@ -82,7 +52,7 @@ function Attachment({ name, size, status = "ready", onRemove, ...rest }) {
 		"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", {
@@ -90,13 +60,14 @@ function Attachment({ name, size, status = "ready", onRemove, ...rest }) {
 				"data-remove": "",
 				"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",
@@ -104,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 { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 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, "aria-label": ariaLabel, 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,23 +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 { injectComponentStyle } from "@bysages/core";
+import { n as MentionsVessel, r as useMentions } from "../../mentions-BwnyvdXz.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 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,
@@ -40,7 +35,7 @@ function row(part, content) {
 		children: content
 	});
 }
-function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder, "aria-label": ariaLabel, 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();
@@ -67,7 +62,7 @@ function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder, "ari
 		"aria-label": messages.ai.stop,
 		disabled,
 		onClick: () => onStop?.(),
-		children: stopGlyph
+		children: stopIcon
 	}) : /* @__PURE__ */ jsx(Button, {
 		variant: "solid",
 		size: "sm",
@@ -75,7 +70,7 @@ function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder, "ari
 		type: "submit",
 		"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", {
@@ -135,5 +130,6 @@ function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder, "ari
 		]
 	});
 }
+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 { injectComponentStyle } from "@bysages/core/styling";
 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

@@ -19,6 +19,9 @@ export interface ResponseProps extends HTMLAttributes<HTMLDivElement> {
    * 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-BfKTmtCt.mjs";
+import { t as Response } from "../../ai-response-nhDOlELQ.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 { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 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 };

package/dist/components/ai-suggestion/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 { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai-suggestion/index.tsx
-function Suggestion({ prompt, onSelect, ...rest }) {
+function SuggestionImpl({ prompt, onSelect, ...rest }) {
 	injectComponentStyle("ai");
 	return /* @__PURE__ */ jsx(Button, {
 		variant: "outline",
@@ -12,5 +13,6 @@ function Suggestion({ prompt, onSelect, ...rest }) {
 		children: prompt
 	});
 }
+const Suggestion = withSelfRoot(SuggestionImpl);
 //#endregion
 export { Suggestion as AiSuggestion, Suggestion };

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

@@ -16,6 +16,9 @@ export interface ToolProps extends HTMLAttributes<HTMLDivElement> {
   input?: ReactNode;
   output?: ReactNode;
 }
-export declare function Tool({ name, label, status, input, output, ...rest }: ToolProps): import("react").JSX.Element;
+declare function ToolImpl({ name, label, status, input, output, ...rest }: ToolProps): import("react").JSX.Element;
+export declare const Tool: typeof ToolImpl & {
+  Root: typeof ToolImpl;
+};
 //#endregion
 export { Tool as AiTool };

package/dist/components/ai-tool/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 { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-tool/index.tsx
-function Tool({ name, label, status, input, output, ...rest }) {
+function ToolImpl({ name, label, status, input, output, ...rest }) {
 	injectComponentStyle("ai");
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		...rest,
@@ -32,5 +33,6 @@ function Tool({ name, label, status, input, output, ...rest }) {
 		}) })]
 	});
 }
+const Tool = withSelfRoot(ToolImpl);
 //#endregion
 export { Tool as AiTool, Tool };

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

@@ -1,6 +1,8 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/components/alert/index.d.ts
 export type AlertStatus = "ink" | "info" | "success" | "warning" | "danger";
+/** A notice
+
 /** A notice drawn on the page: a wash of the status pigment, one heavier
  * hairline on the leading edge, the serif for its title. Root, Icon,
  * Body, Title, Description — the icon reads the status from the Root. */