@bysages/react 0.2.1 → 0.2.3

package/dist/ai-response-jZy-0Tvv.mjs

@@ -0,0 +1,127 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { renderHtml } from "@tanstack/markdown/html";
+//#region src/components/ai-response/code-copy.ts
+/** The two glyphs a copy affordance needs: the stamp and its
+* confirmation. Inline SVG keeps the enhancement framework-agnostic —
+* it lives beside the renderer's generated code HTML. */
+const COPY_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+const COPIED_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+/** How long the confirmation stays before the stamp returns. */
+const REVERT_MS = 1500;
+/** Make sure every fenced block under `host` carries its copy stamp.
+* The stamp anchors to a wrapper outside the scrolling `pre` — inside,
+* it would fix to the overflow area and travel out of view with the
+* code. The renderer rebuilds the markdown as one HTML string on every
+* stream tick, so this stays idempotent and cheap enough to re-run
+* after each patch. */
+function decorateCodeCopy(host, copyLabel) {
+	for (const pre of host.querySelectorAll("pre")) {
+		let body = pre.parentElement;
+		if (!body || body.getAttribute("data-part") !== "code-body") {
+			body = document.createElement("div");
+			body.setAttribute("data-scope", "ai");
+			body.setAttribute("data-part", "code-body");
+			pre.replaceWith(body);
+			body.appendChild(pre);
+		}
+		let button = body.querySelector("[data-part=\"code-copy\"]");
+		if (!button) {
+			button = document.createElement("button");
+			button.type = "button";
+			button.setAttribute("data-scope", "ai");
+			button.setAttribute("data-part", "code-copy");
+			button.innerHTML = COPY_CODE_ICON;
+			body.appendChild(button);
+		}
+		button.title = copyLabel;
+		button.setAttribute("aria-label", copyLabel);
+	}
+}
+/** The one delegated click for the whole response: copy the block's
+* text and confirm in place, then return the stamp after a beat. */
+async function clickCodeCopy(event, copyLabel, copiedLabel) {
+	const button = event.target?.closest("[data-part=\"code-copy\"]");
+	const pre = button?.closest("[data-part=\"code-body\"]")?.querySelector("pre");
+	if (!button || !pre) return;
+	await navigator.clipboard.writeText(pre.textContent ?? "");
+	button.innerHTML = COPIED_CODE_ICON;
+	button.setAttribute("data-state", "copied");
+	button.title = copiedLabel;
+	button.setAttribute("aria-label", copiedLabel);
+	setTimeout(() => {
+		if (!button.isConnected) return;
+		button.innerHTML = COPY_CODE_ICON;
+		button.removeAttribute("data-state");
+		button.title = copyLabel;
+		button.setAttribute("aria-label", copyLabel);
+	}, REVERT_MS);
+}
+//#endregion
+//#region src/components/ai-response/tables.ts
+/** Wide tables ride a scrolling lane instead of bursting the column.
+* The lane is a plain div: the table-as-scroll-container form is what
+* ate the mouse wheel over plain tables. Idempotent, so it can run
+* after every stream patch. */
+const lanes = /* @__PURE__ */ new Set();
+let laneObserver;
+/** A lane's verdict must follow its box — the panel around it can
+* resize at any moment, so each lane stays observed and re-decided
+* whenever its width changes. */
+function watchLane(lane) {
+	if (lanes.has(lane)) return;
+	lanes.add(lane);
+	laneObserver ??= new ResizeObserver(() => {
+		for (const lane of lanes) {
+			if (!lane.isConnected) {
+				laneObserver.unobserve(lane);
+				lanes.delete(lane);
+				continue;
+			}
+			lane.toggleAttribute("data-scrollable", lane.scrollWidth > lane.clientWidth);
+		}
+	});
+	laneObserver.observe(lane);
+}
+function wrapResponseTables(root) {
+	for (const table of root.querySelectorAll("table")) {
+		if (table.parentElement?.hasAttribute("data-table-scroll")) continue;
+		const lane = document.createElement("div");
+		lane.setAttribute("data-table-scroll", "");
+		table.replaceWith(lane);
+		lane.append(table);
+	}
+	for (const lane of root.querySelectorAll("[data-table-scroll]")) {
+		lane.toggleAttribute("data-scrollable", lane.scrollWidth > lane.clientWidth);
+		watchLane(lane);
+	}
+}
+//#endregion
+//#region src/components/ai-response/index.tsx
+function Response({ content, highlighter, copyLabel = "Copy code", copiedLabel = "Copied", ...rest }) {
+	injectComponentStyle("ai");
+	const root = useRef(null);
+	useEffect(() => {
+		const host = root.current;
+		if (host) decorateCodeCopy(host, copyLabel);
+		if (host) wrapResponseTables(host);
+	}, [
+		content,
+		highlighter,
+		copyLabel
+	]);
+	const onClick = (event) => {
+		clickCodeCopy(event.nativeEvent, copyLabel, copiedLabel);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref: root,
+		"data-scope": "ai",
+		"data-part": "response",
+		onClick,
+		dangerouslySetInnerHTML: { __html: renderHtml(content, highlighter ? { highlighter } : void 0) }
+	});
+}
+//#endregion
+export { Response as t };

package/dist/chevron-BeHvt46K.mjs

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai/chevron.tsx
+/** The folding chevron the shared indicator turns. */
+const chevron = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M6 4l4 4-4 4",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})
+});
+//#endregion
+export { chevron as t };

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

@@ -0,0 +1,7 @@
+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;
+//#endregion

package/dist/components/accordion/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Accordion as Accordion$1 } from "@ark-ui/react/accordion";
+//#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;
+injectComponentStyle("accordion");
+//#endregion
+export { Accordion };

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

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from "react";
+//#region src/components/affix/index.d.ts
+/**
+ * A nail: the wrapped content travels with the page until it reaches its
+ * offset, then stays put while the page moves on. The semantics are
+ * plain `position: sticky` — pinning is relative to the nearest
+ * *scrolling* ancestor, so the element works inside a scrollable panel
+ * exactly as it does on the page itself, and a parent with
+ * `overflow: hidden` clips the pin. Both offsets may be given: the
+ * content then holds its place inside that band.
+ */
+export interface AffixProps extends HTMLAttributes<HTMLDivElement> {
+  /** Where the content pins when it reaches the top of the scrolling
+   * ancestor — the height of any fixed header it must clear. */
+  offsetTop?: string;
+  /** 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;
+//#endregion

package/dist/components/affix/index.mjs

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

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

@@ -0,0 +1,2 @@
+import { a as SourceDocumentUIPart, c as TextUIPart, d as UIMessagePart, i as ReasoningUIPart, l as ToolUIPart, n as DataUIPart, o as SourceUrlUIPart, r as FileUIPart, s as StepStartUIPart, t as Ai, u as UIMessage } from "../../index-DaAbbSz9.mjs";
+export { Ai, 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

@@ -0,0 +1,65 @@
+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 { 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 { 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. */
+const Conversation = part("Conversation", "div", {
+	role: "log",
+	"aria-label": "Conversation"
+});
+/** The bubble's inner measure — content that belongs to neither side
+* specifically. */
+const MessageContent = part("Content", "div");
+/** The quiet row under a message — copy, retry, feedback. */
+const Actions = part("Actions", "div");
+/** The while-it-works whisper for the in-flight turns. */
+const Loader = part("Loader", "span", {
+	role: "status",
+	"aria-label": "Loading"
+});
+/** The whole family under one handle — `Ai.Conversation`,
+* `Ai.Message`, and the rest, exactly as before the split. */
+const Ai = Object.assign(Conversation, {
+	Conversation,
+	MessageContent,
+	Actions,
+	Loader,
+	Message,
+	Response,
+	Reasoning,
+	Tool,
+	Sources,
+	Source,
+	Action,
+	Suggestion,
+	PromptInput
+});
+injectComponentStyle("ai");
+//#endregion
+export { Ai };

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

@@ -0,0 +1,14 @@
+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. */
+export interface ActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** What the button does, spoken to assistive tech and shown as the
+   * hover title — copy, retry, thumbs. */
+  label: string;
+  children?: ReactNode;
+}
+export declare function Action({ label, children, ...rest }: ActionProps): import("react").JSX.Element;
+//#endregion
+export { Action as AiAction };

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

@@ -0,0 +1,18 @@
+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 }) {
+	injectComponentStyle("ai");
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		square: true,
+		"aria-label": label,
+		title: label,
+		...rest,
+		children
+	});
+}
+//#endregion
+export { Action, Action as AiAction };

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

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from "react";
+//#region src/components/ai-attachments/index.d.ts
+/** One file riding the prompt: its glyph 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. */
+  name: string;
+  /** The file's size in bytes, when known — rendered human. */
+  size?: number;
+  /** The upload's state on the wire. */
+  status?: "uploading" | "ready" | "error";
+  onRemove?: () => void;
+}
+export declare function Attachment({ name, size, status, onRemove, ...rest }: AttachmentProps): import("react").JSX.Element;
+/** The row the files ride in — a wrapping line of chips. */
+export declare function Attachments({ children, ...rest }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+//#endregion
+export { Attachment as AiAttachment, Attachments as AiAttachments };

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

@@ -0,0 +1,106 @@
+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 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 removeGlyph = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	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" })
+});
+const IMAGE_EXTS = [
+	"png",
+	"jpg",
+	"jpeg",
+	"gif",
+	"webp",
+	"svg",
+	"avif",
+	"bmp",
+	"ico"
+];
+const isImage = (name) => IMAGE_EXTS.includes(name.split(".").pop()?.toLowerCase() ?? "");
+const humanSize = (bytes) => {
+	if (bytes < 1024) return `${bytes} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB"
+	];
+	let value = bytes;
+	let unit = -1;
+	do {
+		value /= 1024;
+		unit += 1;
+	} while (value >= 1024 && unit < units.length - 1);
+	return `${value.toFixed(1)} ${units[unit]}`;
+};
+function Attachment({ name, size, status = "ready", onRemove, ...rest }) {
+	injectComponentStyle("ai");
+	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		"data-scope": "ai",
+		"data-part": "attachment",
+		"data-status": status,
+		children: [
+			isImage(name) ? imageGlyph : fileGlyph,
+			/* @__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}`,
+				onClick: () => onRemove?.(),
+				children: removeGlyph
+			})
+		]
+	});
+}
+/** The row the files ride in — a wrapping line of chips. */
+function Attachments({ children, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		"data-scope": "ai",
+		"data-part": "attachments",
+		children
+	});
+}
+//#endregion
+export { Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments };

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

@@ -0,0 +1,11 @@
+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;
+}
+export declare function Message({ role, children, ...rest }: MessageProps): import("react").JSX.Element;
+//#endregion
+export { Message as AiMessage };

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

@@ -0,0 +1,15 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai-message/index.tsx
+function Message({ role = "assistant", children, ...rest }) {
+	injectComponentStyle("ai");
+	return /* @__PURE__ */ jsx("article", {
+		...rest,
+		"data-scope": "ai",
+		"data-part": "message",
+		"data-role": role,
+		children
+	});
+}
+//#endregion
+export { Message as AiMessage, Message };

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

@@ -0,0 +1,47 @@
+import { t as MentionEntry } from "../../index-Uefyw7Im.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.
+ */
+export interface PromptInputProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
+  /** The draft in the vessel — bind `value`; it clears itself on a
+   * successful submit. */
+  value: string;
+  onValueChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  onStop?: () => void;
+  /** The quiet invitation before the reader types. */
+  placeholder?: string;
+  /** Still the words on the canvas, but the submit seal does nothing
+   * and Enter stays a line break. */
+  disabled?: boolean;
+  /** 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. */
+  mentions?: {
+    items: MentionEntry[];
+    trigger?: string;
+  };
+  header?: ReactNode;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  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;
+//#endregion
+export { PromptInput as AiPromptInput };

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

@@ -0,0 +1,135 @@
+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 { 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",
+	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" })
+});
+const stopGlyph = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	width: 14,
+	height: 14,
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("rect", {
+		x: 4.5,
+		y: 4.5,
+		width: 7,
+		height: 7,
+		fill: "currentColor"
+	})
+});
+/** 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 PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Send a message", disabled = false, busy = false, mentions, header, leading, trailing, footer, footerEnd, ...rest }) {
+	injectComponentStyle("ai");
+	const fieldRef = useRef(null);
+	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": "Stop",
+		disabled,
+		onClick: () => onStop?.(),
+		children: stopGlyph
+	}) : /* @__PURE__ */ jsx(Button, {
+		variant: "solid",
+		size: "sm",
+		square: true,
+		type: "submit",
+		"aria-label": "Send",
+		disabled: disabled || !value.trim(),
+		children: arrowUpGlyph
+	});
+	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,
+						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
+		]
+	});
+}
+//#endregion
+export { PromptInput as AiPromptInput, PromptInput };

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

@@ -0,0 +1,13 @@
+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> {
+  /** The trigger's words — the fold arrives open under them. */
+  label?: string;
+  defaultOpen?: boolean;
+  children?: ReactNode;
+}
+export declare function Reasoning({ label, children, ...rest }: ReasoningProps): import("react").JSX.Element;
+//#endregion
+export { Reasoning as AiReasoning };