@clarify-labs/renderer 0.10.2 → 0.10.3

package/output/{OpenApiOperation-B52IWlKb.cjs → OpenApiOperation-DbZjxIuj.cjs}

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-b4iTLeia.cjs");
-const require_PageActions = require("./PageActions-BjB6PYmL.cjs");
+const require_i18n = require("./i18n-C-fReCj-.cjs");
+const require_PageActions = require("./PageActions-Dg1l9KB1.cjs");
 const require_remark = require("./remark-DTLbG8PK.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
@@ -18,6 +18,32 @@ rehype_raw = require_rolldown_runtime.__toESM(rehype_raw, 1);
 let github_slugger = require("github-slugger");
 let shiki = require("shiki");
 let _scalar_snippetz = require("@scalar/snippetz");
+//#region source/components/AccordionGroup.tsx
+function AccordionGroup(arg0) {
+	const { children, multiple = false, className, ...props } = arg0;
+	const childArray = react.Children.toArray(children);
+	const [openIndex, setOpenIndex] = (0, react.useState)(() => {
+		const defaultIndex = childArray.findIndex((child) => (0, react.isValidElement)(child) && child.props.defaultOpen);
+		return defaultIndex === -1 ? null : defaultIndex;
+	});
+	const items = childArray.map((child, index) => {
+		if (!(0, react.isValidElement)(child)) return child;
+		if (multiple) return child;
+		return (0, react.cloneElement)(child, {
+			open: openIndex === index,
+			onOpenChange: (open) => {
+				child.props.onOpenChange?.(open);
+				setOpenIndex(open ? index : null);
+			}
+		});
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("clarify-accordion-group my-6 divide-y divide-(--clarify-theme-tokens-colors-border) overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) [&_.clarify-collapse]:my-0 [&_.clarify-collapse]:rounded-none [&_.clarify-collapse]:border-0", className),
+		...props,
+		children: items
+	});
+}
+//#endregion
 //#region source/components/LocalizedLink.tsx
 function useLocalizedHref(href) {
 	return require_PageActions.localizeHref(href, require_i18n.useConfig(), require_i18n.useLocale());
@@ -37,15 +63,15 @@ function LocalizedLink(arg0) {
 //#endregion
 //#region source/components/Button.tsx
 var buttonVariantStyles = {
-	primary: "rounded-full bg-(--clarify-theme-tokens-colors-foreground) px-3 py-1 text-(--clarify-theme-tokens-colors-background) hover:opacity-80 dark:bg-(--clarify-theme-tokens-colors-primary)/10 dark:text-(--clarify-theme-tokens-colors-primary) dark:ring-1 dark:ring-inset dark:ring-(--clarify-theme-tokens-colors-primary)/20 dark:hover:opacity-80",
-	secondary: "rounded-full bg-(--clarify-theme-tokens-colors-code-background) px-3 py-1 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-theme-tokens-colors-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
-	filled: "rounded-full bg-(--clarify-theme-tokens-colors-foreground) px-3 py-1 text-(--clarify-theme-tokens-colors-background) hover:opacity-80 dark:bg-(--clarify-theme-tokens-colors-primary) dark:hover:opacity-80",
-	outline: "rounded-full px-3 py-1 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-theme-tokens-colors-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
+	primary: "bg-(--clarify-theme-tokens-colors-foreground) px-4 text-(--clarify-theme-tokens-colors-background) shadow-sm hover:-translate-y-px hover:shadow-md active:translate-y-0 active:shadow-sm dark:bg-(--clarify-theme-tokens-colors-primary) dark:text-zinc-950",
+	secondary: "bg-(--clarify-theme-tokens-colors-code-background) px-4 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-theme-tokens-colors-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
+	filled: "bg-(--clarify-theme-tokens-colors-primary) px-4 text-white shadow-sm hover:-translate-y-px hover:shadow-md active:translate-y-0 dark:text-zinc-950",
+	outline: "px-4 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-theme-tokens-colors-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
 	text: "text-(--clarify-theme-tokens-colors-primary) hover:opacity-80 dark:text-(--clarify-theme-tokens-colors-primary) dark:hover:opacity-80"
 };
 function Button(arg0) {
 	const { variant = "primary", className, children, arrow, ...props } = arg0;
-	const classes = (0, clsx.default)("clarify-button not-prose inline-flex w-fit max-w-full items-center justify-center gap-1 overflow-hidden align-middle text-sm leading-6 font-medium whitespace-nowrap no-underline transition", buttonVariantStyles[variant], className);
+	const classes = (0, clsx.default)("clarify-button not-prose inline-flex w-fit max-w-full items-center justify-center gap-1.5 overflow-hidden align-middle text-sm font-semibold whitespace-nowrap no-underline transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) focus-visible:ring-offset-2 focus-visible:ring-offset-(--clarify-theme-tokens-colors-background)", variant === "text" ? "h-auto rounded-sm" : "h-9 rounded-(--clarify-theme-tokens-radius-lg)", buttonVariantStyles[variant], className);
 	const arrowIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, {
 		"aria-hidden": "true",
 		className: (0, clsx.default)("h-4 w-4 shrink-0", variant === "text" && "relative top-px", arrow === "left" && "-ml-0.5 rotate-180", arrow === "right" && "-mr-0.5")
@@ -73,37 +99,43 @@ function Button(arg0) {
 //#region source/components/Callout.tsx
 var calloutStyles = {
 	info: {
-		container: "border-sky-500/20 bg-sky-50/50 text-sky-950 dark:border-sky-400/30 dark:bg-sky-400/5 dark:text-sky-100",
+		container: "border-sky-500/20 bg-sky-50/30 dark:border-sky-400/20 dark:bg-sky-400/5",
+		iconContainer: "bg-sky-100 ring-sky-500/15 dark:bg-sky-400/10 dark:ring-sky-400/20",
 		icon: "text-sky-600 dark:text-sky-400",
 		title: "text-sky-900 dark:text-sky-100",
 		Icon: lucide_react.Info
 	},
 	note: {
-		container: "border-zinc-500/20 bg-zinc-50 text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-200",
+		container: "border-zinc-500/20 bg-zinc-50/50 dark:border-white/10 dark:bg-white/5",
+		iconContainer: "bg-zinc-200/70 ring-zinc-500/15 dark:bg-white/10 dark:ring-white/10",
 		icon: "text-zinc-500 dark:text-zinc-400",
 		title: "text-zinc-900 dark:text-white",
 		Icon: lucide_react.Info
 	},
 	tip: {
-		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
+		container: "border-emerald-500/20 bg-emerald-50/30 dark:border-emerald-400/20 dark:bg-emerald-400/5",
+		iconContainer: "bg-emerald-100 ring-emerald-500/15 dark:bg-emerald-400/10 dark:ring-emerald-400/20",
 		icon: "text-emerald-600 dark:text-emerald-400",
 		title: "text-emerald-900 dark:text-emerald-100",
 		Icon: lucide_react.Lightbulb
 	},
 	warning: {
-		container: "border-amber-500/20 bg-amber-50/70 text-amber-950 dark:border-amber-400/30 dark:bg-amber-400/5 dark:text-amber-100",
+		container: "border-amber-500/20 bg-amber-50/40 dark:border-amber-400/20 dark:bg-amber-400/5",
+		iconContainer: "bg-amber-100 ring-amber-500/15 dark:bg-amber-400/10 dark:ring-amber-400/20",
 		icon: "text-amber-600 dark:text-amber-400",
 		title: "text-amber-900 dark:text-amber-100",
 		Icon: lucide_react.AlertTriangle
 	},
 	danger: {
-		container: "border-rose-500/20 bg-rose-50/70 text-rose-950 dark:border-rose-400/30 dark:bg-rose-400/5 dark:text-rose-100",
+		container: "border-rose-500/20 bg-rose-50/40 dark:border-rose-400/20 dark:bg-rose-400/5",
+		iconContainer: "bg-rose-100 ring-rose-500/15 dark:bg-rose-400/10 dark:ring-rose-400/20",
 		icon: "text-rose-600 dark:text-rose-400",
 		title: "text-rose-900 dark:text-rose-100",
 		Icon: lucide_react.XCircle
 	},
 	success: {
-		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
+		container: "border-emerald-500/20 bg-emerald-50/30 dark:border-emerald-400/20 dark:bg-emerald-400/5",
+		iconContainer: "bg-emerald-100 ring-emerald-500/15 dark:bg-emerald-400/10 dark:ring-emerald-400/20",
 		icon: "text-emerald-600 dark:text-emerald-400",
 		title: "text-emerald-900 dark:text-emerald-100",
 		Icon: lucide_react.CheckCircle2
@@ -124,15 +156,18 @@ function Callout(arg0) {
 	const Icon = style.Icon;
 	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("clarify-callout my-6 flex gap-3 rounded-(--clarify-theme-tokens-radius-xl) border p-4 text-sm/6", style.container, className),
+		className: (0, clsx.default)("clarify-callout my-6 flex gap-3.5 rounded-(--clarify-theme-tokens-radius-lg) border p-4 text-sm/6 text-(--clarify-ui-text-soft)", style.container, className),
 		...props,
-		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-			className: (0, clsx.default)("mt-1 size-4 flex-none", style.icon),
-			"aria-hidden": "true"
+		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: (0, clsx.default)("flex size-7 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-md) ring-1 ring-inset", style.iconContainer),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				className: (0, clsx.default)("size-4", style.icon),
+				"aria-hidden": "true"
+			})
 		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "min-w-0 flex-1 *:first:mt-0 *:last:mb-0",
 			children: [resolvedTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: (0, clsx.default)("mb-1 font-semibold", style.title),
+				className: (0, clsx.default)("mb-1.5 font-semibold", style.title),
 				children: resolvedTitle
 			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "*:first:mt-0 *:last:mb-0",
@@ -151,9 +186,9 @@ function CardIcon(arg0) {
 	const Icon = require_PageActions.lucideIconRegistry[iconName];
 	if (!Icon) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "flex size-9 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border)",
+		className: "flex size-8 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-inset ring-(--clarify-ui-accent-border) transition-colors group-hover:bg-(--clarify-theme-tokens-colors-primary) group-hover:text-white dark:group-hover:text-zinc-950",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-			className: "size-5",
+			className: "size-4",
 			"aria-hidden": "true"
 		})
 	});
@@ -167,7 +202,7 @@ var cardGroupColumnStyles = {
 function CardGroup(arg0) {
 	const { children, cols = 2, className } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("not-prose my-10 grid gap-4", cardGroupColumnStyles[cols], className),
+		className: (0, clsx.default)("not-prose my-8 grid gap-3", cardGroupColumnStyles[cols], className),
 		children
 	});
 }
@@ -177,11 +212,17 @@ function Card(arg0) {
 		className: "flex items-start gap-4",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardIcon, { name: icon }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-				className: "m-0 text-base font-semibold text-(--clarify-theme-tokens-colors-foreground)",
-				children: title
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "m-0 text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+					children: title
+				}), href ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpRight, {
+					className: "mt-1 size-3.5 shrink-0 text-(--clarify-ui-text-faint) transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-(--clarify-ui-accent-text)",
+					"aria-hidden": "true"
+				}) : null]
 			}), children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-2 text-sm/6 text-(--clarify-ui-text-soft) *:m-0",
+				className: "mt-1.5 text-sm/6 text-(--clarify-ui-text-soft) *:m-0",
 				children
 			}) : null]
 		})]
@@ -189,7 +230,7 @@ function Card(arg0) {
 		className: "absolute inset-0 rounded-(--clarify-theme-tokens-radius-xl)",
 		"aria-hidden": "true"
 	}) : null] });
-	const classes = (0, clsx.default)("group relative block rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-5 shadow-(--clarify-ui-accent-glow) transition hover:shadow-xs", className);
+	const classes = (0, clsx.default)("group relative block rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-4 transition duration-200", href && "hover:-translate-y-0.5 hover:border-(--clarify-ui-accent-border) hover:shadow-md hover:shadow-zinc-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) focus-visible:ring-offset-2 dark:hover:shadow-none", className);
 	if (!href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: classes,
 		children: content
@@ -203,7 +244,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = (0, react.lazy)(() => Promise.resolve().then(() => require("./MermaidViewer-B6-BMCJG.cjs")));
+var MermaidViewer = (0, react.lazy)(() => Promise.resolve().then(() => require("./MermaidViewer-Db7qsyVk.cjs")));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -329,6 +370,12 @@ function getNodeText(node) {
 	if ((0, react.isValidElement)(node)) return getNodeText(node.props.children);
 	return "";
 }
+function getCodeTitle(node) {
+	if (!(0, react.isValidElement)(node)) return void 0;
+	const { title, children } = node.props;
+	if (title) return title;
+	return react.Children.toArray(children).map(getCodeTitle).find(Boolean);
+}
 function getCodeLanguage(node) {
 	if (!(0, react.isValidElement)(node)) return void 0;
 	const { className, language, children } = node.props;
@@ -337,6 +384,13 @@ function getCodeLanguage(node) {
 	if (languageClass) return languageClass.slice(9);
 	return react.Children.toArray(children).map(getCodeLanguage).find(Boolean);
 }
+function getCodePanelTitle(node, fallbackTitle) {
+	return getPanelTitle({
+		title: getCodeTitle(node),
+		language: getCodeLanguage(node),
+		fallbackTitle
+	});
+}
 function CopyButton(arg0) {
 	const { code } = arg0;
 	const t = require_i18n.useBuiltInText();
@@ -417,10 +471,7 @@ function CodeGroupHeader(arg0) {
 			className: "clarify-code-tabs -mr-2 -mb-px flex gap-0 text-xs font-medium",
 			children: react.Children.map(children, (child, childIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Tab, {
 				className: (0, clsx.default)("clarify-code-tab relative border-b border-transparent px-2 py-3 transition-colors hover:bg-(--clarify-code-control-background-hover) data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "text-(--clarify-code-accent-text)" : "text-(--clarify-code-control-text) hover:text-(--clarify-code-text)"),
-				children: [getPanelTitle({
-					...(0, react.isValidElement)(child) ? child.props : {},
-					fallbackTitle: t("actions.code")
-				}), childIndex === selectedIndex ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
+				children: [getCodePanelTitle(child, t("actions.code")), childIndex === selectedIndex ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
 					layoutId: indicatorLayoutId,
 					className: "absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-(--clarify-code-accent-text)",
 					transition: {
@@ -494,10 +545,7 @@ var CodeGroupContext = (0, react.createContext)(false);
 function CodeGroup(arg0) {
 	const { children, title, ...props } = arg0;
 	const t = require_i18n.useBuiltInText();
-	const tabGroupProps = useTabGroupProps(react.Children.map(children, (child) => getPanelTitle({
-		...(0, react.isValidElement)(child) ? child.props : {},
-		fallbackTitle: t("actions.code")
-	})) ?? []);
+	const tabGroupProps = useTabGroupProps(react.Children.map(children, (child) => getCodePanelTitle(child, t("actions.code"))) ?? []);
 	const hasTabs = react.Children.count(children) > 1;
 	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)";
 	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroupHeader, {
@@ -553,8 +601,9 @@ function Pre(arg0) {
 //#endregion
 //#region source/components/Collapse.tsx
 function Collapse(arg0) {
-	const { children, title, summary, defaultOpen = false, className, ...props } = arg0;
-	const [open, setOpen] = (0, react.useState)(defaultOpen);
+	const { children, title, summary, defaultOpen = false, open: controlledOpen, onOpenChange, className, ...props } = arg0;
+	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(defaultOpen);
+	const open = controlledOpen ?? uncontrolledOpen;
 	const contentRef = (0, react.useRef)(null);
 	const [maxHeight, setMaxHeight] = (0, react.useState)("0px");
 	const summaryLabel = title ?? summary ?? "Details";
@@ -564,16 +613,20 @@ function Collapse(arg0) {
 		setMaxHeight(open ? `${contentRef.current.scrollHeight}px` : "0px");
 	}, [open, children]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)", className),
+		className: (0, clsx.default)("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) transition-colors", open && "border-(--clarify-ui-accent-border)", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
-			className: "flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-sm font-semibold text-(--clarify-theme-tokens-colors-foreground) transition hover:bg-(--clarify-ui-hover-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) focus-visible:ring-offset-2 focus-visible:ring-offset-(--clarify-theme-tokens-colors-background)",
+			className: "flex min-h-11 w-full cursor-pointer items-center justify-between gap-3 px-4 py-2.5 text-left text-sm font-semibold text-(--clarify-theme-tokens-colors-foreground) transition hover:bg-(--clarify-ui-hover-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
 			"aria-expanded": open,
 			"aria-controls": contentId,
-			onClick: () => setOpen((value) => !value),
+			onClick: () => {
+				const nextOpen = !open;
+				if (controlledOpen === void 0) setUncontrolledOpen(nextOpen);
+				onOpenChange?.(nextOpen);
+			},
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: summaryLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
-				className: (0, clsx.default)("h-4 w-4 text-(--clarify-theme-tokens-colors-muted) transition-transform duration-200", open && "rotate-180"),
+				className: (0, clsx.default)("size-4 rounded-full text-(--clarify-ui-text-faint) transition duration-200", open && "rotate-180"),
 				"aria-hidden": "true"
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -585,7 +638,7 @@ function Collapse(arg0) {
 			},
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: contentRef,
-				className: (0, clsx.default)("px-4 py-4 text-sm/6 text-(--clarify-theme-tokens-colors-foreground) transition-opacity duration-200 ease-out", open ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-1"),
+				className: (0, clsx.default)("px-4 py-4 text-sm/6 text-(--clarify-ui-text-soft) transition-opacity duration-200 ease-out *:first:mt-0 *:last:mb-0", open ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-1"),
 				children
 			})
 		})]
@@ -661,6 +714,55 @@ function Feedback() {
 	});
 }
 //#endregion
+//#region source/components/FileTree.tsx
+function FileTree(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("clarify-file-tree not-prose my-6 overflow-x-auto rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-4 py-3 font-mono text-[13px]/6 text-(--clarify-ui-text-soft)", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			role: "tree",
+			className: "m-0 min-w-max list-none p-0",
+			children
+		})
+	});
+}
+function FileTreeItem(arg0) {
+	const { name, description, type, children, className, ...props } = arg0;
+	const isFolder = type === "folder" || children != null;
+	const FolderIcon = children ? lucide_react.FolderOpen : lucide_react.Folder;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		role: "treeitem",
+		"aria-expanded": isFolder ? children != null : void 0,
+		className: (0, clsx.default)("clarify-file-tree-item m-0 p-0", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-h-6 items-center gap-2 whitespace-nowrap",
+			children: [
+				isFolder ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FolderIcon, {
+					className: "size-4 flex-none text-(--clarify-ui-accent-text)",
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.File, {
+					className: "size-4 flex-none text-(--clarify-ui-text-faint)",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-medium text-(--clarify-theme-tokens-colors-foreground)",
+					children: name
+				}),
+				description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-sans text-xs text-(--clarify-ui-text-faint)",
+					children: description
+				}) : null
+			]
+		}), children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			role: "group",
+			className: "m-0 ml-2.5 list-none border-l border-(--clarify-theme-tokens-colors-border) pl-4",
+			children
+		}) : null]
+	});
+}
+//#endregion
 //#region source/components/Tag.tsx
 var tagVariantStyles = {
 	small: "",
@@ -867,10 +969,50 @@ function Prose(arg0) {
 	});
 }
 //#endregion
+//#region source/components/Steps.tsx
+function Steps(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+		className: (0, clsx.default)("clarify-steps my-8 ml-3 list-none border-l-2 border-(--clarify-theme-tokens-colors-border) p-0", className),
+		...props,
+		children
+	});
+}
+function Step(arg0) {
+	const { children, title, className, ...props } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		className: (0, clsx.default)("clarify-step relative m-0 pb-10 pl-9 last:pb-0", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "absolute top-0 -left-3.5 flex size-7 items-center justify-center rounded-full bg-(--clarify-theme-tokens-colors-primary) text-xs font-semibold text-white shadow-[0_0_0_4px_var(--clarify-theme-tokens-colors-background)] before:content-[counter(list-item)] dark:text-zinc-950",
+				"aria-hidden": "true"
+			}),
+			title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "m-0 pt-0.5 text-base font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+				children: title
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, clsx.default)("text-sm/6 text-(--clarify-ui-text-soft) *:last:mb-0", title && "mt-2.5", !title && "*:first:mt-0"),
+				children
+			})
+		]
+	});
+}
+//#endregion
 //#region source/components/Tabs.tsx
+function TabItem(_props) {
+	return null;
+}
 function Tabs(arg0) {
-	const { items, selectedIndex, onChange, className, listClassName, panelsClassName } = arg0;
-	const [internalIndex, setInternalIndex] = (0, react.useState)(0);
+	const { items, children, defaultValue, selectedIndex, onChange, className, listClassName, panelsClassName } = arg0;
+	const childItems = react.Children.toArray(children).filter((child) => (0, react.isValidElement)(child) && child.type === TabItem).map((child, index) => ({
+		id: child.props.value ?? `tab-${index}`,
+		label: child.props.title,
+		panel: child.props.children
+	}));
+	const resolvedItems = items ?? childItems;
+	const [internalIndex, setInternalIndex] = (0, react.useState)(defaultValue ? Math.max(0, resolvedItems.findIndex((item) => item.id === defaultValue)) : 0);
 	const resolvedIndex = typeof selectedIndex === "number" ? selectedIndex : internalIndex;
 	const indicatorLayoutId = (0, react.useId)();
 	const handleChange = (index) => {
@@ -880,32 +1022,60 @@ function Tabs(arg0) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.TabGroup, {
 		selectedIndex: resolvedIndex,
 		onChange: handleChange,
-		className,
+		className: (0, clsx.default)("clarify-tabs my-6", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabList, {
-			className: (0, clsx.default)("-mx-2 flex flex-wrap items-center gap-2 border-b border-(--clarify-theme-tokens-colors-border) px-2 pb-0", listClassName),
-			children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
-				className: ({ selected }) => (0, clsx.default)("clarify-content-tab clarify-ui-tab relative inline-flex h-10 shrink-0 items-center rounded-t-md px-2 py-0 text-sm font-medium transition-colors focus:outline-none", selected && "clarify-ui-tab-active"),
+			className: (0, clsx.default)("flex max-w-full items-stretch gap-1 overflow-x-auto border-b border-(--clarify-theme-tokens-colors-border)", listClassName),
+			children: resolvedItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
+				className: ({ selected }) => (0, clsx.default)("clarify-content-tab clarify-ui-tab relative my-1 inline-flex h-9 shrink-0 items-center rounded-(--clarify-theme-tokens-radius-md) px-2.5 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)", selected && "clarify-ui-tab-active"),
 				children: ({ selected }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }), selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
 					layoutId: indicatorLayoutId,
-					className: "absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-(--clarify-ui-tab-indicator) shadow-[0_0_0.5rem_var(--clarify-ui-accent-glow)]",
+					className: "absolute inset-x-2.5 -bottom-1 h-0.5 rounded-full bg-(--clarify-ui-tab-indicator)",
 					transition: {
-						type: "spring",
-						stiffness: 460,
-						damping: 34,
-						mass: .7
+						type: "tween",
+						duration: .16,
+						ease: "easeOut"
 					}
 				}) : null] })
 			}, item.id))
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanels, {
-			className: (0, clsx.default)("mt-4", panelsClassName),
-			children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanel, {
-				className: "focus:outline-none",
+			className: (0, clsx.default)("mt-5", panelsClassName),
+			children: resolvedItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanel, {
+				className: "focus:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
 				children: item.panel
 			}, item.id))
 		})]
 	});
 }
 //#endregion
+//#region source/components/Tooltip.tsx
+function Tooltip(arg0) {
+	const { content, children, side = "top", className, ...props } = arg0;
+	const contentId = (0, react.useId)();
+	const [open, setOpen] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: (0, clsx.default)("clarify-tooltip group relative inline-flex align-baseline", className),
+		onMouseEnter: () => setOpen(true),
+		onMouseLeave: () => setOpen(false),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			tabIndex: 0,
+			"aria-describedby": contentId,
+			className: "cursor-help rounded-sm border-b border-dotted border-current focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+			onFocus: () => setOpen(true),
+			onBlur: () => setOpen(false),
+			onKeyDown: (event) => {
+				if (event.key === "Escape") setOpen(false);
+			},
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			id: contentId,
+			role: "tooltip",
+			className: (0, clsx.default)("pointer-events-none absolute left-1/2 z-30 w-max max-w-64 -translate-x-1/2 rounded-md bg-(--clarify-theme-tokens-colors-foreground) px-2.5 py-1.5 text-center text-xs/5 font-normal text-(--clarify-theme-tokens-colors-background) shadow-lg transition duration-150", open ? "opacity-100" : "opacity-0", side === "top" ? "bottom-[calc(100%+0.5rem)]" : "top-[calc(100%+0.5rem)]"),
+			children: content
+		})]
+	});
+}
+//#endregion
 //#region source/components/WebFrame.tsx
 function WebFrame(arg0) {
 	const { src, title = "Embedded content", children, showWindow = true, className, iframeClassName, height = 420, style, ...props } = arg0;
@@ -928,53 +1098,122 @@ function WebFrame(arg0) {
 		children
 	});
 	if (!showWindow) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-accent-glow)", className),
+		className: (0, clsx.default)("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-lg shadow-zinc-900/5 dark:shadow-none", className),
 		children: frame
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-accent-glow)", className),
+		className: (0, clsx.default)("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-lg shadow-zinc-900/5 dark:shadow-none", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex h-10 items-center gap-2 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background) px-4",
+			className: "grid h-10 grid-cols-[1fr_minmax(0,2fr)_1fr] items-center gap-3 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background) px-3",
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "size-3 rounded-full bg-red-400",
-					"aria-hidden": "true"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "size-3 rounded-full bg-yellow-400",
-					"aria-hidden": "true"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "size-3 rounded-full bg-green-400",
-					"aria-hidden": "true"
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-1.5",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "size-2.5 rounded-full bg-red-400/80" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "size-2.5 rounded-full bg-amber-400/80" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "size-2.5 rounded-full bg-emerald-400/80" })
+					]
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "sr-only",
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "truncate rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-3 py-1 text-center text-xs text-(--clarify-ui-text-faint)",
 					children: title
-				})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "aria-hidden": "true" })
 			]
 		}), frame]
 	});
 }
 //#endregion
+//#region source/components/Image.tsx
+function Image(arg0) {
+	const { src, alt = "", caption, zoom = false, className, ...props } = arg0;
+	const [open, setOpen] = (0, react.useState)(false);
+	const image = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		...props,
+		src,
+		alt,
+		className: (0, clsx.default)("block h-auto max-w-full object-contain", className)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
+		className: "clarify-figure not-prose mx-auto my-8 w-fit max-w-full",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "group relative w-fit max-w-full overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-subtle-background)",
+				children: zoom ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "block max-w-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+					"aria-label": `Enlarge image: ${alt}`,
+					onClick: () => setOpen(true),
+					children: [image, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "absolute right-3 bottom-3 grid size-8 place-items-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background)/90 text-(--clarify-ui-text-soft) opacity-0 shadow-sm transition group-hover:opacity-100 group-focus-within:opacity-100",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Maximize2, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					})]
+				}) : image
+			}),
+			caption ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("figcaption", {
+				className: "mt-2 text-center text-xs/5 text-(--clarify-ui-text-faint)",
+				children: caption
+			}) : null,
+			zoom ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Dialog, {
+				open,
+				onClose: setOpen,
+				className: "relative z-50",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.DialogBackdrop, { className: "fixed inset-0 bg-black/75 backdrop-blur-sm" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "fixed inset-0 flex items-center justify-center p-4 sm:p-8",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.DialogPanel, {
+						className: "relative max-h-full max-w-full overflow-auto rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-theme-tokens-colors-background) p-2 shadow-2xl",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							src,
+							alt,
+							className: "max-h-[calc(100dvh-5rem)] max-w-[calc(100vw-5rem)] object-contain"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "absolute top-4 right-4 grid size-9 place-items-center rounded-md border border-white/20 bg-black/65 text-white transition hover:bg-black/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white",
+							"aria-label": "Close image preview",
+							onClick: () => setOpen(false),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+								className: "size-4",
+								"aria-hidden": "true"
+							})
+						})]
+					})
+				})]
+			}) : null
+		]
+	});
+}
+//#endregion
 //#region source/mdx/primitives.tsx
 var primitives_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	AccordionGroup: () => AccordionGroup,
 	Button: () => Button,
 	Callout: () => Callout,
 	Card: () => Card,
 	CardGroup: () => CardGroup,
 	CodeGroup: () => CodeGroup,
 	Col: () => Col,
+	FileTree: () => FileTree,
+	FileTreeItem: () => FileTreeItem,
 	Note: () => Note,
 	Properties: () => Properties,
 	Property: () => Property,
 	Row: () => Row,
+	Step: () => Step,
+	Steps: () => Steps,
+	Tab: () => TabItem,
+	Tabs: () => Tabs,
+	Tooltip: () => Tooltip,
 	WebFrame: () => WebFrame,
 	a: () => a,
 	code: () => code,
 	h1: () => h1,
 	h2: () => h2,
 	h3: () => h3,
+	img: () => img,
 	pre: () => pre,
 	table: () => table,
 	wrapper: () => wrapper
@@ -1019,6 +1258,7 @@ function h1(arg0) {
 }
 var code = Code;
 var pre = Pre;
+var img = Image;
 function h2(props) {
 	return (0, react.createElement)(Heading, {
 		level: 2,
@@ -1034,8 +1274,8 @@ function h3(props) {
 function Note(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-note my-6 flex gap-2.5 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) p-4 text-sm/6 text-(--clarify-theme-tokens-colors-foreground) [--tw-prose-links-hover:var(--clarify-ui-accent-text)] [--tw-prose-links:var(--clarify-theme-tokens-colors-foreground)]",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { className: "mt-1 h-4 w-4 flex-none stroke-(--clarify-ui-accent-text)" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "clarify-note my-6 flex gap-3 rounded-r-(--clarify-theme-tokens-radius-lg) border-l-2 border-(--clarify-theme-tokens-colors-primary) bg-(--clarify-ui-subtle-background) px-4 py-3 text-sm/6 text-(--clarify-ui-text-soft) [--tw-prose-links-hover:var(--clarify-ui-accent-text)] [--tw-prose-links:var(--clarify-theme-tokens-colors-foreground)]",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { className: "mt-1 size-4 flex-none stroke-(--clarify-ui-accent-text)" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "*:first:mt-0 *:last:mb-0",
 			children
 		})]
@@ -1894,7 +2134,7 @@ function SelectControl(arg0) {
 		label: option
 	} : option);
 	const selectedOption = normalizedOptions.find((option) => option.value === value) ?? normalizedOptions[0];
-	const wrapperClassName = compact ? "clarify-api-select relative min-w-0 text-xs" : "clarify-api-select relative shrink-0 text-xs";
+	const wrapperClassName = compact ? "clarify-openai-select relative min-w-0 text-xs" : "clarify-openai-select relative shrink-0 text-xs";
 	const buttonSizeClassName = compact ? "w-full min-w-0 max-w-32" : "min-w-28 max-w-48";
 	if (normalizedOptions.length <= 1) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Listbox, {
@@ -1904,7 +2144,7 @@ function SelectControl(arg0) {
 			className: wrapperClassName,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxButton, {
 				"aria-label": label,
-				className: `clarify-api-select-button flex min-h-8 ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg border border-(--clarify-code-border) bg-(--clarify-code-control-background) px-2.5 py-1 text-xs font-medium whitespace-nowrap text-(--clarify-code-text) outline-hidden transition hover:border-white/20 hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:border-white/20 data-open:bg-(--clarify-code-control-background-active) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)`,
+				className: `clarify-openai-select-button flex min-h-8 ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg border border-(--clarify-code-border) bg-(--clarify-code-control-background) px-2.5 py-1 text-xs font-medium whitespace-nowrap text-(--clarify-code-text) outline-hidden transition hover:border-white/20 hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:border-white/20 data-open:bg-(--clarify-code-control-background-active) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)`,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "flex min-w-0 items-center gap-1.5 overflow-hidden",
 					children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1920,10 +2160,10 @@ function SelectControl(arg0) {
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.ListboxOptions, {
 				anchor: "bottom end",
-				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-(--clarify-code-surface) p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-(--clarify-code-border) [--anchor-gap:--spacing(1)] focus:outline-none",
+				className: "clarify-openai-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-(--clarify-code-surface) p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-(--clarify-code-border) [--anchor-gap:--spacing(1)] focus:outline-none",
 				children: normalizedOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxOption, {
 					value: option.value,
-					className: "clarify-api-select-option group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-(--clarify-code-control-text) select-none data-focus:bg-(--clarify-code-control-background-hover) data-focus:text-(--clarify-code-text) data-selected:bg-(--clarify-code-accent-background) data-selected:text-(--clarify-code-accent-text)",
+					className: "clarify-openai-select-option group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-(--clarify-code-control-text) select-none data-focus:bg-(--clarify-code-control-background-hover) data-focus:text-(--clarify-code-text) data-selected:bg-(--clarify-code-accent-background) data-selected:text-(--clarify-code-accent-text)",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: option.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
 						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
 						"aria-hidden": "true"
@@ -1972,31 +2212,36 @@ function ExampleMetaValue(arg0) {
 	});
 }
 function CodeToolbar(arg0) {
-	const { code, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
+	const { code, leadingControls, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
 	const t = require_i18n.useBuiltInText();
+	const inlineControls = Boolean(leadingControls);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-api-code-toolbar flex items-center gap-2 px-4 pt-3",
+		className: `clarify-openai-code-toolbar flex items-center gap-2 px-4 pt-3${inlineControls ? " clarify-openai-code-toolbar-inline" : ""}`,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "clarify-api-code-toolbar-controls flex min-w-0 flex-1 flex-wrap items-center gap-2",
-			children: [languageOptions && languageOptions.length > 1 && selectedLanguageKey && onSelectLanguage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectControl, {
-				label: t("openapi.language"),
-				value: selectedLanguageKey,
-				options: languageOptions,
-				onChange: onSelectLanguage,
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CodeIcon, {
-					className: "h-3.5 w-3.5",
-					"aria-hidden": "true"
-				})
-			}) : null, clientOptions && clientOptions.length > 1 && selectedClientKey && onSelectClient ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectControl, {
-				label: t("openapi.client"),
-				value: selectedClientKey,
-				options: clientOptions,
-				onChange: onSelectClient,
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PackageIcon, {
-					className: "h-3.5 w-3.5",
-					"aria-hidden": "true"
-				})
-			}) : null]
+			className: `clarify-openai-code-toolbar-controls flex min-w-0 flex-1 items-center gap-2${inlineControls ? " flex-nowrap overflow-x-auto" : " flex-wrap"}`,
+			children: [
+				leadingControls,
+				languageOptions && languageOptions.length > 1 && selectedLanguageKey && onSelectLanguage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectControl, {
+					label: t("openapi.language"),
+					value: selectedLanguageKey,
+					options: languageOptions,
+					onChange: onSelectLanguage,
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CodeIcon, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					})
+				}) : null,
+				clientOptions && clientOptions.length > 1 && selectedClientKey && onSelectClient ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectControl, {
+					label: t("openapi.client"),
+					value: selectedClientKey,
+					options: clientOptions,
+					onChange: onSelectClient,
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PackageIcon, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					})
+				}) : null
+			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyCodeButton, { code })]
 	});
 }
@@ -2068,21 +2313,38 @@ function getClientOptions(codeOptions, languageKey) {
 //#endregion
 //#region source/openapi/components/ExamplePanels.tsx
 function ApiExampleCodeGroup(arg0) {
-	const { title, tag, tagOptions, onSelectTag, label, labelOptions, onSelectLabel, comfortableMeta = false, code, language, mediaTypes, selectedMediaType, onSelectMediaType, examples, selectedExampleKey, onSelectExample, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
+	const { title, tag, tagOptions, onSelectTag, label, labelOptions, onSelectLabel, comfortableMeta = false, metaInToolbar = false, code, language, mediaTypes, selectedMediaType, onSelectMediaType, examples, selectedExampleKey, onSelectExample, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
 	const t = require_i18n.useBuiltInText();
 	const metaClassName = comfortableMeta ? "flex min-h-11 min-w-0 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4 py-2" : "flex h-9 min-w-0 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4";
+	const meta = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		tag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExampleMetaValue, {
+			label: t("openapi.status"),
+			value: tag,
+			options: tagOptions,
+			onChange: onSelectTag,
+			className: "clarify-openai-example-status font-semibold text-emerald-400"
+		}) : null,
+		tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
+		label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExampleMetaValue, {
+			label: t("openapi.mediaType"),
+			value: label,
+			options: labelOptions,
+			onChange: onSelectLabel,
+			className: "min-w-0 truncate text-xs text-(--clarify-code-muted)"
+		}) : null
+	] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "clarify-api-example my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)",
+		className: "clarify-openai-example my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "not-prose",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "clarify-api-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4 py-2",
+					className: "clarify-openai-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4 py-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-(--clarify-code-text)",
 						children: title
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "clarify-api-example-header-controls ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
+						className: "clarify-openai-example-header-controls ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
 						children: [mediaTypes && mediaTypes.length > 1 && selectedMediaType && onSelectMediaType ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectControl, {
 							label: t("openapi.mediaType"),
 							value: selectedMediaType,
@@ -2101,30 +2363,15 @@ function ApiExampleCodeGroup(arg0) {
 						}) : null]
 					})]
 				}),
-				tag || label ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				(tag || label) && !metaInToolbar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: metaClassName,
-					children: [
-						tag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExampleMetaValue, {
-							label: t("openapi.status"),
-							value: tag,
-							options: tagOptions,
-							onChange: onSelectTag,
-							className: "clarify-api-example-status font-semibold text-emerald-400"
-						}) : null,
-						tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
-						label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExampleMetaValue, {
-							label: t("openapi.mediaType"),
-							value: label,
-							options: labelOptions,
-							onChange: onSelectLabel,
-							className: "min-w-0 truncate text-xs text-(--clarify-code-muted)"
-						}) : null
-					]
+					children: meta
 				}) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "clarify-api-example-code group bg-(--clarify-code-background)",
+					className: "clarify-openai-example-code group bg-(--clarify-code-background)",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeToolbar, {
 						code,
+						leadingControls: metaInToolbar ? meta : void 0,
 						languageOptions,
 						selectedLanguageKey,
 						onSelectLanguage,
@@ -2320,6 +2567,9 @@ function ResponseExamplesPanel(arg0) {
 	if (!state.selectedContent || !state.responseBody) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApiExampleCodeGroup, {
 		title: title ?? t("openapi.response"),
+		tag: state.selectedResponse?.status,
+		tagOptions: state.responses.map((response) => response.status),
+		onSelectTag: state.responses.length > 0 ? state.onSelectStatus : void 0,
 		label: state.selectedContent?.mediaType,
 		labelOptions: state.responseContents.map((content) => content.mediaType),
 		onSelectLabel: state.responseContents.length > 0 ? state.onSelectMediaType : void 0,
@@ -2327,7 +2577,8 @@ function ResponseExamplesPanel(arg0) {
 		language: codeLanguageForMediaType(state.selectedContent.mediaType),
 		examples: state.examples,
 		selectedExampleKey: state.selectedExample?.key,
-		onSelectExample: state.onSelectExample
+		onSelectExample: state.onSelectExample,
+		metaInToolbar: true
 	});
 }
 //#endregion
@@ -2816,6 +3067,50 @@ function EndpointResponse(arg0) {
 	});
 }
 //#endregion
+//#region source/openapi/components/InlineListbox.tsx
+function InlineListbox(arg0) {
+	const { label, value, options, onChange, compact = false, buttonContent, buttonClassName, className } = arg0;
+	const selected = options.find((option) => option.value === value) ?? options[0];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Listbox, {
+		value: selected?.value ?? value,
+		onChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("pointer-events-auto relative inline-flex min-w-0", className),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.ListboxButton, {
+				"aria-label": label,
+				className: (0, clsx.default)(buttonClassName ?? "inline-flex min-w-0 items-center gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) font-semibold text-(--clarify-ui-text-strong) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) data-open:border-(--clarify-ui-accent-border) data-open:bg-(--clarify-ui-active-background) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)", buttonClassName ? null : compact ? "min-h-7 max-w-32 px-2 py-0.5 text-xs" : "min-h-8 w-full px-2.5 py-1.5 text-xs"),
+				children: buttonContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: selected?.label ?? value
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
+					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-ui-text-faint)",
+					"aria-hidden": "true"
+				})] })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.ListboxOptions, {
+				anchor: "bottom start",
+				className: "z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-(--clarify-theme-tokens-colors-surface) p-1 text-xs shadow-lg shadow-black/10 ring-1 ring-(--clarify-theme-tokens-colors-border) [--anchor-gap:--spacing(1)] focus:outline-none",
+				children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxOption, {
+					value: option.value,
+					className: "group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs text-(--clarify-ui-text) select-none data-focus:bg-(--clarify-ui-hover-background) data-focus:text-(--clarify-ui-text-strong) data-selected:bg-(--clarify-ui-active-background) data-selected:text-(--clarify-ui-accent-text)",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "block truncate",
+							children: option.label
+						}), option.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "mt-0.5 block truncate text-2xs text-(--clarify-ui-text-faint)",
+							children: option.description
+						}) : null]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
+						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
+						"aria-hidden": "true"
+					})]
+				}, option.value))
+			})]
+		})
+	});
+}
+//#endregion
 //#region source/openapi/components/OpenApiOperation.state.ts
 function useOperationRequestState(spec, path, operation, source = "path") {
 	const parameters = getOperationParameters(spec, path, operation, source);
@@ -2934,48 +3229,6 @@ function EndpointPath(arg0) {
 		}) : null]
 	});
 }
-function InlineListbox(arg0) {
-	const { label, value, options, onChange, compact = false } = arg0;
-	const selected = options.find((option) => option.value === value) ?? options[0];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Listbox, {
-		value: selected?.value ?? value,
-		onChange,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "pointer-events-auto relative inline-flex min-w-0",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxButton, {
-				"aria-label": label,
-				className: (0, clsx.default)("inline-flex min-w-0 items-center gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) font-semibold text-(--clarify-ui-text-strong) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) data-open:border-(--clarify-ui-accent-border) data-open:bg-(--clarify-ui-active-background) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)", compact ? "min-h-7 max-w-32 px-2 py-0.5 text-xs" : "min-h-8 w-full px-2.5 py-1.5 text-xs"),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "truncate",
-					children: selected?.label ?? value
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-ui-text-faint)",
-					"aria-hidden": "true"
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.ListboxOptions, {
-				anchor: "bottom start",
-				className: "z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-(--clarify-theme-tokens-colors-surface) p-1 text-xs shadow-lg shadow-black/10 ring-1 ring-(--clarify-theme-tokens-colors-border) [--anchor-gap:--spacing(1)] focus:outline-none",
-				children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxOption, {
-					value: option.value,
-					className: "group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs text-(--clarify-ui-text) select-none data-focus:bg-(--clarify-ui-hover-background) data-focus:text-(--clarify-ui-text-strong) data-selected:bg-(--clarify-ui-active-background) data-selected:text-(--clarify-ui-accent-text)",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "min-w-0",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "block truncate",
-							children: option.label
-						}), option.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "mt-0.5 block truncate text-2xs text-(--clarify-ui-text-faint)",
-							children: option.description
-						}) : null]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
-						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
-						"aria-hidden": "true"
-					})]
-				}, option.value))
-			})]
-		})
-	});
-}
 function getServerPreviewUrl(server, variables) {
 	return (server.url ?? "").replace(/\{([^}]+)\}/g, (_, name) => variables[name] ?? server.variables?.[name]?.default ?? `{${name}}`);
 }
@@ -2999,7 +3252,7 @@ function getDefaultResponseStatus(operation, spec) {
 	return orderedResponses.find(({ status }) => status === "default")?.status ?? orderedResponses.find(({ status }) => status.startsWith("2"))?.status ?? orderedResponses[0]?.status ?? "";
 }
 function ServerUrlValue(arg0) {
-	const { server, variables, open, interactive, onToggle } = arg0;
+	const { servers, selectedKey, server, variables, open, interactive, directSelect, onSelect, onToggle } = arg0;
 	const url = getServerPreviewUrl(server, variables);
 	const protocolLabel = getServerProtocolLabel(server, variables);
 	if (!interactive) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -3022,12 +3275,47 @@ function ServerUrlValue(arg0) {
 			})]
 		})]
 	});
+	if (directSelect) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineListbox, {
+		label: "Server",
+		value: selectedKey,
+		options: servers.map((option, index) => ({
+			value: getServerKey(option, index),
+			label: getServerLabel(option, index),
+			description: option.description
+		})),
+		onChange: onSelect,
+		className: "w-8 shrink-0 sm:w-fit sm:min-w-16 sm:max-w-(--clarify-server-url-max-width)",
+		buttonClassName: "group flex h-8 w-full min-w-0 cursor-pointer items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) px-0 text-(--clarify-ui-text) transition-colors hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background) data-open:text-(--clarify-theme-tokens-colors-foreground) sm:px-1.5",
+		buttonContent: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sm:hidden",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ServerIcon, {
+				className: "h-4 w-4",
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
+			children: [
+				protocolLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "shrink-0 rounded bg-sky-100 px-1.5 py-0.5 text-2xs font-black text-sky-700 dark:bg-sky-400/15 dark:text-sky-200",
+					children: protocolLabel
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate font-semibold text-xs",
+					children: url
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
+					className: "h-3.5 w-3.5 shrink-0 text-zinc-400 transition-transform group-data-open:rotate-180",
+					"aria-hidden": "true"
+				})
+			]
+		})] })
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		"aria-expanded": open,
 		"aria-label": "Server",
 		onClick: onToggle,
-		className: (0, clsx.default)("flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5", open ? "bg-(--clarify-ui-active-background) text-(--clarify-theme-tokens-colors-foreground)" : null),
+		className: (0, clsx.default)("flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text) transition-colors hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5", open ? "bg-(--clarify-ui-active-background) text-(--clarify-theme-tokens-colors-foreground)" : null),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ServerIcon, {
@@ -3046,7 +3334,7 @@ function ServerUrlValue(arg0) {
 					children: url
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-zinc-400",
+					className: (0, clsx.default)("h-3.5 w-3.5 shrink-0 text-zinc-400 transition-transform", open && "rotate-180"),
 					"aria-hidden": "true"
 				})
 			]
@@ -3158,6 +3446,7 @@ function AuthPanel(arg0) {
 }
 function EndpointIdentity(arg0) {
 	const { method, operationSource, path, servers, selectedServerKey, selectedServer, serverVariables, serverOpen, authOptions, selectedAuthName, selectedAuth, authValues, authOpen, onSelectServer, onChangeServerVariable, onToggleServer, onToggleAuth, onSelectAuth, onChangeAuthValue } = arg0;
+	const directServerSelect = servers.length > 1 && servers.every((server) => Object.keys(server.variables ?? {}).length === 0);
 	const serverInteractive = servers.length > 1 || Object.keys(selectedServer.variables ?? {}).length > 0;
 	const [copiedUrl, setCopiedUrl] = (0, react.useState)(false);
 	const fullUrl = getFullEndpointUrl(selectedServer, serverVariables, path);
@@ -3170,7 +3459,7 @@ function EndpointIdentity(arg0) {
 		if (await require_PageActions.copyTextToClipboard(fullUrl)) setCopiedUrl(true);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "not-prose flex w-full flex-col overflow-hidden rounded-xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-xs",
+		className: "clarify-openai-endpoint-identity not-prose flex w-full flex-col overflow-hidden rounded-xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-xs",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex min-w-0 items-center gap-1.5 overflow-hidden px-2.5 py-2",
@@ -3178,10 +3467,14 @@ function EndpointIdentity(arg0) {
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointMethodBadge, { method }),
 					operationSource === "webhook" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointMethodBadge, { method: "WEBHOOK" }) : null,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServerUrlValue, {
+						servers,
+						selectedKey: selectedServerKey,
 						server: selectedServer,
 						variables: serverVariables,
 						open: serverOpen,
 						interactive: serverInteractive,
+						directSelect: directServerSelect,
+						onSelect: onSelectServer,
 						onToggle: onToggleServer
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointPath, {
@@ -3205,7 +3498,7 @@ function EndpointIdentity(arg0) {
 					}) : null
 				]
 			}),
-			serverInteractive && serverOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServerPanel, {
+			serverInteractive && !directServerSelect && serverOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServerPanel, {
 				servers,
 				selectedKey: selectedServerKey,
 				selectedServer,
@@ -3235,7 +3528,7 @@ function OpenApiOperation(arg0) {
 	const [linkedExampleKey, setLinkedExampleKey] = (0, react.useState)("");
 	const [selectedResponseStatus, setSelectedResponseStatus] = (0, react.useState)(() => getDefaultResponseStatus(operation, spec));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "clarify-api-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
+		className: "clarify-openai-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
@@ -3421,6 +3714,30 @@ Object.defineProperty(exports, "ResponseExamplesPanel", {
 		return ResponseExamplesPanel;
 	}
 });
+Object.defineProperty(exports, "Step", {
+	enumerable: true,
+	get: function() {
+		return Step;
+	}
+});
+Object.defineProperty(exports, "Steps", {
+	enumerable: true,
+	get: function() {
+		return Steps;
+	}
+});
+Object.defineProperty(exports, "TabItem", {
+	enumerable: true,
+	get: function() {
+		return TabItem;
+	}
+});
+Object.defineProperty(exports, "Tabs", {
+	enumerable: true,
+	get: function() {
+		return Tabs;
+	}
+});
 Object.defineProperty(exports, "Tag", {
 	enumerable: true,
 	get: function() {
@@ -3494,4 +3811,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-B52IWlKb.cjs.map
+//# sourceMappingURL=OpenApiOperation-DbZjxIuj.cjs.map