@k8ordo/ui 1.0.0

package/dist/components/ai/_internal/collapsible.mjs

@@ -0,0 +1,49 @@
+"use client";
+import { FOCUS_RING_NO_BORDER } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai/_internal/collapsible.tsx
+const Collapsible = ({ icon, label, isOpen, defaultOpen = false, onChange, children }) => {
+	const [open, setOpen] = useControllableState({
+		value: isOpen,
+		defaultValue: defaultOpen,
+		onChange
+	});
+	const panelId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border-mute bg-bg-subtle overflow-hidden rounded-xl border text-sm",
+		children: [/* @__PURE__ */ jsxs("button", {
+			"aria-controls": panelId,
+			"aria-expanded": open,
+			className: cn("flex w-full items-center gap-2 px-3 py-2 text-left text-fg-mute transition-colors duration-150 ease-out hover:bg-bg-mute", FOCUS_RING_NO_BORDER),
+			onClick: () => {
+				setOpen(!open);
+			},
+			type: "button",
+			children: [
+				icon !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0 items-center",
+					children: icon
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: label
+				}),
+				/* @__PURE__ */ jsx(ChevronIcon, {
+					direction: open ? "up" : "down",
+					size: "sm"
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "px-3 pt-2 pb-3",
+			hidden: !open,
+			id: panelId,
+			children
+		})]
+	});
+};
+//#endregion
+export { Collapsible };

package/dist/components/ai/_internal/streaming-cursor.d.mts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+//#region src/components/ai/_internal/streaming-cursor.d.ts
+declare const StreamingCursor: FC;
+//#endregion
+export { StreamingCursor };

package/dist/components/ai/_internal/streaming-cursor.mjs

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai/_internal/streaming-cursor.tsx
+const StreamingCursor = () => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: "bg-fg-base ml-0.5 inline-block h-[1.1em] w-0.5 translate-y-[0.15em] rounded-xs motion-safe:animate-pulse"
+});
+//#endregion
+export { StreamingCursor };

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

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from "react";
+//#region src/components/ai/conversation/conversation.d.ts
+type MessagesProps = {
+  label?: string;
+  isStreaming?: boolean;
+  children: ReactNode;
+};
+declare const Conversation: {
+  readonly Root: FC<{
+    children: ReactNode;
+  }>;
+  readonly Messages: FC<MessagesProps>;
+  readonly ScrollButton: FC<{
+    label?: string;
+  }>;
+};
+//#endregion
+export { Conversation };

package/dist/components/ai/conversation/conversation.mjs

@@ -0,0 +1,111 @@
+"use client";
+import { FOCUS_RING, FOCUS_RING_NO_BORDER } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { useMessages } from "../../../i18n/context.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useIntersectionObserver } from "../../../hooks/intersection-observer/use-intersection-observer.mjs";
+import { useResize } from "../../../hooks/resize/index.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai/conversation/conversation.tsx
+const prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const [ConversationProvider, useConversationContext] = createSafeContext("Conversation.* must be used within <Conversation.Root>");
+const Root = ({ children }) => {
+	const [viewport, setViewport] = useState(null);
+	const sentinelRef = useRef(null);
+	const contentRef = useRef(null);
+	const [isAtBottom, setIsAtBottom] = useState(true);
+	const isAtBottomRef = useRef(true);
+	const updateAtBottom = useCallback((next) => {
+		isAtBottomRef.current = next;
+		setIsAtBottom(next);
+	}, []);
+	const scrollToBottom = useCallback((behavior = "smooth") => {
+		if (!viewport) return;
+		viewport.scrollTo({
+			top: viewport.scrollHeight,
+			behavior: prefersReducedMotion() ? "instant" : behavior
+		});
+	}, [viewport]);
+	const handleIntersect = useCallback((entry) => {
+		updateAtBottom(entry.isIntersecting);
+	}, [updateAtBottom]);
+	useIntersectionObserver(sentinelRef, handleIntersect, {
+		root: viewport,
+		rootMargin: "0px 0px 24px 0px"
+	});
+	const handleResize = useCallback(() => {
+		if (isAtBottomRef.current && viewport) viewport.scrollTo({
+			top: viewport.scrollHeight,
+			behavior: "instant"
+		});
+	}, [viewport]);
+	useResize(contentRef, handleResize);
+	useEffect(() => {
+		if (viewport) viewport.scrollTo({
+			top: viewport.scrollHeight,
+			behavior: "instant"
+		});
+	}, [viewport]);
+	const contextValue = useMemo(() => ({
+		isAtBottom,
+		scrollToBottom,
+		setViewport,
+		sentinelRef,
+		contentRef
+	}), [isAtBottom, scrollToBottom]);
+	return /* @__PURE__ */ jsx(ConversationProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "relative flex h-full min-h-0 flex-col",
+			children
+		})
+	});
+};
+const Messages = ({ label, isStreaming = false, children }) => {
+	const messages = useMessages();
+	const { setViewport, sentinelRef, contentRef } = useConversationContext();
+	return /* @__PURE__ */ jsx("div", {
+		"aria-busy": isStreaming,
+		"aria-label": label ?? messages.chat,
+		"aria-live": "polite",
+		className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain", FOCUS_RING_NO_BORDER),
+		ref: setViewport,
+		role: "log",
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-6 p-4",
+			ref: contentRef,
+			children: [children, /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "h-px w-full shrink-0",
+				ref: sentinelRef
+			})]
+		})
+	});
+};
+const ScrollButton = ({ label }) => {
+	const messages = useMessages();
+	const { isAtBottom, scrollToBottom } = useConversationContext();
+	if (isAtBottom) return null;
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": label ?? messages.scrollToLatest,
+		className: cn("absolute bottom-4 left-1/2 flex size-9 -translate-x-1/2 items-center justify-center rounded-full border border-border-base bg-bg-base text-fg-mute shadow-md transition-colors duration-150 ease-out hover:bg-bg-subtle", FOCUS_RING),
+		onClick: () => {
+			scrollToBottom("smooth");
+		},
+		type: "button",
+		children: /* @__PURE__ */ jsx(ChevronIcon, {
+			direction: "down",
+			size: "sm"
+		})
+	});
+};
+const Conversation = {
+	Root,
+	Messages,
+	ScrollButton
+};
+//#endregion
+export { Conversation };

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

@@ -0,0 +1,2 @@
+import { Conversation } from "./conversation.mjs";
+export { Conversation };

package/dist/components/ai/conversation/index.mjs

@@ -0,0 +1,2 @@
+import { Conversation } from "./conversation.mjs";
+export { Conversation };

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

@@ -0,0 +1,14 @@
+import { Conversation } from "./conversation/conversation.mjs";
+import "./conversation/index.mjs";
+import { Message } from "./message/message.mjs";
+import "./message/index.mjs";
+import { ChatStatus, ToolState } from "./types.mjs";
+import { PromptInput } from "./prompt-input/prompt-input.mjs";
+import "./prompt-input/index.mjs";
+import { Reasoning } from "./reasoning/reasoning.mjs";
+import "./reasoning/index.mjs";
+import { Suggestion } from "./suggestion/suggestion.mjs";
+import "./suggestion/index.mjs";
+import { ToolInvocation } from "./tool-invocation/tool-invocation.mjs";
+import "./tool-invocation/index.mjs";
+export { type ChatStatus, Conversation, Message, PromptInput, Reasoning, Suggestion, ToolInvocation, type ToolState };

package/dist/components/ai/index.mjs

@@ -0,0 +1,7 @@
+import { Conversation } from "./conversation/conversation.mjs";
+import { Message } from "./message/message.mjs";
+import { PromptInput } from "./prompt-input/prompt-input.mjs";
+import { Reasoning } from "./reasoning/reasoning.mjs";
+import { Suggestion } from "./suggestion/suggestion.mjs";
+import { ToolInvocation } from "./tool-invocation/tool-invocation.mjs";
+export { Conversation, Message, PromptInput, Reasoning, Suggestion, ToolInvocation };

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

@@ -0,0 +1,2 @@
+import { Message } from "./message.mjs";
+export { Message };

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

@@ -0,0 +1,2 @@
+import { Message } from "./message.mjs";
+export { Message };

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

@@ -0,0 +1,17 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+//#region src/components/ai/message/message.d.ts
+type MessageRole = 'user' | 'assistant';
+type RootProps = {
+  from: MessageRole;
+  children: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+type ContentProps = {
+  isStreaming?: boolean;
+  children: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+declare const Message: {
+  readonly Root: FC<RootProps>;
+  readonly Content: FC<ContentProps>;
+};
+//#endregion
+export { Message };

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

@@ -0,0 +1,34 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { StreamingCursor } from "../_internal/streaming-cursor.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai/message/message.tsx
+const [MessageProvider, useMessageContext] = createSafeContext("Message.Content must be used within <Message.Root>");
+const Root = ({ from, children, ...rest }) => {
+	const contextValue = useMemo(() => ({ from }), [from]);
+	return /* @__PURE__ */ jsx(MessageProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: cn("flex w-full items-start gap-3", from === "user" ? "flex-row-reverse" : "flex-row"),
+			"data-from": from,
+			children
+		})
+	});
+};
+const Content = ({ isStreaming = false, children, ...rest }) => {
+	const { from } = useMessageContext();
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		className: cn("min-w-0 wrap-break-word whitespace-pre-wrap text-fg-base", from === "user" ? "w-fit max-w-[80%] rounded-2xl bg-bg-subtle px-4 py-2.5" : "flex-1 leading-relaxed"),
+		children: [children, isStreaming ? /* @__PURE__ */ jsx(StreamingCursor, {}) : null]
+	});
+};
+const Message = {
+	Root,
+	Content
+};
+//#endregion
+export { Message };

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

@@ -0,0 +1,2 @@
+import { PromptInput } from "./prompt-input.mjs";
+export { PromptInput };

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

@@ -0,0 +1,2 @@
+import { PromptInput } from "./prompt-input.mjs";
+export { PromptInput };

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

@@ -0,0 +1,27 @@
+import { ChatStatus } from "../types.mjs";
+import { FC, ReactNode, Ref, TextareaHTMLAttributes } from "react";
+//#region src/components/ai/prompt-input/prompt-input.d.ts
+type RootProps = {
+  status?: ChatStatus;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onSubmit?: (message: string) => void;
+  onStop?: () => void;
+  children: ReactNode;
+};
+type TextareaProps = {
+  placeholder?: string;
+  ref?: Ref<HTMLTextAreaElement>;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'className' | 'style' | 'rows'>;
+type SubmitProps = {
+  sendLabel?: string;
+  stopLabel?: string;
+};
+declare const PromptInput: {
+  readonly Root: FC<RootProps>;
+  readonly Textarea: FC<TextareaProps>;
+  readonly Submit: FC<SubmitProps>;
+};
+//#endregion
+export { PromptInput };

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

@@ -0,0 +1,108 @@
+"use client";
+import { FOCUS_RING, FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { useMessages } from "../../../i18n/context.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { SendIcon } from "../../icons/lucide.mjs";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai/prompt-input/prompt-input.tsx
+const [PromptInputProvider, usePromptInputContext] = createSafeContext("PromptInput.Textarea / PromptInput.Submit must be used within <PromptInput.Root>");
+const resizeToContent = (el) => {
+	el.style.height = "auto";
+	el.style.height = `${el.scrollHeight.toString()}px`;
+};
+const Root = ({ status = "ready", value, defaultValue = "", onChange, onSubmit, onStop, children }) => {
+	const isControlled = value !== void 0;
+	const [text, setText] = useControllableState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const contextValue = useMemo(() => ({
+		value: text,
+		setValue: setText,
+		status,
+		stop: () => onStop?.()
+	}), [
+		text,
+		setText,
+		status,
+		onStop
+	]);
+	return /* @__PURE__ */ jsx(PromptInputProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("form", {
+			className: cn("flex items-end gap-2 rounded-2xl border border-border-base bg-bg-base p-2", FOCUS_RING_WITHIN),
+			onSubmit: (event) => {
+				event.preventDefault();
+				if (status === "submitted" || status === "streaming") return;
+				const trimmed = text.trim();
+				if (trimmed === "") return;
+				onSubmit?.(trimmed);
+				if (!isControlled) setText("");
+			},
+			children
+		})
+	});
+};
+const Textarea = ({ placeholder, onKeyDown, ref, ...rest }) => {
+	const { value, setValue, status } = usePromptInputContext();
+	const innerRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(innerRef, ref), [ref]);
+	useEffect(() => {
+		if (innerRef.current) resizeToContent(innerRef.current);
+	}, [value]);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key !== "Enter" || event.shiftKey) return;
+		if (event.nativeEvent.isComposing) return;
+		if (status !== "submitted" && status !== "streaming") {
+			event.preventDefault();
+			event.currentTarget.form?.requestSubmit();
+		}
+	};
+	return /* @__PURE__ */ jsx("textarea", {
+		...rest,
+		className: cn("max-h-48 min-h-10 flex-1 resize-none bg-transparent text-fg-base outline-hidden p-2", "placeholder:text-fg-subtle"),
+		onChange: (event) => {
+			setValue(event.target.value);
+		},
+		onKeyDown: handleKeyDown,
+		placeholder,
+		ref: mergedRef,
+		rows: 1,
+		value
+	});
+};
+const Submit = ({ sendLabel, stopLabel }) => {
+	const messages = useMessages();
+	const { value, status, stop } = usePromptInputContext();
+	if (status === "submitted" || status === "streaming") return /* @__PURE__ */ jsx("button", {
+		"aria-label": stopLabel ?? messages.stop,
+		className: cn("flex size-9 shrink-0 items-center justify-center rounded-full bg-primary-bg text-primary-fg transition-colors duration-150 ease-out", FOCUS_RING),
+		onClick: stop,
+		type: "button",
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "size-3 rounded-xs bg-current"
+		})
+	});
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": sendLabel ?? messages.send,
+		className: cn("flex size-9 shrink-0 items-center justify-center rounded-full bg-primary-bg text-primary-fg transition-colors duration-150 ease-out", "disabled:cursor-not-allowed disabled:opacity-50", FOCUS_RING),
+		disabled: value.trim() === "",
+		type: "submit",
+		children: /* @__PURE__ */ jsx(SendIcon, { size: "sm" })
+	});
+};
+const PromptInput = {
+	Root,
+	Textarea,
+	Submit
+};
+//#endregion
+export { PromptInput };

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

@@ -0,0 +1,2 @@
+import { Reasoning } from "./reasoning.mjs";
+export { Reasoning };

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

@@ -0,0 +1,2 @@
+import { Reasoning } from "./reasoning.mjs";
+export { Reasoning };

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

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+//#region src/components/ai/reasoning/reasoning.d.ts
+type Props = {
+  children: ReactNode;
+  isStreaming?: boolean;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onChange?: (isOpen: boolean) => void;
+};
+declare const Reasoning: FC<Props>;
+//#endregion
+export { Reasoning };

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

@@ -0,0 +1,25 @@
+"use client";
+import { useMessages } from "../../../i18n/context.mjs";
+import { SparklesIcon } from "../../icons/lucide.mjs";
+import { Collapsible } from "../_internal/collapsible.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai/reasoning/reasoning.tsx
+const Reasoning = ({ children, isStreaming = false, isOpen, defaultOpen = false, onChange }) => {
+	const messages = useMessages();
+	return /* @__PURE__ */ jsx(Collapsible, {
+		defaultOpen,
+		isOpen,
+		onChange,
+		icon: /* @__PURE__ */ jsx("span", {
+			className: "text-fg-subtle",
+			children: /* @__PURE__ */ jsx(SparklesIcon, { size: "sm" })
+		}),
+		label: isStreaming ? messages.reasoningStreaming : messages.reasoning,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "text-fg-mute text-sm leading-relaxed whitespace-pre-wrap",
+			children
+		})
+	});
+};
+//#endregion
+export { Reasoning };

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

@@ -0,0 +1,2 @@
+import { Response } from "./response.mjs";
+export { Response };

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

@@ -0,0 +1,2 @@
+import { Response } from "./response.mjs";
+export { Response };

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

@@ -0,0 +1,20 @@
+import { FC } from "react";
+import { StreamdownProps } from "streamdown";
+//#region src/components/ai/response/response.d.ts
+type Props = {
+  children: string;
+  isStreaming?: boolean;
+} & Omit<StreamdownProps, 'children' | 'className' | 'mode'>;
+/**
+ * ストリーミング対応の Markdown レンダラ。未クローズのコードブロックなど
+ * 途中の Markdown も streamdown が破綻なく描画する。
+ *
+ * このコンポーネントは streamdown（optional peer）に依存する。利用側は
+ * `pnpm add streamdown` に加え、`streamdown/styles.css` の読み込みと
+ * Tailwind の `@source` 設定が必要。詳細は docs を参照。
+ *
+ * `children` / `isStreaming` 以外の props は streamdown にそのまま渡る。
+ */
+declare const Response: FC<Props>;
+//#endregion
+export { Response };

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

@@ -0,0 +1,57 @@
+"use client";
+import { useMessages } from "../../../i18n/context.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Streamdown } from "streamdown";
+//#region src/components/ai/response/response.tsx
+const defaultLinkSafety = { enabled: false };
+/**
+* ストリーミング対応の Markdown レンダラ。未クローズのコードブロックなど
+* 途中の Markdown も streamdown が破綻なく描画する。
+*
+* このコンポーネントは streamdown（optional peer）に依存する。利用側は
+* `pnpm add streamdown` に加え、`streamdown/styles.css` の読み込みと
+* Tailwind の `@source` 設定が必要。詳細は docs を参照。
+*
+* `children` / `isStreaming` 以外の props は streamdown にそのまま渡る。
+*/
+const Response = ({ children, isStreaming = false, linkSafety = defaultLinkSafety, translations, ...rest }) => {
+	const messages = useMessages();
+	const mergedTranslations = useMemo(() => ({
+		close: messages.close,
+		copied: messages.responseCopied,
+		copyCode: messages.responseCopyCode,
+		copyLink: messages.responseCopyLink,
+		copyTable: messages.responseCopyTable,
+		copyTableAsCsv: messages.responseCopyTableAsCsv,
+		copyTableAsMarkdown: messages.responseCopyTableAsMarkdown,
+		copyTableAsTsv: messages.responseCopyTableAsTsv,
+		downloadDiagram: messages.responseDownloadDiagram,
+		downloadDiagramAsMmd: messages.responseDownloadDiagramAsMmd,
+		downloadDiagramAsPng: messages.responseDownloadDiagramAsPng,
+		downloadDiagramAsSvg: messages.responseDownloadDiagramAsSvg,
+		downloadFile: messages.responseDownloadFile,
+		downloadImage: messages.responseDownloadImage,
+		downloadTable: messages.responseDownloadTable,
+		downloadTableAsCsv: messages.responseDownloadTableAsCsv,
+		downloadTableAsMarkdown: messages.responseDownloadTableAsMarkdown,
+		exitFullscreen: messages.responseExitFullscreen,
+		externalLinkWarning: messages.responseExternalLinkWarning,
+		imageNotAvailable: messages.responseImageNotAvailable,
+		openExternalLink: messages.responseOpenExternalLink,
+		openLink: messages.responseOpenLink,
+		viewFullscreen: messages.responseViewFullscreen,
+		...translations
+	}), [messages, translations]);
+	return /* @__PURE__ */ jsx(Streamdown, {
+		className: "text-fg-base",
+		linkSafety,
+		mode: isStreaming ? "streaming" : "static",
+		parseIncompleteMarkdown: true,
+		translations: mergedTranslations,
+		...rest,
+		children
+	});
+};
+//#endregion
+export { Response };

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

@@ -0,0 +1,2 @@
+import { Suggestion } from "./suggestion.mjs";
+export { Suggestion };

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

@@ -0,0 +1,2 @@
+import { Suggestion } from "./suggestion.mjs";
+export { Suggestion };

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

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+//#region src/components/ai/suggestion/suggestion.d.ts
+type ListProps = {
+  label?: string;
+  children: ReactNode;
+};
+type ItemProps = {
+  value: string;
+  onSelect?: (value: string) => void;
+  children?: ReactNode;
+};
+declare const Suggestion: {
+  readonly List: FC<ListProps>;
+  readonly Item: FC<ItemProps>;
+};
+//#endregion
+export { Suggestion };

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

@@ -0,0 +1,29 @@
+"use client";
+import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { useMessages } from "../../../i18n/context.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai/suggestion/suggestion.tsx
+const List = ({ label, children }) => {
+	const messages = useMessages();
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": label ?? messages.suggestions,
+		className: "flex flex-wrap gap-2",
+		role: "group",
+		children
+	});
+};
+const Item = ({ value, onSelect, children }) => /* @__PURE__ */ jsx("button", {
+	className: cn("rounded-full border border-border-base bg-bg-subtle px-3 py-1.5 text-sm text-fg-base transition-colors duration-150 ease-out hover:bg-bg-mute", FOCUS_RING),
+	onClick: () => {
+		onSelect?.(value);
+	},
+	type: "button",
+	children: children ?? value
+});
+const Suggestion = {
+	List,
+	Item
+};
+//#endregion
+export { Suggestion };

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

@@ -0,0 +1,2 @@
+import { ToolInvocation } from "./tool-invocation.mjs";
+export { ToolInvocation };

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

@@ -0,0 +1,2 @@
+import { ToolInvocation } from "./tool-invocation.mjs";
+export { ToolInvocation };

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

@@ -0,0 +1,17 @@
+import { ToolState } from "../types.mjs";
+import { FC, ReactNode } from "react";
+//#region src/components/ai/tool-invocation/tool-invocation.d.ts
+type Props = {
+  name: string;
+  state: ToolState;
+  input?: unknown;
+  output?: ReactNode;
+  errorText?: string;
+  deniedReason?: string;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onChange?: (isOpen: boolean) => void;
+};
+declare const ToolInvocation: FC<Props>;
+//#endregion
+export { ToolInvocation };