@logicplanes/kaeso-ui 0.2.1 → 0.3.0

package/dist/components/playground.js

@@ -1,223 +1,228 @@
 "use client";
-import { t as e } from "../chunks/cn-CidVUKMm.js";
+import { t as e } from "../chunks/cn-DUDmdLpZ.js";
 import { t } from "../chunks/use-controllable-B5Fd12Bx.js";
-import { i as n } from "../chunks/context-BELWW79w.js";
-import { formatDuration as r, formatNumber as i, formatUSD as a } from "../format.js";
-import { t as o } from "../chunks/icon-CeNQtobn.js";
-import { t as s } from "../chunks/use-truncated-CW0hByYt.js";
-import { n as c } from "../chunks/button-DQvoOxVQ.js";
-import { t as l } from "../chunks/icon-button-_x1RUphC.js";
-import { o as u, r as d } from "../chunks/textarea-Cj8iR82R.js";
-import { r as f } from "../chunks/slider-DbhjJ3ML.js";
-import { r as p } from "../chunks/segmented-MrinfDL8.js";
-import { n as m, r as h } from "../chunks/select-Bc4kRiSG.js";
-import { i as g } from "../chunks/popover-BE7VO-a4.js";
-import { i as _, l as v } from "../chunks/identity-BtZC_d_Q.js";
-import { r as y } from "../chunks/markdown-5NyaHHfN.js";
-import { Children as b, createContext as x, forwardRef as S, isValidElement as C, useCallback as w, useContext as T, useEffect as E, useId as D, useLayoutEffect as O, useRef as k, useState as A, useSyncExternalStore as j } from "react";
-import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
-import { Add01Icon as F, ArrowLeft01Icon as I, ArrowRight01Icon as L, Cancel01Icon as R, SlidersHorizontalIcon as z } from "@hugeicons/core-free-icons";
-import { Collapsible as B } from "@base-ui/react/collapsible";
+import { i as n, r } from "../chunks/context-BELWW79w.js";
+import { formatContext as i, formatDuration as a, formatNumber as o, formatUSD as s } from "../format.js";
+import { t as c } from "../chunks/icon-BqujXDUc.js";
+import { t as l } from "../chunks/use-truncated-CW0hByYt.js";
+import { n as u } from "../chunks/button-CAPyW-v8.js";
+import { t as d } from "../chunks/icon-button-D4O4puwH.js";
+import { a as f, o as p, s as m } from "../chunks/field-BZriODU7.js";
+import { o as h, r as g } from "../chunks/textarea-2d373OyU.js";
+import { r as _ } from "../chunks/slider-Ds-tqY-1.js";
+import { r as v } from "../chunks/switch-CSKMEomo.js";
+import { r as y } from "../chunks/segmented-DXKVF-nY.js";
+import { n as b, r as x } from "../chunks/select-Bbv2f5F8.js";
+import { i as S } from "../chunks/popover-bjxg020P.js";
+import { r as C } from "../chunks/combobox-DqtzsAKG.js";
+import { a as ee, t as w } from "../chunks/command-list-D5k0uvkR.js";
+import { i as T, r as E } from "../chunks/picker-popover-C4ElNk7t.js";
+import { a as D, o as O, t as k, u as A } from "../chunks/identity-CsZvAUwu.js";
+import { r as j } from "../chunks/markdown-DWyxjsSY.js";
+import { Children as M, createContext as te, forwardRef as N, isValidElement as ne, useCallback as P, useContext as re, useEffect as F, useId as ie, useLayoutEffect as I, useMemo as L, useRef as R, useState as z, useSyncExternalStore as ae } from "react";
+import { Fragment as oe, jsx as B, jsxs as V } from "react/jsx-runtime";
+import { Add01Icon as se, ArrowLeft01Icon as ce, ArrowRight01Icon as H, Cancel01Icon as U, SlidersHorizontalIcon as W } from "@hugeicons/core-free-icons";
+import { Collapsible as G } from "@base-ui/react/collapsible";
 //#region src/components/playground/composer.tsx
-var V = { size: {
+var le = { size: {
 	md: { classes: "rounded-frame" },
 	sm: { classes: "rounded-frame" }
-} }, H = { size: "md" }, U = "(pointer: coarse)";
-function W(e) {
+} }, K = { size: "md" }, ue = "(pointer: coarse)";
+function q(e) {
 	if (typeof window > "u" || !window.matchMedia) return () => {};
-	let t = window.matchMedia(U);
+	let t = window.matchMedia(ue);
 	return t.addEventListener?.("change", e), () => t.removeEventListener?.("change", e);
 }
-var G = () => typeof window < "u" && !!window.matchMedia?.(U).matches, ee = () => j(W, G, () => !1), K = /* @__PURE__ */ S(function({ value: r, defaultValue: i = "", onValueChange: a, onSubmit: o, onStop: s, submitOn: l = "enter", streaming: u = !1, loading: d = !1, disabled: f = !1, clearOnSubmit: p = !0, placeholder: m, "aria-label": h, maxRows: g = 10, size: _ = "md", actions: v, submitLabel: y, stopLabel: b, autoFocus: x, name: S, "data-force": C, className: T }, E) {
-	let D = n(), A = m ?? D("composer.placeholder", "Write a prompt"), j = h ?? D("composer.prompt", "Prompt"), M = y ?? D("composer.send", "Send"), F = b ?? D("composer.stop", "Stop"), [I, L] = t(r, i, a), R = k(null), z = _ === "sm" ? 1 : 2, B = w(() => {
-		let e = R.current;
-		e && (e.style.height = "auto", e.style.height = `${Math.min(Math.max(e.scrollHeight, z * 20 + 16), g * 20 + 16)}px`);
-	}, [g, z]);
-	O(B, [B, I]);
-	let H = I.trim() === "", U = !f && !u && !d && !H, W = () => {
-		U && (o?.(I), p && r === void 0 && L(""));
-	}, G = ee(), K = l === "enter" && !G, q = (e) => {
-		e.key === "Enter" && (e.nativeEvent.isComposing || e.keyCode === 229 || (e.metaKey || e.ctrlKey || K && !e.shiftKey && !e.altKey) && (e.preventDefault(), W()));
+var de = () => typeof window < "u" && !!window.matchMedia?.(ue).matches, fe = () => ae(q, de, () => !1), pe = /* @__PURE__ */ N(function({ value: r, defaultValue: i = "", onValueChange: a, onSubmit: o, onStop: s, submitOn: c = "enter", streaming: l = !1, loading: d = !1, disabled: f = !1, clearOnSubmit: p = !0, placeholder: m, "aria-label": h, maxRows: g = 10, size: _ = "md", actions: v, submitLabel: y, stopLabel: b, autoFocus: x, name: S, "data-force": C, className: ee }, w) {
+	let T = n(), E = m ?? T("composer.placeholder", "Write a prompt"), D = h ?? T("composer.prompt", "Prompt"), O = y ?? T("composer.send", "Send"), k = b ?? T("composer.stop", "Stop"), [A, j] = t(r, i, a), M = R(null), te = _ === "sm" ? 1 : 2, N = P(() => {
+		let e = M.current;
+		e && (e.style.height = "auto", e.style.height = `${Math.min(Math.max(e.scrollHeight, te * 20 + 16), g * 20 + 16)}px`);
+	}, [g, te]);
+	I(N, [N, A]);
+	let ne = A.trim() === "", re = !f && !l && !d && !ne, F = () => {
+		re && (o?.(A), p && r === void 0 && j(""));
+	}, ie = fe(), L = c === "enter" && !ie, z = (e) => {
+		e.key === "Enter" && (e.nativeEvent.isComposing || e.keyCode === 229 || (e.metaKey || e.ctrlKey || L && !e.shiftKey && !e.altKey) && (e.preventDefault(), F()));
 	};
-	return /* @__PURE__ */ P("form", {
+	return /* @__PURE__ */ V("form", {
 		onSubmit: (e) => {
-			e.preventDefault(), W();
+			e.preventDefault(), F();
 		},
 		onMouseDown: (e) => {
-			e.target === e.currentTarget && !f && (e.preventDefault(), R.current?.focus());
+			e.target === e.currentTarget && !f && (e.preventDefault(), M.current?.focus());
 		},
 		...C ? { "data-force": C } : {},
 		...f ? { "data-disabled": "" } : {},
-		className: e("flex min-w-0 cursor-text flex-col material-composer transition-control", V.size[_].classes, f && "cursor-not-allowed", T),
-		children: [/* @__PURE__ */ N("textarea", {
+		className: e("flex min-w-0 cursor-text flex-col material-composer transition-control", le.size[_].classes, f && "cursor-not-allowed", ee),
+		children: [/* @__PURE__ */ B("textarea", {
 			ref: (e) => {
-				R.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
+				M.current = e, typeof w == "function" ? w(e) : w && (w.current = e);
 			},
-			rows: z,
-			value: I,
-			onChange: (e) => L(e.target.value),
-			onKeyDown: q,
+			rows: te,
+			value: A,
+			onChange: (e) => j(e.target.value),
+			onKeyDown: z,
 			disabled: f,
-			placeholder: A,
-			"aria-label": j,
-			"aria-keyshortcuts": K ? "Enter Meta+Enter Control+Enter" : "Meta+Enter Control+Enter",
-			...K ? { enterKeyHint: "send" } : {},
+			placeholder: E,
+			"aria-label": D,
+			"aria-keyshortcuts": L ? "Enter Meta+Enter Control+Enter" : "Meta+Enter Control+Enter",
+			...L ? { enterKeyHint: "send" } : {},
 			autoFocus: x,
 			...S ? { name: S } : {},
 			className: "block w-full min-w-0 resize-none bg-transparent px-16 pt-12 pb-4 text-body text-fg outline-none scrollbar-quiet placeholder:text-fg-tertiary disabled:cursor-not-allowed disabled:text-fg-disabled"
-		}), /* @__PURE__ */ P("div", {
+		}), /* @__PURE__ */ V("div", {
 			className: "flex min-w-0 items-center gap-8 p-8 pt-4",
-			children: [/* @__PURE__ */ N("div", {
+			children: [/* @__PURE__ */ B("div", {
 				className: "flex min-w-0 flex-1 items-center gap-4",
 				children: v
-			}), u ? /* @__PURE__ */ N(c, {
+			}), l ? /* @__PURE__ */ B(u, {
 				type: "button",
 				size: "sm",
 				variant: "secondary",
-				reserveLabels: [M, F],
+				reserveLabels: [O, k],
 				onClick: () => s?.(),
 				disabled: f,
-				children: F
-			}) : /* @__PURE__ */ N(c, {
+				children: k
+			}) : /* @__PURE__ */ B(u, {
 				type: "submit",
 				size: "sm",
 				variant: "primary",
-				reserveLabels: [M, F],
+				reserveLabels: [O, k],
 				loading: d,
-				disabled: !U && !d,
-				children: M
+				disabled: !re && !d,
+				children: O
 			})]
 		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (K.displayName = "Composer");
+process.env.NODE_ENV !== "production" && (pe.displayName = "Composer");
 //#endregion
 //#region src/components/playground/compare-grid.tsx
-var q = { divider: {
+var J = { divider: {
 	hairline: { classes: "hairline-l" },
 	none: { classes: "" }
-} }, te = { divider: "hairline" }, J = /* @__PURE__ */ x({
+} }, Y = { divider: "hairline" }, X = /* @__PURE__ */ te({
 	index: 0,
 	count: 1,
 	divider: "hairline",
 	add: null
-}), Y = /* @__PURE__ */ S(function({ children: t, "aria-label": r, onAdd: i, addLabel: a, max: o = 4, active: s, onActiveChange: c, divider: u = "hairline", className: d }, f) {
-	let p = n(), m = b.toArray(t).filter(C), h = m.length, g = k(null), [_, v] = A(0), y = Math.min(s ?? _, Math.max(0, h - 1)), x = k(null), S = k(c);
-	O(() => {
-		S.current = c;
+}), me = /* @__PURE__ */ N(function({ children: t, "aria-label": r, onAdd: i, addLabel: a, max: o = 4, active: s, onActiveChange: c, divider: l = "hairline", className: u }, f) {
+	let p = n(), m = M.toArray(t).filter(ne), h = m.length, g = R(null), [_, v] = z(0), y = Math.min(s ?? _, Math.max(0, h - 1)), b = R(null), x = R(c);
+	I(() => {
+		x.current = c;
 	});
-	let T = w((e) => {
+	let S = P((e) => {
 		let t = g.current?.children[e], n = g.current;
 		if (!t || !n) return;
-		x.current = n.scrollLeft === t.offsetLeft ? null : e;
+		b.current = n.scrollLeft === t.offsetLeft ? null : e;
 		let r = typeof matchMedia == "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 		n.scrollTo({
 			left: t.offsetLeft,
 			behavior: r ? "auto" : "smooth"
 		});
-	}, []), D = (e) => {
+	}, []), C = (e) => {
 		let t = Math.max(0, Math.min(h - 1, e));
-		v(t), c?.(t), T(t);
+		v(t), c?.(t), S(t);
 	};
-	E(() => {
-		s !== void 0 && T(s);
-	}, [s, T]);
-	let j = k(h);
-	O(() => {
-		h > j.current && (v(h - 1), S.current?.(h - 1), T(h - 1)), j.current = h;
-	}, [h, T]);
-	let M = w(() => {
+	F(() => {
+		s !== void 0 && S(s);
+	}, [s, S]);
+	let ee = R(h);
+	I(() => {
+		h > ee.current && (v(h - 1), x.current?.(h - 1), S(h - 1)), ee.current = h;
+	}, [h, S]);
+	let w = P(() => {
 		let e = g.current;
 		if (!e) return;
 		let t = e.scrollWidth - e.clientWidth - e.scrollLeft;
 		e.style.setProperty("--k-fade-start", e.scrollLeft > 1 ? "24px" : "0px"), e.style.setProperty("--k-fade-end", t > 1 ? "24px" : "0px");
 	}, []);
-	O(() => {
+	I(() => {
 		let e = g.current;
 		if (!e || typeof ResizeObserver > "u") return;
-		M();
-		let t = new ResizeObserver(M);
+		w();
+		let t = new ResizeObserver(w);
 		return t.observe(e), () => t.disconnect();
-	}, [M, h]);
-	let R = () => {
-		M();
+	}, [w, h]);
+	let T = () => {
+		w();
 		let e = g.current, t = e?.children[0];
 		if (!e || !t || !t.offsetWidth) return;
 		let n = Math.max(0, Math.min(h - 1, Math.round(e.scrollLeft / t.offsetWidth)));
-		if (x.current !== null) {
-			if (n !== x.current) return;
-			x.current = null;
+		if (b.current !== null) {
+			if (n !== b.current) return;
+			b.current = null;
 		}
 		n !== y && (v(n), c?.(n));
-	}, z = () => {
-		x.current = null;
-	}, B = h >= o, V = i ? /* @__PURE__ */ N(l, {
-		icon: F,
+	}, E = () => {
+		b.current = null;
+	}, D = h >= o, O = i ? /* @__PURE__ */ B(d, {
+		icon: se,
 		"aria-label": a ?? p("compareGrid.addModel", "Add model"),
 		size: "sm",
 		onClick: i,
-		disabled: B,
-		...B ? { disabledReason: p("compareGrid.compareUpTo", "Compare up to {max} at once", { max: o }) } : {}
-	}) : null, H = m[y]?.props.label ?? "";
-	return /* @__PURE__ */ P("div", {
+		disabled: D,
+		...D ? { disabledReason: p("compareGrid.compareUpTo", "Compare up to {max} at once", { max: o }) } : {}
+	}) : null, k = m[y]?.props.label ?? "";
+	return /* @__PURE__ */ V("div", {
 		ref: f,
 		role: "group",
 		"aria-label": r,
-		className: e("flex h-full min-h-0 min-w-0 flex-col", d),
-		children: [h > 1 || i ? /* @__PURE__ */ P("div", {
-			className: "flex h-44 shrink-0 items-center gap-4 px-8 hairline-b md:hidden",
+		className: e("flex h-full min-h-0 min-w-0 flex-col", u),
+		children: [h > 1 || i ? /* @__PURE__ */ V("div", {
+			className: "flex h-44 shrink-0 items-center gap-4 px-24 hairline-b md:hidden",
 			children: [
-				/* @__PURE__ */ N(l, {
-					icon: I,
+				/* @__PURE__ */ B(d, {
+					icon: ce,
 					"aria-label": p("compareGrid.previousColumn", "Previous column"),
 					size: "sm",
 					disabled: y === 0,
-					onClick: () => D(y - 1)
+					onClick: () => C(y - 1)
 				}),
-				/* @__PURE__ */ P("span", {
+				/* @__PURE__ */ V("span", {
 					"aria-live": "polite",
 					className: "min-w-0 flex-1 truncate text-center text-small text-fg-secondary tabular",
-					children: [/* @__PURE__ */ N("span", {
+					children: [/* @__PURE__ */ B("span", {
 						className: "sr-only",
-						children: p("compareGrid.columnName", "{label}, ", { label: H })
+						children: p("compareGrid.columnName", "{label}, ", { label: k })
 					}), p("compareGrid.position", "{index} of {count}", {
 						index: y + 1,
 						count: h
 					})]
 				}),
-				/* @__PURE__ */ N(l, {
-					icon: L,
+				/* @__PURE__ */ B(d, {
+					icon: H,
 					"aria-label": p("compareGrid.nextColumn", "Next column"),
 					size: "sm",
 					disabled: y >= h - 1,
-					onClick: () => D(y + 1)
+					onClick: () => C(y + 1)
 				}),
-				V
+				O
 			]
-		}) : null, /* @__PURE__ */ N("div", {
+		}) : null, /* @__PURE__ */ B("div", {
 			ref: g,
-			onScroll: R,
-			onPointerDown: z,
-			onWheel: z,
-			onTouchStart: z,
-			onKeyDown: z,
+			onScroll: T,
+			onPointerDown: E,
+			onWheel: E,
+			onTouchStart: E,
+			onKeyDown: E,
 			className: "relative min-h-0 min-w-0 flex-1 compare-grid",
-			children: m.map((e, t) => /* @__PURE__ */ N(J.Provider, {
+			children: m.map((e, t) => /* @__PURE__ */ B(X.Provider, {
 				value: {
 					index: t,
 					count: h,
-					divider: u,
-					add: t === h - 1 ? V : null
+					divider: l,
+					add: t === h - 1 ? O : null
 				},
 				children: e
 			}, e.key ?? t))
 		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (Y.displayName = "CompareGrid");
-function ne(e) {
-	let t = k(null), n = k(null), r = k(!0);
-	return E(() => {
+process.env.NODE_ENV !== "production" && (me.displayName = "CompareGrid");
+function he(e) {
+	let t = R(null), n = R(null), r = R(!0);
+	return F(() => {
 		let i = t.current, a = n.current;
 		if (!e || !i || !a || typeof ResizeObserver > "u") return;
 		let o = i.scrollTop, s = () => {
@@ -237,61 +242,61 @@ function ne(e) {
 		content: n
 	};
 }
-var re = /* @__PURE__ */ S(function({ label: t, header: r, actions: i, children: a, footer: o, onRemove: s, removeLabel: c, stickToEnd: u = !0, className: d }, f) {
-	let p = n(), { index: m, count: h, divider: g, add: _ } = T(J), { body: v, content: y } = ne(u);
-	return /* @__PURE__ */ P("section", {
+var Z = /* @__PURE__ */ N(function({ label: t, header: r, actions: i, children: a, footer: o, onRemove: s, removeLabel: c, stickToEnd: l = !0, className: u }, f) {
+	let p = n(), { index: m, count: h, divider: g, add: _ } = re(X), { body: v, content: y } = he(l);
+	return /* @__PURE__ */ V("section", {
 		ref: f,
 		"aria-label": t,
-		className: e("row-span-3 grid min-h-0 min-w-0 snap-start snap-always grid-rows-subgrid", m > 0 && q.divider[g].classes, d),
+		className: e("row-span-3 grid min-h-0 min-w-0 snap-start snap-always grid-rows-subgrid", m > 0 && J.divider[g].classes, u),
 		children: [
-			/* @__PURE__ */ P("header", {
-				className: "flex h-52 min-w-0 items-center gap-4 pr-10 pl-8 hairline-b",
+			/* @__PURE__ */ V("header", {
+				className: "flex h-52 min-w-0 items-center gap-4 px-24 hairline-b",
 				children: [
-					/* @__PURE__ */ N("div", {
+					/* @__PURE__ */ B("div", {
 						className: "flex min-w-0 flex-1 items-center",
 						children: r
 					}),
 					i,
-					s && h > 1 && /* @__PURE__ */ N(l, {
-						icon: R,
+					s && h > 1 && /* @__PURE__ */ B(d, {
+						icon: U,
 						"aria-label": c ?? p("compareGrid.remove", "Remove {label}", { label: t }),
 						size: "sm",
 						onClick: s
 					}),
-					_ && /* @__PURE__ */ N("span", {
+					_ && /* @__PURE__ */ B("span", {
 						className: "hidden md:contents",
 						children: _
 					})
 				]
 			}),
-			/* @__PURE__ */ N("div", {
+			/* @__PURE__ */ B("div", {
 				ref: v,
 				tabIndex: 0,
 				"aria-label": p("compareGrid.thread", "{label} thread", { label: t }),
 				role: "region",
 				className: "relative min-h-0 overflow-y-auto overscroll-contain scrollbar-quiet scroll-fade-y focus-ring-inset",
-				children: /* @__PURE__ */ N("div", {
+				children: /* @__PURE__ */ B("div", {
 					ref: y,
-					className: "flex min-h-full flex-col px-16 pt-16 pb-24",
+					className: "flex min-h-full flex-col px-24 pt-16 pb-24",
 					children: a
 				})
 			}),
-			o != null && /* @__PURE__ */ N("footer", {
-				className: "flex min-h-44 min-w-0 items-center px-16 pt-8 pb-12",
-				children: o
+			o != null && /* @__PURE__ */ B("footer", {
+				className: "flex min-h-44 min-w-0 items-start px-24 pt-12 pb-12",
+				children: /* @__PURE__ */ B("div", {
+					className: "min-w-0 px-12",
+					children: o
+				})
 			})
 		]
 	});
 });
-process.env.NODE_ENV !== "production" && (re.displayName = "CompareGrid.Column");
-var ie = /* @__PURE__ */ Object.assign(Y, { Column: re }), ae = { status: {
-	pending: { classes: "" },
-	streaming: { classes: "" },
+process.env.NODE_ENV !== "production" && (Z.displayName = "CompareGrid.Column");
+var ge = /* @__PURE__ */ Object.assign(me, { Column: Z }), _e = { state: {
 	done: { classes: "" },
-	stopped: { classes: "" },
-	error: { classes: "" }
-} }, oe = { status: "done" };
-function se(e) {
+	live: { classes: "" }
+} }, ve = { state: "done" };
+function ye(e) {
 	let t = e.trim().split("\n");
 	for (let e = t.length - 1; e >= 0; e--) {
 		let n = (t[e] ?? "").replace(/[*_`#>]+/g, "").trim();
@@ -299,43 +304,44 @@ function se(e) {
 	}
 	return "";
 }
-function ce({ text: t, live: i, duration: a, open: s, defaultOpen: c, onOpenChange: l }) {
-	let u = n(), d = i ? se(t) : "", f = i || a === void 0 ? u("responseView.thinking", "Thinking") : u("responseView.thoughtFor", "Thought for {duration}", { duration: r(a) });
-	return /* @__PURE__ */ P(B.Root, {
-		...s === void 0 ? {} : { open: s },
-		...c === void 0 ? {} : { defaultOpen: c },
-		...l ? { onOpenChange: (e) => l(e) } : {},
-		className: "flex min-w-0 flex-col",
-		children: [/* @__PURE__ */ P(B.Trigger, {
-			className: "group/think -mx-8 flex h-32 min-w-0 cursor-pointer items-center gap-6 rounded-pill px-8 text-left text-small text-fg-secondary transition-control hover:bg-fill-1 hover:text-fg focus-ring-inset",
+var be = /* @__PURE__ */ N(function({ text: t = "", live: r = !1, duration: i, title: o, hint: s, open: l, defaultOpen: u, onOpenChange: d, children: f, className: p }, m) {
+	let h = n(), g = s ?? (r ? ye(t) : ""), _ = o ?? (!r && i !== void 0 ? h("responseView.thoughtFor", "Thought for {duration}", { duration: a(i) }) : h("responseView.thinking", "Thinking"));
+	return /* @__PURE__ */ V(G.Root, {
+		ref: m,
+		...l === void 0 ? {} : { open: l },
+		...u === void 0 ? {} : { defaultOpen: u },
+		...d ? { onOpenChange: (e) => d(e) } : {},
+		className: e("flex min-w-0 flex-col", p),
+		children: [/* @__PURE__ */ V(G.Trigger, {
+			className: "group/think flex h-32 min-w-0 cursor-pointer items-center gap-6 rounded-pill px-12 text-left text-small text-fg-secondary transition-control hover:bg-fill-1 hover:text-fg focus-ring-inset",
 			children: [
-				/* @__PURE__ */ N("span", {
-					className: e("shrink-0 font-medium", i && "animate-pulse-quiet reduced:animate-none"),
-					children: f
+				/* @__PURE__ */ B("span", {
+					className: e("shrink-0 font-medium", r && "animate-pulse-quiet reduced:animate-none"),
+					children: _
 				}),
-				/* @__PURE__ */ N(o, {
-					icon: L,
+				/* @__PURE__ */ B(c, {
+					icon: H,
 					size: "xs",
 					className: "shrink-0 text-fg-tertiary transition-transform duration-180 ease-overlay group-data-panel-open/think:rotate-90"
 				}),
-				/* @__PURE__ */ N("span", {
-					"aria-hidden": !0,
+				/* @__PURE__ */ B("span", {
+					"aria-hidden": s === void 0,
 					className: "min-w-0 flex-1 truncate text-fg-tertiary group-data-panel-open/think:invisible",
-					children: d
+					children: g
 				})
 			]
-		}), /* @__PURE__ */ N(B.Panel, {
+		}), /* @__PURE__ */ B(G.Panel, {
 			className: "collapse-motion",
-			children: /* @__PURE__ */ P("div", {
-				className: "flex gap-12 pt-4 pb-8",
-				children: [/* @__PURE__ */ N("span", {
+			children: /* @__PURE__ */ V("div", {
+				className: "flex gap-12 pt-4 pb-8 pl-12",
+				children: [/* @__PURE__ */ B("span", {
 					"aria-hidden": !0,
 					className: "w-1 shrink-0 rounded-pill bg-line"
-				}), /* @__PURE__ */ N(y, {
+				}), f ?? /* @__PURE__ */ B(j, {
 					text: t,
 					size: "small",
 					tone: "secondary",
-					streaming: i,
+					streaming: r,
 					collapseAfter: 0,
 					wrapCode: !0,
 					className: "min-w-0 flex-1"
@@ -343,89 +349,127 @@ function ce({ text: t, live: i, duration: a, open: s, defaultOpen: c, onOpenChan
 			})
 		})]
 	});
+});
+process.env.NODE_ENV !== "production" && (be.displayName = "Reasoning");
+//#endregion
+//#region src/components/playground/response-view.tsx
+var Q = { status: {
+	pending: { classes: "" },
+	streaming: { classes: "" },
+	done: { classes: "" },
+	stopped: { classes: "" },
+	incomplete: { classes: "" },
+	error: { classes: "" }
+} }, xe = { status: "done" };
+function Se(e, t) {
+	return t === "max_output_tokens" ? e("responseView.outputLimit", "Stopped at the output limit") : t === "content_filter" ? e("responseView.contentFilter", "Stopped by the provider's content filter") : e("responseView.incomplete", "The model ended the response early");
 }
-var le = /* @__PURE__ */ S(function({ text: t = "", reasoning: r, status: i = "done", reasoningDuration: a, reasoningOpen: o, defaultReasoningOpen: s, onReasoningOpenChange: l, onRetry: u, footer: d, "aria-label": f, className: p }, m) {
-	let h = n(), g = f ?? h("responseView.response", "Response"), _ = D(), v = i === "pending" || i === "streaming", b = t.trim() !== "", x = !!r && r.trim() !== "", S = v && x && !b;
-	return /* @__PURE__ */ P("article", {
-		ref: m,
-		"aria-label": g,
-		"aria-busy": v || void 0,
-		"aria-describedby": _,
-		className: e("flex min-w-0 flex-col gap-8", p),
+var Ce = /* @__PURE__ */ N(function({ text: t = "", reasoning: r, status: i = "done", reasoningDuration: a, reasoningOpen: o, defaultReasoningOpen: s, onReasoningOpenChange: c, incompleteReason: l, error: d, onRetry: f, footer: p, "aria-label": m, className: h }, g) {
+	let _ = n(), v = m ?? _("responseView.response", "Response"), y = ie(), b = i === "pending" || i === "streaming", x = t.trim() !== "", S = !!r && r.trim() !== "", C = b && S && !x;
+	return /* @__PURE__ */ V("article", {
+		ref: g,
+		"aria-label": v,
+		"aria-busy": b || void 0,
+		"aria-describedby": y,
+		className: e("flex min-w-0 flex-col gap-8", h),
 		children: [
-			x && /* @__PURE__ */ N(ce, {
+			S && /* @__PURE__ */ B(be, {
 				text: r,
-				live: S,
+				live: C,
 				duration: a,
 				open: o,
 				defaultOpen: s,
-				onOpenChange: l
+				onOpenChange: c
 			}),
-			b ? /* @__PURE__ */ N(y, {
+			x ? /* @__PURE__ */ B(j, {
 				text: t,
 				size: "lg",
-				streaming: v,
+				streaming: b,
 				collapseAfter: 0,
-				wrapCode: !0
-			}) : v && !x ? /* @__PURE__ */ N("div", {
+				wrapCode: !0,
+				className: "px-12"
+			}) : b && !S ? /* @__PURE__ */ B("div", {
 				"aria-hidden": !0,
-				className: "h-22"
+				className: "h-22 px-12"
 			}) : null,
-			i === "stopped" && /* @__PURE__ */ P("div", {
-				className: "flex min-h-24 flex-wrap items-center gap-x-12 gap-y-4",
-				children: [/* @__PURE__ */ N("span", {
+			i === "stopped" && /* @__PURE__ */ V("div", {
+				className: "flex min-h-24 flex-wrap items-center gap-x-12 gap-y-4 px-12",
+				children: [/* @__PURE__ */ B("span", {
 					className: "text-small text-fg-tertiary",
-					children: b ? h("responseView.stopped", "Stopped") : h("responseView.stoppedBeforeResponse", "Stopped before a response")
-				}), u && /* @__PURE__ */ N(c, {
+					children: x ? _("responseView.stopped", "Stopped") : _("responseView.stoppedBeforeResponse", "Stopped before a response")
+				}), f && /* @__PURE__ */ B(u, {
 					size: "xs",
 					variant: "ghost",
-					onClick: u,
-					children: h("responseView.retry", "Retry")
+					onClick: f,
+					children: _("responseView.retry", "Retry")
 				})]
 			}),
-			i === "error" && /* @__PURE__ */ P("div", {
-				className: "flex min-h-24 flex-wrap items-center gap-x-12 gap-y-4",
-				children: [/* @__PURE__ */ N("span", {
+			i === "incomplete" && /* @__PURE__ */ V("div", {
+				className: "flex min-h-24 flex-wrap items-center gap-x-12 gap-y-4 px-12",
+				children: [/* @__PURE__ */ B("span", {
 					className: "text-small text-fg-secondary",
-					children: b ? h("responseView.stoppedEarly", "The response stopped early") : h("responseView.noResponse", "No response")
-				}), u && /* @__PURE__ */ N(c, {
+					children: Se(_, l)
+				}), f && /* @__PURE__ */ B(u, {
 					size: "xs",
-					variant: "secondary",
-					onClick: u,
-					children: h("responseView.retry", "Retry")
+					variant: "ghost",
+					onClick: f,
+					children: _("responseView.retry", "Retry")
 				})]
 			}),
-			i === "done" && !b && /* @__PURE__ */ N("span", {
-				className: "text-small text-fg-tertiary",
-				children: h("responseView.noText", "The model returned no text")
+			i === "error" && /* @__PURE__ */ V("div", {
+				role: "alert",
+				className: "flex min-h-24 flex-col items-start gap-4 px-12",
+				children: [
+					/* @__PURE__ */ B("span", {
+						className: "text-small font-medium text-fg",
+						children: x ? _("responseView.stoppedEarly", "The response stopped early") : _("responseView.noResponse", "No response")
+					}),
+					d && /* @__PURE__ */ B(j, {
+						text: d,
+						size: "small",
+						tone: "secondary",
+						className: "max-w-prose min-w-0"
+					}),
+					f && /* @__PURE__ */ B(u, {
+						size: "xs",
+						variant: "secondary",
+						onClick: f,
+						className: "mt-4",
+						children: _("responseView.retry", "Retry")
+					})
+				]
+			}),
+			i === "done" && !x && /* @__PURE__ */ B("span", {
+				className: "px-12 text-small text-fg-tertiary",
+				children: _("responseView.noText", "The model returned no text")
 			}),
-			d,
-			/* @__PURE__ */ N("span", {
-				id: _,
+			p,
+			/* @__PURE__ */ B("span", {
+				id: y,
 				className: "sr-only",
-				children: i === "pending" ? h("responseView.waiting", "Waiting for the response") : i === "streaming" ? h("responseView.responding", "Responding") : ""
+				children: i === "pending" ? _("responseView.waiting", "Waiting for the response") : i === "streaming" ? _("responseView.responding", "Responding") : ""
 			})
 		]
 	});
 });
-process.env.NODE_ENV !== "production" && (le.displayName = "ResponseView");
-var ue = {
+process.env.NODE_ENV !== "production" && (Ce.displayName = "ResponseView");
+var we = {
 	2: "line-clamp-2",
 	3: "line-clamp-3",
 	4: "line-clamp-4",
 	6: "line-clamp-6"
-}, de = /* @__PURE__ */ S(function({ children: t, maxLines: r = 4, "aria-label": i, className: a }, o) {
-	let l = n(), u = i ?? l("userMessage.prompt", "Prompt"), d = l("userMessage.showAll", "Show all"), f = l("userMessage.showLess", "Show less"), [p, m] = A(!1), h = k(null), g = s(h, r > 0 && !p);
-	return /* @__PURE__ */ P("div", {
+}, Te = /* @__PURE__ */ N(function({ children: t, maxLines: r = 4, "aria-label": i, className: a }, o) {
+	let s = n(), c = i ?? s("userMessage.prompt", "Prompt"), d = s("userMessage.showAll", "Show all"), f = s("userMessage.showLess", "Show less"), [p, m] = z(!1), h = R(null), g = l(h, r > 0 && !p);
+	return /* @__PURE__ */ V("div", {
 		ref: o,
 		role: "group",
-		"aria-label": u,
-		className: e("flex min-w-0 flex-col items-start gap-2", a),
-		children: [/* @__PURE__ */ N("p", {
+		"aria-label": c,
+		className: e("flex min-w-0 flex-col items-start gap-2 px-12", a),
+		children: [/* @__PURE__ */ B("p", {
 			ref: h,
-			className: e("max-w-prose min-w-0 text-body font-medium whitespace-pre-wrap wrap-break-word text-fg-secondary", r !== 0 && !p && ue[r]),
+			className: e("max-w-prose min-w-0 text-body font-medium whitespace-pre-wrap wrap-break-word text-fg-secondary", r !== 0 && !p && we[r]),
 			children: t
-		}), (g || p) && /* @__PURE__ */ N(c, {
+		}), (g || p) && /* @__PURE__ */ B(u, {
 			size: "xs",
 			variant: "link",
 			reserveLabels: [d, f],
@@ -435,118 +479,115 @@ var ue = {
 		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (de.displayName = "UserMessage");
-var fe = /* @__PURE__ */ S(function({ children: t, className: n }, r) {
-	return /* @__PURE__ */ N("div", {
+process.env.NODE_ENV !== "production" && (Te.displayName = "UserMessage");
+var Ee = /* @__PURE__ */ N(function({ children: t, className: n }, r) {
+	return /* @__PURE__ */ B("div", {
 		ref: r,
 		className: e("flex min-w-0 flex-col gap-32", n),
 		children: t
 	});
 });
-process.env.NODE_ENV !== "production" && (fe.displayName = "Thread");
+process.env.NODE_ENV !== "production" && (Ee.displayName = "Thread");
 //#endregion
 //#region src/components/playground/response-metrics.tsx
-var pe = { size: {
+var De = { size: {
 	sm: { classes: "text-caption gap-x-12 gap-y-2" },
 	md: { classes: "text-small gap-x-16 gap-y-4" }
-} }, me = { size: "sm" };
-function X(e) {
-	return !Number.isFinite(e) || e < 0 ? "—" : r(e, { precise: !0 });
+} }, Oe = { size: "sm" };
+function ke(e) {
+	return !Number.isFinite(e) || e < 0 ? "—" : a(e, { precise: !0 });
 }
-function he(e) {
-	let [t, n] = A(() => Date.now());
-	return E(() => {
+function Ae(e) {
+	let [t, n] = z(() => Date.now());
+	return F(() => {
 		if (e === void 0) return;
 		n(Date.now());
 		let t = setInterval(() => n(Date.now()), 100);
 		return () => clearInterval(t);
 	}, [e]), e === void 0 ? void 0 : Math.max(0, t - e);
 }
-function Z(e) {
+function je(e) {
+	return /[1-9]/.test(e) ? s(e, { decimals: 6 }) : s("0", { decimals: 0 });
+}
+function $(e) {
 	return typeof e == "number" && Number.isFinite(e);
 }
-function Q({ label: t, width: n, children: r, value: i }) {
-	return /* @__PURE__ */ P("div", {
+function Me({ label: t, width: n, children: r }) {
+	return /* @__PURE__ */ V("div", {
 		className: "flex items-baseline gap-4 whitespace-nowrap",
-		children: [/* @__PURE__ */ N("dt", {
+		children: [/* @__PURE__ */ B("dt", {
 			className: "text-fg-tertiary",
 			children: t
-		}), /* @__PURE__ */ N("dd", {
+		}), /* @__PURE__ */ B("dd", {
 			className: e("text-fg-secondary tabular", n),
-			...i ? { "aria-label": i } : {},
 			children: r
 		})]
 	});
 }
-var ge = /* @__PURE__ */ S(function({ timeToFirstToken: t, duration: r, inputTokens: o, outputTokens: s, reasoningTokens: c, reasoning: l, live: u = !1, startedAt: d, cost: f, size: p = "sm", className: m }, h) {
-	let g = n(), _ = he(u && d !== void 0 && !Z(r) ? d : void 0), v = Z(o) || Z(s), y = f != null && f !== "", b = e("flex min-w-0 flex-wrap items-baseline", pe.size[p].classes, m);
-	if (!u && !v && !y && !Z(t) && !Z(r) && !Z(c)) return /* @__PURE__ */ N("dl", {
-		ref: h,
-		"aria-label": g("responseMetrics.metrics", "Metrics"),
-		className: e(b, p === "sm" ? "min-h-16" : "min-h-18")
+var Ne = /* @__PURE__ */ N(function({ timeToFirstToken: t, duration: r, inputTokens: i, outputTokens: a, reasoningTokens: s, reasoning: c, live: l = !1, startedAt: u, cost: d, size: f = "sm", className: p }, m) {
+	let h = n(), g = Ae(l && u !== void 0 && !$(r) ? u : void 0), _ = $(i) || $(a), v = d != null && d !== "", y = e("flex min-w-0 flex-wrap items-baseline", De.size[f].classes, p);
+	if (!l && !_ && !v && !$(t) && !$(r) && !$(s)) return /* @__PURE__ */ B("dl", {
+		ref: m,
+		"aria-label": h("responseMetrics.metrics", "Metrics"),
+		className: e(y, f === "sm" ? "min-h-16" : "min-h-18")
 	});
-	let x = (e) => u || e, S = /* @__PURE__ */ P("span", {
+	let b = (e) => l || e, x = /* @__PURE__ */ V("span", {
 		className: "text-fg-tertiary",
-		children: [/* @__PURE__ */ N("span", {
+		children: [/* @__PURE__ */ B("span", {
 			"aria-hidden": !0,
 			children: "—"
-		}), /* @__PURE__ */ N("span", {
+		}), /* @__PURE__ */ B("span", {
 			className: "sr-only",
-			children: g("responseMetrics.notYetKnown", "not yet known")
+			children: h("responseMetrics.notYetKnown", "not yet known")
 		})]
 	});
-	return /* @__PURE__ */ P("dl", {
-		ref: h,
-		"aria-label": g("responseMetrics.metrics", "Metrics"),
-		className: b,
+	return /* @__PURE__ */ V("dl", {
+		ref: m,
+		"aria-label": h("responseMetrics.metrics", "Metrics"),
+		className: y,
 		children: [
-			x(Z(t)) && /* @__PURE__ */ N(Q, {
-				label: g("responseMetrics.firstToken", "First token"),
+			b($(t)) && /* @__PURE__ */ B(Me, {
+				label: h("responseMetrics.firstToken", "First token"),
 				width: "min-w-40",
-				children: Z(t) ? X(t) : S
+				children: $(t) ? ke(t) : x
 			}),
-			x(Z(r)) && /* @__PURE__ */ N(Q, {
-				label: g("responseMetrics.total", "Total"),
+			b($(r)) && /* @__PURE__ */ B(Me, {
+				label: h("responseMetrics.total", "Total"),
 				width: "min-w-40",
-				children: Z(r) ? X(r) : _ === void 0 ? S : /* @__PURE__ */ N("span", {
+				children: $(r) ? ke(r) : g === void 0 ? x : /* @__PURE__ */ B("span", {
 					className: "text-fg-tertiary",
-					children: X(_)
+					children: ke(g)
 				})
 			}),
-			x(v) && /* @__PURE__ */ N(Q, {
-				label: g("responseMetrics.tokens", "Tokens"),
+			b(_) && /* @__PURE__ */ B(Me, {
+				label: h("responseMetrics.tokens", "Tokens"),
 				width: "min-w-48",
-				value: v ? g("responseMetrics.tokensInOut", "{input} in, {output} out", {
-					input: Z(o) ? i(o) : g("responseMetrics.unknown", "unknown"),
-					output: Z(s) ? i(s) : g("responseMetrics.unknown", "unknown")
-				}) : void 0,
-				children: v ? /* @__PURE__ */ P(M, { children: [
-					Z(o) ? i(o) : S,
-					" → ",
-					Z(s) ? i(s) : S
-				] }) : S
+				children: _ ? h("responseMetrics.tokensValue", "{input} in · {output} out", {
+					input: $(i) ? o(i) : "—",
+					output: $(a) ? o(a) : "—"
+				}) : x
 			}),
-			(Z(c) || u && l) && /* @__PURE__ */ N(Q, {
-				label: g("responseMetrics.reasoning", "Reasoning"),
+			($(s) || l && c) && /* @__PURE__ */ B(Me, {
+				label: h("responseMetrics.reasoning", "Reasoning"),
 				width: "min-w-24",
-				children: Z(c) ? i(c) : S
+				children: $(s) ? o(s) : x
 			}),
-			x(y) && /* @__PURE__ */ N(Q, {
-				label: g("responseMetrics.cost", "Cost"),
+			b(v) && /* @__PURE__ */ B(Me, {
+				label: h("responseMetrics.cost", "Cost"),
 				width: "min-w-40",
-				children: y ? a(f) : S
+				children: v ? je(d) : x
 			})
 		]
 	});
 });
-process.env.NODE_ENV !== "production" && (ge.displayName = "ResponseMetrics");
+process.env.NODE_ENV !== "production" && (Ne.displayName = "ResponseMetrics");
 //#endregion
 //#region src/components/playground/parameter-panel.tsx
-var _e = { layout: {
+var Pe = { layout: {
 	popover: { classes: "w-full gap-20" },
 	panel: { classes: "w-full gap-24" }
-} }, ve = { layout: "popover" };
-function ye(e) {
+} }, Fe = { layout: "popover" };
+function Ie(e) {
 	return [
 		{
 			value: "none",
@@ -578,227 +619,459 @@ function ye(e) {
 		}
 	];
 }
-function be({ label: t, value: r, unset: a, min: o, max: s, step: c, digits: l, disabled: u, onChange: d }) {
-	let p = D(), m = n(), h = i(r, {
+function Le({ label: t, value: r, unset: i, min: a, max: s, step: c, digits: l, disabled: u, onChange: d }) {
+	let f = ie(), p = n(), m = o(r, {
 		minimumFractionDigits: l,
 		maximumFractionDigits: l
 	});
-	return /* @__PURE__ */ P("div", {
+	return /* @__PURE__ */ V("div", {
 		className: "flex flex-col gap-8",
-		children: [/* @__PURE__ */ P("div", {
+		children: [/* @__PURE__ */ V("div", {
 			className: "flex items-baseline justify-between gap-12",
-			children: [/* @__PURE__ */ N("span", {
-				id: p,
+			children: [/* @__PURE__ */ B("span", {
+				id: f,
 				className: e("text-body font-medium", u ? "text-fg-disabled" : "text-fg"),
 				children: t
-			}), /* @__PURE__ */ N("span", {
-				className: e("text-small tabular", a ? "text-fg-tertiary" : "text-fg-secondary"),
-				children: a ? m("parameterPanel.valueDefault", "{value} default", { value: h }) : h
+			}), /* @__PURE__ */ B("span", {
+				className: e("text-small tabular", i ? "text-fg-tertiary" : "text-fg-secondary"),
+				children: i ? p("parameterPanel.valueDefault", "{value} default", { value: m }) : m
 			})]
-		}), /* @__PURE__ */ N("div", {
+		}), /* @__PURE__ */ B("div", {
 			className: "px-8",
-			children: /* @__PURE__ */ N(f, {
+			children: /* @__PURE__ */ B(_, {
 				"aria-label": t,
-				min: o,
+				min: a,
 				max: s,
 				step: c,
 				value: r,
 				disabled: u,
-				formatValue: (e) => i(e, {
+				formatValue: (e) => o(e, {
 					minimumFractionDigits: l,
 					maximumFractionDigits: l
 				}),
-				onValueChange: (e) => d(Array.isArray(e) ? e[0] ?? o : e)
+				onValueChange: (e) => d(Array.isArray(e) ? e[0] ?? a : e)
 			})
 		})]
 	});
 }
-var $ = /* @__PURE__ */ S(function({ value: t, onValueChange: r, defaults: i, instructions: a = !0, sampling: o = !0, reasoning: s = !1, maxOutputTokensLimit: l, disabled: f = !1, layout: m = "popover", className: g }, _) {
-	let v = n(), y = (e) => r({
+var Re = /* @__PURE__ */ N(function({ value: t, onValueChange: r, defaults: i, instructions: a = !0, sampling: o = !0, reasoning: s = !1, maxOutputTokensLimit: c, disabled: l = !1, layout: d = "popover", className: f }, p) {
+	let m = n(), _ = (e) => r({
 		...t,
 		...e
-	}), b = ye(v), x = s === !0 ? b : Array.isArray(s) ? b.filter((e) => s.includes(e.value)) : [], S = t.temperature !== void 0 || t.topP !== void 0 || t.maxOutputTokens !== void 0 || t.reasoningEffort !== void 0 || t.reasoningSummary !== void 0;
-	return /* @__PURE__ */ P("div", {
-		ref: _,
-		className: e("flex min-w-0 flex-col", _e.layout[m].classes, g),
+	}), v = Ie(m), b = s === !0 ? v : Array.isArray(s) ? v.filter((e) => s.includes(e.value)) : [], S = t.temperature !== void 0 || t.topP !== void 0 || t.maxOutputTokens !== void 0 || t.reasoningEffort !== void 0 || t.reasoningSummary !== void 0;
+	return /* @__PURE__ */ V("div", {
+		ref: p,
+		className: e("flex min-w-0 flex-col", Pe.layout[d].classes, f),
 		children: [
-			a && /* @__PURE__ */ N(d, {
-				label: v("parameterPanel.systemInstructions", "System instructions"),
+			a && /* @__PURE__ */ B(g, {
+				label: m("parameterPanel.systemInstructions", "System instructions"),
 				rows: 3,
 				maxRows: 8,
-				placeholder: v("parameterPanel.instructionsPlaceholder", "You are a helpful assistant."),
+				placeholder: m("parameterPanel.instructionsPlaceholder", "You are a helpful assistant."),
 				value: t.instructions ?? "",
-				disabled: f,
-				onChange: (e) => y({ instructions: e.target.value === "" ? void 0 : e.target.value })
+				disabled: l,
+				onChange: (e) => _({ instructions: e.target.value === "" ? void 0 : e.target.value })
 			}),
-			o && /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ N(be, {
-				label: v("parameterPanel.temperature", "Temperature"),
+			o && /* @__PURE__ */ V(oe, { children: [/* @__PURE__ */ B(Le, {
+				label: m("parameterPanel.temperature", "Temperature"),
 				value: t.temperature ?? i?.temperature ?? 1,
 				unset: t.temperature === void 0,
 				min: 0,
 				max: 2,
 				step: .05,
 				digits: 2,
-				disabled: f,
-				onChange: (e) => y({ temperature: e })
-			}), /* @__PURE__ */ N(be, {
-				label: v("parameterPanel.topP", "Top P"),
+				disabled: l,
+				onChange: (e) => _({ temperature: e })
+			}), /* @__PURE__ */ B(Le, {
+				label: m("parameterPanel.topP", "Top P"),
 				value: t.topP ?? i?.topP ?? 1,
 				unset: t.topP === void 0,
 				min: 0,
 				max: 1,
 				step: .01,
 				digits: 2,
-				disabled: f,
-				onChange: (e) => y({ topP: e })
+				disabled: l,
+				onChange: (e) => _({ topP: e })
 			})] }),
-			/* @__PURE__ */ N(u, {
-				label: v("parameterPanel.maxOutputTokens", "Max output tokens"),
+			/* @__PURE__ */ B(h, {
+				label: m("parameterPanel.maxOutputTokens", "Max output tokens"),
 				size: "sm",
-				placeholder: v("parameterPanel.modelDefault", "Model default"),
+				placeholder: m("parameterPanel.modelDefault", "Model default"),
 				align: "start",
 				min: "1",
-				...l ? { max: String(l) } : {},
+				...c ? { max: String(c) } : {},
 				step: "256",
 				value: t.maxOutputTokens === void 0 ? "" : String(t.maxOutputTokens),
-				disabled: f,
+				disabled: l,
 				onValueChange: (e) => {
 					let t = Number(e);
-					y({ maxOutputTokens: e.trim() === "" || !Number.isFinite(t) || t <= 0 ? void 0 : Math.round(t) });
+					_({ maxOutputTokens: e.trim() === "" || !Number.isFinite(t) || t <= 0 ? void 0 : Math.round(t) });
 				}
 			}),
-			x.length > 0 && /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ N(h, {
-				label: v("parameterPanel.reasoningEffort", "Reasoning effort"),
+			b.length > 0 && /* @__PURE__ */ V(oe, { children: [/* @__PURE__ */ B(x, {
+				label: m("parameterPanel.reasoningEffort", "Reasoning effort"),
 				size: "sm",
 				fullWidth: !0,
-				disabled: f,
+				disabled: l,
 				value: t.reasoningEffort ?? "default",
 				options: [{
 					value: "default",
-					label: v("parameterPanel.modelDefault", "Model default")
-				}, ...x],
-				onValueChange: (e) => y({ reasoningEffort: e === "default" ? void 0 : e })
-			}), /* @__PURE__ */ P("div", {
+					label: m("parameterPanel.modelDefault", "Model default")
+				}, ...b],
+				onValueChange: (e) => _({ reasoningEffort: e === "default" ? void 0 : e })
+			}), /* @__PURE__ */ V("div", {
 				className: "flex flex-col gap-8",
-				children: [/* @__PURE__ */ N("span", {
-					className: e("text-body font-medium", f ? "text-fg-disabled" : "text-fg"),
-					children: v("parameterPanel.reasoningSummary", "Reasoning summary")
-				}), /* @__PURE__ */ N(p, {
-					"aria-label": v("parameterPanel.reasoningSummary", "Reasoning summary"),
+				children: [/* @__PURE__ */ B("span", {
+					className: e("text-body font-medium", l ? "text-fg-disabled" : "text-fg"),
+					children: m("parameterPanel.reasoningSummary", "Reasoning summary")
+				}), /* @__PURE__ */ B(y, {
+					"aria-label": m("parameterPanel.reasoningSummary", "Reasoning summary"),
 					size: "sm",
 					fullWidth: !0,
-					disabled: f,
+					disabled: l,
 					value: t.reasoningSummary ?? "auto",
 					options: [
 						{
 							value: "auto",
-							label: v("parameterPanel.summaryAuto", "Auto")
+							label: m("parameterPanel.summaryAuto", "Auto")
 						},
 						{
 							value: "concise",
-							label: v("parameterPanel.summaryConcise", "Concise")
+							label: m("parameterPanel.summaryConcise", "Concise")
 						},
 						{
 							value: "detailed",
-							label: v("parameterPanel.summaryDetailed", "Detailed")
+							label: m("parameterPanel.summaryDetailed", "Detailed")
 						},
 						{
 							value: "off",
-							label: v("parameterPanel.summaryOff", "Off")
+							label: m("parameterPanel.summaryOff", "Off")
 						}
 					],
-					onValueChange: (e) => y({ reasoningSummary: e === "auto" ? void 0 : e })
+					onValueChange: (e) => _({ reasoningSummary: e === "auto" ? void 0 : e })
 				})]
 			})] }),
-			/* @__PURE__ */ N("div", {
+			/* @__PURE__ */ B("div", {
 				className: "flex justify-end",
-				children: /* @__PURE__ */ N(c, {
+				children: /* @__PURE__ */ B(u, {
 					size: "sm",
 					variant: "ghost",
-					disabled: f || !S,
+					disabled: l || !S,
 					onClick: () => r(t.instructions === void 0 ? {} : { instructions: t.instructions }),
-					children: v("parameterPanel.resetToDefaults", "Reset to defaults")
+					children: m("parameterPanel.resetToDefaults", "Reset to defaults")
 				})
 			})
 		]
 	});
 });
-process.env.NODE_ENV !== "production" && ($.displayName = "ParameterPanel");
-function xe({ trigger: e, title: t, open: r, defaultOpen: i, onOpenChange: a, side: o = "bottom", align: s = "end", ...c }) {
-	let u = n(), d = t ?? u("parameterPopover.parameters", "Parameters");
-	return /* @__PURE__ */ P(g, {
+process.env.NODE_ENV !== "production" && (Re.displayName = "ParameterPanel");
+function ze({ trigger: e, title: t, open: r, defaultOpen: i, onOpenChange: a, side: o = "bottom", align: s = "end", ...c }) {
+	let l = n(), u = t ?? l("parameterPopover.parameters", "Parameters");
+	return /* @__PURE__ */ V(S, {
 		trapFocus: !0,
 		...r === void 0 ? {} : { open: r },
 		...i === void 0 ? {} : { defaultOpen: i },
 		...a ? { onOpenChange: a } : {},
-		children: [/* @__PURE__ */ N(g.Trigger, { children: e ?? /* @__PURE__ */ N(l, {
-			icon: z,
-			"aria-label": d,
+		children: [/* @__PURE__ */ B(S.Trigger, { children: e ?? /* @__PURE__ */ B(d, {
+			icon: W,
+			"aria-label": u,
 			size: "sm"
-		}) }), /* @__PURE__ */ N(g.Content, {
-			title: d,
+		}) }), /* @__PURE__ */ B(S.Content, {
+			title: u,
 			side: o,
 			align: s,
 			className: "w-320 max-w-(--available-width)",
-			children: /* @__PURE__ */ N($, { ...c })
+			children: /* @__PURE__ */ B(Re, { ...c })
 		})]
 	});
 }
-process.env.NODE_ENV !== "production" && (xe.displayName = "ParameterPopover");
+process.env.NODE_ENV !== "production" && (ze.displayName = "ParameterPopover");
 //#endregion
 //#region src/components/playground/model-picker.tsx
-var Se = {
+var Be = {
 	ghost: "header",
 	default: "default"
-}, Ce = { appearance: {
-	ghost: { classes: m.appearance.header.classes },
-	default: { classes: m.appearance.default.classes }
-} }, we = { appearance: "ghost" }, Te = /* @__PURE__ */ S(function({ options: t, value: r, defaultValue: i, onValueChange: a, groupByProvider: o, placeholder: s, "aria-label": c, appearance: l = "ghost", size: u = "sm", disabled: d, "data-force": f, className: p }, m) {
-	let g = n(), y = o ?? new Set(t.map((e) => e.provider)).size > 1, b = y ? [...t].sort((e, t) => v(e.provider).localeCompare(v(t.provider))) : t;
-	return /* @__PURE__ */ N(h, {
-		ref: m,
-		"aria-label": c ?? g("modelPicker.model", "Model"),
-		appearance: Se[l],
-		size: u,
-		placeholder: s ?? g("modelPicker.choose", "Choose a model"),
-		...r === void 0 ? {} : { value: r },
-		...i === void 0 ? {} : { defaultValue: i },
-		...a ? { onValueChange: a } : {},
-		...d === void 0 ? {} : { disabled: d },
-		...f ? { "data-force": f } : {},
-		className: e("max-w-full", p),
-		options: b.map((e) => ({
-			value: e.value,
-			textValue: e.name ?? e.model ?? e.value,
-			label: /* @__PURE__ */ N(_, {
-				provider: e.provider,
-				model: e.model ?? e.value,
-				...e.name ? { name: e.name } : {}
+}, Ve = { appearance: {
+	ghost: { classes: b.appearance.header.classes },
+	default: { classes: b.appearance.default.classes }
+} }, He = { appearance: "ghost" }, Ue = "", We = "*";
+function Ge({ option: t, query: n, providerLabel: r }) {
+	let a = t.model ?? t.value, o = [t.context ? i(t.context) : "", t.price ?? ""].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ V(oe, { children: [
+		r !== void 0 && /* @__PURE__ */ B("span", {
+			"aria-hidden": !0,
+			className: "flex",
+			children: /* @__PURE__ */ B(O, {
+				provider: t.provider,
+				name: r
+			})
+		}),
+		/* @__PURE__ */ V("span", {
+			className: "flex min-w-0 flex-1 items-baseline gap-8",
+			children: [/* @__PURE__ */ B("span", {
+				className: "min-w-0 shrink truncate",
+				children: /* @__PURE__ */ B(C, {
+					text: t.name ?? a,
+					query: n
+				})
+			}), t.name && t.name !== a && /* @__PURE__ */ B("span", {
+				className: "min-w-0 flex-1 truncate mono text-small font-regular text-fg-tertiary",
+				children: /* @__PURE__ */ B(C, {
+					text: a,
+					query: n
+				})
+			})]
+		}),
+		t.capabilities && t.capabilities.length > 0 && /* @__PURE__ */ B(k, {
+			capabilities: t.capabilities,
+			className: "hidden sm:flex"
+		}),
+		(t.note ?? o) && /* @__PURE__ */ B("span", {
+			className: e("shrink-0 text-caption font-regular tabular", t.note ? "text-fg-secondary" : "hidden text-fg-tertiary sm:inline"),
+			children: t.note ?? o
+		})
+	] });
+}
+function Ke(e, t, n) {
+	let r = e.model ?? e.value, i = t(e.provider);
+	return {
+		value: e.value,
+		label: e.name ?? r,
+		keywords: [
+			r,
+			i,
+			e.provider
+		],
+		render: ({ query: t }) => /* @__PURE__ */ B(Ge, {
+			option: e,
+			query: t,
+			...n ? { providerLabel: i } : {}
+		}),
+		...e.disabled ? { disabled: !0 } : {}
+	};
+}
+function qe(e, t, n, r) {
+	return n ? t.flatMap((t) => {
+		let n = e.filter((e) => e.provider === t);
+		return n.length ? [{
+			id: `provider:${t}`,
+			label: r(t),
+			leading: /* @__PURE__ */ B("span", {
+				"aria-hidden": !0,
+				className: "flex",
+				children: /* @__PURE__ */ B(O, {
+					provider: t,
+					name: r(t),
+					size: "sm"
+				})
 			}),
-			...y ? { group: v(e.provider) } : {},
-			...e.disabled ? { disabled: !0 } : {}
-		}))
+			count: n.length,
+			items: n.map((e) => Ke(e, r, !1))
+		}] : [];
+	}) : [{
+		id: "models",
+		items: e.map((e) => Ke(e, r, !0))
+	}];
+}
+function Je(e, t) {
+	let n = r(), i = L(() => new Map(t.map((e) => [e.id, e])), [t]), a = P((e) => A(e, i.get(e)?.name), [i]);
+	return {
+		nameOf: a,
+		providerOrder: L(() => [...new Set(e.map((e) => e.provider))].sort((e, t) => Number(!!i.get(t)?.connected) - Number(!!i.get(e)?.connected) || a(e).localeCompare(a(t), n, { sensitivity: "base" })), [
+			e,
+			i,
+			a,
+			n
+		])
+	};
+}
+function Ye(e, { providers: t = [], groupByProvider: n } = {}) {
+	let { nameOf: r, providerOrder: i } = Je(e, t), a = n ?? i.length > 1;
+	return L(() => qe(e, i, a, r), [
+		e,
+		i,
+		a,
+		r
+	]);
+}
+var Xe = /* @__PURE__ */ N(function(t, r) {
+	let { options: i, providers: a = [], recent: s = [], groupByProvider: c, placeholder: l, "aria-label": u, appearance: d = "ghost", size: h = "sm", fullWidth: g, disabled: _, invalid: y, open: b, onOpenChange: S, "data-force": C, className: k, label: A, description: j, error: M, optional: te, required: N, layout: ne } = t, P = n(), re = f(), F = p(t), [ie, I] = z(!1), R = b ?? ie, ae = (e) => {
+		b === void 0 && I(e), S?.(e);
+	}, [se, ce] = z(() => t.defaultValue ?? (t.multiple ? [] : null)), H = t.value === void 0 ? se : t.value, U = Array.isArray(H) ? H : H ? [H] : [], W = t.multiple ? void 0 : t.allLabel, [G, le] = z(""), [K, ue] = z(null), [q, de] = z(!1), [fe, pe] = z(R);
+	R !== fe && (pe(R), R && (le(""), ue(null)));
+	let J = L(() => new Map(i.map((e) => [e.value, e])), [i]), { nameOf: Y, providerOrder: X } = Je(i, a), me = c ?? X.length > 1, he = i.some((e) => e.deprecated && !U.includes(e.value)), Z = U.join("\0"), ge = L(() => {
+		let e = new Set(Z.split("\0")), t = (t) => (q || !t.deprecated || e.has(t.value)) && (!K || t.provider === K), n = [];
+		W && !K && n.push({
+			id: "all",
+			items: [{
+				value: Ue,
+				label: W
+			}]
+		});
+		let r = G.trim() || K ? [] : s.flatMap((e) => J.get(e) && t(J.get(e)) ? [Ke(J.get(e), Y, !0)] : []);
+		return r.length && n.push({
+			id: "recent",
+			label: P("modelPicker.recent", "Recent"),
+			items: r
+		}), [...n, ...qe(i.filter(t), X, me, Y)];
+	}, [
+		i,
+		X,
+		me,
+		s,
+		J,
+		G,
+		K,
+		q,
+		Z,
+		W,
+		P,
+		Y
+	]), _e = (e) => {
+		if (t.multiple) {
+			let n = U.includes(e) ? U.filter((t) => t !== e) : [...U, e];
+			t.value === void 0 && ce(n), t.onValueChange?.(n);
+		} else t.value === void 0 && ce(e === Ue ? null : e), t.onValueChange?.(e), ae(!1);
+	}, ve = L(() => {
+		let e = G.trim(), t = new Set(Z.split("\0")), n = /* @__PURE__ */ new Map();
+		for (let r of i) {
+			if (r.deprecated && !q && !t.has(r.value)) continue;
+			let i = r.model ?? r.value;
+			e && ee(e, [
+				r.name ?? i,
+				i,
+				Y(r.provider),
+				r.provider
+			]) <= 0 || n.set(r.provider, (n.get(r.provider) ?? 0) + 1);
+		}
+		return X.filter((e) => n.has(e) || e === K).map((e) => ({
+			id: e,
+			count: n.get(e) ?? 0
+		}));
+	}, [
+		i,
+		X,
+		G,
+		q,
+		Z,
+		K,
+		Y
+	]), ye = me && X.length > 1 ? /* @__PURE__ */ B(x, {
+		"aria-label": P("modelPicker.provider", "Provider"),
+		size: "sm",
+		appearance: "ghost",
+		value: K ?? We,
+		onValueChange: (e) => ue(e === We ? null : e),
+		options: [{
+			value: We,
+			label: P("modelPicker.everyProvider", "All providers")
+		}, ...ve.map(({ id: e, count: t }) => ({
+			value: e,
+			textValue: Y(e),
+			label: /* @__PURE__ */ V("span", {
+				className: "flex min-w-0 items-center gap-8",
+				children: [
+					/* @__PURE__ */ B("span", {
+						"aria-hidden": !0,
+						className: "flex shrink-0",
+						children: /* @__PURE__ */ B(O, {
+							provider: e,
+							size: "sm"
+						})
+					}),
+					/* @__PURE__ */ B("span", {
+						className: "min-w-0 truncate",
+						children: Y(e)
+					}),
+					/* @__PURE__ */ B("span", {
+						className: "shrink-0 text-fg-tertiary tabular",
+						children: o(t)
+					})
+				]
+			})
+		}))]
+	}) : null, be = ye || he ? /* @__PURE__ */ V(oe, { children: [ye, he && /* @__PURE__ */ B(v, {
+		size: "sm",
+		label: P("modelPicker.showDeprecated", "Deprecated"),
+		checked: q,
+		onCheckedChange: de
+	})] }) : void 0, Q = U[0] ? J.get(U[0]) : void 0, xe = t.multiple ? Q ? U.length === 1 ? /* @__PURE__ */ B(D, {
+		provider: Q.provider,
+		providerName: Y(Q.provider),
+		model: Q.model ?? Q.value,
+		...Q.name ? { name: Q.name } : {}
+	}) : P("modelPicker.firstAndMore", "{first} +{count}", {
+		first: Q.name ?? Q.model ?? Q.value,
+		count: String(U.length - 1)
+	}) : void 0 : Q ? /* @__PURE__ */ B(D, {
+		provider: Q.provider,
+		providerName: Y(Q.provider),
+		model: Q.model ?? Q.value,
+		...Q.name ? { name: Q.name } : {}
+	}) : H === Ue || H === null && W ? W : void 0, Se = u ?? (typeof A == "string" ? A : P("modelPicker.model", "Model")), Ce = /* @__PURE__ */ B(E, {
+		title: Se,
+		width: "lg",
+		open: R,
+		onOpenChange: ae,
+		trigger: /* @__PURE__ */ B(T, {
+			ref: r,
+			appearance: Be[d],
+			size: h,
+			...F.controlProps,
+			...u || !A ? { "aria-label": Se } : {},
+			..._ ? { disabled: _ } : {},
+			...y ? { invalid: y } : {},
+			...g ? { fullWidth: g } : {},
+			...C ? { "data-force": C } : {},
+			placeholder: l ?? (t.multiple ? P("modelPicker.chooseSome", "Choose models") : P("modelPicker.choose", "Choose a model")),
+			className: e("max-w-full", !(A || j || M) && k),
+			children: xe
+		}),
+		children: /* @__PURE__ */ B(w, {
+			groups: ge,
+			"aria-label": Se,
+			value: t.multiple ? U : U[0] ?? (W ? Ue : null),
+			...t.multiple ? { multiple: !0 } : {},
+			onSelect: _e,
+			query: G,
+			onQueryChange: le,
+			placeholder: P("modelPicker.search", "Search models"),
+			emptyText: P("modelPicker.noMatch", "No models match"),
+			toolbar: be,
+			autoFocus: !0
+		})
 	});
+	return re ? Ce : m({
+		label: A,
+		description: j,
+		error: M,
+		optional: te,
+		required: N,
+		layout: ne,
+		id: F.wrapId,
+		disabled: _,
+		className: k
+	}, Ce);
 });
-process.env.NODE_ENV !== "production" && (Te.displayName = "ModelPicker");
+process.env.NODE_ENV !== "production" && (Xe.displayName = "ModelPicker");
 //#endregion
 //#region src/components/playground/prompt-suggestions.tsx
-var Ee = { align: {
+var Ze = { align: {
 	start: { classes: "items-stretch" },
 	center: { classes: "items-center text-center" }
-} }, De = { align: "start" }, Oe = /* @__PURE__ */ S(function({ suggestions: t, onSelect: r, "aria-label": i, align: a = "start", className: o }, s) {
+} }, Qe = { align: "start" }, $e = /* @__PURE__ */ N(function({ suggestions: t, onSelect: r, "aria-label": i, align: a = "start", className: o }, s) {
 	let c = n(), l = i ?? c("promptSuggestions.examplePrompts", "Example prompts");
-	return /* @__PURE__ */ N("ul", {
+	return /* @__PURE__ */ B("ul", {
 		ref: s,
 		"aria-label": l,
-		className: e("flex min-w-0 flex-col gap-2", Ee.align[a].classes, o),
-		children: t.slice(0, 3).map((t) => /* @__PURE__ */ N("li", {
+		className: e("flex min-w-0 flex-col gap-2", Ze.align[a].classes, o),
+		children: t.slice(0, 3).map((t) => /* @__PURE__ */ B("li", {
 			className: e("flex min-w-0", a === "center" && "justify-center"),
-			children: /* @__PURE__ */ N("button", {
+			children: /* @__PURE__ */ B("button", {
 				type: "button",
 				onClick: () => r(t),
 				className: e("flex h-36 max-w-full min-w-0 cursor-pointer items-center rounded-item px-16 text-body text-fg-secondary transition-control hover:bg-fill-1 hover:text-fg focus-ring-inset", a === "start" && "flex-1"),
-				children: /* @__PURE__ */ N("span", {
+				children: /* @__PURE__ */ B("span", {
 					className: "min-w-0 truncate",
 					children: t
 				})
@@ -806,8 +1079,8 @@ var Ee = { align: {
 		}, t))
 	});
 });
-process.env.NODE_ENV !== "production" && (Oe.displayName = "PromptSuggestions");
+process.env.NODE_ENV !== "production" && ($e.displayName = "PromptSuggestions");
 //#endregion
-export { ie as CompareGrid, K as Composer, te as KAESO_COMPARE_GRID_DEFAULT_VARIANTS, q as KAESO_COMPARE_GRID_VARIANTS, H as KAESO_COMPOSER_DEFAULT_VARIANTS, V as KAESO_COMPOSER_VARIANTS, we as KAESO_MODEL_PICKER_DEFAULT_VARIANTS, Ce as KAESO_MODEL_PICKER_VARIANTS, ve as KAESO_PARAMETER_PANEL_DEFAULT_VARIANTS, _e as KAESO_PARAMETER_PANEL_VARIANTS, De as KAESO_PROMPT_SUGGESTIONS_DEFAULT_VARIANTS, Ee as KAESO_PROMPT_SUGGESTIONS_VARIANTS, me as KAESO_RESPONSE_METRICS_DEFAULT_VARIANTS, pe as KAESO_RESPONSE_METRICS_VARIANTS, oe as KAESO_RESPONSE_VIEW_DEFAULT_VARIANTS, ae as KAESO_RESPONSE_VIEW_VARIANTS, Te as ModelPicker, $ as ParameterPanel, xe as ParameterPopover, Oe as PromptSuggestions, ge as ResponseMetrics, le as ResponseView, fe as Thread, de as UserMessage, X as formatLatency };
+export { ge as CompareGrid, pe as Composer, Y as KAESO_COMPARE_GRID_DEFAULT_VARIANTS, J as KAESO_COMPARE_GRID_VARIANTS, K as KAESO_COMPOSER_DEFAULT_VARIANTS, le as KAESO_COMPOSER_VARIANTS, He as KAESO_MODEL_PICKER_DEFAULT_VARIANTS, Ve as KAESO_MODEL_PICKER_VARIANTS, Fe as KAESO_PARAMETER_PANEL_DEFAULT_VARIANTS, Pe as KAESO_PARAMETER_PANEL_VARIANTS, Qe as KAESO_PROMPT_SUGGESTIONS_DEFAULT_VARIANTS, Ze as KAESO_PROMPT_SUGGESTIONS_VARIANTS, ve as KAESO_REASONING_DEFAULT_VARIANTS, _e as KAESO_REASONING_VARIANTS, Oe as KAESO_RESPONSE_METRICS_DEFAULT_VARIANTS, De as KAESO_RESPONSE_METRICS_VARIANTS, xe as KAESO_RESPONSE_VIEW_DEFAULT_VARIANTS, Q as KAESO_RESPONSE_VIEW_VARIANTS, Xe as ModelPicker, Re as ParameterPanel, ze as ParameterPopover, $e as PromptSuggestions, be as Reasoning, Ne as ResponseMetrics, Ce as ResponseView, Ee as Thread, Te as UserMessage, ke as formatLatency, Ye as useModelGroups };
 
 //# sourceMappingURL=playground.js.map