@logicplanes/kaeso-ui 0.1.0

package/dist/components/playground.js

@@ -0,0 +1,813 @@
+"use client";
+import { t as e } from "../chunks/cn-CidVUKMm.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-DmQoePvG.js";
+import { n as c } from "../chunks/button-BHKAE6ui.js";
+import { t as l } from "../chunks/icon-button-Bw67oKtx.js";
+import { o as u, r as d } from "../chunks/textarea-Bvk7N2bh.js";
+import { r as f } from "../chunks/slider-DbhjJ3ML.js";
+import { r as p } from "../chunks/segmented-CDTx2n29.js";
+import { n as m, r as h } from "../chunks/select-Ca3HGsN1.js";
+import { i as g } from "../chunks/popover-BE7VO-a4.js";
+import { i as _, l as v } from "../chunks/identity-DQinp-Ep.js";
+import { r as y } from "../chunks/markdown-C-iJsYnd.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";
+//#region src/components/playground/composer.tsx
+var V = { size: {
+	md: { classes: "rounded-frame" },
+	sm: { classes: "rounded-frame" }
+} }, H = { size: "md" }, U = "(pointer: coarse)";
+function W(e) {
+	if (typeof window > "u" || !window.matchMedia) return () => {};
+	let t = window.matchMedia(U);
+	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()));
+	};
+	return /* @__PURE__ */ P("form", {
+		onSubmit: (e) => {
+			e.preventDefault(), W();
+		},
+		onMouseDown: (e) => {
+			e.target === e.currentTarget && !f && (e.preventDefault(), R.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", {
+			ref: (e) => {
+				R.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
+			},
+			rows: z,
+			value: I,
+			onChange: (e) => L(e.target.value),
+			onKeyDown: q,
+			disabled: f,
+			placeholder: A,
+			"aria-label": j,
+			"aria-keyshortcuts": K ? "Enter Meta+Enter Control+Enter" : "Meta+Enter Control+Enter",
+			...K ? { 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", {
+			className: "flex min-w-0 items-center gap-8 p-8 pt-4",
+			children: [/* @__PURE__ */ N("div", {
+				className: "flex min-w-0 flex-1 items-center gap-4",
+				children: v
+			}), u ? /* @__PURE__ */ N(c, {
+				type: "button",
+				size: "sm",
+				variant: "secondary",
+				reserveLabels: [M, F],
+				onClick: () => s?.(),
+				disabled: f,
+				children: F
+			}) : /* @__PURE__ */ N(c, {
+				type: "submit",
+				size: "sm",
+				variant: "primary",
+				reserveLabels: [M, F],
+				loading: d,
+				disabled: !U && !d,
+				children: M
+			})]
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (K.displayName = "Composer");
+//#endregion
+//#region src/components/playground/compare-grid.tsx
+var q = { divider: {
+	hairline: { classes: "hairline-l" },
+	none: { classes: "" }
+} }, te = { divider: "hairline" }, J = /* @__PURE__ */ x({
+	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;
+	});
+	let T = w((e) => {
+		let t = g.current?.children[e], n = g.current;
+		if (!t || !n) return;
+		x.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) => {
+		let t = Math.max(0, Math.min(h - 1, e));
+		v(t), c?.(t), T(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(() => {
+		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(() => {
+		let e = g.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		M();
+		let t = new ResizeObserver(M);
+		return t.observe(e), () => t.disconnect();
+	}, [M, h]);
+	let R = () => {
+		M();
+		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;
+		}
+		n !== y && (v(n), c?.(n));
+	}, z = () => {
+		x.current = null;
+	}, B = h >= o, V = i ? /* @__PURE__ */ N(l, {
+		icon: F,
+		"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", {
+		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",
+			children: [
+				/* @__PURE__ */ N(l, {
+					icon: I,
+					"aria-label": p("compareGrid.previousColumn", "Previous column"),
+					size: "sm",
+					disabled: y === 0,
+					onClick: () => D(y - 1)
+				}),
+				/* @__PURE__ */ P("span", {
+					"aria-live": "polite",
+					className: "min-w-0 flex-1 truncate text-center text-small text-fg-secondary tabular",
+					children: [/* @__PURE__ */ N("span", {
+						className: "sr-only",
+						children: p("compareGrid.columnName", "{label}, ", { label: H })
+					}), p("compareGrid.position", "{index} of {count}", {
+						index: y + 1,
+						count: h
+					})]
+				}),
+				/* @__PURE__ */ N(l, {
+					icon: L,
+					"aria-label": p("compareGrid.nextColumn", "Next column"),
+					size: "sm",
+					disabled: y >= h - 1,
+					onClick: () => D(y + 1)
+				}),
+				V
+			]
+		}) : null, /* @__PURE__ */ N("div", {
+			ref: g,
+			onScroll: R,
+			onPointerDown: z,
+			onWheel: z,
+			onTouchStart: z,
+			onKeyDown: z,
+			className: "relative min-h-0 min-w-0 flex-1 compare-grid",
+			children: m.map((e, t) => /* @__PURE__ */ N(J.Provider, {
+				value: {
+					index: t,
+					count: h,
+					divider: u,
+					add: t === h - 1 ? V : 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(() => {
+		let i = t.current, a = n.current;
+		if (!e || !i || !a || typeof ResizeObserver > "u") return;
+		let o = i.scrollTop, s = () => {
+			i.style.setProperty("--scroll-area-overflow-y-start", `${Math.max(0, i.scrollTop)}px`), i.style.setProperty("--scroll-area-overflow-y-end", `${Math.max(0, i.scrollHeight - i.clientHeight - i.scrollTop)}px`);
+		}, c = () => {
+			s();
+			let e = i.scrollHeight - i.scrollTop - i.clientHeight <= 24;
+			r.current = i.scrollTop < o - 1 ? e : r.current || e, o = i.scrollTop;
+		}, l = new ResizeObserver(() => {
+			r.current && (i.scrollTop = i.scrollHeight, o = i.scrollTop), s();
+		});
+		return i.addEventListener("scroll", c, { passive: !0 }), l.observe(a), l.observe(i), () => {
+			i.removeEventListener("scroll", c), l.disconnect();
+		};
+	}, [e]), {
+		body: t,
+		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", {
+		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),
+		children: [
+			/* @__PURE__ */ P("header", {
+				className: "flex h-52 min-w-0 items-center gap-4 pr-10 pl-8 hairline-b",
+				children: [
+					/* @__PURE__ */ N("div", {
+						className: "flex min-w-0 flex-1 items-center",
+						children: r
+					}),
+					i,
+					s && h > 1 && /* @__PURE__ */ N(l, {
+						icon: R,
+						"aria-label": c ?? p("compareGrid.remove", "Remove {label}", { label: t }),
+						size: "sm",
+						onClick: s
+					}),
+					_ && /* @__PURE__ */ N("span", {
+						className: "hidden md:contents",
+						children: _
+					})
+				]
+			}),
+			/* @__PURE__ */ N("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", {
+					ref: y,
+					className: "flex min-h-full flex-col px-16 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
+			})
+		]
+	});
+});
+process.env.NODE_ENV !== "production" && (re.displayName = "CompareGrid.Column");
+var ie = /* @__PURE__ */ Object.assign(Y, { Column: re }), ae = { status: {
+	pending: { classes: "" },
+	streaming: { classes: "" },
+	done: { classes: "" },
+	stopped: { classes: "" },
+	error: { classes: "" }
+} }, oe = { status: "done" };
+function se(e) {
+	let t = e.trim().split("\n");
+	for (let e = t.length - 1; e >= 0; e--) {
+		let n = (t[e] ?? "").replace(/[*_`#>]+/g, "").trim();
+		if (n) return n;
+	}
+	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",
+			children: [
+				/* @__PURE__ */ N("span", {
+					className: e("shrink-0 font-medium", i && "animate-pulse-quiet reduced:animate-none"),
+					children: f
+				}),
+				/* @__PURE__ */ N(o, {
+					icon: L,
+					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,
+					className: "min-w-0 flex-1 truncate text-fg-tertiary group-data-panel-open/think:invisible",
+					children: d
+				})
+			]
+		}), /* @__PURE__ */ N(B.Panel, {
+			className: "collapse-motion",
+			children: /* @__PURE__ */ P("div", {
+				className: "flex gap-12 pt-4 pb-8",
+				children: [/* @__PURE__ */ N("span", {
+					"aria-hidden": !0,
+					className: "w-1 shrink-0 rounded-pill bg-line"
+				}), /* @__PURE__ */ N(y, {
+					text: t,
+					size: "small",
+					tone: "secondary",
+					streaming: i,
+					collapseAfter: 0,
+					wrapCode: !0,
+					className: "min-w-0 flex-1"
+				})]
+			})
+		})]
+	});
+}
+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),
+		children: [
+			x && /* @__PURE__ */ N(ce, {
+				text: r,
+				live: S,
+				duration: a,
+				open: o,
+				defaultOpen: s,
+				onOpenChange: l
+			}),
+			b ? /* @__PURE__ */ N(y, {
+				text: t,
+				size: "lg",
+				streaming: v,
+				collapseAfter: 0,
+				wrapCode: !0
+			}) : v && !x ? /* @__PURE__ */ N("div", {
+				"aria-hidden": !0,
+				className: "h-22"
+			}) : 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", {
+					className: "text-small text-fg-tertiary",
+					children: b ? h("responseView.stopped", "Stopped") : h("responseView.stoppedBeforeResponse", "Stopped before a response")
+				}), u && /* @__PURE__ */ N(c, {
+					size: "xs",
+					variant: "ghost",
+					onClick: u,
+					children: h("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", {
+					className: "text-small text-fg-secondary",
+					children: b ? h("responseView.stoppedEarly", "The response stopped early") : h("responseView.noResponse", "No response")
+				}), u && /* @__PURE__ */ N(c, {
+					size: "xs",
+					variant: "secondary",
+					onClick: u,
+					children: h("responseView.retry", "Retry")
+				})]
+			}),
+			i === "done" && !b && /* @__PURE__ */ N("span", {
+				className: "text-small text-fg-tertiary",
+				children: h("responseView.noText", "The model returned no text")
+			}),
+			d,
+			/* @__PURE__ */ N("span", {
+				id: _,
+				className: "sr-only",
+				children: i === "pending" ? h("responseView.waiting", "Waiting for the response") : i === "streaming" ? h("responseView.responding", "Responding") : ""
+			})
+		]
+	});
+});
+process.env.NODE_ENV !== "production" && (le.displayName = "ResponseView");
+var ue = {
+	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", {
+		ref: o,
+		role: "group",
+		"aria-label": u,
+		className: e("flex min-w-0 flex-col items-start gap-2", a),
+		children: [/* @__PURE__ */ N("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]),
+			children: t
+		}), (g || p) && /* @__PURE__ */ N(c, {
+			size: "xs",
+			variant: "link",
+			reserveLabels: [d, f],
+			onClick: () => m((e) => !e),
+			className: "text-fg-tertiary",
+			children: p ? f : d
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (de.displayName = "UserMessage");
+var fe = /* @__PURE__ */ S(function({ children: t, className: n }, r) {
+	return /* @__PURE__ */ N("div", {
+		ref: r,
+		className: e("flex min-w-0 flex-col gap-32", n),
+		children: t
+	});
+});
+process.env.NODE_ENV !== "production" && (fe.displayName = "Thread");
+//#endregion
+//#region src/components/playground/response-metrics.tsx
+var pe = { 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 });
+}
+function he(e) {
+	let [t, n] = A(() => Date.now());
+	return E(() => {
+		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) {
+	return typeof e == "number" && Number.isFinite(e);
+}
+function Q({ label: t, width: n, children: r, value: i }) {
+	return /* @__PURE__ */ P("div", {
+		className: "flex items-baseline gap-4 whitespace-nowrap",
+		children: [/* @__PURE__ */ N("dt", {
+			className: "text-fg-tertiary",
+			children: t
+		}), /* @__PURE__ */ N("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")
+	});
+	let x = (e) => u || e, S = /* @__PURE__ */ P("span", {
+		className: "text-fg-tertiary",
+		children: [/* @__PURE__ */ N("span", {
+			"aria-hidden": !0,
+			children: "—"
+		}), /* @__PURE__ */ N("span", {
+			className: "sr-only",
+			children: g("responseMetrics.notYetKnown", "not yet known")
+		})]
+	});
+	return /* @__PURE__ */ P("dl", {
+		ref: h,
+		"aria-label": g("responseMetrics.metrics", "Metrics"),
+		className: b,
+		children: [
+			x(Z(t)) && /* @__PURE__ */ N(Q, {
+				label: g("responseMetrics.firstToken", "First token"),
+				width: "min-w-40",
+				children: Z(t) ? X(t) : S
+			}),
+			x(Z(r)) && /* @__PURE__ */ N(Q, {
+				label: g("responseMetrics.total", "Total"),
+				width: "min-w-40",
+				children: Z(r) ? X(r) : _ === void 0 ? S : /* @__PURE__ */ N("span", {
+					className: "text-fg-tertiary",
+					children: X(_)
+				})
+			}),
+			x(v) && /* @__PURE__ */ N(Q, {
+				label: g("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
+			}),
+			(Z(c) || u && l) && /* @__PURE__ */ N(Q, {
+				label: g("responseMetrics.reasoning", "Reasoning"),
+				width: "min-w-24",
+				children: Z(c) ? i(c) : S
+			}),
+			x(y) && /* @__PURE__ */ N(Q, {
+				label: g("responseMetrics.cost", "Cost"),
+				width: "min-w-40",
+				children: y ? a(f) : S
+			})
+		]
+	});
+});
+process.env.NODE_ENV !== "production" && (ge.displayName = "ResponseMetrics");
+//#endregion
+//#region src/components/playground/parameter-panel.tsx
+var _e = { layout: {
+	popover: { classes: "w-full gap-20" },
+	panel: { classes: "w-full gap-24" }
+} }, ve = { layout: "popover" };
+function ye(e) {
+	return [
+		{
+			value: "none",
+			label: e("parameterPanel.effortNone", "None")
+		},
+		{
+			value: "minimal",
+			label: e("parameterPanel.effortMinimal", "Minimal")
+		},
+		{
+			value: "low",
+			label: e("parameterPanel.effortLow", "Low")
+		},
+		{
+			value: "medium",
+			label: e("parameterPanel.effortMedium", "Medium")
+		},
+		{
+			value: "high",
+			label: e("parameterPanel.effortHigh", "High")
+		},
+		{
+			value: "xhigh",
+			label: e("parameterPanel.effortExtraHigh", "Extra high")
+		},
+		{
+			value: "max",
+			label: e("parameterPanel.effortMax", "Max")
+		}
+	];
+}
+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, {
+		minimumFractionDigits: l,
+		maximumFractionDigits: l
+	});
+	return /* @__PURE__ */ P("div", {
+		className: "flex flex-col gap-8",
+		children: [/* @__PURE__ */ P("div", {
+			className: "flex items-baseline justify-between gap-12",
+			children: [/* @__PURE__ */ N("span", {
+				id: p,
+				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__ */ N("div", {
+			className: "px-8",
+			children: /* @__PURE__ */ N(f, {
+				"aria-label": t,
+				min: o,
+				max: s,
+				step: c,
+				value: r,
+				disabled: u,
+				formatValue: (e) => i(e, {
+					minimumFractionDigits: l,
+					maximumFractionDigits: l
+				}),
+				onValueChange: (e) => d(Array.isArray(e) ? e[0] ?? o : 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({
+		...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),
+		children: [
+			a && /* @__PURE__ */ N(d, {
+				label: v("parameterPanel.systemInstructions", "System instructions"),
+				rows: 3,
+				maxRows: 8,
+				placeholder: v("parameterPanel.instructionsPlaceholder", "You are a helpful assistant."),
+				value: t.instructions ?? "",
+				disabled: f,
+				onChange: (e) => y({ instructions: e.target.value === "" ? void 0 : e.target.value })
+			}),
+			o && /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ N(be, {
+				label: v("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"),
+				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 })
+			})] }),
+			/* @__PURE__ */ N(u, {
+				label: v("parameterPanel.maxOutputTokens", "Max output tokens"),
+				size: "sm",
+				placeholder: v("parameterPanel.modelDefault", "Model default"),
+				align: "start",
+				min: "1",
+				...l ? { max: String(l) } : {},
+				step: "256",
+				value: t.maxOutputTokens === void 0 ? "" : String(t.maxOutputTokens),
+				disabled: f,
+				onValueChange: (e) => {
+					let t = Number(e);
+					y({ 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"),
+				size: "sm",
+				fullWidth: !0,
+				disabled: f,
+				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", {
+				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"),
+					size: "sm",
+					fullWidth: !0,
+					disabled: f,
+					value: t.reasoningSummary ?? "auto",
+					options: [
+						{
+							value: "auto",
+							label: v("parameterPanel.summaryAuto", "Auto")
+						},
+						{
+							value: "concise",
+							label: v("parameterPanel.summaryConcise", "Concise")
+						},
+						{
+							value: "detailed",
+							label: v("parameterPanel.summaryDetailed", "Detailed")
+						},
+						{
+							value: "off",
+							label: v("parameterPanel.summaryOff", "Off")
+						}
+					],
+					onValueChange: (e) => y({ reasoningSummary: e === "auto" ? void 0 : e })
+				})]
+			})] }),
+			/* @__PURE__ */ N("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ N(c, {
+					size: "sm",
+					variant: "ghost",
+					disabled: f || !S,
+					onClick: () => r(t.instructions === void 0 ? {} : { instructions: t.instructions }),
+					children: v("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, {
+		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,
+			size: "sm"
+		}) }), /* @__PURE__ */ N(g.Content, {
+			title: d,
+			side: o,
+			align: s,
+			className: "w-320 max-w-(--available-width)",
+			children: /* @__PURE__ */ N($, { ...c })
+		})]
+	});
+}
+process.env.NODE_ENV !== "production" && (xe.displayName = "ParameterPopover");
+//#endregion
+//#region src/components/playground/model-picker.tsx
+var Se = {
+	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 } : {}
+			}),
+			...y ? { group: v(e.provider) } : {},
+			...e.disabled ? { disabled: !0 } : {}
+		}))
+	});
+});
+process.env.NODE_ENV !== "production" && (Te.displayName = "ModelPicker");
+//#endregion
+//#region src/components/playground/prompt-suggestions.tsx
+var Ee = { 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) {
+	let c = n(), l = i ?? c("promptSuggestions.examplePrompts", "Example prompts");
+	return /* @__PURE__ */ N("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", a === "center" && "justify-center"),
+			children: /* @__PURE__ */ N("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", {
+					className: "min-w-0 truncate",
+					children: t
+				})
+			})
+		}, t))
+	});
+});
+process.env.NODE_ENV !== "production" && (Oe.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 };
+
+//# sourceMappingURL=playground.js.map