@clarify-labs/renderer 0.10.2 → 0.11.0

package/output/{OpenApiOperation-B52IWlKb.cjs → OpenApiOperation-D-5uE5v7.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-wXINKKV0.cjs");
+const require_PageActions = require("./PageActions-DJRXlGhz.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-BZ8ghcFP.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,7 +384,14 @@ function getCodeLanguage(node) {
 	if (languageClass) return languageClass.slice(9);
 	return react.Children.toArray(children).map(getCodeLanguage).find(Boolean);
 }
-function CopyButton(arg0) {
+function getCodePanelTitle(node, fallbackTitle) {
+	return getPanelTitle({
+		title: getCodeTitle(node),
+		language: getCodeLanguage(node),
+		fallbackTitle
+	});
+}
+function CopyButton$1(arg0) {
 	const { code } = arg0;
 	const t = require_i18n.useBuiltInText();
 	const [copyCount, setCopyCount] = (0, react.useState)(0);
@@ -398,7 +452,7 @@ function CodePanel(arg0) {
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
 				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-(--clarify-code-text)",
 				children
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, { code: copyText })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton$1, { code: copyText })]
 		})]
 	});
 }
@@ -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,93 @@ 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, triggerClassName, ...props } = arg0;
+	const contentId = (0, react.useId)();
+	const [open, setOpen] = (0, react.useState)(false);
+	const triggerRef = (0, react.useRef)(null);
+	const tooltipRef = (0, react.useRef)(null);
+	const [position, setPosition] = (0, react.useState)();
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		function updatePosition() {
+			const bounds = triggerRef.current?.getBoundingClientRect();
+			if (!bounds) return;
+			setPosition({
+				left: bounds.left + bounds.width / 2,
+				top: side === "top" ? bounds.top - 8 : bounds.bottom + 8
+			});
+		}
+		updatePosition();
+		window.addEventListener("resize", updatePosition);
+		window.addEventListener("scroll", updatePosition, true);
+		return () => {
+			window.removeEventListener("resize", updatePosition);
+			window.removeEventListener("scroll", updatePosition, true);
+		};
+	}, [open, side]);
+	(0, react.useEffect)(() => {
+		const tooltip = tooltipRef.current;
+		if (!tooltip || typeof tooltip.showPopover !== "function") return;
+		if (open) tooltip.showPopover();
+		else if (tooltip.matches(":popover-open")) tooltip.hidePopover();
+	}, [open]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: (0, clsx.default)("clarify-tooltip group inline-flex align-baseline", className),
+		onMouseEnter: () => setOpen(true),
+		onMouseLeave: () => setOpen(false),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			ref: triggerRef,
+			"aria-describedby": contentId,
+			"aria-expanded": open,
+			className: (0, clsx.default)("cursor-help appearance-none rounded-sm border-0 border-b border-dotted border-current bg-transparent p-0 font-inherit text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", triggerClassName),
+			onFocus: () => setOpen(true),
+			onBlur: () => setOpen(false),
+			onClick: () => setOpen(true),
+			onKeyDown: (event) => {
+				if (event.key === "Escape") setOpen(false);
+			},
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			ref: tooltipRef,
+			id: contentId,
+			role: "tooltip",
+			popover: "manual",
+			style: position,
+			className: (0, clsx.default)("pointer-events-none fixed right-auto bottom-auto z-60 m-0 w-max max-w-64 -translate-x-1/2 rounded-md border-0 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", side === "top" && "-translate-y-full", open && position ? "visible opacity-100" : "invisible opacity-0"),
+			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 +1131,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 +1291,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 +1307,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
 		})]
@@ -1409,6 +1682,23 @@ function listOpenApiOperations(spec) {
 	return [...listOperationsFromPathItems(paths, "path", spec), ...isRecord(webhooks) ? listOperationsFromPathItems(webhooks, "webhook", spec) : []];
 }
 //#endregion
+//#region source/openapi/components/EndpointMethodBadge.tsx
+var endpointMethodStyleVars = {
+	GET: "bg-(--clarify-http-method-get-background) text-(--clarify-http-method-get-text)",
+	POST: "bg-(--clarify-http-method-post-background) text-(--clarify-http-method-post-text)",
+	PUT: "bg-(--clarify-http-method-put-background) text-(--clarify-http-method-put-text)",
+	PATCH: "bg-(--clarify-http-method-patch-background) text-(--clarify-http-method-patch-text)",
+	DELETE: "bg-(--clarify-http-method-delete-background) text-(--clarify-http-method-delete-text)",
+	WEBHOOK: "bg-(--clarify-http-method-webhook-background) text-(--clarify-http-method-webhook-text)"
+};
+function EndpointMethodBadge(arg0) {
+	const { method } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, clsx.default)("rounded-(--clarify-theme-tokens-radius-md) px-2.5 py-0.5 text-xs/6 font-black tracking-wide", endpointMethodStyleVars[method] ?? "bg-(--clarify-http-method-default-background) text-(--clarify-http-method-default-text)"),
+		children: method
+	});
+}
+//#endregion
 //#region source/components/HighlightedCode.tsx
 var cssVariablesTheme = (0, shiki.createCssVariablesTheme)();
 function HighlightedCode(arg0) {
@@ -1466,6 +1756,15 @@ var snippetControlCharacters = [
 	}
 ];
 var snippetGenerator = (0, _scalar_snippetz.snippetz)();
+function getAuthPlaceholder(name) {
+	return `YOUR_${name.replace(/([a-z0-9])([A-Z])/g, "$1_$2").replace(/[^a-zA-Z0-9]+/g, "_").toUpperCase() || "CREDENTIAL"}`;
+}
+function redactAuth(auth = []) {
+	return auth.map((input) => ({
+		...input,
+		value: getAuthPlaceholder(input.name)
+	}));
+}
 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);
@@ -1484,7 +1783,7 @@ function getDefaultServer(spec) {
 function getDefaultWebhookServer() {
 	return { url: "https://webhook.example.com" };
 }
-function expandServerUrl(server, serverVariables = {}) {
+function expandServerUrl$1(server, serverVariables = {}) {
 	return (server.url ?? "https://api.example.com").replace(/\{([^}]+)\}/g, (_, name) => {
 		const fallback = server.variables?.[name]?.default ?? name;
 		return serverVariables[name] ?? fallback;
@@ -1492,16 +1791,16 @@ function expandServerUrl(server, serverVariables = {}) {
 }
 function buildOperationUrl(input) {
 	const defaultServer = input.operationSource === "webhook" ? getDefaultWebhookServer() : getDefaultServer(input.spec);
-	return joinPath(expandServerUrl(input.server ?? defaultServer, input.serverVariables), input.path);
+	return joinPath(expandServerUrl$1(input.server ?? defaultServer, input.serverVariables), input.path);
 }
-function getQueryString(parameters, auth) {
+function getQueryString(parameters, auth = []) {
 	const queryString = parameters.filter((parameter) => parameter.in === "query" && parameter.name).map((parameter) => ({
 		name: parameter.name,
 		value: encodeUrlPlaceholders(`{${parameter.name}}`)
 	}));
-	if (auth?.scheme.type === "apiKey" && auth.scheme.in === "query" && auth.scheme.name) queryString.push({
-		name: auth.scheme.name,
-		value: auth.value
+	for (const input of auth) if (input.scheme.type === "apiKey" && input.scheme.in === "query" && input.scheme.name) queryString.push({
+		name: input.scheme.name,
+		value: input.value
 	});
 	return queryString;
 }
@@ -1549,15 +1848,14 @@ function getAuthorizationValue(auth) {
 	if (auth.scheme.type === "http" && auth.scheme.scheme?.toLowerCase() === "basic") return `Basic ${auth.value}`;
 	if (auth.scheme.type === "oauth2" || auth.scheme.type === "openIdConnect") return `Bearer ${auth.value}`;
 }
-function getAuthHeaders(auth) {
-	if (!auth) return {};
+function getAuthHeader(auth) {
 	if (auth.scheme.type === "apiKey" && auth.scheme.in === "header" && auth.scheme.name) return { [auth.scheme.name]: auth.value };
 	const authorization = getAuthorizationValue(auth);
 	return authorization ? { Authorization: authorization } : {};
 }
-function getRequestHeaders(requestContent, auth) {
+function getRequestHeaders(requestContent, auth = []) {
 	return {
-		...getAuthHeaders(auth),
+		...Object.assign({}, ...auth.map(getAuthHeader)),
 		Accept: "application/json",
 		...requestContent ? { "Content-Type": requestContent.mediaType } : {}
 	};
@@ -1875,6 +2173,10 @@ var requestSnippetOptions = [
 	}
 ];
 function buildRequestCodeExamples(input) {
+	const redactedInput = {
+		...input,
+		auth: redactAuth(input.auth)
+	};
 	return requestSnippetOptions.map((option) => ({
 		key: `${option.languageKey}:${option.client}`,
 		title: option.title,
@@ -1882,7 +2184,7 @@ function buildRequestCodeExamples(input) {
 		languageKey: option.languageKey,
 		clientKey: option.client,
 		clientTitle: option.clientTitle,
-		code: buildSnippet(input, option)
+		code: buildSnippet(redactedInput, option)
 	}));
 }
 //#endregion
@@ -1894,7 +2196,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 +2206,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-(--clarify-theme-tokens-radius-md) 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-(--clarify-code-border) hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:border-(--clarify-code-border) 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 +2222,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-(--clarify-theme-tokens-radius-lg) 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-(--clarify-theme-tokens-radius-md) 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 +2274,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 })]
 	});
 }
@@ -2032,12 +2339,17 @@ function getSecurityRequirements(spec, operation) {
 }
 function getAuthOptions(spec, operation) {
 	const schemes = getSecuritySchemes(spec);
-	const requirements = getSecurityRequirements(spec, operation);
-	const names = new Set(requirements.flatMap((requirement) => Object.keys(requirement)));
-	return Array.from(names).map((name) => ({
-		name,
-		scheme: schemes[name]
-	})).filter((option) => Boolean(option.scheme));
+	return getSecurityRequirements(spec, operation).map((requirement, index) => {
+		const requirementSchemes = Object.keys(requirement).map((name) => ({
+			name,
+			scheme: schemes[name]
+		})).filter((option) => Boolean(option.scheme));
+		return {
+			key: `requirement:${index}`,
+			label: requirementSchemes.map((option) => option.name).join(" + "),
+			schemes: requirementSchemes
+		};
+	});
 }
 function authPlaceholder(auth) {
 	if (!auth) return "";
@@ -2068,21 +2380,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 metaClassName = comfortableMeta ? "flex min-h-10 min-w-0 items-center gap-2 border-b border-(--clarify-code-border) bg-(--clarify-code-background) px-3.5 py-2" : "flex h-9 min-w-0 items-center gap-2 border-b border-(--clarify-code-border) bg-(--clarify-code-background) px-3.5";
+	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-lg border border-(--clarify-code-border) bg-(--clarify-code-background) shadow-sm",
 		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-11 items-center gap-3 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-3.5 py-1.5",
 					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)",
+						className: "mr-auto min-w-16 truncate py-1 text-sm 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 +2430,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 +2634,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 +2644,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
@@ -2527,11 +2845,11 @@ function getRootSchemaNode(spec, schema, defaultExpanded) {
 	};
 }
 function EnumValueNode(arg0) {
-	const { node, depth = 0 } = arg0;
+	const { node } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-		className: "clarify-schema-node m-0 px-0 py-2 first:pt-0 last:pb-0",
+		className: "clarify-schema-node m-0 p-0",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("flex min-w-0 items-start rounded py-0.5 text-left", depth > 0 ? "-mx-2 w-(--clarify-schema-row-nested-width) px-2" : "w-full px-1"),
+			className: "flex min-w-0 items-start rounded-(--clarify-theme-tokens-radius-md) px-2 py-2 text-left",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2565,7 +2883,7 @@ function SchemaNode(arg0) {
 	});
 	const type = [node.type, node.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0;
 	const fallbackDescription = hasChildren ? void 0 : node.required ? t("openapi.required") : t("openapi.optional");
-	const rowClassName = (0, clsx.default)("flex min-w-0 items-start rounded py-0.5 text-left", depth > 0 ? "-mx-2 w-(--clarify-schema-row-nested-width) px-2" : "w-full px-1");
+	const rowClassName = "flex w-full min-w-0 items-start rounded-(--clarify-theme-tokens-radius-md) px-2 py-2 text-left";
 	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "min-w-0 flex-1",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2593,7 +2911,7 @@ function SchemaNode(arg0) {
 		children: expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "h-4 w-4" })
 	}) : null] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-		className: "clarify-schema-node m-0 px-0 py-2 first:pt-0 last:pb-0",
+		className: "clarify-schema-node m-0 p-0",
 		children: [hasChildren ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			"aria-label": expanded ? t("openapi.collapse") : t("openapi.expand"),
@@ -2615,7 +2933,7 @@ function SchemaTree(arg0) {
 	if (nodes.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 		role: "list",
-		className: (0, clsx.default)("m-0 list-none divide-y divide-(--clarify-theme-tokens-colors-border) p-0", depth > 0 && "mt-2 rounded-lg bg-(--clarify-ui-subtle-background) px-2 py-1"),
+		className: (0, clsx.default)("m-0 list-none p-0", depth === 0 ? "divide-y divide-(--clarify-theme-tokens-colors-border)" : "ml-2 border-l border-(--clarify-theme-tokens-colors-border) pl-2"),
 		children: nodes.map((node) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaNode, {
 			node,
 			depth,
@@ -2628,7 +2946,7 @@ function SchemaProperties(arg0) {
 	const root = getRootSchemaNode(spec, schema, defaultExpanded);
 	if (!root || root.children.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "clarify-schema-properties my-6",
+		className: "clarify-schema-properties not-prose my-6",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaTree, { nodes: root.children })
 	})] });
 }
@@ -2713,7 +3031,8 @@ function ResponseList(arg0) {
 				response
 			})
 		})),
-		panelsClassName: "mt-4"
+		className: "mt-4 mb-6",
+		panelsClassName: "mt-5"
 	})] });
 }
 //#endregion
@@ -2738,7 +3057,7 @@ function EndpointRequest(arg0) {
 		})] });
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderDescription(), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
-		className: "relative mt-6",
+		className: "clarify-openapi-request-workspace relative mt-8 pt-6",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "w-full",
 			children: [
@@ -2785,9 +3104,9 @@ function EndpointResponse(arg0) {
 	const responseTitle = operationSource === "webhook" ? t("openapi.webhookResponses") : t("openapi.responses");
 	const responseExampleTitle = operationSource === "webhook" ? t("openapi.webhookResponse") : t("openapi.response");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "mt-6",
+		className: "mt-10 pt-6",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
-			className: "relative",
+			className: "clarify-openapi-response-workspace relative",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "w-full",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseList, {
@@ -2816,6 +3135,129 @@ function EndpointResponse(arg0) {
 	});
 }
 //#endregion
+//#region source/openapi/components/InlineListbox.tsx
+var defaultButtonClassName = "inline-flex min-w-0 items-center justify-between gap-1 border-0 bg-transparent font-medium text-(--clarify-ui-text-strong) outline-hidden transition hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-disabled:cursor-not-allowed data-open:bg-(--clarify-ui-active-background)";
+var optionsClassName = "z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1 text-xs shadow-lg shadow-black/10 [--anchor-gap:--spacing(1)] focus:outline-none";
+var optionClassName = "group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-(--clarify-theme-tokens-radius-md) 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)";
+function OptionContent(arg0) {
+	const { option } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { 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"
+	})] });
+}
+function InlineListbox(arg0) {
+	const { label, value, options, onChange, compact = false, buttonContent, buttonClassName, className, invalid, describedBy, disabled = false } = arg0;
+	const selected = options.find((option) => option.value === value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Listbox, {
+		value,
+		onChange,
+		disabled,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("pointer-events-auto relative inline-flex min-w-0 w-full", className),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.ListboxButton, {
+				"aria-label": label,
+				"aria-invalid": invalid || void 0,
+				"aria-describedby": describedBy,
+				className: (0, clsx.default)(buttonClassName ?? defaultButtonClassName, buttonClassName ? null : compact ? "min-h-7 max-w-32 px-2 py-0.5 text-xs" : "min-h-8 w-full px-2 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 || label)
+				}), /* @__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: optionsClassName,
+				children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.ListboxOption, {
+					value: option.value,
+					className: optionClassName,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionContent, { option })
+				}, option.value))
+			})]
+		})
+	});
+}
+function MultiInlineListbox(arg0) {
+	const { label, value, options, onChange, disabled = false, invalid, describedBy } = arg0;
+	const selectedLabel = options.filter((option) => value.includes(option.value)).map((option) => option.label).join(", ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Listbox, {
+		value,
+		onChange,
+		multiple: true,
+		disabled,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "pointer-events-auto relative inline-flex min-w-0 w-full",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxButton, {
+				"aria-label": label,
+				"aria-invalid": invalid || void 0,
+				"aria-describedby": describedBy,
+				className: (0, clsx.default)(defaultButtonClassName, "min-h-8 w-full px-2 text-xs"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: selectedLabel || label
+				}), /* @__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: optionsClassName,
+				children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.ListboxOption, {
+					value: option.value,
+					className: optionClassName,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionContent, { option })
+				}, option.value))
+			})]
+		})
+	});
+}
+//#endregion
+//#region source/openapi/store.ts
+var credentialScopes = /* @__PURE__ */ new WeakMap();
+var emptyOpenApiCredentials = Object.freeze({});
+var nextCredentialScope = 0;
+function getOpenApiCredentialScope(spec) {
+	const current = credentialScopes.get(spec);
+	if (current) return current;
+	const scope = `openapi-${nextCredentialScope += 1}`;
+	credentialScopes.set(spec, scope);
+	return scope;
+}
+var useOpenApiStore = (0, zustand.create)()((set) => ({
+	credentials: {},
+	setCredential: (scope, name, value) => set((state) => ({ credentials: {
+		...state.credentials,
+		[scope]: {
+			...state.credentials[scope],
+			[name]: value
+		}
+	} })),
+	clearCredential: (scope, name) => set((state) => {
+		const scoped = { ...state.credentials[scope] };
+		delete scoped[name];
+		return { credentials: {
+			...state.credentials,
+			[scope]: scoped
+		} };
+	}),
+	clearCredentials: (scope) => set((state) => {
+		const credentials = { ...state.credentials };
+		delete credentials[scope];
+		return { credentials };
+	})
+}));
+//#endregion
 //#region source/openapi/components/OpenApiOperation.state.ts
 function useOperationRequestState(spec, path, operation, source = "path") {
 	const parameters = getOperationParameters(spec, path, operation, source);
@@ -2866,9 +3308,13 @@ function useOperationServerState(spec, operation, path, source = "path") {
 }
 function useOperationAuthState(spec, operation) {
 	const authOptions = getAuthOptions(spec, operation);
-	const [selectedAuthName, setSelectedAuthName] = (0, react.useState)(authOptions[0]?.name ?? "");
-	const selectedAuth = authOptions.find((option) => option.name === selectedAuthName);
-	const [authValues, setAuthValues] = (0, react.useState)({});
+	const [selectedAuthName, setSelectedAuthName] = (0, react.useState)(authOptions[0]?.key ?? "");
+	const selectedAuth = authOptions.find((option) => option.key === selectedAuthName);
+	const credentialScope = getOpenApiCredentialScope(spec);
+	const authValues = useOpenApiStore((state) => state.credentials[credentialScope] ?? emptyOpenApiCredentials);
+	const setCredential = useOpenApiStore((state) => state.setCredential);
+	const clearCredential = useOpenApiStore((state) => state.clearCredential);
+	const clearCredentials = useOpenApiStore((state) => state.clearCredentials);
 	const [authOpen, setAuthOpen] = (0, react.useState)(false);
 	return {
 		authOptions,
@@ -2876,104 +3322,1302 @@ function useOperationAuthState(spec, operation) {
 		selectedAuth,
 		authValues,
 		authOpen,
-		authInput: selectedAuth ? {
-			name: selectedAuth.name,
-			scheme: selectedAuth.scheme,
-			value: authValues[selectedAuth.name] ?? authPlaceholder(selectedAuth)
-		} : void 0,
+		authInput: selectedAuth ? selectedAuth.schemes.map((option) => ({
+			name: option.name,
+			scheme: option.scheme,
+			value: authValues[option.name] ?? ""
+		})) : void 0,
 		onSelectAuth: setSelectedAuthName,
-		onChangeAuthValue: (name, value) => setAuthValues((current) => ({
-			...current,
-			[name]: value
-		})),
+		onChangeAuthValue: (name, value) => setCredential(credentialScope, name, value),
+		onClearAuthValue: (name) => clearCredential(credentialScope, name),
+		onClearAuthValues: () => clearCredentials(credentialScope),
 		onToggleAuth: () => setAuthOpen((current) => !current),
 		closeAuth: () => setAuthOpen(false)
 	};
 }
 //#endregion
-//#region source/openapi/components/OpenApiOperation.tsx
-var endpointMethodStyleVars = {
-	GET: "bg-(--clarify-http-method-get-background) text-(--clarify-http-method-get-text)",
-	POST: "bg-(--clarify-http-method-post-background) text-(--clarify-http-method-post-text)",
-	PUT: "bg-(--clarify-http-method-put-background) text-(--clarify-http-method-put-text)",
-	PATCH: "bg-(--clarify-http-method-patch-background) text-(--clarify-http-method-patch-text)",
-	DELETE: "bg-(--clarify-http-method-delete-background) text-(--clarify-http-method-delete-text)",
-	WEBHOOK: "bg-(--clarify-http-method-webhook-background) text-(--clarify-http-method-webhook-text)"
-};
-function EndpointMethodBadge(arg0) {
-	const { method } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, clsx.default)("rounded-(--clarify-theme-tokens-radius-md) px-2.5 py-0.5 text-xs/6 font-black tracking-wide", endpointMethodStyleVars[method] ?? "bg-(--clarify-http-method-default-background) text-(--clarify-http-method-default-text)"),
-		children: method
-	});
+//#region source/openapi/lib/api-request.ts
+function parseBodyObject(body) {
+	try {
+		const parsed = JSON.parse(body);
+		return typeof parsed === "object" && parsed !== null && !Array.isArray(parsed) ? parsed : void 0;
+	} catch {
+		return;
+	}
 }
-function EndpointPath(arg0) {
-	const { path, copied = false, onCopy } = arg0;
-	const t = require_i18n.useBuiltInText();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "min-w-0 flex-1 overflow-x-auto text-sm font-bold leading-6 whitespace-nowrap",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "select-text font-mono text-(--clarify-theme-tokens-colors-foreground)",
-				children: path || "/"
-			})
-		}), onCopy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			"aria-label": copied ? t("actions.copied") : t("actions.copy"),
-			title: copied ? t("actions.copied") : t("actions.copy"),
-			onClick: onCopy,
-			className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
-				className: "h-3.5 w-3.5",
-				"aria-hidden": "true"
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CopyIcon, {
-				className: "h-3.5 w-3.5",
-				"aria-hidden": "true"
-			})
-		}) : null]
+function buildRequestBody(body, mediaType) {
+	const values = parseBodyObject(body);
+	if (mediaType.includes("application/x-www-form-urlencoded") && values) {
+		const params = new URLSearchParams();
+		Object.entries(values).forEach(([name, value]) => params.append(name, typeof value === "string" ? value : JSON.stringify(value)));
+		return params;
+	}
+	if (mediaType.includes("multipart/form-data") && values) {
+		const form = new FormData();
+		Object.entries(values).forEach(([name, value]) => form.append(name, typeof value === "string" ? value : JSON.stringify(value)));
+		return form;
+	}
+	return body;
+}
+function expandServerUrl(server, variables) {
+	return (server.url ?? "").replace(/\{([^}]+)\}/g, (_, name) => variables[name] ?? server.variables?.[name]?.default ?? `{${name}}`);
+}
+function authorizationValue(auth) {
+	const scheme = auth.scheme.scheme?.toLowerCase();
+	if (auth.scheme.type === "http" && scheme === "basic") return `Basic ${auth.value}`;
+	if (auth.scheme.type === "http" && scheme === "bearer") return `Bearer ${auth.value}`;
+	if (auth.scheme.type === "oauth2" || auth.scheme.type === "openIdConnect") return `Bearer ${auth.value}`;
+}
+function parameterKey(parameter) {
+	return `${parameter.in ?? "query"}:${parameter.name ?? ""}`;
+}
+function parseParameterValue(value) {
+	const trimmed = value.trim();
+	if (!trimmed || !trimmed.startsWith("[") && !trimmed.startsWith("{")) return value;
+	try {
+		return JSON.parse(trimmed);
+	} catch {
+		return value;
+	}
+}
+function primitiveValue(value) {
+	if (typeof value === "string") return value;
+	if (value === null || typeof value === "undefined") return "";
+	return String(value);
+}
+function serializedParameterValues(parameter, rawValue) {
+	const value = parseParameterValue(rawValue);
+	const style = parameter.style ?? (parameter.in === "query" || parameter.in === "cookie" ? "form" : "simple");
+	const explode = parameter.explode ?? style === "form";
+	if (Array.isArray(value)) {
+		if (explode) return value.map((item) => [parameter.name ?? "", primitiveValue(item)]);
+		const delimiter = style === "spaceDelimited" ? " " : style === "pipeDelimited" ? "|" : ",";
+		return [[parameter.name ?? "", value.map(primitiveValue).join(delimiter)]];
+	}
+	if (typeof value === "object" && value !== null) {
+		const entries = Object.entries(value);
+		if (parameter.style === "deepObject") return entries.map(([key, item]) => [`${parameter.name}[${key}]`, primitiveValue(item)]);
+		if (explode) return entries.map(([key, item]) => [key, primitiveValue(item)]);
+		return [[parameter.name ?? "", entries.flatMap(([key, item]) => [key, primitiveValue(item)]).join(",")]];
+	}
+	return [[parameter.name ?? "", primitiveValue(value)]];
+}
+function pathParameterValue(parameter, rawValue) {
+	const value = parseParameterValue(rawValue);
+	const style = parameter.style ?? "simple";
+	const explode = parameter.explode ?? false;
+	const encode = (item) => encodeURIComponent(primitiveValue(item));
+	if (Array.isArray(value)) {
+		if (style === "label") return `.${value.map(encode).join(explode ? "." : ",")}`;
+		if (style === "matrix") return explode ? value.map((item) => `;${parameter.name}=${encode(item)}`).join("") : `;${parameter.name}=${value.map(encode).join(",")}`;
+		return value.map(encode).join(",");
+	}
+	if (typeof value === "object" && value !== null) {
+		const entries = Object.entries(value);
+		if (style === "label") return explode ? `.${entries.map(([key, item]) => `${encode(key)}=${encode(item)}`).join(".")}` : `.${entries.flatMap(([key, item]) => [encode(key), encode(item)]).join(",")}`;
+		if (style === "matrix") return explode ? entries.map(([key, item]) => `;${encode(key)}=${encode(item)}`).join("") : `;${parameter.name}=${entries.flatMap(([key, item]) => [encode(key), encode(item)]).join(",")}`;
+		return explode ? entries.map(([key, item]) => `${encode(key)}=${encode(item)}`).join(",") : entries.flatMap(([key, item]) => [encode(key), encode(item)]).join(",");
+	}
+	const encoded = encode(value);
+	if (style === "label") return `.${encoded}`;
+	if (style === "matrix") return `;${parameter.name}=${encoded}`;
+	return encoded;
+}
+function headerParameterValue(parameter, rawValue) {
+	const value = parseParameterValue(rawValue);
+	if (Array.isArray(value)) return value.map(primitiveValue).join(",");
+	if (typeof value === "object" && value !== null) {
+		const entries = Object.entries(value);
+		return parameter.explode ? entries.map(([key, item]) => `${key}=${primitiveValue(item)}`).join(",") : entries.flatMap(([key, item]) => [key, primitiveValue(item)]).join(",");
+	}
+	return primitiveValue(value);
+}
+function buildApiRequest(input) {
+	const headers = new Headers({ Accept: "application/json" });
+	const query = new URLSearchParams();
+	let path = input.path;
+	for (const parameter of input.parameters) {
+		if (!parameter.name) continue;
+		const key = parameterKey(parameter);
+		if (input.parameterEnabled?.[key] === false) continue;
+		const value = input.parameterValues[key] ?? "";
+		if (!value && !parameter.allowEmptyValue) continue;
+		if (parameter.in === "path") path = path.replaceAll(`{${parameter.name}}`, pathParameterValue(parameter, value));
+		if (parameter.in === "query") serializedParameterValues(parameter, value).forEach(([name, item]) => query.append(name, item));
+		if (parameter.in === "header") headers.set(parameter.name, headerParameterValue(parameter, value));
+	}
+	for (const auth of input.auth ?? []) {
+		if (!auth.value) continue;
+		if (auth.scheme.type === "apiKey" && auth.scheme.in === "query" && auth.scheme.name) query.set(auth.scheme.name, auth.value);
+		else if (auth.scheme.type === "apiKey" && auth.scheme.in === "header" && auth.scheme.name) headers.set(auth.scheme.name, auth.value);
+		else {
+			const authorization = authorizationValue(auth);
+			if (authorization) headers.set("Authorization", authorization);
+		}
+	}
+	const url = new URL(joinPath(expandServerUrl(input.server, input.serverVariables ?? {}), path), input.baseUrl);
+	query.forEach((value, key) => url.searchParams.append(key, value));
+	const body = input.body?.trim();
+	const mediaType = input.mediaType || "application/json";
+	const requestBody = body && input.method.toUpperCase() !== "GET" && input.method.toUpperCase() !== "HEAD" ? buildRequestBody(body, mediaType) : void 0;
+	if (requestBody && !(requestBody instanceof FormData)) headers.set("Content-Type", mediaType);
+	return {
+		url: url.toString(),
+		init: {
+			method: input.method.toUpperCase(),
+			headers,
+			credentials: "include",
+			...requestBody ? { body: requestBody } : {}
+		}
+	};
+}
+//#endregion
+//#region source/openapi/components/OpenApiAuthPanel.tsx
+function OpenApiAuthPanel(arg0) {
+	const { authOptions, selectedAuthName, selectedAuth, authValues, onSelectAuth, onChangeAuthValue, onClearAuthValue } = arg0;
+	const t = require_i18n.useBuiltInText();
+	if (authOptions.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "grid divide-y divide-(--clarify-theme-tokens-colors-border)",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: "grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex min-h-8 items-center border-r border-(--clarify-theme-tokens-colors-border) px-2 font-mono text-xs text-(--clarify-ui-text-strong)",
+				children: "Auth"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineListbox, {
+				label: "Auth",
+				value: selectedAuthName,
+				options: authOptions.map((option) => ({
+					value: option.key,
+					label: option.label || t("openapi.none")
+				})),
+				onChange: onSelectAuth
+			})]
+		}), selectedAuth?.schemes.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: "group grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex min-h-8 items-center border-r border-(--clarify-theme-tokens-colors-border) px-2 font-mono text-xs text-(--clarify-ui-text-strong)",
+				children: authLabel(option.name, option.scheme)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 items-center focus-within:bg-(--clarify-ui-hover-background)",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "password",
+					value: authValues[option.name] ?? "",
+					placeholder: authPlaceholder(option),
+					onChange: (event) => onChangeAuthValue(option.name, event.target.value),
+					autoComplete: "off",
+					className: "h-8 min-w-0 flex-1 border-0 bg-transparent px-2 text-xs text-(--clarify-theme-tokens-colors-foreground) outline-hidden placeholder:text-(--clarify-ui-text-faint)"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => onClearAuthValue(option.name),
+					className: "mr-1 h-6 shrink-0 rounded-(--clarify-theme-tokens-radius-md) px-1 text-2xs font-medium text-(--clarify-ui-text-faint) opacity-0 transition-opacity hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary) group-hover:opacity-100",
+					children: t("openapi.clear")
+				})]
+			})]
+		}, option.name))]
 	});
 }
-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,
+//#endregion
+//#region source/openapi/components/OpenApiRequestFields.tsx
+function RequestField(arg0) {
+	const { spec, parameter, value, enabled, onChange, onEnabledChange, issue } = arg0;
+	const t = require_i18n.useBuiltInText();
+	const schema = resolveSchema(spec, parameter.schema);
+	const schemaRecord = isRecord$1(schema) ? schema : void 0;
+	const itemSchema = isRecord$1(schemaRecord?.items) ? schemaRecord.items : void 0;
+	const options = Array.isArray(schemaRecord?.enum) ? schemaRecord.enum.map(String) : [];
+	const itemOptions = Array.isArray(itemSchema?.enum) ? itemSchema.enum.map(String) : [];
+	const type = schemaToType(schema) ?? "string";
+	const description = parameter.description ?? (typeof schemaRecord?.description === "string" ? schemaRecord.description : void 0);
+	const structured = type.includes("[]") || type.includes("object");
+	const boolean = type.includes("boolean");
+	const numeric = type.includes("integer") || type.includes("number");
+	const fieldId = `openapi-parameter-${parameter.in ?? "query"}-${parameter.name ?? ""}`.replace(/[^a-zA-Z0-9_-]/g, "-");
+	const issueText = issue === "required" ? t("openapi.required") : issue ? t(`openapi.parameter${issue[0].toUpperCase()}${issue.slice(1)}`) : void 0;
+	const controlProps = {
+		"aria-label": parameter.name,
+		"aria-invalid": issue ? true : void 0,
+		"aria-describedby": issue ? `${fieldId}-issue` : void 0,
+		disabled: !enabled
+	};
+	const arrayValue = (() => {
+		try {
+			const parsed = JSON.parse(value);
+			return Array.isArray(parsed) ? parsed.map(String) : [];
+		} catch {
+			return [];
+		}
+	})();
+	const descriptionTip = description ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, {
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
+			className: "max-w-80 text-left *:first:mt-0 *:last:mb-0",
+			children: description
+		}),
+		side: "bottom",
+		className: "mr-1 shrink-0 [&>[role=tooltip]]:w-80 [&>[role=tooltip]]:max-w-[min(20rem,calc(100vw-2rem))] [&>[role=tooltip]]:border [&>[role=tooltip]]:border-(--clarify-theme-tokens-colors-border) [&>[role=tooltip]]:bg-(--clarify-theme-tokens-colors-surface) [&>[role=tooltip]]:p-3 [&>[role=tooltip]]:text-(--clarify-ui-text) [&>[role=tooltip]]:shadow-xl",
+		triggerClassName: "clarify-field-description-trigger clarify-ui-control inline-flex size-7 items-center justify-center rounded-md !border-b-0 text-(--clarify-ui-text-faint) transition-colors",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.InfoIcon, {
+			className: "size-4",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: t("openapi.fieldDescription")
+		})]
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "group grid min-w-0 grid-cols-[2rem_minmax(0,1fr)] sm:grid-cols-[2rem_minmax(0,1fr)_minmax(0,1fr)] sm:items-stretch",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex min-h-8 items-center justify-center border-r border-(--clarify-theme-tokens-colors-border)",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "checkbox",
+					checked: enabled,
+					disabled: parameter.required,
+					onChange: (event) => onEnabledChange(event.target.checked),
+					"aria-label": `${t("openapi.includeParameter")}: ${parameter.name ?? ""}`,
+					className: "size-3.5 shrink-0 accent-(--clarify-theme-tokens-colors-primary) disabled:cursor-not-allowed"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex min-h-8 min-w-0 items-center border-r border-(--clarify-theme-tokens-colors-border) px-2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					htmlFor: fieldId,
+					className: "flex min-w-0 flex-wrap items-center gap-x-1.5 text-xs text-(--clarify-ui-text-strong)",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate font-mono",
+							children: parameter.name
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-mono text-2xs text-(--clarify-ui-text-faint)",
+							children: type
+						}),
+						parameter.required ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-(--clarify-error-accent-text)",
+							children: "*"
+						}) : null
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, clsx.default)("col-start-2 flex min-w-0 items-center border-t border-(--clarify-theme-tokens-colors-border) sm:col-start-3 sm:row-start-1 sm:border-t-0", !enabled && "opacity-45"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "min-w-0 flex-1",
+					children: itemOptions.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultiInlineListbox, {
+						label: parameter.name ?? "",
+						value: arrayValue,
+						options: itemOptions.map((option) => ({
+							value: option,
+							label: option
+						})),
+						onChange: (next) => onChange(JSON.stringify(next)),
+						invalid: Boolean(issue),
+						describedBy: issue ? `${fieldId}-issue` : void 0,
+						disabled: !enabled
+					}) : options.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineListbox, {
+						label: parameter.name ?? "",
+						value,
+						options: [...parameter.required ? [] : [{
+							value: "",
+							label: t("openapi.none")
+						}], ...options.map((option) => ({
+							value: option,
+							label: option
+						}))],
+						onChange,
+						invalid: Boolean(issue),
+						describedBy: issue ? `${fieldId}-issue` : void 0,
+						disabled: !enabled
+					}) : boolean ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						...controlProps,
+						id: fieldId,
+						type: "checkbox",
+						checked: value === "true",
+						onChange: (event) => onChange(String(event.target.checked)),
+						className: "size-4 accent-(--clarify-theme-tokens-colors-primary)"
+					}) : structured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+						...controlProps,
+						id: fieldId,
+						value,
+						required: parameter.required,
+						onChange: (event) => onChange(event.target.value),
+						rows: 3,
+						spellCheck: false,
+						placeholder: type.includes("[]") ? "[]" : "{}",
+						className: "w-full resize-y border-0 bg-transparent p-2 font-mono text-xs/5 text-(--clarify-theme-tokens-colors-foreground) outline-hidden aria-invalid:text-(--clarify-error-accent-text) focus:bg-(--clarify-ui-hover-background)"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						...controlProps,
+						id: fieldId,
+						value,
+						type: numeric ? "number" : schemaRecord?.format === "date" ? "date" : schemaRecord?.format === "date-time" ? "datetime-local" : "text",
+						required: parameter.required,
+						onChange: (event) => onChange(event.target.value),
+						className: "h-8 w-full border-0 bg-transparent px-2 font-mono text-xs text-(--clarify-theme-tokens-colors-foreground) outline-hidden transition placeholder:text-(--clarify-ui-text-faint) focus:bg-(--clarify-ui-hover-background) aria-invalid:text-(--clarify-error-accent-text)"
+					})
+				}), descriptionTip]
+			}),
+			issueText ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				id: `${fieldId}-issue`,
+				className: "col-start-2 border-t border-(--clarify-theme-tokens-colors-border) px-2 py-1 text-xs/5 font-medium text-(--clarify-error-accent-text) sm:col-start-3",
+				children: issueText
+			}) : null
+		]
+	});
+}
+function RequestSection(arg0) {
+	const { title, count, defaultOpen, actions, className, contentClassName, children } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+		open: defaultOpen,
+		className: (0, clsx.default)("group shrink-0 border-b border-(--clarify-theme-tokens-colors-border)", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
+			className: "flex min-h-11 cursor-pointer list-none items-center gap-2 bg-(--clarify-ui-subtle-background) px-2.5 text-sm font-medium text-(--clarify-ui-text-strong) hover:bg-(--clarify-ui-hover-background) group-open:border-b group-open:border-(--clarify-theme-tokens-colors-border)",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
+					className: "size-4 shrink-0 -rotate-90 transition group-open:rotate-0",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex-1",
+					children: title
+				}),
+				typeof count === "number" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-mono text-xs text-(--clarify-ui-text-faint)",
+					children: count
+				}) : null,
+				actions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex items-center gap-1",
+					onClick: (event) => {
+						event.preventDefault();
+						event.stopPropagation();
+					},
+					children: actions
+				}) : null
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("divide-y divide-(--clarify-theme-tokens-colors-border)", contentClassName),
+			children
+		})]
+	});
+}
+//#endregion
+//#region source/openapi/components/OpenApiResponseViewer.tsx
+function formatBytes(size) {
+	if (size < 1024) return `${size} B`;
+	if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+	return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+function parseJson(value) {
+	try {
+		return JSON.parse(value);
+	} catch {
+		return;
+	}
+}
+function ResponseState(arg0) {
+	const { icon: Icon, title, description, tone = "default" } = arg0;
+	const error = tone === "error";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "grid min-h-56 flex-1 place-items-center px-6 py-10 text-center",
+		role: error ? "alert" : "status",
 		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)",
+			className: "max-w-sm",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: (0, clsx.default)("mx-auto mb-3 grid size-10 place-items-center rounded-full border", error ? "border-(--clarify-code-danger-border) bg-(--clarify-code-danger-background) text-(--clarify-code-danger)" : "border-(--clarify-code-border) bg-(--clarify-code-control-background) text-(--clarify-code-muted)"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						className: "size-4.5",
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: (0, clsx.default)("text-sm font-semibold", error ? "text-(--clarify-code-danger)" : "text-(--clarify-code-text)"),
+					children: title
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-1 text-xs/5 text-(--clarify-code-faint)",
+					children: description
+				})
+			]
+		})
+	});
+}
+function JsonPreview(arg0) {
+	const { value } = arg0;
+	if (Array.isArray(value)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "space-y-1 border-l border-(--clarify-code-border) pl-3",
+		children: value.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "mr-2 text-(--clarify-code-faint)",
+			children: index
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonPreview, { value: item })] }, index))
+	});
+	if (isRecord$1(value)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "space-y-1 border-l border-(--clarify-code-border) pl-3",
+		children: Object.entries(value).map(([key, item]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "grid grid-cols-[minmax(5rem,auto)_1fr] gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-(--clarify-code-property)",
+				children: key
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonPreview, { value: item })]
+		}, key))
+	});
+	if (value === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "text-(--clarify-code-faint)",
+		children: "null"
+	});
+	if (typeof value === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "wrap-break-word text-(--clarify-code-string)",
+		children: value
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "text-(--clarify-code-number)",
+		children: String(value)
+	});
+}
+function CopyButton(arg0) {
+	const { value } = arg0;
+	const t = require_i18n.useBuiltInText();
+	const [copied, setCopied] = (0, react.useState)(false);
+	async function copy() {
+		const success = await require_PageActions.copyTextToClipboard(value);
+		setCopied(success);
+		if (success) window.setTimeout(() => setCopied(false), 1600);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: copy,
+		"aria-label": copied ? t("actions.copied") : t("actions.copy"),
+		title: copied ? t("actions.copied") : t("actions.copy"),
+		className: "grid size-8 shrink-0 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-code-muted) hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
+			className: "size-4 text-(--clarify-code-success)",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CopyIcon, {
+			className: "size-4",
+			"aria-hidden": "true"
+		})
+	});
+}
+function ResponseMedia(arg0) {
+	const { blob, type } = arg0;
+	const elementRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const element = elementRef.current;
+		if (!element) return;
+		const url = URL.createObjectURL(blob);
+		element.src = url;
+		return () => {
+			element.removeAttribute("src");
+			URL.revokeObjectURL(url);
+		};
+	}, [blob]);
+	if (type === "image") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		ref: elementRef,
+		alt: "",
+		className: "max-h-128 max-w-full object-contain"
+	});
+	if (type === "audio") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+		ref: elementRef,
+		controls: true,
+		className: "w-full"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+		ref: elementRef,
+		controls: true,
+		className: "max-h-128 max-w-full"
+	});
+}
+function ResponsePreview(arg0) {
+	const { exchange } = arg0;
+	const t = require_i18n.useBuiltInText();
+	const contentType = exchange.contentType.toLowerCase();
+	if (!exchange.size) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseState, {
+		icon: lucide_react.FileX2Icon,
+		title: t("openapi.responseBodyEmptyTitle"),
+		description: t("openapi.responseBodyEmpty")
+	});
+	if (contentType.includes("json")) {
+		const parsed = parseJson(exchange.body);
+		return typeof parsed === "undefined" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+			className: "whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
+			children: exchange.body
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "overflow-auto font-mono text-xs/5",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonPreview, { value: parsed })
+		});
+	}
+	if (contentType.startsWith("image/")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseMedia, {
+		blob: exchange.blob,
+		type: "image"
+	});
+	if (contentType.startsWith("audio/")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseMedia, {
+		blob: exchange.blob,
+		type: "audio"
+	});
+	if (contentType.startsWith("video/")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseMedia, {
+		blob: exchange.blob,
+		type: "video"
+	});
+	if (contentType.includes("html")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+		srcDoc: exchange.body,
+		sandbox: "",
+		title: "Response preview",
+		className: "h-96 w-full border-0 bg-white"
+	});
+	if (contentType.startsWith("text/") || contentType.includes("xml") || contentType.includes("yaml")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		className: "whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
+		children: exchange.body
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "grid min-h-56 place-items-center text-xs text-(--clarify-code-faint)",
+		children: t("openapi.binaryPreview")
+	});
+}
+function ResponseHeaders(arg0) {
+	const { headers: sourceHeaders } = arg0;
+	const t = require_i18n.useBuiltInText();
+	const [query, setQuery] = (0, react.useState)("");
+	const normalizedQuery = query.trim().toLowerCase();
+	const headers = normalizedQuery ? sourceHeaders.filter(([name, value]) => `${name} ${value}`.toLowerCase().includes(normalizedQuery)) : sourceHeaders;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: "flex h-9 items-center gap-2 border-b border-(--clarify-code-border) bg-(--clarify-code-control-background) px-3",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchIcon, {
+					className: "size-4 shrink-0 text-(--clarify-code-muted)",
 					"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",
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "sr-only",
+					children: t("openapi.searchHeaders")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					value: query,
+					onChange: (event) => setQuery(event.target.value),
+					placeholder: t("openapi.searchHeaders"),
+					className: "min-w-0 flex-1 bg-transparent text-xs text-(--clarify-code-text) outline-none placeholder:text-(--clarify-code-faint)"
+				})
+			]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "overflow-x-auto",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+				className: "w-full min-w-96 table-fixed border-collapse text-left font-mono text-xs/5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+					className: "bg-(--clarify-code-control-background) text-(--clarify-code-muted)",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "w-2/5 border-r border-(--clarify-code-border) px-3 py-2 font-semibold",
+							children: t("openapi.headerName")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "px-3 py-2 font-semibold",
+							children: t("openapi.headerValue")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "w-10",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "sr-only",
+								children: t("actions.copy")
+							})
+						})
+					] })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: headers.map(([name, value], index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+					className: "border-t border-(--clarify-code-border) hover:bg-(--clarify-code-control-background)",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "break-all border-r border-(--clarify-code-border) px-3 py-2 align-top text-(--clarify-code-property)",
+							children: name
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "break-all px-3 py-2 align-top text-(--clarify-code-text)",
+							children: value
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "pr-1",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, { value: `${name}: ${value}` })
+						})
+					]
+				}, `${name}:${index}`)) })]
+			})
+		}),
+		headers.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "border-t border-(--clarify-code-border) py-8 text-center text-xs text-(--clarify-code-faint)",
+			children: t("openapi.noHeaders")
+		}) : null
+	] });
+}
+function HiddenCookies() {
+	const t = require_i18n.useBuiltInText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+		className: "w-full table-fixed border-collapse text-left text-xs/5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+			className: "bg-(--clarify-code-control-background) text-(--clarify-code-muted)",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+				className: "w-2/5 border-r border-(--clarify-code-border) px-3 py-2 font-semibold",
+				children: t("openapi.headerName")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+				className: "px-3 py-2 font-semibold",
+				children: t("openapi.headerValue")
+			})] })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+			className: "border-t border-(--clarify-code-border)",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				colSpan: 2,
+				className: "px-3 py-5 text-center text-(--clarify-code-faint)",
+				children: t("openapi.cookiesBrowserHidden")
+			})
+		}) })]
+	});
+}
+function OpenApiResponseViewer(arg0) {
+	const { exchange, error } = arg0;
+	const t = require_i18n.useBuiltInText();
+	const [bodyMode, setBodyMode] = (0, react.useState)("preview");
+	function downloadBody() {
+		if (!exchange) return;
+		const url = URL.createObjectURL(exchange.blob);
+		const anchor = document.createElement("a");
+		anchor.href = url;
+		anchor.download = `response.${exchange.contentType.includes("json") ? "json" : "bin"}`;
+		anchor.click();
+		URL.revokeObjectURL(url);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "clarify-api-response flex h-full min-h-96 min-w-0 flex-col bg-(--clarify-code-background) text-(--clarify-code-text)",
+		"aria-label": t("openapi.response"),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "sticky top-0 z-10 flex min-h-11 flex-wrap items-center gap-2 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-2.5 text-sm font-medium",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "mr-auto text-(--clarify-code-text)",
+					children: t("openapi.response")
+				}), exchange ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-xs font-semibold text-(--clarify-code-muted)",
+						children: [exchange.duration, " ms"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-xs text-(--clarify-code-faint)",
+						children: formatBytes(exchange.size)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: (0, clsx.default)("size-2 rounded-full", exchange.status < 400 ? "bg-(--clarify-code-success)" : "bg-(--clarify-code-danger)") }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: (0, clsx.default)("text-xs font-semibold", exchange.status < 400 ? "text-(--clarify-code-success)" : "text-(--clarify-code-danger)"),
+						children: [
+							exchange.status,
+							" ",
+							exchange.statusText
+						]
+					})
+				] }) : null]
+			}),
+			error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseState, {
+				icon: lucide_react.CircleAlertIcon,
+				title: t("openapi.responseErrorTitle"),
+				description: error,
+				tone: "error"
+			}) : null,
+			!error && !exchange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseState, {
+				icon: lucide_react.SendIcon,
+				title: t("openapi.responseEmptyTitle"),
+				description: t("openapi.responseEmpty")
+			}) : null,
+			exchange ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-h-0 flex-1 overflow-auto",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestSection, {
+						title: t("openapi.cookies"),
+						count: 0,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenCookies, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestSection, {
+						title: t("openapi.requestHeaders"),
+						count: exchange.request.headers.length,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseHeaders, { headers: exchange.request.headers })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestSection, {
+						title: t("openapi.responseHeaders"),
+						count: exchange.headers.length,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseHeaders, { headers: exchange.headers })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestSection, {
+						title: t("openapi.body"),
+						defaultOpen: true,
+						actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-mono text-2xs font-normal text-(--clarify-code-faint)",
+							children: exchange.contentType || t("openapi.unknownContentType")
+						}),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-h-72",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex h-10 items-center justify-between border-b border-(--clarify-code-border) px-3",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									role: "tablist",
+									className: "flex",
+									children: ["preview", "raw"].map((mode) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										role: "tab",
+										"aria-selected": bodyMode === mode,
+										onClick: () => setBodyMode(mode),
+										className: (0, clsx.default)("border-b-2 px-2.5 py-1 text-2xs font-semibold", bodyMode === mode ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-code-text)" : "border-transparent text-(--clarify-code-muted)"),
+										children: mode === "preview" ? t("openapi.preview") : t("openapi.raw")
+									}, mode))
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, { value: exchange.body }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										onClick: downloadBody,
+										"aria-label": t("openapi.downloadBody"),
+										title: t("openapi.downloadBody"),
+										className: "grid size-8 shrink-0 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-code-muted) transition hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.DownloadIcon, {
+											className: "size-4",
+											"aria-hidden": "true"
+										})
+									})]
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "p-4",
+								children: bodyMode === "preview" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsePreview, { exchange }) : exchange.size ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+									className: "max-h-128 overflow-auto whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
+									children: exchange.body
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "py-8 text-center text-xs text-(--clarify-code-faint)",
+									children: t("openapi.responseBodyEmpty")
+								})
+							})]
+						})
+					})
+				]
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region source/openapi/components/SendRequestButton.tsx
+function SendRequestButton(arg0) {
+	const { label, busy = false, text, onClick } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		disabled: busy,
+		"aria-label": label,
+		title: label,
+		onClick,
+		className: Boolean(text) ? "flex h-8 shrink-0 items-center gap-1.5 rounded bg-(--clarify-theme-tokens-colors-foreground) px-3 text-xs font-semibold text-(--clarify-theme-tokens-colors-background) transition hover:opacity-85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-foreground) focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-60" : "grid size-7 shrink-0 place-items-center rounded bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-inset ring-(--clarify-ui-accent-border) transition-colors hover:bg-(--clarify-theme-tokens-colors-foreground) hover:text-(--clarify-theme-tokens-colors-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-foreground) focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-60",
+		children: [busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LoaderCircleIcon, {
+			className: "size-4 animate-spin",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SendIcon, {
+			className: "size-4",
+			"aria-hidden": "true"
+		}), text]
+	});
+}
+//#endregion
+//#region source/openapi/lib/api-exchange.ts
+var ApiRequestError = class extends Error {
+	category;
+	constructor(message, options) {
+		super(message, options);
+		this.name = "ApiRequestError";
+		this.category = "network";
+	}
+};
+function requestBodySnapshot(body) {
+	if (typeof body === "string") return body;
+	if (body instanceof URLSearchParams) return body.toString();
+}
+function requestSnapshot(request) {
+	return {
+		url: request.url,
+		method: request.init.method ?? "GET",
+		headers: Array.from(new Headers(request.init.headers).entries()),
+		body: requestBodySnapshot(request.init.body)
+	};
+}
+async function executeApiRequest(request, options = {}) {
+	const fetchRequest = options.fetch ?? fetch;
+	const now = options.now ?? (() => performance.now());
+	const startedAt = now();
+	let response;
+	try {
+		response = await fetchRequest(request.url, {
+			...request.init,
+			signal: options.signal
+		});
+	} catch (cause) {
+		if (cause instanceof DOMException && cause.name === "AbortError") throw cause;
+		throw new ApiRequestError(cause instanceof Error ? cause.message : String(cause), { cause });
+	}
+	const blob = await response.blob();
+	return {
+		request: requestSnapshot(request),
+		status: response.status,
+		statusText: response.statusText,
+		url: response.url || request.url,
+		redirected: response.redirected,
+		duration: Math.round(now() - startedAt),
+		size: blob.size,
+		headers: Array.from(response.headers.entries()),
+		contentType: response.headers.get("content-type") ?? blob.type,
+		body: await blob.text(),
+		blob
+	};
+}
+//#endregion
+//#region source/openapi/lib/request-parameters.ts
+function structuredIssue(value, type) {
+	if (!type.includes("[]") && !type.includes("object")) return void 0;
+	try {
+		const parsed = JSON.parse(value);
+		if (type.includes("[]") && !Array.isArray(parsed)) return "invalidArray";
+		if (type.includes("object") && !isRecord$1(parsed)) return "invalidObject";
+	} catch {
+		return type.includes("[]") ? "invalidArray" : "invalidObject";
+	}
+}
+function scalarIssue(value, type, format) {
+	if (type.includes("integer") && !Number.isInteger(Number(value))) return "invalidInteger";
+	if (type.includes("number") && !Number.isFinite(Number(value))) return "invalidNumber";
+	if (format === "date" && !/^\d{4}-\d{2}-\d{2}$/.test(value)) return "invalidDate";
+	if (format === "date-time" && Number.isNaN(Date.parse(value))) return "invalidDateTime";
+}
+function validateRequestParameter(spec, parameter, value) {
+	if (!value) return parameter.required ? "required" : void 0;
+	const schema = resolveSchema(spec, parameter.schema);
+	const schemaRecord = isRecord$1(schema) ? schema : void 0;
+	const type = schemaToType(schema) ?? "string";
+	const options = Array.isArray(schemaRecord?.enum) ? schemaRecord.enum.map(String) : [];
+	if (options.length > 0 && !options.includes(value)) return "invalidEnum";
+	return structuredIssue(value, type) ?? scalarIssue(value, type, schemaRecord?.format);
+}
+function validateRequestParameters(spec, parameters, values) {
+	return Object.fromEntries(parameters.filter((parameter) => parameter.in !== "cookie").flatMap((parameter) => {
+		const key = parameterKey(parameter);
+		const issue = validateRequestParameter(spec, parameter, values[key] ?? "");
+		return issue ? [[key, issue]] : [];
+	}));
+}
+//#endregion
+//#region source/openapi/components/useOpenApiRequestState.ts
+function useOpenApiRequestTarget(spec, path, operation, operationSource) {
+	const servers = getServers(spec, operation, path, operationSource);
+	const [selectedServerKey, setSelectedServerKey] = (0, react.useState)(getServerKey(servers[0], 0));
+	const selectedServer = servers.find((server, index) => getServerKey(server, index) === selectedServerKey) ?? servers[0];
+	const [serverVariables, setServerVariables] = (0, react.useState)(defaultServerVariables(selectedServer));
+	const authOptions = getAuthOptions(spec, operation);
+	const [selectedAuthName, setSelectedAuthName] = (0, react.useState)(authOptions[0]?.key ?? "");
+	const selectedAuth = authOptions.find((option) => option.key === selectedAuthName);
+	const credentialScope = getOpenApiCredentialScope(spec);
+	const credentials = useOpenApiStore((state) => state.credentials[credentialScope] ?? emptyOpenApiCredentials);
+	const setCredential = useOpenApiStore((state) => state.setCredential);
+	const clearCredential = useOpenApiStore((state) => state.clearCredential);
+	const requestContents = getMediaTypeEntries(getRequestBody$1(spec, operation)?.content, spec);
+	const [mediaType, setMediaType] = (0, react.useState)(requestContents[0]?.mediaType ?? "");
+	const [body, setBody] = (0, react.useState)(stringifyExample(getExampleEntries((requestContents.find((entry) => entry.mediaType === mediaType) ?? requestContents[0])?.value, spec)[0]?.value));
+	function selectServer(value) {
+		const nextServer = servers.find((server, index) => getServerKey(server, index) === value) ?? servers[0];
+		setSelectedServerKey(value);
+		setServerVariables(defaultServerVariables(nextServer));
+	}
+	function selectMediaType(value) {
+		const content = requestContents.find((entry) => entry.mediaType === value)?.value;
+		setMediaType(value);
+		setBody(stringifyExample(getExampleEntries(content, spec)[0]?.value));
+	}
+	return {
+		servers,
+		selectedServer,
+		selectedServerKey,
+		serverVariables,
+		setServerVariables,
+		serverVariableEntries: Object.entries(selectedServer.variables ?? {}),
+		selectServer,
+		authOptions,
+		selectedAuthName,
+		setSelectedAuthName,
+		selectedAuth,
+		credentialScope,
+		credentials,
+		setCredential,
+		clearCredential,
+		requestContents,
+		mediaType,
+		body,
+		setBody,
+		selectMediaType
+	};
+}
+function useOpenApiParameterState(spec, parameters, initialParameterValue) {
+	const [parameterValues, setParameterValues] = (0, react.useState)(() => Object.fromEntries(parameters.map((parameter) => [parameterKey(parameter), initialParameterValue(parameter)])));
+	const [parameterEnabled, setParameterEnabled] = (0, react.useState)(() => Object.fromEntries(parameters.map((parameter) => [parameterKey(parameter), true])));
+	const [parameterIssues, setParameterIssues] = (0, react.useState)({});
+	function setParameterGroupValues(grouped, mode) {
+		const keys = new Set(grouped.map(parameterKey));
+		setParameterValues((current) => ({
+			...current,
+			...Object.fromEntries(grouped.map((parameter) => [parameterKey(parameter), mode === "reset" ? initialParameterValue(parameter) : ""]))
+		}));
+		setParameterIssues((current) => Object.fromEntries(Object.entries(current).filter(([key]) => !keys.has(key))));
+	}
+	function setParameterIncluded(parameter, enabled) {
+		const key = parameterKey(parameter);
+		setParameterEnabled((current) => ({
+			...current,
+			[key]: enabled
+		}));
+		if (!enabled) setParameterIssues((current) => {
+			const next = { ...current };
+			delete next[key];
+			return next;
+		});
+	}
+	function updateParameterValue(parameter, value) {
+		const key = parameterKey(parameter);
+		setParameterValues((current) => ({
+			...current,
+			[key]: value
+		}));
+		setParameterIssues((current) => {
+			const next = { ...current };
+			delete next[key];
+			return next;
+		});
+	}
+	function validate(parametersToValidate) {
+		const issues = validateRequestParameters(spec, parametersToValidate, parameterValues);
+		setParameterIssues(issues);
+		return issues;
+	}
+	return {
+		parameterValues,
+		parameterEnabled,
+		parameterIssues,
+		setParameterGroupValues,
+		setParameterIncluded,
+		updateParameterValue,
+		validate
+	};
+}
+function useOpenApiRequestExecution() {
+	const [exchange, setExchange] = (0, react.useState)();
+	const [error, setError] = (0, react.useState)("");
+	const [sending, setSending] = (0, react.useState)(false);
+	const requestController = (0, react.useRef)(null);
+	(0, react.useEffect)(() => () => requestController.current?.abort(), []);
+	async function execute(request, corsHint) {
+		requestController.current?.abort();
+		const controller = new AbortController();
+		requestController.current = controller;
+		setSending(true);
+		setError("");
+		setExchange(void 0);
+		try {
+			setExchange(await executeApiRequest(request, { signal: controller.signal }));
+		} catch (cause) {
+			if (cause instanceof DOMException && cause.name === "AbortError") return;
+			const message = cause instanceof Error ? cause.message : String(cause);
+			setError(`${message}. ${corsHint}`);
+		} finally {
+			if (requestController.current === controller) {
+				requestController.current = null;
+				setSending(false);
+			}
+		}
+	}
+	return {
+		exchange,
+		error,
+		sending,
+		execute
+	};
+}
+//#endregion
+//#region source/openapi/components/OpenApiRequest.tsx
+function initialParameterValue(spec, parameter) {
+	const schema = resolveSchema(spec, parameter.schema);
+	if (!isRecord$1(schema)) return "";
+	return stringifyExample(schema.example ?? schema.default ?? (Array.isArray(schema.enum) ? schema.enum[0] : void 0));
+}
+function parameterGroupLabel(location, t) {
+	if (location === "path") return t("openapi.pathParameters");
+	if (location === "header") return t("openapi.headers");
+	if (location === "cookie") return t("openapi.cookies");
+	return t("openapi.queryParameters");
+}
+function OpenApiRequestWorkbench(arg0) {
+	const { spec, path, method, operation, operationSource = "path", compact = false, onClose } = arg0;
+	const t = require_i18n.useBuiltInText();
+	const parameters = getOperationParameters(spec, path, operation, operationSource);
+	const { servers, selectedServer, selectedServerKey, serverVariables, setServerVariables, serverVariableEntries, selectServer, authOptions, selectedAuthName, setSelectedAuthName, selectedAuth, credentialScope, credentials, setCredential, clearCredential, requestContents, mediaType, body, setBody, selectMediaType } = useOpenApiRequestTarget(spec, path, operation, operationSource);
+	const parameterState = useOpenApiParameterState(spec, parameters, (parameter) => initialParameterValue(spec, parameter));
+	const { parameterValues, parameterEnabled, parameterIssues, setParameterGroupValues, setParameterIncluded, updateParameterValue } = parameterState;
+	const { exchange, error, sending, execute } = useOpenApiRequestExecution();
+	const parameterGroups = [
+		"cookie",
+		"header",
+		"query"
+	].map((location) => ({
+		location,
+		parameters: parameters.filter((parameter) => parameter.in === location)
+	})).filter((group) => group.parameters.length > 0);
+	const pathParameters = parameters.filter((parameter) => parameter.in === "path");
+	const hasRequestConfiguration = authOptions.length > 0 || serverVariableEntries.length > 0 || parameters.length > 0 || requestContents.length > 0;
+	async function sendRequest() {
+		const enabledParameters = parameters.filter((parameter) => parameterEnabled[parameterKey(parameter)] !== false);
+		const issues = parameterState.validate(enabledParameters);
+		if (Object.keys(issues).length > 0) return;
+		await execute(buildApiRequest({
+			method,
+			path,
+			server: selectedServer,
+			serverVariables,
+			parameters,
+			parameterValues,
+			parameterEnabled,
+			auth: selectedAuth?.schemes.map((option) => ({
+				scheme: option.scheme,
+				value: credentials[option.name] ?? ""
+			})),
+			mediaType,
+			body,
+			baseUrl: window.location.href
+		}), t("openapi.requestCorsHint"));
+	}
+	function renderParameterField(parameter) {
+		const key = parameterKey(parameter);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestField, {
+			spec,
+			parameter,
+			value: parameterValues[key] ?? "",
+			enabled: parameterEnabled[key] !== false,
+			issue: parameterIssues[key],
+			onEnabledChange: (enabled) => setParameterIncluded(parameter, enabled),
+			onChange: (value) => updateParameterValue(parameter, value)
+		}, key);
+	}
+	function renderParameterGroup(group) {
+		const { location, parameters: grouped } = group;
+		const actions = location === "cookie" ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			title: t("openapi.resetToExample"),
+			"aria-label": t("openapi.resetToExample"),
+			onClick: () => setParameterGroupValues(grouped, "reset"),
+			className: "grid size-7 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RotateCcwIcon, {
+				className: "size-3.5",
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			title: t("openapi.clear"),
+			"aria-label": t("openapi.clear"),
+			onClick: () => setParameterGroupValues(grouped, "clear"),
+			className: "grid size-7 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EraserIcon, {
+				className: "size-3.5",
+				"aria-hidden": "true"
+			})
+		})] });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestSection, {
+			title: parameterGroupLabel(location, t),
+			count: grouped.length,
+			defaultOpen: true,
+			actions,
+			children: location === "cookie" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "px-3 py-4 text-xs/5 text-(--clarify-ui-text-faint)",
+				children: t("openapi.cookieParametersBrowserManaged")
+			}) : grouped.map(renderParameterField)
+		}, location);
+	}
+	function renderHeader() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 items-center gap-1.5 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointMethodBadge, { method: method.toUpperCase() }),
+				servers.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineListbox, {
+					label: t("openapi.server"),
+					value: selectedServerKey,
+					options: servers.map((server, index) => ({
+						value: getServerKey(server, index),
+						label: server.url ?? `Server ${index + 1}`,
+						description: server.description
+					})),
+					onChange: selectServer,
+					className: "min-w-0 max-w-48 shrink sm:max-w-48",
+					buttonClassName: "flex h-8 min-w-0 max-w-full items-center gap-1 rounded-(--clarify-theme-tokens-radius-md) px-2 text-xs font-medium text-(--clarify-ui-text-strong) outline-hidden transition hover:bg-(--clarify-ui-hover-background) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)"
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "min-w-0 flex-1 overflow-x-auto border-l border-(--clarify-theme-tokens-colors-border) pl-2 font-mono text-xs text-(--clarify-theme-tokens-colors-foreground)",
+					children: path || "/"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SendRequestButton, {
+					label: sending ? t("openapi.sendingRequest") : t("openapi.sendRequest"),
+					busy: sending,
+					text: t("openapi.sendRequest"),
+					onClick: sendRequest
+				}),
+				onClose ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: onClose,
+					"aria-label": t("openapi.closeRequest"),
+					title: t("openapi.closeRequest"),
+					className: "grid size-8 shrink-0 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-ui-text-soft) 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)",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {
+						className: "size-4",
 						"aria-hidden": "true"
-					})]
-				}, option.value))
+					})
+				}) : null
+			]
+		});
+	}
+	function renderVariables() {
+		if (serverVariableEntries.length === 0) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestSection, {
+			title: t("openapi.variables"),
+			count: serverVariableEntries.length,
+			defaultOpen: true,
+			children: serverVariableEntries.map(([name, variable]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex min-h-8 items-center border-r border-(--clarify-theme-tokens-colors-border) px-2 font-mono text-xs text-(--clarify-ui-text-strong)",
+					children: name
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					value: serverVariables[name] ?? variable.default ?? "",
+					onChange: (event) => setServerVariables((current) => ({
+						...current,
+						[name]: event.target.value
+					})),
+					className: "h-8 min-w-0 border-0 bg-transparent px-2 font-mono text-xs text-(--clarify-theme-tokens-colors-foreground) outline-hidden focus:bg-(--clarify-ui-hover-background) focus:ring-0"
+				})]
+			}, name))
+		});
+	}
+	function renderRequestBody() {
+		if (requestContents.length === 0) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RequestSection, {
+			title: t("openapi.requestBody"),
+			count: 1,
+			defaultOpen: true,
+			className: "open:grid open:min-h-55 open:grow open:shrink open:basis-55 open:grid-rows-[auto_minmax(11rem,1fr)]",
+			contentClassName: (0, clsx.default)("grid h-full min-h-0", requestContents.length > 1 ? "grid-rows-[auto_minmax(11rem,1fr)]" : "grid-rows-[minmax(11rem,1fr)]"),
+			children: [requestContents.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineListbox, {
+				label: t("openapi.mediaType"),
+				value: mediaType,
+				options: requestContents.map((entry) => ({
+					value: entry.mediaType,
+					label: entry.mediaType
+				})),
+				onChange: selectMediaType
+			}) }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+				"aria-label": t("openapi.requestBody"),
+				value: body,
+				onChange: (event) => setBody(event.target.value),
+				spellCheck: false,
+				className: "block h-full min-h-44 w-full resize-none border-0 bg-(--clarify-code-background) p-3 font-mono text-xs/5 text-(--clarify-code-text) outline-hidden focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary)"
 			})]
-		})
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("clarify-api-request flex min-h-0 min-w-0 flex-col not-prose bg-(--clarify-theme-tokens-colors-surface) [--clarify-theme-tokens-radius-lg:6px] [--clarify-theme-tokens-radius-md:4px] [--clarify-theme-tokens-radius-sm:2px] [--clarify-theme-tokens-radius-xl:8px] [--clarify-ui-accent-background:color-mix(in_srgb,var(--clarify-theme-tokens-colors-foreground)_10%,transparent)] [--clarify-ui-accent-border:color-mix(in_srgb,var(--clarify-theme-tokens-colors-foreground)_22%,transparent)] [--clarify-ui-accent-text:var(--clarify-theme-tokens-colors-foreground)] [--clarify-ui-active-background:color-mix(in_srgb,var(--clarify-theme-tokens-colors-foreground)_12%,transparent)] [--clarify-ui-subtle-background:color-mix(in_srgb,var(--clarify-theme-tokens-colors-foreground)_5%,transparent)]", compact ? "h-full" : "my-6"),
+		children: [renderHeader(), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "grid min-h-0 flex-1 gap-0 px-0 lg:grid-cols-[minmax(0,1.12fr)_minmax(22rem,0.88fr)]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-h-0 min-w-0 flex-col overflow-y-auto",
+				children: [
+					authOptions.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestSection, {
+						title: t("openapi.authentication"),
+						count: selectedAuth?.schemes.length ?? 0,
+						defaultOpen: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiAuthPanel, {
+							authOptions,
+							selectedAuthName,
+							selectedAuth,
+							authValues: credentials,
+							onSelectAuth: setSelectedAuthName,
+							onChangeAuthValue: (name, value) => setCredential(credentialScope, name, value),
+							onClearAuthValue: (name) => clearCredential(credentialScope, name)
+						})
+					}) : null,
+					renderVariables(),
+					pathParameters.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestSection, {
+						title: t("openapi.pathParameters"),
+						count: pathParameters.length,
+						defaultOpen: true,
+						children: pathParameters.map(renderParameterField)
+					}) : null,
+					parameterGroups.map(renderParameterGroup),
+					renderRequestBody(),
+					!hasRequestConfiguration ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestSection, {
+						title: t("openapi.requestConfiguration"),
+						count: 0,
+						defaultOpen: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "px-3 py-5 text-xs/5 text-(--clarify-ui-text-faint)",
+							children: t("openapi.noRequestConfiguration")
+						})
+					}) : null
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "h-full min-h-0 min-w-0 overflow-hidden border-t border-(--clarify-theme-tokens-colors-border) lg:border-t-0 lg:border-l",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiResponseViewer, {
+					exchange,
+					error
+				})
+			})]
+		})]
+	});
+}
+function OpenApiRequestDialog(arg0) {
+	const { open, onClose, ...workbenchProps } = arg0;
+	const t = require_i18n.useBuiltInText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Dialog, {
+		open,
+		onClose: () => {},
+		className: "relative z-50",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.DialogBackdrop, { className: "fixed inset-0 bg-(--clarify-ui-overlay-background) backdrop-blur-sm" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "fixed inset-0 grid place-items-center overflow-y-auto p-3 sm:p-6",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.DialogPanel, {
+				className: "relative flex h-[min(46rem,calc(100dvh-1.5rem))] w-full max-w-7xl flex-col overflow-hidden rounded-lg border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) shadow-2xl sm:h-[min(46rem,calc(100dvh-3rem))]",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.DialogTitle, {
+					className: "sr-only",
+					children: t("openapi.tryRequest")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiRequestWorkbench, {
+					...workbenchProps,
+					compact: true,
+					onClose
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+//#region source/openapi/components/OpenApiOperation.tsx
+function EndpointPath(arg0) {
+	const { path, copied = false, onCopy } = arg0;
+	const t = require_i18n.useBuiltInText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "min-w-0 flex-1 overflow-x-auto text-sm font-bold leading-6 whitespace-nowrap",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "select-text font-mono text-(--clarify-theme-tokens-colors-foreground)",
+				children: path || "/"
+			})
+		}), onCopy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": copied ? t("actions.copied") : t("actions.copy"),
+			title: copied ? t("actions.copied") : t("actions.copy"),
+			onClick: onCopy,
+			className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
+				className: "h-3.5 w-3.5",
+				"aria-hidden": "true"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CopyIcon, {
+				className: "h-3.5 w-3.5",
+				"aria-hidden": "true"
+			})
+		}) : null]
 	});
 }
 function getServerPreviewUrl(server, variables) {
@@ -2999,7 +4643,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 +4666,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 +4725,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"
 				})
 			]
@@ -3113,51 +4792,10 @@ function ServerPanel(arg0) {
 		})
 	});
 }
-function AuthPanel(arg0) {
-	const { authOptions, selectedAuthName, selectedAuth, authValues, onSelectAuth, onChangeAuthValue } = arg0;
-	if (authOptions.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-subtle-background) p-3",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid gap-3 sm:grid-cols-(--clarify-openapi-control-grid)",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "flex min-w-0 flex-col gap-1.5",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-2xs font-semibold text-(--clarify-ui-text-soft)",
-					children: "Auth"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineListbox, {
-					label: "Auth",
-					value: selectedAuthName,
-					options: authOptions.map(({ name, scheme }) => ({
-						value: name,
-						label: name,
-						description: authLabel(name, scheme)
-					})),
-					onChange: onSelectAuth
-				})]
-			}), selectedAuth ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "flex min-w-0 flex-col gap-1.5",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-2xs font-semibold text-(--clarify-ui-text-soft)",
-					children: "Credential"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex min-w-0 items-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 shadow-xs",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						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__ */ (0, react_jsx_runtime.jsx)("input", {
-						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)"
-					})]
-				})]
-			}) : null]
-		})
-	});
-}
 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 { method, operationSource, path, servers, selectedServerKey, selectedServer, serverVariables, serverOpen, onSelectServer, onChangeServerVariable, onToggleServer, onTryRequest } = arg0;
+	const t = require_i18n.useBuiltInText();
+	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,58 +4808,41 @@ 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",
-		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",
-				children: [
-					/* @__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, {
-						server: selectedServer,
-						variables: serverVariables,
-						open: serverOpen,
-						interactive: serverInteractive,
-						onToggle: onToggleServer
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointPath, {
-						path,
-						copied: copiedUrl,
-						onCopy: handleCopyUrl
-					}),
-					authOptions.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						"aria-expanded": authOpen,
-						"aria-label": "Auth",
-						onClick: onToggleAuth,
-						className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(lucide_react.UnlockKeyholeIcon, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LockKeyholeIcon, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
-					}) : null
-				]
-			}),
-			serverInteractive && serverOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServerPanel, {
-				servers,
-				selectedKey: selectedServerKey,
-				selectedServer,
-				variables: serverVariables,
-				onSelectServer,
-				onChangeVariable: onChangeServerVariable
-			}) : null,
-			authOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AuthPanel, {
-				authOptions,
-				selectedAuthName,
-				selectedAuth,
-				authValues,
-				onSelectAuth,
-				onChangeAuthValue
-			}) : null
-		]
+		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",
+			children: [
+				/* @__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, {
+					path,
+					copied: copiedUrl,
+					onCopy: handleCopyUrl
+				}),
+				onTryRequest ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SendRequestButton, {
+					label: t("openapi.tryRequest"),
+					onClick: onTryRequest
+				}) : null
+			]
+		}), serverInteractive && !directServerSelect && serverOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServerPanel, {
+			servers,
+			selectedKey: selectedServerKey,
+			selectedServer,
+			variables: serverVariables,
+			onSelectServer,
+			onChangeVariable: onChangeServerVariable
+		}) : null]
 	});
 }
 function OpenApiOperation(arg0) {
@@ -3234,8 +4855,9 @@ function OpenApiOperation(arg0) {
 	const authState = useOperationAuthState(spec, operation);
 	const [linkedExampleKey, setLinkedExampleKey] = (0, react.useState)("");
 	const [selectedResponseStatus, setSelectedResponseStatus] = (0, react.useState)(() => getDefaultResponseStatus(operation, spec));
+	const [requestOpen, setRequestOpen] = (0, react.useState)(false);
 	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, {
@@ -3251,23 +4873,19 @@ function OpenApiOperation(arg0) {
 				selectedServer: serverState.selectedServer,
 				serverVariables: serverState.serverVariables,
 				serverOpen: serverState.serverOpen,
-				authOptions: authState.authOptions,
-				selectedAuthName: authState.selectedAuthName,
-				selectedAuth: authState.selectedAuth,
-				authValues: authState.authValues,
-				authOpen: authState.authOpen,
 				onSelectServer: serverState.onSelectServer,
 				onChangeServerVariable: serverState.onChangeServerVariable,
-				onToggleServer: () => {
-					serverState.onToggleServer();
-					authState.closeAuth();
-				},
-				onToggleAuth: () => {
-					authState.onToggleAuth();
-					serverState.closeServer();
-				},
-				onSelectAuth: authState.onSelectAuth,
-				onChangeAuthValue: authState.onChangeAuthValue
+				onToggleServer: serverState.onToggleServer,
+				onTryRequest: () => setRequestOpen(true)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiRequestDialog, {
+				open: requestOpen,
+				onClose: () => setRequestOpen(false),
+				spec,
+				path,
+				method,
+				operation,
+				operationSource
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointRequest, {
 				spec,
@@ -3397,6 +5015,12 @@ Object.defineProperty(exports, "OpenApiOperation", {
 		return OpenApiOperation;
 	}
 });
+Object.defineProperty(exports, "OpenApiRequestWorkbench", {
+	enumerable: true,
+	get: function() {
+		return OpenApiRequestWorkbench;
+	}
+});
 Object.defineProperty(exports, "Pre", {
 	enumerable: true,
 	get: function() {
@@ -3421,6 +5045,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 +5142,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-B52IWlKb.cjs.map
+//# sourceMappingURL=OpenApiOperation-D-5uE5v7.cjs.map