@bysages/react 0.4.3 → 0.5.0

package/dist/components/ai/index.mjs

@@ -1,82 +1,7 @@
-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-CjjjprMY.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/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
-* the speaking parts — Response, Reasoning, Tool, Sources — part the
-* stream. The interactive folds are the shared Collapsible wearing a
-* `data-ai` marker, so the machine work is never ours. Parts stay
-* agnostic of any client; consumers map their message format (e.g. the
-* `UIMessage` parts re-exported here) onto these primitives. */
-function part(name, tag, extra = {}) {
-	const Tag = tag;
-	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
-		...extra,
-		...rest,
-		"data-scope": "ai",
-		"data-part": name.toLowerCase(),
-		children
-	});
-	Component.displayName = "Ai" + name;
-	return Component;
-}
-/** The log itself: the column every stroke lands in, a landmark to
-* screen readers. */
-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 = withSelfRoot(part("Content", "div"));
-/** The quiet row under a message — copy, retry, feedback. */
-const AiActions = withSelfRoot(part("Actions", "div"));
-/** The while-it-works whisper for the in-flight turns. */
-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,
-	Loader: AiLoader,
-	Message,
-	Response,
-	Reasoning,
-	Tool,
-	Sources,
-	Source,
-	Action,
-	Suggestion,
-	PromptInput
-});
-injectComponentStyle("ai");
-//#endregion
-export { Ai, AiActions, AiContent };
+import "../ai-action/index.mjs";
+import "../ai-message/index.mjs";
+import "../ai-reasoning/index.mjs";
+import "../ai-source/index.mjs";
+import "../ai-suggestion/index.mjs";
+import "../ai-tool/index.mjs";
+export { t as Ai, n as AiActions, r as AiContent, i as AiConversation, a as AiJumpToLatest, o as AiMedia, s as AiParts, c as toolPartDisplay } from "../../ai-B3vbpXlK.mjs";

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

@@ -1,5 +1,4 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
-//#region src/components/ai-action/index.d.ts
 /** A quiet icon button — copy, retry, thumbs. The label names it to
  * assistive tech and as the hover title. The control itself is the
  * shared Button in its ghost register. */
@@ -13,5 +12,4 @@ declare function ActionImpl({ label, children, ...rest }: ActionProps): import("
 export declare const Action: typeof ActionImpl & {
   Root: typeof ActionImpl;
 };
-//#endregion
 export { Action as AiAction };

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

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

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/ai-attachments/index.d.ts
 /** 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. */
@@ -21,5 +20,4 @@ declare function AttachmentsImpl({ children, ...rest }: HTMLAttributes<HTMLSpanE
 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,9 +1,9 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
+import { n as useComponentMessages, t as formatMessage } from "../../messages-B6n0lVyt.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/ai-attachments/index.tsx
+// src/components/ai-attachments/index.tsx
 const imageIcon = iconNode("image", {
 	width: 16,
 	height: 16
@@ -76,5 +76,4 @@ function AttachmentsImpl({ children, ...rest }) {
 	});
 }
 const Attachments = withSelfRoot(AttachmentsImpl);
-//#endregion
 export { Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments };

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

@@ -1,14 +1,2 @@
-import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/ai-message/index.d.ts
-/** Whose stroke this is — the user's words sit in a recessed bubble,
- * the assistant speaks flat on the paper. */
-export interface MessageProps extends HTMLAttributes<HTMLElement> {
-  role?: "user" | "assistant" | "system";
-  children?: ReactNode;
-}
-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 };
+import { n as MessageProps, t as Message } from "../../index-CjO4Ggf0.mjs";
+export { Message as AiMessage, Message, MessageProps };

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

@@ -1,17 +1,18 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/ai-message/index.tsx
-function MessageImpl({ role = "assistant", children, ...rest }) {
+// src/components/ai-message/index.tsx
+function MessageImpl({ message, role: roleProp, children, ...rest }) {
 	injectComponentStyle("ai");
+	const role = message?.role ?? roleProp ?? "assistant";
 	return /* @__PURE__ */ jsx("article", {
 		...rest,
 		"data-scope": "ai",
 		"data-part": "message",
+		...message ? { "data-message-id": message.id } : {},
 		"data-role": role,
 		children
 	});
 }
 const Message = withSelfRoot(MessageImpl);
-//#endregion
 export { Message as AiMessage, Message };

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

@@ -1,19 +1,11 @@
-import { t as MentionEntry } from "../../index-Bbg4heDO.mjs";
+import { c as MentionCommitKey, n as MentionPlacement, t as MentionEntry } from "../../index-DcpvCyt6.mjs";
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/ai-prompt-input/index.d.ts
 /**
  * The prompt vessel: the shared field textarea — self-growing on the
- * machine's autoresize — with the submit seal riding its last line.
- * Around the body, props answer the composer's anatomy: `header` for
- * attachments riding above, `leading` for the tools at the text's
- * left, `trailing` for the seal itself, `footer` for the tools beneath,
- * and `footerEnd` for the controls that close the footer row — the
- * seal falls there by default, so a model picker dropped in rides the
- * send's shoulder. Controlled — bind `value` and take the text on
- * `submit`. Enter sends; Shift+Enter breaks the line. While `busy`
- * the seal becomes a stop seal and Enter holds its breath.
+ * machine's autoresize — with the submit seal riding its last line. With
+ * mentions it becomes a token editor; the bound value remains plain text.
  */
-export interface PromptInputProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
+export interface PromptInputProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit" | "onSelect"> {
   /** The draft in the vessel — bind `value`; it clears itself on a
    * successful submit. */
   value: string;
@@ -28,23 +20,27 @@ export interface PromptInputProps extends Omit<HTMLAttributes<HTMLFormElement>,
   /** The machine is working — the seal becomes a stop seal and Enter
    * holds its breath. */
   busy?: boolean;
-  /** Mention candidates for the field: pass the roster and the summon
-   * character (`@` unless told otherwise) and the vessel rides the
-   * textarea. While candidates are up, Enter inserts and the send
-   * waits. */
+  /** Mention candidates. Rich tokens render after a choice; the value
+   * stays ordinary composer text. */
   mentions?: {
     items: MentionEntry[];
     trigger?: string;
+    triggers?: string | string[];
+    insertOnSelect?: boolean;
+    commitKeys?: MentionCommitKey[];
+    placement?: MentionPlacement;
+    clearQueryOnSelect?: boolean;
   };
+  /** The whole mention entry was selected. */
+  onSelect?: (entry: MentionEntry) => void;
   header?: ReactNode;
   leading?: ReactNode;
   trailing?: ReactNode;
   footer?: ReactNode;
   footerEnd?: ReactNode;
 }
-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;
+declare function PromptInputImpl({ value, onValueChange, onSubmit, onStop, placeholder, "aria-label": ariaLabel, disabled, busy, mentions, onSelect, 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,126 +1 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.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-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 arrowUpIcon = iconNode("arrow-up", {
-	width: 14,
-	height: 14
-});
-const stopIcon = iconNode("square", {
-	width: 14,
-	height: 14
-});
-/** An empty slot leaves no part in the anatomy — the bare vessel keeps
-* its single-line posture. */
-function row(part, content) {
-	if (content == null || Array.isArray(content) && content.length === 0) return null;
-	return /* @__PURE__ */ jsx("div", {
-		"data-scope": "ai",
-		"data-part": part,
-		children: content
-	});
-}
-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
-	}), () => fieldRef.current, {
-		getText: () => fieldRef.current?.value ?? value,
-		setText: (next) => onValueChange?.(next)
-	});
-	const mentionsActive = mentions != null;
-	const submit = () => {
-		const text = value.trim();
-		if (!text || disabled || busy) return;
-		onSubmit?.(text);
-		onValueChange?.("");
-	};
-	const seal = busy ? /* @__PURE__ */ jsx(Button, {
-		variant: "solid",
-		size: "sm",
-		square: true,
-		type: "button",
-		"aria-label": messages.ai.stop,
-		disabled,
-		onClick: () => onStop?.(),
-		children: stopIcon
-	}) : /* @__PURE__ */ jsx(Button, {
-		variant: "solid",
-		size: "sm",
-		square: true,
-		type: "submit",
-		"aria-label": messages.ai.send,
-		disabled: disabled || !value.trim(),
-		children: arrowUpIcon
-	});
-	const hasFooter = footer != null && (!Array.isArray(footer) || footer.length > 0);
-	return /* @__PURE__ */ jsxs("form", {
-		...rest,
-		"data-scope": "ai",
-		"data-part": "prompt",
-		onSubmit: (event) => {
-			event.preventDefault();
-			submit();
-		},
-		children: [
-			row("prompt-header", header),
-			/* @__PURE__ */ jsxs("div", {
-				"data-scope": "ai",
-				"data-part": "prompt-main",
-				children: [
-					row("prompt-leading", leading),
-					/* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(Field.Textarea, {
-						ref: fieldRef,
-						autoresize: true,
-						rows: 1,
-						value,
-						placeholder: placeholderText,
-						"aria-label": ariaLabel ?? messages.ai.conversation,
-						disabled,
-						onChange: (event) => {
-							onValueChange?.(event.target.value);
-							mentionState.onInput();
-						},
-						onKeyDown: (event) => {
-							if (mentionState.onKeydown(event)) return;
-							if (event.key === "Enter" && !event.shiftKey) {
-								event.preventDefault();
-								submit();
-							}
-						}
-					}) }),
-					mentionsActive ? /* @__PURE__ */ jsx(MentionsVessel, {
-						open: mentionState.open,
-						matches: mentionState.matches,
-						active: mentionState.active,
-						anchor: fieldRef.current,
-						onInsert: mentionState.insert,
-						onActiveChange: mentionState.setActive,
-						onOpenChange: (open) => {
-							if (!open) mentionState.close();
-						}
-					}) : null,
-					row("prompt-trailing", hasFooter ? trailing : trailing ?? seal)
-				]
-			}),
-			hasFooter ? /* @__PURE__ */ jsxs("div", {
-				"data-scope": "ai",
-				"data-part": "prompt-footer",
-				children: [footer, row("prompt-end", footerEnd == null ? seal : /* @__PURE__ */ jsxs(Fragment, { children: [footerEnd, seal] }))]
-			}) : null
-		]
-	});
-}
-const PromptInput = withSelfRoot(PromptInputImpl);
-//#endregion
-export { PromptInput as AiPromptInput, PromptInput };
+export { t as AiPromptInput, t as PromptInput } from "../../ai-prompt-input-k34KssHJ.mjs";

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/ai-reasoning/index.d.ts
 /** The model's thought, folded by the shared collapsible in its quiet
  * register: bare ink for a trigger, the thought on one hairline. */
 export interface ReasoningProps extends HTMLAttributes<HTMLDivElement> {
@@ -12,5 +11,4 @@ declare function ReasoningImpl({ label, children, ...rest }: ReasoningProps): im
 export declare const Reasoning: typeof ReasoningImpl & {
   Root: typeof ReasoningImpl;
 };
-//#endregion
 export { Reasoning as AiReasoning };

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

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

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

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from "react";
-//#region src/components/ai-response/index.d.ts
 /** Markdown set on the paper. Rendering goes through
- * `@tanstack/markdown`, whose defaults leave raw HTML and executable
+ * `@bysages/core/markdown`, whose defaults leave raw HTML and executable
  * links inert — streaming-safe by construction. An optional
  * highlighter re-inks fenced code; the component stays agnostic about
  * which engine provides it. */
@@ -23,5 +22,4 @@ declare function ResponseImpl({ content, highlighter, copyLabel, copiedLabel, ..
 export declare const Response: typeof ResponseImpl & {
   Root: typeof ResponseImpl;
 };
-//#endregion
 export { Response as AiResponse };

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

@@ -1,2 +1 @@
-import { t as Response } from "../../ai-response-CjjjprMY.mjs";
-export { Response as AiResponse, Response };
+export { t as AiResponse, t as Response } from "../../ai-response-DTxdL5rX.mjs";

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/ai-source/index.d.ts
 /** One place the ink came from; href and the rest ride the anchor. */
 export interface SourceProps extends HTMLAttributes<HTMLAnchorElement> {
   /** Where the ink came from — also the link text when no children are
@@ -19,5 +18,4 @@ declare function SourcesImpl({ children, ...rest }: SourcesProps): import("react
 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,7 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/ai-source/index.tsx
+// src/components/ai-source/index.tsx
 function SourceImpl({ href, children, ...rest }) {
 	injectComponentStyle("ai");
 	return /* @__PURE__ */ jsx("li", {
@@ -26,5 +26,4 @@ function SourcesImpl({ children, ...rest }) {
 	});
 }
 const Sources = withSelfRoot(SourcesImpl);
-//#endregion
 export { Source as AiSource, Source, Sources as AiSources, Sources };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/ai-suggestion/index.d.ts
 /** A seal-cut button proposing the next stroke; selection hands back
  * the prompt. The shared Button in its outline register. */
 export interface SuggestionProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onSelect"> {
@@ -12,5 +11,4 @@ declare function SuggestionImpl({ prompt, onSelect, ...rest }: SuggestionProps):
 export declare const Suggestion: typeof SuggestionImpl & {
   Root: typeof SuggestionImpl;
 };
-//#endregion
 export { Suggestion as AiSuggestion };

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

@@ -1,8 +1,8 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/ai-suggestion/index.tsx
+// src/components/ai-suggestion/index.tsx
 function SuggestionImpl({ prompt, onSelect, ...rest }) {
 	injectComponentStyle("ai");
 	return /* @__PURE__ */ jsx(Button, {
@@ -14,5 +14,4 @@ function SuggestionImpl({ prompt, onSelect, ...rest }) {
 	});
 }
 const Suggestion = withSelfRoot(SuggestionImpl);
-//#endregion
 export { Suggestion as AiSuggestion, Suggestion };

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

@@ -1,24 +1,2 @@
-import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/ai-tool/index.d.ts
-export type ToolStatus = "pending" | "running" | "completed" | "error";
-/** A tool call: the shared collapsible as the vessel — the name it was
- * reached by and the state it reached in on the trigger, its input and
- * output folded inside. */
-export interface ToolProps extends HTMLAttributes<HTMLDivElement> {
-  /** The name the tool was reached by — shown raw on the trigger
-   * unless a `label` speaks friendlier words ("Searching pages…"). */
-  name: string;
-  label?: ReactNode;
-  /** The state the call reached — pending, running, completed, or
-   * error; stamped on the fold and whispered in the status chip. */
-  status?: ToolStatus;
-  defaultOpen?: boolean;
-  input?: ReactNode;
-  output?: ReactNode;
-}
-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 };
+import { a as ToolValue, i as ToolStatus, n as ToolApproval, r as ToolProps, t as Tool } from "../../index-lCsvE2Vl.mjs";
+export { Tool as AiTool, Tool, ToolApproval, ToolProps, ToolStatus, ToolValue };

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

@@ -1,15 +1,28 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { t as chevron } from "../../chevron-BA7kV9m7.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
+import { Button } from "../button/index.mjs";
+import { t as chevron } from "../../chevron-DnImlNip.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/ai-tool/index.tsx
-function ToolImpl({ name, label, status, input, output, ...rest }) {
+// src/components/ai-tool/index.tsx
+function formatValue(value) {
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "boolean" || value === null) return String(value);
+	if (value === void 0) return "";
+	return JSON.stringify(value, null, 2) ?? "";
+}
+function ToolImpl({ name, label, status, approval, input, inputValue, output, outputValue, defaultOpen = false, onApprove, onDeny, ...rest }) {
 	injectComponentStyle("ai");
+	const messages = useComponentMessages();
+	const inputContent = input ?? (inputValue !== void 0 ? formatValue(inputValue) : null);
+	const outputContent = output ?? (outputValue !== void 0 ? formatValue(outputValue) : null);
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		...rest,
+		defaultOpen,
 		"data-ai": "tool",
 		"data-status": status,
+		"data-approval": approval,
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [
 			/* @__PURE__ */ jsx("span", { children: label ?? name }),
 			status ? /* @__PURE__ */ jsx("span", {
@@ -21,18 +34,37 @@ function ToolImpl({ name, label, status, input, output, ...rest }) {
 		] }), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsxs("div", {
 			"data-scope": "ai",
 			"data-part": "tool-body",
-			children: [input ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-				"data-scope": "ai",
-				"data-part": "tool-label",
-				children: "Input"
-			}), /* @__PURE__ */ jsx("pre", { children: input })] }) : null, output ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-				"data-scope": "ai",
-				"data-part": "tool-label",
-				children: "Output"
-			}), /* @__PURE__ */ jsx("pre", { children: output })] }) : null]
+			children: [
+				inputContent != null ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					"data-scope": "ai",
+					"data-part": "tool-label",
+					children: messages.ai.input
+				}), /* @__PURE__ */ jsx("pre", { children: inputContent })] }) : null,
+				outputContent != null ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					"data-scope": "ai",
+					"data-part": "tool-label",
+					children: messages.ai.output
+				}), /* @__PURE__ */ jsx("pre", { children: outputContent })] }) : null,
+				approval === "required" ? /* @__PURE__ */ jsxs("div", {
+					"data-scope": "ai",
+					"data-part": "tool-actions",
+					"data-approval": approval,
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						tone: "danger",
+						onClick: () => onDeny?.(),
+						children: messages.ai.deny
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "solid",
+						size: "sm",
+						onClick: () => onApprove?.(),
+						children: messages.ai.approve
+					})]
+				}) : null
+			]
 		}) })]
 	});
 }
 const Tool = withSelfRoot(ToolImpl);
-//#endregion
 export { Tool as AiTool, Tool };

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/alert/index.d.ts
 export type AlertStatus = "ink" | "info" | "success" | "warning" | "danger";
 /** A notice
 
@@ -22,4 +21,4 @@ export declare const Alert: typeof AlertRoot & {
   Title: typeof Title;
   Description: typeof Description;
 };
-//#endregion
+export {};

package/dist/components/alert/index.mjs

@@ -1,8 +1,8 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-//#region src/components/alert/index.tsx
+// src/components/alert/index.tsx
 const StatusContext = createContext("ink");
 function statusIcon(status) {
 	return iconNode({
@@ -69,5 +69,4 @@ const Alert = Object.assign(AlertRoot, {
 	Description
 });
 injectComponentStyle("alert");
-//#endregion
 export { Alert };

package/dist/components/angle-slider/index.d.mts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { AngleSlider as AngleSlider$1 } from "@ark-ui/react/angle-slider";
-//#region src/components/angle-slider/index.d.ts
 type AngleSliderRootProps = ComponentProps<typeof AngleSlider$1.Root> & {
   /** One rung of the dial ladder — the diameter the needle sweeps. */
   size?: "sm" | "md" | "lg";
@@ -30,4 +29,4 @@ type AngleSliderParts = Omit<typeof AngleSlider$1, "Root"> & {
   Root: typeof AngleSliderRoot;
 };
 export declare const AngleSlider: typeof AngleSliderFacade & AngleSliderParts;
-//#endregion
+export {};