@clarify-labs/renderer 0.10.1 → 0.10.3

package/output/{OpenApiOperation-CqNM-no4.js → OpenApiOperation-BZWeCbvy.js}

@@ -1,16 +1,18 @@
-import { a as useConfig, s as useLocale, t as useBuiltInText } from "./i18n-DnqZHFT7.js";
-import { C as isExternalHref, E as copyTextToClipboard, c as lucideIconRegistry, h as useTheme, l as resolveLucideIconName, n as PageTitleActions, o as useSectionStore, s as remToPx, w as localizeHref } from "./PageActions-D7K9LDGf.js";
-import { t as markdownRemarkPlugins } from "./remark-Dd2WU50s.js";
+import { a as useConfig, s as useLocale, t as useBuiltInText } from "./i18n-Bqth9d6Q.js";
+import { C as isExternalHref, E as copyTextToClipboard, c as lucideIconRegistry, h as useTheme, l as resolveLucideIconName, n as PageTitleActions, o as useSectionStore, s as remToPx, w as localizeHref } from "./PageActions-BQeEmXbT.js";
+import { t as markdownRemarkPlugins } from "./remark-C9iRQM0R.js";
 import clsx from "clsx";
-import { Children, Suspense, createContext, createElement, forwardRef, isValidElement, lazy, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Children, Suspense, cloneElement, createContext, createElement, forwardRef, isValidElement, lazy, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition } from "@headlessui/react";
-import { AlertTriangle, ArrowRight, Check, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, CopyIcon, Info, Lightbulb, LinkIcon, LockKeyholeIcon, PackageIcon, ServerIcon, UnlockKeyholeIcon, XCircle } from "lucide-react";
+import { Dialog, DialogBackdrop, DialogPanel, Listbox, ListboxButton, ListboxOption, ListboxOptions, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition } from "@headlessui/react";
+import { AlertTriangle, ArrowRight, ArrowUpRight, Check, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, CopyIcon, File, Folder, FolderOpen, Info, Lightbulb, LinkIcon, LockKeyholeIcon, Maximize2, PackageIcon, ServerIcon, UnlockKeyholeIcon, X, XCircle } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { motion, useInView } from "framer-motion";
 import { create } from "zustand";
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import { slug } from "github-slugger";
+import { codeToTokens, createCssVariablesTheme } from "shiki";
 import { snippetz } from "@scalar/snippetz";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
@@ -24,6 +26,32 @@ var __exportAll = (all, no_symbols) => {
 	return target;
 };
 //#endregion
+//#region source/components/AccordionGroup.tsx
+function AccordionGroup(arg0) {
+	const { children, multiple = false, className, ...props } = arg0;
+	const childArray = Children.toArray(children);
+	const [openIndex, setOpenIndex] = useState(() => {
+		const defaultIndex = childArray.findIndex((child) => isValidElement(child) && child.props.defaultOpen);
+		return defaultIndex === -1 ? null : defaultIndex;
+	});
+	const items = childArray.map((child, index) => {
+		if (!isValidElement(child)) return child;
+		if (multiple) return child;
+		return cloneElement(child, {
+			open: openIndex === index,
+			onOpenChange: (open) => {
+				child.props.onOpenChange?.(open);
+				setOpenIndex(open ? index : null);
+			}
+		});
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("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 localizeHref(href, useConfig(), useLocale());
@@ -43,15 +71,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 = clsx("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 = clsx("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__ */ jsx(ArrowRight, {
 		"aria-hidden": "true",
 		className: clsx("h-4 w-4 shrink-0", variant === "text" && "relative top-px", arrow === "left" && "-ml-0.5 rotate-180", arrow === "right" && "-mr-0.5")
@@ -79,37 +107,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: 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: 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: 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: 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: 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: CheckCircle2
@@ -130,15 +164,18 @@ function Callout(arg0) {
 	const Icon = style.Icon;
 	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("clarify-callout my-6 flex gap-3 rounded-(--clarify-theme-tokens-radius-xl) border p-4 text-sm/6", style.container, className),
+		className: clsx("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__ */ jsx(Icon, {
-			className: clsx("mt-1 size-4 flex-none", style.icon),
-			"aria-hidden": "true"
+		children: [icon ? /* @__PURE__ */ jsx("span", {
+			className: clsx("flex size-7 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-md) ring-1 ring-inset", style.iconContainer),
+			children: /* @__PURE__ */ jsx(Icon, {
+				className: clsx("size-4", style.icon),
+				"aria-hidden": "true"
+			})
 		}) : null, /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 flex-1 *:first:mt-0 *:last:mb-0",
 			children: [resolvedTitle ? /* @__PURE__ */ jsx("p", {
-				className: clsx("mb-1 font-semibold", style.title),
+				className: clsx("mb-1.5 font-semibold", style.title),
 				children: resolvedTitle
 			}) : null, /* @__PURE__ */ jsx("div", {
 				className: "*:first:mt-0 *:last:mb-0",
@@ -157,9 +194,9 @@ function CardIcon(arg0) {
 	const Icon = lucideIconRegistry[iconName];
 	if (!Icon) return null;
 	return /* @__PURE__ */ 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__ */ jsx(Icon, {
-			className: "size-5",
+			className: "size-4",
 			"aria-hidden": "true"
 		})
 	});
@@ -173,7 +210,7 @@ var cardGroupColumnStyles = {
 function CardGroup(arg0) {
 	const { children, cols = 2, className } = arg0;
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("not-prose my-10 grid gap-4", cardGroupColumnStyles[cols], className),
+		className: clsx("not-prose my-8 grid gap-3", cardGroupColumnStyles[cols], className),
 		children
 	});
 }
@@ -183,11 +220,17 @@ function Card(arg0) {
 		className: "flex items-start gap-4",
 		children: [/* @__PURE__ */ jsx(CardIcon, { name: icon }), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ jsx("h3", {
-				className: "m-0 text-base font-semibold text-(--clarify-theme-tokens-colors-foreground)",
-				children: title
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "m-0 text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+					children: title
+				}), href ? /* @__PURE__ */ jsx(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__ */ 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]
 		})]
@@ -195,7 +238,7 @@ function Card(arg0) {
 		className: "absolute inset-0 rounded-(--clarify-theme-tokens-radius-xl)",
 		"aria-hidden": "true"
 	}) : null] });
-	const classes = clsx("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 = clsx("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__ */ jsx("div", {
 		className: classes,
 		children: content
@@ -209,7 +252,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = lazy(() => import("./MermaidViewer-dXsomvM7.js"));
+var MermaidViewer = lazy(() => import("./MermaidViewer-Bc9H25yK.js"));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -335,6 +378,27 @@ function getNodeText(node) {
 	if (isValidElement(node)) return getNodeText(node.props.children);
 	return "";
 }
+function getCodeTitle(node) {
+	if (!isValidElement(node)) return void 0;
+	const { title, children } = node.props;
+	if (title) return title;
+	return Children.toArray(children).map(getCodeTitle).find(Boolean);
+}
+function getCodeLanguage(node) {
+	if (!isValidElement(node)) return void 0;
+	const { className, language, children } = node.props;
+	if (language) return language;
+	const languageClass = className?.split(/\s+/).find((value) => value.startsWith("language-"));
+	if (languageClass) return languageClass.slice(9);
+	return 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 = useBuiltInText();
@@ -404,6 +468,7 @@ function CodeGroupHeader(arg0) {
 	const { title, children, selectedIndex } = arg0;
 	const t = useBuiltInText();
 	const hasTabs = Children.count(children) > 1;
+	const indicatorLayoutId = useId();
 	if (!title && !hasTabs) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "clarify-code-group-header flex min-h-(--clarify-code-header-min-height) flex-wrap items-start gap-x-4 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4",
@@ -411,13 +476,19 @@ function CodeGroupHeader(arg0) {
 			className: "mr-auto pt-3 text-xs font-semibold text-(--clarify-code-text)",
 			children: title
 		}) : null, hasTabs ? /* @__PURE__ */ jsx(TabList, {
-			className: "clarify-code-tabs -mb-px flex gap-4 text-xs font-medium",
-			children: Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx(Tab, {
-				className: clsx("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-theme-tokens-colors-primary)" : "border-transparent text-(--clarify-code-muted) hover:text-(--clarify-code-text)"),
-				children: getPanelTitle({
-					...isValidElement(child) ? child.props : {},
-					fallbackTitle: t("actions.code")
-				})
+			className: "clarify-code-tabs -mr-2 -mb-px flex gap-0 text-xs font-medium",
+			children: Children.map(children, (child, childIndex) => /* @__PURE__ */ jsxs(Tab, {
+				className: clsx("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: [getCodePanelTitle(child, t("actions.code")), childIndex === selectedIndex ? /* @__PURE__ */ jsx(motion.span, {
+					layoutId: indicatorLayoutId,
+					className: "absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-(--clarify-code-accent-text)",
+					transition: {
+						type: "spring",
+						stiffness: 460,
+						damping: 34,
+						mass: .7
+					}
+				}) : null]
 			}))
 		}) : null]
 	});
@@ -482,10 +553,7 @@ var CodeGroupContext = createContext(false);
 function CodeGroup(arg0) {
 	const { children, title, ...props } = arg0;
 	const t = useBuiltInText();
-	const tabGroupProps = useTabGroupProps(Children.map(children, (child) => getPanelTitle({
-		...isValidElement(child) ? child.props : {},
-		fallbackTitle: t("actions.code")
-	})) ?? []);
+	const tabGroupProps = useTabGroupProps(Children.map(children, (child) => getCodePanelTitle(child, t("actions.code"))) ?? []);
 	const hasTabs = 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__ */ jsx(CodeGroupHeader, {
@@ -529,7 +597,9 @@ function Code(arg0) {
 function Pre(arg0) {
 	const { children, language, code, ...props } = arg0;
 	const isGrouped = useContext(CodeGroupContext);
-	if (language === "mermaid") return /* @__PURE__ */ jsx(Mermaid, { chart: code ?? getNodeText(children) });
+	const resolvedLanguage = language ?? getCodeLanguage(children);
+	const resolvedCode = code ?? getNodeText(children);
+	if (resolvedLanguage === "mermaid") return /* @__PURE__ */ jsx(Mermaid, { chart: resolvedCode });
 	if (isGrouped) return children;
 	return /* @__PURE__ */ jsx(CodeGroup, {
 		...props,
@@ -539,8 +609,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] = useState(defaultOpen);
+	const { children, title, summary, defaultOpen = false, open: controlledOpen, onOpenChange, className, ...props } = arg0;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const open = controlledOpen ?? uncontrolledOpen;
 	const contentRef = useRef(null);
 	const [maxHeight, setMaxHeight] = useState("0px");
 	const summaryLabel = title ?? summary ?? "Details";
@@ -550,16 +621,20 @@ function Collapse(arg0) {
 		setMaxHeight(open ? `${contentRef.current.scrollHeight}px` : "0px");
 	}, [open, children]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("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: clsx("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__ */ 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__ */ jsx("span", { children: summaryLabel }), /* @__PURE__ */ jsx(ChevronDown, {
-				className: clsx("h-4 w-4 text-(--clarify-theme-tokens-colors-muted) transition-transform duration-200", open && "rotate-180"),
+				className: clsx("size-4 rounded-full text-(--clarify-ui-text-faint) transition duration-200", open && "rotate-180"),
 				"aria-hidden": "true"
 			})]
 		}), /* @__PURE__ */ jsx("div", {
@@ -571,7 +646,7 @@ function Collapse(arg0) {
 			},
 			children: /* @__PURE__ */ jsx("div", {
 				ref: contentRef,
-				className: clsx("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: clsx("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
 			})
 		})]
@@ -647,6 +722,55 @@ function Feedback() {
 	});
 }
 //#endregion
+//#region source/components/FileTree.tsx
+function FileTree(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("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__ */ 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 ? FolderOpen : Folder;
+	return /* @__PURE__ */ jsxs("li", {
+		role: "treeitem",
+		"aria-expanded": isFolder ? children != null : void 0,
+		className: clsx("clarify-file-tree-item m-0 p-0", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-6 items-center gap-2 whitespace-nowrap",
+			children: [
+				isFolder ? /* @__PURE__ */ jsx(FolderIcon, {
+					className: "size-4 flex-none text-(--clarify-ui-accent-text)",
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ jsx(File, {
+					className: "size-4 flex-none text-(--clarify-ui-text-faint)",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-(--clarify-theme-tokens-colors-foreground)",
+					children: name
+				}),
+				description ? /* @__PURE__ */ jsx("span", {
+					className: "font-sans text-xs text-(--clarify-ui-text-faint)",
+					children: description
+				}) : null
+			]
+		}), children ? /* @__PURE__ */ 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: "",
@@ -853,10 +977,50 @@ function Prose(arg0) {
 	});
 }
 //#endregion
+//#region source/components/Steps.tsx
+function Steps(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ jsx("ol", {
+		className: clsx("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__ */ jsxs("li", {
+		className: clsx("clarify-step relative m-0 pb-10 pl-9 last:pb-0", className),
+		...props,
+		children: [
+			/* @__PURE__ */ 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__ */ jsx("h3", {
+				className: "m-0 pt-0.5 text-base font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+				children: title
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: clsx("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] = useState(0);
+	const { items, children, defaultValue, selectedIndex, onChange, className, listClassName, panelsClassName } = arg0;
+	const childItems = Children.toArray(children).filter((child) => 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] = useState(defaultValue ? Math.max(0, resolvedItems.findIndex((item) => item.id === defaultValue)) : 0);
 	const resolvedIndex = typeof selectedIndex === "number" ? selectedIndex : internalIndex;
 	const indicatorLayoutId = useId();
 	const handleChange = (index) => {
@@ -866,14 +1030,14 @@ function Tabs(arg0) {
 	return /* @__PURE__ */ jsxs(TabGroup, {
 		selectedIndex: resolvedIndex,
 		onChange: handleChange,
-		className,
+		className: clsx("clarify-tabs my-6", className),
 		children: [/* @__PURE__ */ jsx(TabList, {
-			className: clsx("flex flex-wrap items-center gap-6 border-b border-(--clarify-theme-tokens-colors-border) pb-0", listClassName),
-			children: items.map((item) => /* @__PURE__ */ jsx(Tab, {
-				className: ({ selected }) => clsx("clarify-ui-tab relative inline-flex h-10 shrink-0 items-center px-0 py-0 text-sm font-medium transition focus:outline-none", selected && "clarify-ui-tab-active"),
+			className: clsx("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__ */ jsx(Tab, {
+				className: ({ selected }) => clsx("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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: item.label }), selected ? /* @__PURE__ */ jsx(motion.span, {
 					layoutId: indicatorLayoutId,
-					className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-(--clarify-theme-tokens-colors-foreground)",
+					className: "absolute inset-x-2.5 -bottom-1 h-0.5 rounded-full bg-(--clarify-ui-tab-indicator)",
 					transition: {
 						type: "tween",
 						duration: .16,
@@ -882,15 +1046,44 @@ function Tabs(arg0) {
 				}) : null] })
 			}, item.id))
 		}), /* @__PURE__ */ jsx(TabPanels, {
-			className: clsx("mt-4", panelsClassName),
-			children: items.map((item) => /* @__PURE__ */ jsx(TabPanel, {
-				className: "focus:outline-none",
+			className: clsx("mt-5", panelsClassName),
+			children: resolvedItems.map((item) => /* @__PURE__ */ jsx(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 = useId();
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("span", {
+		className: clsx("clarify-tooltip group relative inline-flex align-baseline", className),
+		onMouseEnter: () => setOpen(true),
+		onMouseLeave: () => setOpen(false),
+		...props,
+		children: [/* @__PURE__ */ 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__ */ jsx("span", {
+			id: contentId,
+			role: "tooltip",
+			className: clsx("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;
@@ -913,53 +1106,122 @@ function WebFrame(arg0) {
 		children
 	});
 	if (!showWindow) return /* @__PURE__ */ jsx("div", {
-		className: clsx("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: clsx("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__ */ jsxs("div", {
-		className: clsx("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: clsx("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__ */ 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__ */ jsx("span", {
-					className: "size-3 rounded-full bg-red-400",
-					"aria-hidden": "true"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "size-3 rounded-full bg-yellow-400",
-					"aria-hidden": "true"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "size-3 rounded-full bg-green-400",
-					"aria-hidden": "true"
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-red-400/80" }),
+						/* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-amber-400/80" }),
+						/* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-emerald-400/80" })
+					]
 				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sr-only",
+				/* @__PURE__ */ 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__ */ 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] = useState(false);
+	const image = /* @__PURE__ */ jsx("img", {
+		...props,
+		src,
+		alt,
+		className: clsx("block h-auto max-w-full object-contain", className)
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "clarify-figure not-prose mx-auto my-8 w-fit max-w-full",
+		children: [
+			/* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(Maximize2, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					})]
+				}) : image
+			}),
+			caption ? /* @__PURE__ */ jsx("figcaption", {
+				className: "mt-2 text-center text-xs/5 text-(--clarify-ui-text-faint)",
+				children: caption
+			}) : null,
+			zoom ? /* @__PURE__ */ jsxs(Dialog, {
+				open,
+				onClose: setOpen,
+				className: "relative z-50",
+				children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/75 backdrop-blur-sm" }), /* @__PURE__ */ jsx("div", {
+					className: "fixed inset-0 flex items-center justify-center p-4 sm:p-8",
+					children: /* @__PURE__ */ jsxs(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__ */ jsx("img", {
+							src,
+							alt,
+							className: "max-h-[calc(100dvh-5rem)] max-w-[calc(100vw-5rem)] object-contain"
+						}), /* @__PURE__ */ 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__ */ jsx(X, {
+								className: "size-4",
+								"aria-hidden": "true"
+							})
+						})]
+					})
+				})]
+			}) : null
+		]
+	});
+}
+//#endregion
 //#region source/mdx/primitives.tsx
 var primitives_exports = /* @__PURE__ */ __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
@@ -1004,6 +1266,7 @@ function h1(arg0) {
 }
 var code = Code;
 var pre = Pre;
+var img = Image;
 function h2(props) {
 	return createElement(Heading, {
 		level: 2,
@@ -1019,8 +1282,8 @@ function h3(props) {
 function Note(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ 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__ */ jsx(Info, { className: "mt-1 h-4 w-4 flex-none stroke-(--clarify-ui-accent-text)" }), /* @__PURE__ */ 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__ */ jsx(Info, { className: "mt-1 size-4 flex-none stroke-(--clarify-ui-accent-text)" }), /* @__PURE__ */ jsx("div", {
 			className: "*:first:mt-0 *:last:mb-0",
 			children
 		})]
@@ -1132,6 +1395,7 @@ function Markdown(arg0) {
 		children: /* @__PURE__ */ jsx(ReactMarkdown, {
 			components: markdownComponents,
 			remarkPlugins: markdownRemarkPlugins,
+			rehypePlugins: [rehypeRaw],
 			children
 		})
 	});
@@ -1393,8 +1657,72 @@ function listOpenApiOperations(spec) {
 	return [...listOperationsFromPathItems(paths, "path", spec), ...isRecord(webhooks) ? listOperationsFromPathItems(webhooks, "webhook", spec) : []];
 }
 //#endregion
+//#region source/components/HighlightedCode.tsx
+var cssVariablesTheme = createCssVariablesTheme();
+function HighlightedCode(arg0) {
+	const { code, language } = arg0;
+	const [lines, setLines] = useState();
+	useEffect(() => {
+		let active = true;
+		codeToTokens(code, {
+			lang: language,
+			theme: cssVariablesTheme
+		}).then((result) => {
+			if (active) setLines(result.tokens);
+		}).catch(() => {
+			if (active) setLines(void 0);
+		});
+		return () => {
+			active = false;
+		};
+	}, [code, language]);
+	if (!lines) return /* @__PURE__ */ jsx("code", {
+		className: `language-${language}`,
+		children: code
+	});
+	return /* @__PURE__ */ jsx("code", {
+		className: `language-${language}`,
+		children: lines.map((line, lineIndex) => /* @__PURE__ */ jsxs("span", {
+			className: "line",
+			children: [line.map((token, tokenIndex) => /* @__PURE__ */ jsx("span", {
+				style: {
+					color: token.color,
+					...token.htmlStyle
+				},
+				children: token.content
+			}, tokenIndex)), lineIndex < lines.length - 1 ? "\n" : null]
+		}, lineIndex))
+	});
+}
+//#endregion
 //#region source/openapi/lib/request-code.ts
+var snippetControlCharacters = [
+	{
+		character: "\n",
+		placeholder: "",
+		escape: "\\n"
+	},
+	{
+		character: "\r",
+		placeholder: "",
+		escape: "\\r"
+	},
+	{
+		character: "	",
+		placeholder: "",
+		escape: "\\t"
+	}
+];
 var snippetGenerator = snippetz();
+function protectSnippetControlCharacters(value) {
+	if (typeof value === "string") return snippetControlCharacters.reduce((result, item) => result.replaceAll(item.character, item.placeholder), value);
+	if (Array.isArray(value)) return value.map(protectSnippetControlCharacters);
+	if (!isRecord$1(value)) return value;
+	return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, protectSnippetControlCharacters(item)]));
+}
+function restoreSnippetControlCharacters(code) {
+	return snippetControlCharacters.reduce((result, item) => result.replaceAll(item.placeholder, item.escape), code);
+}
 function getDefaultServer(spec) {
 	const servers = spec.servers;
 	if (!Array.isArray(servers)) return { url: "https://api.example.com" };
@@ -1462,7 +1790,7 @@ function getRequestBody(requestContent) {
 		const params = getFormParams(value, requestContent);
 		return params.length > 0 ? { params } : void 0;
 	}
-	return { serialized: stringifyExample(value) };
+	return { serialized: stringifyExample(protectSnippetControlCharacters(value)) };
 }
 function getAuthorizationValue(auth) {
 	if (auth.scheme.type === "http" && auth.scheme.scheme?.toLowerCase() === "bearer") return `Bearer ${auth.value}`;
@@ -1515,7 +1843,7 @@ function buildSnippetErrorMessage(error) {
 }
 function buildSnippet(input, target) {
 	try {
-		return decodeUrlPlaceholders(snippetGenerator.print(target.target, target.client, buildHarRequest(input)) || "");
+		return restoreSnippetControlCharacters(decodeUrlPlaceholders(snippetGenerator.print(target.target, target.client, buildHarRequest(input)) || ""));
 	} catch (error) {
 		return buildSnippetErrorMessage(error);
 	}
@@ -1814,7 +2142,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__ */ jsx(Listbox, {
@@ -1824,7 +2152,7 @@ function SelectControl(arg0) {
 			className: wrapperClassName,
 			children: [/* @__PURE__ */ jsxs(ListboxButton, {
 				"aria-label": label,
-				className: `clarify-api-select-button flex ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg bg-(--clarify-code-control-background) px-2 py-1 text-xs font-medium whitespace-nowrap text-(--clarify-code-text) outline-hidden transition hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:bg-(--clarify-code-control-background-hover) 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__ */ jsxs("span", {
 					className: "flex min-w-0 items-center gap-1.5 overflow-hidden",
 					children: [icon ? /* @__PURE__ */ jsx("span", {
@@ -1840,10 +2168,10 @@ function SelectControl(arg0) {
 				})]
 			}), /* @__PURE__ */ jsx(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__ */ jsxs(ListboxOption, {
 					value: option.value,
-					className: "clarify-api-select-option group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-(--clarify-code-muted) select-none data-focus:bg-(--clarify-code-control-background-hover) data-focus:text-(--clarify-code-text) data-selected:text-(--clarify-theme-tokens-colors-primary)",
+					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__ */ jsx("span", { children: option.label }), /* @__PURE__ */ jsx(CheckIcon, {
 						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
 						"aria-hidden": "true"
@@ -1868,7 +2196,7 @@ function CopyCodeButton(arg0) {
 				setTimeout(() => setCopied(false), 1e3);
 			});
 		},
-		className: "flex items-center gap-1.5 rounded-full bg-(--clarify-code-control-background) px-2.5 py-1.5 text-2xs font-medium text-(--clarify-code-muted) transition hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus:bg-(--clarify-code-control-background-hover) focus:text-(--clarify-code-text)",
+		className: "ml-auto flex shrink-0 items-center gap-1.5 rounded-full bg-(--clarify-code-control-background) px-2.5 py-1.5 text-2xs font-medium whitespace-nowrap text-(--clarify-code-muted) transition hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus:bg-(--clarify-code-control-background-hover) focus:text-(--clarify-code-text)",
 		children: [copied ? /* @__PURE__ */ jsx(CheckIcon, {
 			className: "h-3.5 w-3.5 text-(--clarify-theme-tokens-colors-primary)",
 			"aria-hidden": "true"
@@ -1892,31 +2220,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 = useBuiltInText();
+	const inlineControls = Boolean(leadingControls);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "absolute top-3.5 right-4 left-4 z-10 flex items-center justify-between gap-3",
+		className: `clarify-openai-code-toolbar flex items-center gap-2 px-4 pt-3${inlineControls ? " clarify-openai-code-toolbar-inline" : ""}`,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 items-center gap-2",
-			children: [languageOptions && languageOptions.length > 1 && selectedLanguageKey && onSelectLanguage ? /* @__PURE__ */ jsx(SelectControl, {
-				label: t("openapi.language"),
-				value: selectedLanguageKey,
-				options: languageOptions,
-				onChange: onSelectLanguage,
-				icon: /* @__PURE__ */ jsx(CodeIcon, {
-					className: "h-3.5 w-3.5",
-					"aria-hidden": "true"
-				})
-			}) : null, clientOptions && clientOptions.length > 1 && selectedClientKey && onSelectClient ? /* @__PURE__ */ jsx(SelectControl, {
-				label: t("openapi.client"),
-				value: selectedClientKey,
-				options: clientOptions,
-				onChange: onSelectClient,
-				icon: /* @__PURE__ */ jsx(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__ */ jsx(SelectControl, {
+					label: t("openapi.language"),
+					value: selectedLanguageKey,
+					options: languageOptions,
+					onChange: onSelectLanguage,
+					icon: /* @__PURE__ */ jsx(CodeIcon, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					})
+				}) : null,
+				clientOptions && clientOptions.length > 1 && selectedClientKey && onSelectClient ? /* @__PURE__ */ jsx(SelectControl, {
+					label: t("openapi.client"),
+					value: selectedClientKey,
+					options: clientOptions,
+					onChange: onSelectClient,
+					icon: /* @__PURE__ */ jsx(PackageIcon, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					})
+				}) : null
+			]
 		}), /* @__PURE__ */ jsx(CopyCodeButton, { code })]
 	});
 }
@@ -1988,21 +2321,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 = 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__ */ jsxs(Fragment$1, { children: [
+		tag ? /* @__PURE__ */ 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__ */ jsx("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
+		label ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
 			className: "not-prose",
 			children: [
 				/* @__PURE__ */ 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__ */ jsx("h3", {
 						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-(--clarify-code-text)",
 						children: title
 					}), /* @__PURE__ */ jsxs("div", {
-						className: "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__ */ jsx(SelectControl, {
 							label: t("openapi.mediaType"),
 							value: selectedMediaType,
@@ -2021,30 +2371,15 @@ function ApiExampleCodeGroup(arg0) {
 						}) : null]
 					})]
 				}),
-				tag || label ? /* @__PURE__ */ jsxs("div", {
+				(tag || label) && !metaInToolbar ? /* @__PURE__ */ jsx("div", {
 					className: metaClassName,
-					children: [
-						tag ? /* @__PURE__ */ 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__ */ jsx("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
-						label ? /* @__PURE__ */ 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__ */ jsxs("div", {
-					className: "clarify-api-example-code group relative bg-(--clarify-code-background)",
+					className: "clarify-openai-example-code group bg-(--clarify-code-background)",
 					children: [/* @__PURE__ */ jsx(CodeToolbar, {
 						code,
+						leadingControls: metaInToolbar ? meta : void 0,
 						languageOptions,
 						selectedLanguageKey,
 						onSelectLanguage,
@@ -2052,10 +2387,10 @@ function ApiExampleCodeGroup(arg0) {
 						selectedClientKey,
 						onSelectClient
 					}), /* @__PURE__ */ jsx("pre", {
-						className: `max-h-128 overflow-auto overscroll-contain p-4 text-xs text-(--clarify-code-text) ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
-						children: /* @__PURE__ */ jsx("code", {
-							className: `language-${language}`,
-							children: code
+						className: "max-h-128 overflow-auto overscroll-contain px-4 pt-3 pb-4 text-xs text-(--clarify-code-text)",
+						children: /* @__PURE__ */ jsx(HighlightedCode, {
+							code,
+							language
 						})
 					})]
 				})
@@ -2159,6 +2494,9 @@ function RequestExamplesPanel(arg0) {
 function firstExampleKeyForResponseContent(content, spec) {
 	return getExampleEntries(content?.value, spec)[0]?.key ?? "";
 }
+function getResponseExampleBody(content, example) {
+	return content ? stringifyExample(example?.value) : "";
+}
 function useResponseExamplesState(arg0) {
 	const { operation, spec, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus } = arg0;
 	const orderedResponses = [...getResponseEntries(operation, spec)].sort((left, right) => {
@@ -2169,8 +2507,7 @@ function useResponseExamplesState(arg0) {
 		if (!Number.isNaN(leftCode) && !Number.isNaN(rightCode)) return leftCode - rightCode;
 		return left.status.localeCompare(right.status);
 	});
-	const defaultStatus = orderedResponses.find(({ status }) => status === "default")?.status ?? orderedResponses.find(({ status }) => status.startsWith("2"))?.status ?? orderedResponses[0]?.status ?? "";
-	const [internalSelectedStatus, setInternalSelectedStatus] = useState(defaultStatus);
+	const [internalSelectedStatus, setInternalSelectedStatus] = useState(orderedResponses.find(({ status }) => status === "default")?.status ?? orderedResponses.find(({ status }) => status.startsWith("2"))?.status ?? orderedResponses[0]?.status ?? "");
 	const activeStatus = selectedStatus ?? internalSelectedStatus;
 	const selectedResponse = orderedResponses.find(({ status }) => status === activeStatus) ?? orderedResponses[0];
 	const responseContents = getMediaTypeEntries(selectedResponse?.response.content, spec);
@@ -2196,7 +2533,7 @@ function useResponseExamplesState(arg0) {
 		selectedContent,
 		examples,
 		selectedExample,
-		responseCode: selectedContent ? stringifyExample(selectedExample?.value) : `HTTP/1.1 ${selectedResponse?.status ?? defaultStatus}${selectedResponse?.status === "204" ? " No Content" : ""}`,
+		responseBody: getResponseExampleBody(selectedContent, selectedExample),
 		onSelectStatus: (value) => {
 			const nextContents = getMediaTypeEntries(orderedResponses.find(({ status }) => status === value)?.response.content, spec);
 			if (typeof selectedStatus === "undefined") setInternalSelectedStatus(value);
@@ -2235,21 +2572,21 @@ function ResponseExamplesPanel(arg0) {
 		selectedStatus,
 		onSelectStatus
 	});
-	if (!state.selectedResponse || !state.responseCode) return null;
+	if (!state.selectedContent || !state.responseBody) return null;
 	return /* @__PURE__ */ jsx(ApiExampleCodeGroup, {
 		title: title ?? t("openapi.response"),
-		tag: state.selectedResponse.status,
-		tagOptions: state.responses.map(({ status }) => status),
-		onSelectTag: state.onSelectStatus,
+		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,
-		comfortableMeta: true,
-		code: state.responseCode,
-		language: state.selectedContent ? codeLanguageForMediaType(state.selectedContent.mediaType) : "http",
+		code: state.responseBody,
+		language: codeLanguageForMediaType(state.selectedContent.mediaType),
 		examples: state.examples,
 		selectedExampleKey: state.selectedExample?.key,
-		onSelectExample: state.onSelectExample
+		onSelectExample: state.onSelectExample,
+		metaInToolbar: true
 	});
 }
 //#endregion
@@ -2505,7 +2842,7 @@ function SchemaNode(arg0) {
 				className: "*:first:mt-0 *:last:mb-0",
 				children: node.description
 			}) : fallbackDescription, node.details ? /* @__PURE__ */ jsx("p", {
-				className: "text-xs text-(--clarify-ui-text-faint)",
+				className: "text-xs text-(--clarify-ui-text-soft)",
 				children: node.details
 			}) : null]
 		})]
@@ -2521,7 +2858,7 @@ function SchemaNode(arg0) {
 			"aria-label": expanded ? t("openapi.collapse") : t("openapi.expand"),
 			"aria-expanded": expanded,
 			onClick: () => setExpanded((value) => !value),
-			className: clsx(rowClassName, "cursor-pointer transition"),
+			className: clsx(rowClassName, "cursor-pointer transition hover:bg-(--clarify-ui-hover-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)"),
 			children: content
 		}) : /* @__PURE__ */ jsx("div", {
 			className: rowClassName,
@@ -2589,10 +2926,10 @@ function ResponseList(arg0) {
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-wrap items-center gap-2",
-					children: [/* @__PURE__ */ jsx("span", {
+					children: [orderedResponses.length === 1 ? /* @__PURE__ */ jsx("span", {
 						className: "text-sm/5 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
 						children: status
-					}), type ? /* @__PURE__ */ jsx("span", {
+					}) : null, type ? /* @__PURE__ */ jsx("span", {
 						className: "text-xs text-(--clarify-theme-tokens-colors-muted)",
 						children: type
 					}) : null]
@@ -2738,6 +3075,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__ */ jsx(Listbox, {
+		value: selected?.value ?? value,
+		onChange,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("pointer-events-auto relative inline-flex min-w-0", className),
+			children: [/* @__PURE__ */ jsx(ListboxButton, {
+				"aria-label": label,
+				className: clsx(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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selected?.label ?? value
+				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-ui-text-faint)",
+					"aria-hidden": "true"
+				})] })
+			}), /* @__PURE__ */ jsx(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__ */ jsxs(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__ */ jsxs("span", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "block truncate",
+							children: option.label
+						}), option.description ? /* @__PURE__ */ jsx("span", {
+							className: "mt-0.5 block truncate text-2xs text-(--clarify-ui-text-faint)",
+							children: option.description
+						}) : null]
+					}), /* @__PURE__ */ jsx(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);
@@ -2845,7 +3226,7 @@ function EndpointPath(arg0) {
 			"aria-label": copied ? t("actions.copied") : t("actions.copy"),
 			title: copied ? t("actions.copied") : t("actions.copy"),
 			onClick: onCopy,
-			className: clsx("flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)", copied && "border-emerald-400/70 bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-200"),
+			className: clsx("flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) transition hover:border-(--clarify-ui-text-faint) 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)", copied && "border-emerald-400/70 bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-200"),
 			children: copied ? /* @__PURE__ */ jsx(CheckIcon, {
 				className: "h-3.5 w-3.5",
 				"aria-hidden": "true"
@@ -2856,48 +3237,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__ */ jsx(Listbox, {
-		value: selected?.value ?? value,
-		onChange,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "pointer-events-auto relative inline-flex min-w-0",
-			children: [/* @__PURE__ */ jsxs(ListboxButton, {
-				"aria-label": label,
-				className: clsx("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-theme-tokens-colors-foreground) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) data-open:border-(--clarify-ui-text-faint) data-open:bg-(--clarify-ui-hover-background)", compact ? "max-w-32 px-1.5 py-0.5 text-xs" : "w-full px-2.5 py-1.5 text-xs"),
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: selected?.label ?? value
-				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-ui-text-faint)",
-					"aria-hidden": "true"
-				})]
-			}), /* @__PURE__ */ jsx(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__ */ jsxs(ListboxOption, {
-					value: option.value,
-					className: "group flex 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-selected:text-(--clarify-theme-tokens-colors-primary)",
-					children: [/* @__PURE__ */ jsxs("span", {
-						className: "min-w-0",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "block truncate",
-							children: option.label
-						}), option.description ? /* @__PURE__ */ jsx("span", {
-							className: "mt-0.5 block truncate text-2xs text-(--clarify-ui-text-faint)",
-							children: option.description
-						}) : null]
-					}), /* @__PURE__ */ jsx(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}}`);
 }
@@ -2921,12 +3260,12 @@ 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__ */ jsxs("span", {
 		"aria-label": "Server",
-		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-foreground) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5",
+		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ jsx(ServerIcon, {
@@ -2944,12 +3283,47 @@ function ServerUrlValue(arg0) {
 			})]
 		})]
 	});
+	if (directSelect) return /* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "sm:hidden",
+			children: /* @__PURE__ */ jsx(ServerIcon, {
+				className: "h-4 w-4",
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
+			children: [
+				protocolLabel ? /* @__PURE__ */ 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__ */ jsx("span", {
+					className: "truncate font-semibold text-xs",
+					children: url
+				}),
+				/* @__PURE__ */ jsx(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__ */ jsxs("button", {
 		type: "button",
 		"aria-expanded": open,
 		"aria-label": "Server",
 		onClick: onToggle,
-		className: clsx("flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-foreground) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) 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: clsx("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__ */ jsx("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ jsx(ServerIcon, {
@@ -2968,7 +3342,7 @@ function ServerUrlValue(arg0) {
 					children: url
 				}),
 				/* @__PURE__ */ jsx(ChevronDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-zinc-400",
+					className: clsx("h-3.5 w-3.5 shrink-0 text-zinc-400 transition-transform", open && "rotate-180"),
 					"aria-hidden": "true"
 				})
 			]
@@ -3068,7 +3442,8 @@ function AuthPanel(arg0) {
 						className: "mr-2 shrink-0 text-2xs font-semibold text-(--clarify-ui-text-soft)",
 						children: selectedAuth.scheme.type === "apiKey" ? selectedAuth.scheme.in ?? "apiKey" : selectedAuth.scheme.scheme ?? selectedAuth.scheme.type ?? "token"
 					}), /* @__PURE__ */ jsx("input", {
-						value: authValues[selectedAuth.name] ?? authPlaceholder(selectedAuth),
+						value: authValues[selectedAuth.name] ?? "",
+						placeholder: authPlaceholder(selectedAuth),
 						onChange: (event) => onChangeAuthValue(selectedAuth.name, event.target.value),
 						className: "min-w-0 flex-1 border-0 bg-transparent px-0 py-0 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) outline-hidden placeholder:text-(--clarify-ui-text-faint)"
 					})]
@@ -3079,6 +3454,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] = useState(false);
 	const fullUrl = getFullEndpointUrl(selectedServer, serverVariables, path);
@@ -3091,7 +3467,7 @@ function EndpointIdentity(arg0) {
 		if (await copyTextToClipboard(fullUrl)) setCopiedUrl(true);
 	}
 	return /* @__PURE__ */ 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__ */ jsxs("div", {
 				className: "flex min-w-0 items-center gap-1.5 overflow-hidden px-2.5 py-2",
@@ -3099,10 +3475,14 @@ function EndpointIdentity(arg0) {
 					/* @__PURE__ */ jsx(EndpointMethodBadge, { method }),
 					operationSource === "webhook" ? /* @__PURE__ */ jsx(EndpointMethodBadge, { method: "WEBHOOK" }) : null,
 					/* @__PURE__ */ jsx(ServerUrlValue, {
+						servers,
+						selectedKey: selectedServerKey,
 						server: selectedServer,
 						variables: serverVariables,
 						open: serverOpen,
 						interactive: serverInteractive,
+						directSelect: directServerSelect,
+						onSelect: onSelectServer,
 						onToggle: onToggleServer
 					}),
 					/* @__PURE__ */ jsx(EndpointPath, {
@@ -3115,7 +3495,7 @@ function EndpointIdentity(arg0) {
 						"aria-expanded": authOpen,
 						"aria-label": "Auth",
 						onClick: onToggleAuth,
-						className: clsx("ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-emerald-700 dark:hover:text-emerald-200", authOpen ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-100" : "bg-(--clarify-ui-subtle-background)"),
+						className: clsx("ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-emerald-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) dark:hover:text-emerald-200", authOpen ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-100" : "bg-(--clarify-ui-subtle-background)"),
 						children: authOpen ? /* @__PURE__ */ jsx(UnlockKeyholeIcon, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
@@ -3126,7 +3506,7 @@ function EndpointIdentity(arg0) {
 					}) : null
 				]
 			}),
-			serverInteractive && serverOpen ? /* @__PURE__ */ jsx(ServerPanel, {
+			serverInteractive && !directServerSelect && serverOpen ? /* @__PURE__ */ jsx(ServerPanel, {
 				servers,
 				selectedKey: selectedServerKey,
 				selectedServer,
@@ -3156,7 +3536,7 @@ function OpenApiOperation(arg0) {
 	const [linkedExampleKey, setLinkedExampleKey] = useState("");
 	const [selectedResponseStatus, setSelectedResponseStatus] = useState(() => getDefaultResponseStatus(operation, spec));
 	return /* @__PURE__ */ 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__ */ jsx(Heading, {
@@ -3222,6 +3602,6 @@ function OpenApiOperation(arg0) {
 	});
 }
 //#endregion
-export { CardGroup as A, Feedback as C, Pre as D, CodeGroup as E, Button as M, Mermaid as O, Tag as S, Code as T, Prose as _, authPlaceholder as a, Logo as b, getServerKey as c, listOpenApiOperations as d, getMediaTypeEntries as f, WebFrame as g, primitives_exports as h, ResponseExamplesPanel as i, Callout as j, Card as k, getServers as l, Markdown as m, OpenApiOperation as n, defaultServerVariables as o, getRequestBody$1 as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getOpenApiOperationEntry as u, GridPattern as v, Collapse as w, Heading as x, HeroPattern as y };
+export { CodeGroup as A, HeroPattern as C, Feedback as D, Tag as E, Callout as F, Button as I, Mermaid as M, Card as N, Collapse as O, CardGroup as P, GridPattern as S, Heading as T, TabItem as _, authPlaceholder as a, Steps as b, getServerKey as c, listOpenApiOperations as d, getMediaTypeEntries as f, WebFrame as g, primitives_exports as h, ResponseExamplesPanel as i, Pre as j, Code as k, getServers as l, Markdown as m, OpenApiOperation as n, defaultServerVariables as o, getRequestBody$1 as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getOpenApiOperationEntry as u, Tabs as v, Logo as w, Prose as x, Step as y };
 
-//# sourceMappingURL=OpenApiOperation-CqNM-no4.js.map
+//# sourceMappingURL=OpenApiOperation-BZWeCbvy.js.map