themelia-react-ui 2.0.0 → 2.0.1

package/dist/features/ai-chat.js

@@ -1,53 +1,54 @@
 "use client";
 import { interpolateString as e, useStrings as t } from "../lib/strings.js";
-import { t as n } from "../utils-Cospvlj1.js";
-import { a as r, s as i } from "../typography-CAr3dQhX.js";
-import { t as a } from "../button-BS3KDg00.js";
-import { t as o } from "../structure-hzCW-XsV.js";
-import { t as s } from "../badge-0tATj-tW.js";
-import { d as c } from "../text-inputs-BFpku0Qd.js";
-import { l } from "../data-display-3xWQUnMA.js";
-import { c as u, l as d, s as f } from "../message-YfFmbXNP.js";
-import { S as p, _ as m, a as h, b as g, d as _, h as v, l as y, p as b, r as x, s as S, t as C, y as w } from "../ai-artifact-2PQ2fItc.js";
-import { useCallback as T, useEffect as E, useRef as D, useState as O } from "react";
-import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
-import { ArrowDown as M, ArrowUp as N, Loader2 as P, Paperclip as F, Sparkles as I, Square as L, X as R } from "lucide-react";
+import { t as n } from "../utils-l5LpDw2z.js";
+import { n as r } from "../buttons-SbIcm1HJ.js";
+import { a as i, s as a } from "../typography-DTRkE9zL.js";
+import { t as o } from "../focus-recipes-B653VaLq.js";
+import { t as s } from "../structure-DC2dygdA.js";
+import { t as c } from "../badge-MrKVNzW9.js";
+import { d as l } from "../text-inputs-aaK9wcDT.js";
+import { s as u } from "../data-display-DafIvCl5.js";
+import { c as d, l as f, s as p } from "../message-CdHgIWKf.js";
+import { S as m, _ as h, a as g, b as _, d as v, h as y, l as b, p as x, r as S, s as C, t as w, y as T } from "../ai-artifact-BMJdv-6q.js";
+import { useCallback as E, useEffect as D, useRef as O, useState as k } from "react";
+import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
+import { ArrowDown as N, ArrowUp as P, Loader2 as F, Paperclip as I, Sparkles as L, Square as R, X as z } from "lucide-react";
 //#region src/components/features/ai-chat/ai-chat.strings.ts
-var z = {
+var B = {
 	placeholder: "Ask anything…",
 	attachAria: "Attach files",
 	submitAria: "Send message",
 	stopAria: "Stop generating",
 	modelPickerAria: "Choose model",
 	hint: "Press {{submitKey}} to send · {{newlineKey}} for newline"
-}, B = {
+}, V = {
 	transcriptAria: "Conversation messages",
 	empty: "No messages yet.",
 	scrollToBottom: "Jump to latest",
 	scrollToBottomAria: "Scroll to bottom"
-}, V = {
+}, H = {
 	header: "In queue",
 	cancelAria: "Remove from queue",
 	queuedLabel: "Queued",
 	runningLabel: "Running"
-}, H = { header: "Try" }, U = { pending: "Thinking…" }, W = {
-	prompt: z,
-	conversation: B,
-	queue: V,
-	suggestions: H,
-	message: U,
+}, U = { header: "Try" }, W = { pending: "Thinking…" }, G = {
+	prompt: B,
+	conversation: V,
+	queue: H,
+	suggestions: U,
+	message: W,
 	emptyTitle: "Start a conversation",
 	emptyDescription: "Ask a question, share context, or attach a file to get going.",
 	disabledAnnouncement: "Chat is disabled"
 };
 //#endregion
 //#region src/components/features/ai-chat/partials/ai-chat-attachments-strip.tsx
-function G({ attachments: e, onRemove: t, onOpen: r, className: i }) {
-	return e.length === 0 ? null : /* @__PURE__ */ A(o, {
+function K({ attachments: e, onRemove: t, onOpen: r, className: i }) {
+	return e.length === 0 ? null : /* @__PURE__ */ j(s, {
 		direction: "horizontal",
 		gap: "sm",
 		className: n("ai-chat-attachments-strip--component", i),
-		children: e.map((e) => /* @__PURE__ */ A(v, {
+		children: e.map((e) => /* @__PURE__ */ j(y, {
 			name: e.name,
 			meta: e.meta,
 			kind: e.kind,
@@ -60,17 +61,17 @@ function G({ attachments: e, onRemove: t, onOpen: r, className: i }) {
 		}, e.id))
 	});
 }
-G.displayName = "AiChatAttachmentsStrip";
+K.displayName = "AiChatAttachmentsStrip";
 //#endregion
 //#region src/components/features/ai-chat/hooks/use-ai-chat-scroll.ts
-function K({ threshold: e = 80, dependency: t, disableAutoScroll: n = !1 } = {}) {
-	let r = D(null), i = D(null), [a, o] = O(!0), s = T((e = "smooth") => {
+function q({ threshold: e = 80, dependency: t, disableAutoScroll: n = !1 } = {}) {
+	let r = O(null), i = O(null), [a, o] = k(!0), s = E((e = "smooth") => {
 		i.current?.scrollIntoView({
 			behavior: e,
 			block: "end"
 		});
 	}, []);
-	return E(() => {
+	return D(() => {
 		let t = r.current;
 		if (!t) return;
 		let n = () => {
@@ -78,7 +79,7 @@ function K({ threshold: e = 80, dependency: t, disableAutoScroll: n = !1 } = {})
 			o(n <= e);
 		};
 		return n(), t.addEventListener("scroll", n, { passive: !0 }), () => t.removeEventListener("scroll", n);
-	}, [e]), E(() => {
+	}, [e]), D(() => {
 		if (n || !a) return;
 		let e = window.requestAnimationFrame(() => s("auto"));
 		return () => window.cancelAnimationFrame(e);
@@ -91,114 +92,114 @@ function K({ threshold: e = 80, dependency: t, disableAutoScroll: n = !1 } = {})
 }
 //#endregion
 //#region src/components/features/ai-chat/partials/ai-chat-conversation.tsx
-function q({ messages: e, renderMessage: r, intro: s, footer: c, empty: l, disableAutoScroll: u, className: d, strings: f }) {
-	let p = t(B, f), { containerRef: m, endRef: h, isAtBottom: g, scrollToBottom: _ } = K({
+function J({ messages: e, renderMessage: i, intro: c, footer: l, empty: u, disableAutoScroll: d, className: f, strings: p }) {
+	let m = t(V, p), { containerRef: h, endRef: g, isAtBottom: _, scrollToBottom: v } = q({
 		dependency: e.length,
-		disableAutoScroll: u
-	}), v = e.length === 0 && !s;
-	return /* @__PURE__ */ j("div", {
-		className: n("ai-chat-conversation--component relative flex h-full min-h-0 flex-col", d),
-		children: [/* @__PURE__ */ j("div", {
-			ref: m,
+		disableAutoScroll: d
+	}), y = e.length === 0 && !c;
+	return /* @__PURE__ */ M("div", {
+		className: n("ai-chat-conversation--component relative flex h-full min-h-0 flex-col", f),
+		children: [/* @__PURE__ */ M("div", {
+			ref: h,
 			tabIndex: 0,
-			"aria-label": p.transcriptAria,
-			className: "flex-1 overflow-y-auto p-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+			"aria-label": m.transcriptAria,
+			className: `flex-1 overflow-y-auto p-surface focus-visible:outline-none ${o.inset}`,
 			children: [
-				!!s && /* @__PURE__ */ A("div", {
+				!!c && /* @__PURE__ */ j("div", {
 					className: "mb-space-xl",
-					children: s
+					children: c
 				}),
-				v ? l ?? /* @__PURE__ */ A("div", {
+				y ? u ?? /* @__PURE__ */ j("div", {
 					className: "flex h-full items-center justify-center p-surface-lg",
-					children: /* @__PURE__ */ A(i, {
+					children: /* @__PURE__ */ j(a, {
 						type: "secondary",
-						children: p.empty
+						children: m.empty
 					})
-				}) : /* @__PURE__ */ A(o, {
-					render: /* @__PURE__ */ A("ol", {}),
+				}) : /* @__PURE__ */ j(s, {
+					render: /* @__PURE__ */ j("ol", {}),
 					gap: "xl",
 					className: "ai-chat-conversation--messages m-0 list-none p-0 font-sans",
 					children: e.map((t, n) => {
-						let i = {
+						let r = {
 							isLast: n === e.length - 1,
 							index: n
 						};
-						return /* @__PURE__ */ A("li", { children: r(t, i) }, t.id);
+						return /* @__PURE__ */ j("li", { children: i(t, r) }, t.id);
 					})
 				}),
-				!!c && /* @__PURE__ */ A("div", {
+				!!l && /* @__PURE__ */ j("div", {
 					className: "mt-space-xl",
-					children: c
+					children: l
 				}),
-				/* @__PURE__ */ A("div", {
-					ref: h,
+				/* @__PURE__ */ j("div", {
+					ref: g,
 					"aria-hidden": !0,
 					className: "h-px"
 				})
 			]
-		}), !g && /* @__PURE__ */ A("div", {
-			className: "ai-chat-conversation--jump flex shrink-0 justify-center border-t border-border/50 bg-background/95 px-space-md py-space-sm",
-			children: /* @__PURE__ */ j(a, {
+		}), !_ && /* @__PURE__ */ j("div", {
+			className: "ai-chat-conversation--jump flex shrink-0 justify-center border-t border-border/60 bg-background px-space-md py-space-sm",
+			children: /* @__PURE__ */ M(r, {
 				type: "button",
 				tone: "secondary",
 				buttonStyle: "solid",
-				"aria-label": p.scrollToBottomAria,
-				onClick: () => _("smooth"),
+				"aria-label": m.scrollToBottomAria,
+				onClick: () => v("smooth"),
 				className: n("shadow-sm max-sm:size-action-sm max-sm:min-h-0 max-sm:p-0", "border border-border/60"),
-				children: [/* @__PURE__ */ A(M, { className: "size-icon-md" }), /* @__PURE__ */ A(i, {
+				children: [/* @__PURE__ */ j(N, { className: "size-icon-md" }), /* @__PURE__ */ j(a, {
 					tag: "span",
 					size: "pxs",
 					className: "max-sm:sr-only",
-					children: p.scrollToBottom
+					children: m.scrollToBottom
 				})]
 			})
 		})]
 	});
 }
-q.displayName = "AiChatConversation";
+J.displayName = "AiChatConversation";
 //#endregion
 //#region src/components/features/ai-chat/partials/ai-chat-empty-state.tsx
-function J({ title: e = "Start a conversation", description: t, icon: r = I, below: i, className: a }) {
-	let s = /* @__PURE__ */ A(r, {
+function Y({ title: e = "Start a conversation", description: t, icon: r = L, below: i, className: a }) {
+	let o = /* @__PURE__ */ j(r, {
 		className: "size-icon",
 		"aria-hidden": "true"
 	});
-	return /* @__PURE__ */ j(o, {
+	return /* @__PURE__ */ M(s, {
 		gap: "md",
 		align: "center",
 		justify: "center",
 		className: n("ai-chat-empty-state--component min-h-full text-center", a),
-		children: [/* @__PURE__ */ A(l, {
+		children: [/* @__PURE__ */ j(u, {
 			title: e,
 			description: t ?? !1,
-			media: s,
+			media: o,
 			mediaVariant: "icon",
 			padding: "md",
 			className: "w-full"
-		}), !!i && /* @__PURE__ */ A("div", {
+		}), !!i && /* @__PURE__ */ j("div", {
 			className: "w-full max-w-2xl",
 			children: i
 		})]
 	});
 }
-J.displayName = "AiChatEmptyState";
+Y.displayName = "AiChatEmptyState";
 //#endregion
 //#region src/components/features/ai-chat/partials/ai-chat-message.tsx
-function Y({ message: e, onCopy: r, onRegenerate: i, onAttachmentOpen: a, className: s, strings: c }) {
-	let l = t(U, c), m = e.role === "user" ? "end" : "start", h = [], g = [];
+function X({ message: e, onCopy: r, onRegenerate: i, onAttachmentOpen: a, className: o, strings: c }) {
+	let l = t(W, c), u = e.role === "user" ? "end" : "start", h = [], g = [];
 	for (let t of e.parts) t.type === "text" ? h.push(t) : g.push(t);
-	let _ = h.map((e) => e.type === "text" ? e.plain ?? X(e.content) : "").filter(Boolean).join("\n") || void 0, v = e.pending ? /* @__PURE__ */ A(w, { children: l.pending }) : h.length === 0 && g.length > 0 ? null : /* @__PURE__ */ A(o, {
+	let _ = h.map((e) => e.type === "text" ? e.plain ?? te(e.content) : "").filter(Boolean).join("\n") || void 0, v = e.pending ? /* @__PURE__ */ j(T, { children: l.pending }) : h.length === 0 && g.length > 0 ? null : /* @__PURE__ */ j(s, {
 		gap: "md",
-		children: h.map((e, t) => e.type === "text" ? /* @__PURE__ */ A("div", {
+		children: h.map((e, t) => e.type === "text" ? /* @__PURE__ */ j("div", {
 			className: "whitespace-pre-wrap",
 			children: e.content
 		}, t) : null)
-	}), y = v !== null || e.pending, b = y && (e.avatar == null || f(e.avatar)), x = b ? d[m] : "col-start-1";
-	return /* @__PURE__ */ j(o, {
+	}), y = v !== null || e.pending, b = y && (e.avatar == null || p(e.avatar)), x = b ? f[u] : "col-start-1";
+	return /* @__PURE__ */ M(s, {
 		gap: "md",
-		className: n("ai-chat-message--component grid min-w-0", b ? u[m] : "grid-cols-1", s),
+		className: n("ai-chat-message--component grid min-w-0", b ? d[u] : "grid-cols-1", o),
 		children: [
-			y && /* @__PURE__ */ A(p, {
+			y && /* @__PURE__ */ j(m, {
 				role: e.role,
 				avatar: e.avatar,
 				authorName: e.authorName,
@@ -210,35 +211,35 @@ function Y({ message: e, onCopy: r, onRegenerate: i, onAttachmentOpen: a, classN
 				onRegenerate: i,
 				children: v
 			}),
-			g.length > 0 && /* @__PURE__ */ A(o, {
+			g.length > 0 && /* @__PURE__ */ j(s, {
 				gap: "md",
 				className: n("ai-chat-message--parts min-w-0", x),
-				children: g.map((e, t) => /* @__PURE__ */ A(ee, {
+				children: g.map((e, t) => /* @__PURE__ */ j(ee, {
 					part: e,
 					onAttachmentOpen: a
 				}, t))
 			}),
-			!!e.trailing && /* @__PURE__ */ A("div", {
+			!!e.trailing && /* @__PURE__ */ j("div", {
 				className: n("ai-chat-message--trailing min-w-0", x),
 				children: e.trailing
 			})
 		]
 	});
 }
-Y.displayName = "AiChatMessage";
+X.displayName = "AiChatMessage";
 function ee({ part: e, onAttachmentOpen: t }) {
 	switch (e.type) {
-		case "text": return /* @__PURE__ */ A(i, { children: e.content });
-		case "reasoning": return /* @__PURE__ */ A(S, {
+		case "text": return /* @__PURE__ */ j(a, { children: e.content });
+		case "reasoning": return /* @__PURE__ */ j(C, {
 			streaming: e.streaming,
 			durationSeconds: e.durationSeconds,
 			children: e.content
 		});
-		case "chain-of-thought": return /* @__PURE__ */ A(h, {
+		case "chain-of-thought": return /* @__PURE__ */ j(g, {
 			steps: e.steps,
 			streaming: e.streaming
 		});
-		case "tool": return /* @__PURE__ */ A(g, {
+		case "tool": return /* @__PURE__ */ j(_, {
 			name: e.name,
 			status: e.status,
 			icon: e.icon,
@@ -248,24 +249,24 @@ function ee({ part: e, onAttachmentOpen: t }) {
 			durationMs: e.durationMs,
 			defaultExpanded: e.defaultExpanded
 		});
-		case "code": return /* @__PURE__ */ A(m, {
+		case "code": return /* @__PURE__ */ j(h, {
 			code: e.code,
 			language: e.language,
 			filename: e.filename,
 			showLineNumbers: e.showLineNumbers,
 			highlightLines: e.highlightLines
 		});
-		case "attachments": return /* @__PURE__ */ A(G, {
+		case "attachments": return /* @__PURE__ */ j(K, {
 			attachments: e.items,
 			onOpen: t ? (e) => t(e.id) : void 0
 		});
-		case "sources": return /* @__PURE__ */ A(y, {
+		case "sources": return /* @__PURE__ */ j(b, {
 			sources: e.items,
 			variant: e.variant,
 			defaultExpanded: e.defaultExpanded
 		});
-		case "task": return /* @__PURE__ */ A(x, { task: e.task });
-		case "artifact": return /* @__PURE__ */ A(C, {
+		case "task": return /* @__PURE__ */ j(S, { task: e.task });
+		case "artifact": return /* @__PURE__ */ j(w, {
 			title: e.title,
 			subtitle: e.subtitle,
 			icon: e.icon,
@@ -275,7 +276,7 @@ function ee({ part: e, onAttachmentOpen: t }) {
 			onDownload: e.onDownload,
 			children: e.body
 		});
-		case "confirmation": return /* @__PURE__ */ A(_, {
+		case "confirmation": return /* @__PURE__ */ j(v, {
 			title: e.title,
 			description: e.description,
 			tone: e.tone,
@@ -284,45 +285,45 @@ function ee({ part: e, onAttachmentOpen: t }) {
 			onApprove: e.onApprove,
 			onReject: e.onReject
 		});
-		case "custom": return /* @__PURE__ */ A(k, { children: e.render() });
+		case "custom": return /* @__PURE__ */ j(A, { children: e.render() });
 		default: return null;
 	}
 }
-function X(e) {
-	return typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(X).join("") : "";
+function te(e) {
+	return typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(te).join("") : "";
 }
 //#endregion
 //#region src/components/features/ai-chat/partials/ai-chat-prompt-input.tsx
-function Z({ value: r, onValueChange: o, onSubmit: s, onStop: l, streaming: u = !1, disabled: d = !1, attachments: f = [], onRemoveAttachment: p, onAttach: m, showAttach: h, leadingActions: g, trailingActions: _, hideHint: v = !1, minRows: y = 1, maxRows: b = 8, autoFocus: x = !1, submitKeyLabel: S = "↩", className: C, strings: w }) {
-	let E = t(z, w), O = D(null), k = !u && !d && (r.trim().length > 0 || f.length > 0), M = T(() => {
+function Z({ value: i, onValueChange: o, onSubmit: s, onStop: c, streaming: u = !1, disabled: d = !1, attachments: f = [], onRemoveAttachment: p, onAttach: m, showAttach: h, leadingActions: g, trailingActions: _, hideHint: v = !1, minRows: y = 1, maxRows: b = 8, autoFocus: x = !1, submitKeyLabel: S = "↩", className: C, strings: w }) {
+	let T = t(B, w), D = O(null), k = !u && !d && (i.trim().length > 0 || f.length > 0), A = E(() => {
 		k && s?.({
-			text: r,
+			text: i,
 			attachments: f
 		});
 	}, [
 		k,
 		s,
-		r,
+		i,
 		f
-	]), P = T((e) => {
-		e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), M());
-	}, [M]), I = h ?? !!m;
-	return /* @__PURE__ */ j("div", {
-		className: n("ai-chat-prompt-input--component", "rounded-radius border border-border bg-card transition-colors duration-150", "focus-within:border-foreground/20 focus-within:ring-2 focus-within:ring-ring", d && "opacity-60 pointer-events-none", C),
+	]), N = E((e) => {
+		e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), A());
+	}, [A]), F = h ?? !!m;
+	return /* @__PURE__ */ M("div", {
+		className: n("ai-chat-prompt-input--component", "rounded-radius border border-input bg-card transition-[color,box-shadow] duration-150", "has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-3 has-[textarea:focus-visible]:ring-ring/50", d && "opacity-50 pointer-events-none", C),
 		children: [
-			f.length > 0 && /* @__PURE__ */ A("div", {
+			f.length > 0 && /* @__PURE__ */ j("div", {
 				className: "border-b border-border/60 p-surface-xs",
-				children: /* @__PURE__ */ A(G, {
+				children: /* @__PURE__ */ j(K, {
 					attachments: f,
 					onRemove: p
 				})
 			}),
-			/* @__PURE__ */ A(c, {
-				ref: O,
-				value: r,
+			/* @__PURE__ */ j(l, {
+				ref: D,
+				value: i,
 				onChange: (e) => o(e.target.value),
-				onKeyDown: P,
-				placeholder: E.placeholder,
+				onKeyDown: N,
+				placeholder: T.placeholder,
 				autoResize: !0,
 				minRows: y,
 				maxRows: b,
@@ -330,52 +331,52 @@ function Z({ value: r, onValueChange: o, onSubmit: s, onStop: l, streaming: u =
 				disabled: d,
 				className: n("!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 resize-none")
 			}),
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ M("div", {
 				className: "flex items-center gap-space-xs border-t border-border/60 px-surface-xs py-space-sm",
 				children: [
 					g,
-					I && /* @__PURE__ */ A(a, {
+					F && /* @__PURE__ */ j(r, {
 						type: "button",
 						tone: "secondary",
 						buttonStyle: "ghost",
 						size: "sm",
 						iconOnly: !0,
-						"aria-label": E.attachAria,
+						"aria-label": T.attachAria,
 						onClick: m,
 						disabled: d,
-						children: /* @__PURE__ */ A(F, { className: "size-icon" })
+						children: /* @__PURE__ */ j(I, { className: "size-icon" })
 					}),
-					/* @__PURE__ */ j("div", {
+					/* @__PURE__ */ M("div", {
 						className: "ml-auto flex items-center gap-space-xs",
-						children: [_, u ? /* @__PURE__ */ A(a, {
+						children: [_, u ? /* @__PURE__ */ j(r, {
 							type: "button",
 							tone: "secondary",
 							buttonStyle: "solid",
 							size: "sm",
 							iconOnly: !0,
-							"aria-label": E.stopAria,
-							onClick: l,
-							children: /* @__PURE__ */ A(L, { className: "size-icon-md fill-current" })
-						}) : /* @__PURE__ */ A(a, {
+							"aria-label": T.stopAria,
+							onClick: c,
+							children: /* @__PURE__ */ j(R, { className: "size-icon-md fill-current" })
+						}) : /* @__PURE__ */ j(r, {
 							type: "button",
 							tone: "primary",
 							buttonStyle: "solid",
 							size: "sm",
 							iconOnly: !0,
-							"aria-label": E.submitAria,
-							onClick: M,
+							"aria-label": T.submitAria,
+							onClick: A,
 							disabled: !k,
-							children: /* @__PURE__ */ A(N, { className: "size-icon" })
+							children: /* @__PURE__ */ j(P, { className: "size-icon" })
 						})]
 					})
 				]
 			}),
-			!v && /* @__PURE__ */ A("div", {
+			!v && /* @__PURE__ */ j("div", {
 				className: "px-surface-xs pb-surface-xs",
-				children: /* @__PURE__ */ A(i, {
+				children: /* @__PURE__ */ j(a, {
 					size: "xs",
 					type: "discrete",
-					children: e(E.hint, {
+					children: e(T.hint, {
 						submitKey: S,
 						newlineKey: "⇧↩"
 					})
@@ -387,41 +388,41 @@ function Z({ value: r, onValueChange: o, onSubmit: s, onStop: l, streaming: u =
 Z.displayName = "AiChatPromptInput";
 //#endregion
 //#region src/components/features/ai-chat/partials/ai-chat-queue.tsx
-function Q({ items: e, hideHeader: c = !1, onCancel: l, className: u, strings: d }) {
-	let f = t(V, d);
-	return e.length === 0 ? null : /* @__PURE__ */ j(o, {
+function Q({ items: e, hideHeader: o = !1, onCancel: l, className: u, strings: d }) {
+	let f = t(H, d);
+	return e.length === 0 ? null : /* @__PURE__ */ M(s, {
 		gap: "sm",
-		className: n("ai-chat-queue--component", "rounded-radius border border-border/60 bg-muted/20 p-surface-xs", u),
-		children: [!c && /* @__PURE__ */ j(r, {
+		className: n("ai-chat-queue--component", "rounded-radius border border-border/60 bg-muted/30 p-surface-xs", u),
+		children: [!o && /* @__PURE__ */ M(i, {
 			className: "px-1",
 			children: [
 				f.header,
 				" · ",
 				e.length
 			]
-		}), /* @__PURE__ */ A(o, {
-			render: /* @__PURE__ */ A("ul", {}),
+		}), /* @__PURE__ */ j(s, {
+			render: /* @__PURE__ */ j("ul", {}),
 			gap: "xs",
 			className: "ai-chat-queue--list m-0 list-none p-0 font-sans",
 			children: e.map((e) => {
 				let t = e.status ?? "queued";
-				return /* @__PURE__ */ j("li", {
+				return /* @__PURE__ */ M("li", {
 					className: "flex items-center gap-space-md rounded-inner bg-card px-space-md py-space-sm",
 					children: [
-						t === "running" ? /* @__PURE__ */ A(P, { className: "size-icon-md shrink-0 animate-spin text-primary-accent" }) : /* @__PURE__ */ A("span", {
+						t === "running" ? /* @__PURE__ */ j(F, { className: "size-icon-md shrink-0 animate-spin text-primary-accent" }) : /* @__PURE__ */ j("span", {
 							"aria-hidden": !0,
 							className: "flex size-icon-md shrink-0 items-center justify-center",
-							children: /* @__PURE__ */ A("span", { className: "size-2 rounded-full bg-muted-foreground/50" })
+							children: /* @__PURE__ */ j("span", { className: "size-2 rounded-full bg-muted-foreground" })
 						}),
-						/* @__PURE__ */ A(i, {
+						/* @__PURE__ */ j(a, {
 							className: "flex-1 truncate",
 							children: e.label
 						}),
-						/* @__PURE__ */ A(s, {
+						/* @__PURE__ */ j(c, {
 							tone: t === "running" ? "info" : "secondary",
 							children: t === "running" ? f.runningLabel : f.queuedLabel
 						}),
-						(!!e.onCancel || !!l) && /* @__PURE__ */ A(a, {
+						(!!e.onCancel || !!l) && /* @__PURE__ */ j(r, {
 							type: "button",
 							tone: "secondary",
 							buttonStyle: "ghost",
@@ -431,7 +432,7 @@ function Q({ items: e, hideHeader: c = !1, onCancel: l, className: u, strings: d
 							onClick: () => {
 								e.onCancel?.(), l?.(e.id);
 							},
-							children: /* @__PURE__ */ A(R, { className: "size-icon-md" })
+							children: /* @__PURE__ */ j(z, { className: "size-icon-md" })
 						})
 					]
 				}, e.id);
@@ -443,24 +444,24 @@ Q.displayName = "AiChatQueue";
 //#endregion
 //#region src/components/features/ai-chat/partials/ai-chat-suggestions-row.tsx
 function $({ suggestions: e, onPick: o, hideHeader: s = !1, className: c, strings: l }) {
-	let u = t(H, l);
-	return e.length === 0 ? null : /* @__PURE__ */ j("div", {
+	let u = t(U, l);
+	return e.length === 0 ? null : /* @__PURE__ */ M("div", {
 		className: n("ai-chat-suggestions-row--component flex items-center gap-space-md", c),
-		children: [!s && /* @__PURE__ */ A(r, {
+		children: [!s && /* @__PURE__ */ j(i, {
 			className: "shrink-0",
 			children: u.header
-		}), /* @__PURE__ */ A("div", {
+		}), /* @__PURE__ */ j("div", {
 			className: "flex min-w-0 flex-1 items-center gap-space-sm overflow-x-auto p-space-xs [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
 			children: e.map((e) => {
 				let t = e.icon;
-				return /* @__PURE__ */ j(a, {
+				return /* @__PURE__ */ M(r, {
 					type: "button",
 					tone: "secondary",
-					buttonStyle: "ghost",
+					buttonStyle: "outline",
 					size: "sm",
 					onClick: () => o?.(e),
-					className: n("shrink-0 gap-space-sm border border-border/60 bg-card", "transition-[border-color,background] duration-150", "hover:border-foreground/20 hover:bg-muted/40"),
-					children: [!!t && /* @__PURE__ */ A(t, { className: "size-icon-sm text-muted-foreground" }), /* @__PURE__ */ A(i, {
+					className: "shrink-0 gap-space-sm",
+					children: [!!t && /* @__PURE__ */ j(t, { className: "size-icon-sm text-muted-foreground" }), /* @__PURE__ */ j(a, {
 						tag: "span",
 						weight: "medium",
 						children: e.label
@@ -473,8 +474,8 @@ function $({ suggestions: e, onPick: o, hideHeader: s = !1, className: c, string
 $.displayName = "AiChatSuggestionsRow";
 //#endregion
 //#region src/components/features/ai-chat/ai-chat.tsx
-function te({ messages: e, inputValue: r, onInputChange: a, onSubmit: s, onStop: c, streaming: l = !1, disabled: u = !1, attachments: d = [], onRemoveAttachment: f, onAttach: p, showAttach: m, agent: h, headerActions: g, queue: _ = [], onCancelQueueItem: v, suggestions: y = [], onPickSuggestion: x, onMessageCopy: S, onMessageRegenerate: C, onAttachmentOpen: w, disableAutoScroll: E, slots: D, strings: k, className: M }) {
-	let N = t(W, k), [, P] = O(0), F = T((e, t) => D?.renderMessage ? D.renderMessage(e, t) : /* @__PURE__ */ A(Y, {
+function ne({ messages: e, inputValue: r, onInputChange: i, onSubmit: o, onStop: c, streaming: l = !1, disabled: u = !1, attachments: d = [], onRemoveAttachment: f, onAttach: p, showAttach: m, agent: h, headerActions: g, queue: _ = [], onCancelQueueItem: v, suggestions: y = [], onPickSuggestion: b, onMessageCopy: S, onMessageRegenerate: C, onAttachmentOpen: w, disableAutoScroll: T, slots: D, strings: O, className: A }) {
+	let N = t(G, O), [, P] = k(0), F = E((e, t) => D?.renderMessage ? D.renderMessage(e, t) : /* @__PURE__ */ j(X, {
 		className: "ai-chat-message--component",
 		message: e,
 		strings: N.message,
@@ -487,13 +488,13 @@ function te({ messages: e, inputValue: r, onInputChange: a, onSubmit: s, onStop:
 		C,
 		D,
 		N.message
-	]), I = D?.header ?? (h ? /* @__PURE__ */ A("div", {
+	]), I = D?.header ?? (h ? /* @__PURE__ */ j("div", {
 		className: "border-b border-border bg-card p-surface",
-		children: /* @__PURE__ */ j(o, {
+		children: /* @__PURE__ */ M(s, {
 			direction: "horizontal",
 			align: "center",
 			gap: "lg",
-			children: [/* @__PURE__ */ A(b, {
+			children: [/* @__PURE__ */ j(x, {
 				name: h.name,
 				icon: h.icon,
 				avatar: h.avatar,
@@ -501,27 +502,27 @@ function te({ messages: e, inputValue: r, onInputChange: a, onSubmit: s, onStop:
 				tone: h.tone,
 				status: h.status,
 				variant: "inline"
-			}), !!g && /* @__PURE__ */ A("div", {
+			}), !!g && /* @__PURE__ */ j("div", {
 				className: "ml-auto flex items-center gap-space-xs",
 				children: g
 			})]
 		})
-	}) : null), L = D?.empty ?? (e.length === 0 ? /* @__PURE__ */ A(J, {
+	}) : null), L = D?.empty ?? (e.length === 0 ? /* @__PURE__ */ j(Y, {
 		title: N.emptyTitle,
 		description: N.emptyDescription
-	}) : null), R = D?.queue ?? (_.length > 0 ? /* @__PURE__ */ A(Q, {
+	}) : null), R = D?.queue ?? (_.length > 0 ? /* @__PURE__ */ j(Q, {
 		items: _,
 		onCancel: v,
 		strings: N.queue
-	}) : null), z = D?.suggestions ?? (y.length > 0 ? /* @__PURE__ */ A($, {
+	}) : null), z = D?.suggestions ?? (y.length > 0 ? /* @__PURE__ */ j($, {
 		suggestions: y,
-		onPick: x,
+		onPick: b,
 		strings: N.suggestions
-	}) : null), B = D?.input ?? /* @__PURE__ */ A(Z, {
+	}) : null), B = D?.input ?? /* @__PURE__ */ j(Z, {
 		value: r,
-		onValueChange: a,
+		onValueChange: i,
 		onSubmit: (e) => {
-			s?.(e), P((e) => e + 1);
+			o?.(e), P((e) => e + 1);
 		},
 		onStop: c,
 		streaming: l,
@@ -532,22 +533,22 @@ function te({ messages: e, inputValue: r, onInputChange: a, onSubmit: s, onStop:
 		showAttach: m,
 		strings: N.prompt
 	});
-	return /* @__PURE__ */ j("div", {
-		className: n("ai-chat--component flex h-full flex-col overflow-hidden rounded-radius border border-border bg-background", M),
+	return /* @__PURE__ */ M("div", {
+		className: n("ai-chat--component flex h-full flex-col overflow-hidden rounded-radius border border-border bg-background", A),
 		children: [
 			I,
-			/* @__PURE__ */ A(q, {
+			/* @__PURE__ */ j(J, {
 				messages: e,
 				renderMessage: F,
 				intro: D?.intro,
 				footer: D?.belowMessages,
 				empty: L,
-				disableAutoScroll: E,
+				disableAutoScroll: T,
 				strings: N.conversation
 			}),
-			(R || z || B) && /* @__PURE__ */ A("div", {
-				className: "border-t border-border bg-card/60 p-surface",
-				children: /* @__PURE__ */ j(o, {
+			(R || z || B) && /* @__PURE__ */ j("div", {
+				className: "border-t border-border bg-card p-surface",
+				children: /* @__PURE__ */ M(s, {
 					gap: "md",
 					children: [
 						R,
@@ -556,7 +557,7 @@ function te({ messages: e, inputValue: r, onInputChange: a, onSubmit: s, onStop:
 					]
 				})
 			}),
-			u && /* @__PURE__ */ A(i, {
+			u && /* @__PURE__ */ j(a, {
 				className: "sr-only",
 				"aria-live": "polite",
 				children: N.disabledAnnouncement
@@ -564,8 +565,8 @@ function te({ messages: e, inputValue: r, onInputChange: a, onSubmit: s, onStop:
 		]
 	});
 }
-te.displayName = "AiChat";
+ne.displayName = "AiChat";
 //#endregion
-export { te as AiChat, G as AiChatAttachmentsStrip, q as AiChatConversation, J as AiChatEmptyState, Y as AiChatMessageView, Z as AiChatPromptInput, Q as AiChatQueue, $ as AiChatSuggestionsRow, B as defaultAiChatConversationStrings, U as defaultAiChatMessageStrings, z as defaultAiChatPromptInputStrings, V as defaultAiChatQueueStrings, W as defaultAiChatStrings, H as defaultAiChatSuggestionsStrings, K as useAiChatScroll };
+export { ne as AiChat, K as AiChatAttachmentsStrip, J as AiChatConversation, Y as AiChatEmptyState, X as AiChatMessageView, Z as AiChatPromptInput, Q as AiChatQueue, $ as AiChatSuggestionsRow, V as defaultAiChatConversationStrings, W as defaultAiChatMessageStrings, B as defaultAiChatPromptInputStrings, H as defaultAiChatQueueStrings, G as defaultAiChatStrings, U as defaultAiChatSuggestionsStrings, q as useAiChatScroll };
 
 //# sourceMappingURL=ai-chat.js.map