@clarify-labs/renderer 0.10.2 → 0.11.0

package/output/{OpenApiOperation-DgrqzeiS.js → OpenApiOperation-C2vJztWZ.js}

@@ -1,11 +1,11 @@
-import { a as useConfig, s as useLocale, t as useBuiltInText } from "./i18n-DnqZHFT7.js";
-import { C as isExternalHref, E as copyTextToClipboard, c as lucideIconRegistry, h as useTheme, l as resolveLucideIconName, n as PageTitleActions, o as useSectionStore, s as remToPx, w as localizeHref } from "./PageActions-D7K9LDGf.js";
+import { a as useConfig, s as useLocale, t as useBuiltInText } from "./i18n-BPrC45nD.js";
+import { C as isExternalHref, E as copyTextToClipboard, c as lucideIconRegistry, h as useTheme, l as resolveLucideIconName, n as PageTitleActions, o as useSectionStore, s as remToPx, w as localizeHref } from "./PageActions-bugd7GZh.js";
 import { t as markdownRemarkPlugins } from "./remark-C9iRQM0R.js";
 import clsx from "clsx";
-import { Children, Suspense, createContext, createElement, forwardRef, isValidElement, lazy, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Children, Suspense, cloneElement, createContext, createElement, forwardRef, isValidElement, lazy, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition } from "@headlessui/react";
-import { AlertTriangle, ArrowRight, Check, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, CopyIcon, Info, Lightbulb, LinkIcon, LockKeyholeIcon, PackageIcon, ServerIcon, UnlockKeyholeIcon, XCircle } from "lucide-react";
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, Listbox, ListboxButton, ListboxOption, ListboxOptions, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition } from "@headlessui/react";
+import { AlertTriangle, ArrowRight, ArrowUpRight, Check, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleAlertIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, CopyIcon, DownloadIcon, EraserIcon, File, FileX2Icon, Folder, FolderOpen, Info, InfoIcon, Lightbulb, LinkIcon, LoaderCircleIcon, Maximize2, PackageIcon, RotateCcwIcon, SearchIcon, SendIcon, ServerIcon, X, XCircle, XIcon } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { motion, useInView } from "framer-motion";
 import { create } from "zustand";
@@ -26,6 +26,32 @@ var __exportAll = (all, no_symbols) => {
 	return target;
 };
 //#endregion
+//#region source/components/AccordionGroup.tsx
+function AccordionGroup(arg0) {
+	const { children, multiple = false, className, ...props } = arg0;
+	const childArray = Children.toArray(children);
+	const [openIndex, setOpenIndex] = useState(() => {
+		const defaultIndex = childArray.findIndex((child) => isValidElement(child) && child.props.defaultOpen);
+		return defaultIndex === -1 ? null : defaultIndex;
+	});
+	const items = childArray.map((child, index) => {
+		if (!isValidElement(child)) return child;
+		if (multiple) return child;
+		return cloneElement(child, {
+			open: openIndex === index,
+			onOpenChange: (open) => {
+				child.props.onOpenChange?.(open);
+				setOpenIndex(open ? index : null);
+			}
+		});
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("clarify-accordion-group my-6 divide-y divide-(--clarify-theme-tokens-colors-border) overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) [&_.clarify-collapse]:my-0 [&_.clarify-collapse]:rounded-none [&_.clarify-collapse]:border-0", className),
+		...props,
+		children: items
+	});
+}
+//#endregion
 //#region source/components/LocalizedLink.tsx
 function useLocalizedHref(href) {
 	return localizeHref(href, useConfig(), useLocale());
@@ -45,15 +71,15 @@ function LocalizedLink(arg0) {
 //#endregion
 //#region source/components/Button.tsx
 var buttonVariantStyles = {
-	primary: "rounded-full bg-(--clarify-theme-tokens-colors-foreground) px-3 py-1 text-(--clarify-theme-tokens-colors-background) hover:opacity-80 dark:bg-(--clarify-theme-tokens-colors-primary)/10 dark:text-(--clarify-theme-tokens-colors-primary) dark:ring-1 dark:ring-inset dark:ring-(--clarify-theme-tokens-colors-primary)/20 dark:hover:opacity-80",
-	secondary: "rounded-full bg-(--clarify-theme-tokens-colors-code-background) px-3 py-1 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-theme-tokens-colors-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
-	filled: "rounded-full bg-(--clarify-theme-tokens-colors-foreground) px-3 py-1 text-(--clarify-theme-tokens-colors-background) hover:opacity-80 dark:bg-(--clarify-theme-tokens-colors-primary) dark:hover:opacity-80",
-	outline: "rounded-full px-3 py-1 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-theme-tokens-colors-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
+	primary: "bg-(--clarify-theme-tokens-colors-foreground) px-4 text-(--clarify-theme-tokens-colors-background) shadow-sm hover:-translate-y-px hover:shadow-md active:translate-y-0 active:shadow-sm dark:bg-(--clarify-theme-tokens-colors-primary) dark:text-zinc-950",
+	secondary: "bg-(--clarify-theme-tokens-colors-code-background) px-4 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-theme-tokens-colors-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
+	filled: "bg-(--clarify-theme-tokens-colors-primary) px-4 text-white shadow-sm hover:-translate-y-px hover:shadow-md active:translate-y-0 dark:text-zinc-950",
+	outline: "px-4 text-(--clarify-ui-text-soft) ring-1 ring-inset ring-(--clarify-theme-tokens-colors-border) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)",
 	text: "text-(--clarify-theme-tokens-colors-primary) hover:opacity-80 dark:text-(--clarify-theme-tokens-colors-primary) dark:hover:opacity-80"
 };
 function Button(arg0) {
 	const { variant = "primary", className, children, arrow, ...props } = arg0;
-	const classes = clsx("clarify-button not-prose inline-flex w-fit max-w-full items-center justify-center gap-1 overflow-hidden align-middle text-sm leading-6 font-medium whitespace-nowrap no-underline transition", buttonVariantStyles[variant], className);
+	const classes = clsx("clarify-button not-prose inline-flex w-fit max-w-full items-center justify-center gap-1.5 overflow-hidden align-middle text-sm font-semibold whitespace-nowrap no-underline transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) focus-visible:ring-offset-2 focus-visible:ring-offset-(--clarify-theme-tokens-colors-background)", variant === "text" ? "h-auto rounded-sm" : "h-9 rounded-(--clarify-theme-tokens-radius-lg)", buttonVariantStyles[variant], className);
 	const arrowIcon = /* @__PURE__ */ jsx(ArrowRight, {
 		"aria-hidden": "true",
 		className: clsx("h-4 w-4 shrink-0", variant === "text" && "relative top-px", arrow === "left" && "-ml-0.5 rotate-180", arrow === "right" && "-mr-0.5")
@@ -81,37 +107,43 @@ function Button(arg0) {
 //#region source/components/Callout.tsx
 var calloutStyles = {
 	info: {
-		container: "border-sky-500/20 bg-sky-50/50 text-sky-950 dark:border-sky-400/30 dark:bg-sky-400/5 dark:text-sky-100",
+		container: "border-sky-500/20 bg-sky-50/30 dark:border-sky-400/20 dark:bg-sky-400/5",
+		iconContainer: "bg-sky-100 ring-sky-500/15 dark:bg-sky-400/10 dark:ring-sky-400/20",
 		icon: "text-sky-600 dark:text-sky-400",
 		title: "text-sky-900 dark:text-sky-100",
 		Icon: Info
 	},
 	note: {
-		container: "border-zinc-500/20 bg-zinc-50 text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-200",
+		container: "border-zinc-500/20 bg-zinc-50/50 dark:border-white/10 dark:bg-white/5",
+		iconContainer: "bg-zinc-200/70 ring-zinc-500/15 dark:bg-white/10 dark:ring-white/10",
 		icon: "text-zinc-500 dark:text-zinc-400",
 		title: "text-zinc-900 dark:text-white",
 		Icon: Info
 	},
 	tip: {
-		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
+		container: "border-emerald-500/20 bg-emerald-50/30 dark:border-emerald-400/20 dark:bg-emerald-400/5",
+		iconContainer: "bg-emerald-100 ring-emerald-500/15 dark:bg-emerald-400/10 dark:ring-emerald-400/20",
 		icon: "text-emerald-600 dark:text-emerald-400",
 		title: "text-emerald-900 dark:text-emerald-100",
 		Icon: Lightbulb
 	},
 	warning: {
-		container: "border-amber-500/20 bg-amber-50/70 text-amber-950 dark:border-amber-400/30 dark:bg-amber-400/5 dark:text-amber-100",
+		container: "border-amber-500/20 bg-amber-50/40 dark:border-amber-400/20 dark:bg-amber-400/5",
+		iconContainer: "bg-amber-100 ring-amber-500/15 dark:bg-amber-400/10 dark:ring-amber-400/20",
 		icon: "text-amber-600 dark:text-amber-400",
 		title: "text-amber-900 dark:text-amber-100",
 		Icon: AlertTriangle
 	},
 	danger: {
-		container: "border-rose-500/20 bg-rose-50/70 text-rose-950 dark:border-rose-400/30 dark:bg-rose-400/5 dark:text-rose-100",
+		container: "border-rose-500/20 bg-rose-50/40 dark:border-rose-400/20 dark:bg-rose-400/5",
+		iconContainer: "bg-rose-100 ring-rose-500/15 dark:bg-rose-400/10 dark:ring-rose-400/20",
 		icon: "text-rose-600 dark:text-rose-400",
 		title: "text-rose-900 dark:text-rose-100",
 		Icon: XCircle
 	},
 	success: {
-		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
+		container: "border-emerald-500/20 bg-emerald-50/30 dark:border-emerald-400/20 dark:bg-emerald-400/5",
+		iconContainer: "bg-emerald-100 ring-emerald-500/15 dark:bg-emerald-400/10 dark:ring-emerald-400/20",
 		icon: "text-emerald-600 dark:text-emerald-400",
 		title: "text-emerald-900 dark:text-emerald-100",
 		Icon: CheckCircle2
@@ -132,15 +164,18 @@ function Callout(arg0) {
 	const Icon = style.Icon;
 	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("clarify-callout my-6 flex gap-3 rounded-(--clarify-theme-tokens-radius-xl) border p-4 text-sm/6", style.container, className),
+		className: clsx("clarify-callout my-6 flex gap-3.5 rounded-(--clarify-theme-tokens-radius-lg) border p-4 text-sm/6 text-(--clarify-ui-text-soft)", style.container, className),
 		...props,
-		children: [icon ? /* @__PURE__ */ jsx(Icon, {
-			className: clsx("mt-1 size-4 flex-none", style.icon),
-			"aria-hidden": "true"
+		children: [icon ? /* @__PURE__ */ jsx("span", {
+			className: clsx("flex size-7 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-md) ring-1 ring-inset", style.iconContainer),
+			children: /* @__PURE__ */ jsx(Icon, {
+				className: clsx("size-4", style.icon),
+				"aria-hidden": "true"
+			})
 		}) : null, /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 flex-1 *:first:mt-0 *:last:mb-0",
 			children: [resolvedTitle ? /* @__PURE__ */ jsx("p", {
-				className: clsx("mb-1 font-semibold", style.title),
+				className: clsx("mb-1.5 font-semibold", style.title),
 				children: resolvedTitle
 			}) : null, /* @__PURE__ */ jsx("div", {
 				className: "*:first:mt-0 *:last:mb-0",
@@ -159,9 +194,9 @@ function CardIcon(arg0) {
 	const Icon = lucideIconRegistry[iconName];
 	if (!Icon) return null;
 	return /* @__PURE__ */ jsx("span", {
-		className: "flex size-9 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border)",
+		className: "flex size-8 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-inset ring-(--clarify-ui-accent-border) transition-colors group-hover:bg-(--clarify-theme-tokens-colors-primary) group-hover:text-white dark:group-hover:text-zinc-950",
 		children: /* @__PURE__ */ jsx(Icon, {
-			className: "size-5",
+			className: "size-4",
 			"aria-hidden": "true"
 		})
 	});
@@ -175,7 +210,7 @@ var cardGroupColumnStyles = {
 function CardGroup(arg0) {
 	const { children, cols = 2, className } = arg0;
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("not-prose my-10 grid gap-4", cardGroupColumnStyles[cols], className),
+		className: clsx("not-prose my-8 grid gap-3", cardGroupColumnStyles[cols], className),
 		children
 	});
 }
@@ -185,11 +220,17 @@ function Card(arg0) {
 		className: "flex items-start gap-4",
 		children: [/* @__PURE__ */ jsx(CardIcon, { name: icon }), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ jsx("h3", {
-				className: "m-0 text-base font-semibold text-(--clarify-theme-tokens-colors-foreground)",
-				children: title
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "m-0 text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+					children: title
+				}), href ? /* @__PURE__ */ jsx(ArrowUpRight, {
+					className: "mt-1 size-3.5 shrink-0 text-(--clarify-ui-text-faint) transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-(--clarify-ui-accent-text)",
+					"aria-hidden": "true"
+				}) : null]
 			}), children ? /* @__PURE__ */ jsx("div", {
-				className: "mt-2 text-sm/6 text-(--clarify-ui-text-soft) *:m-0",
+				className: "mt-1.5 text-sm/6 text-(--clarify-ui-text-soft) *:m-0",
 				children
 			}) : null]
 		})]
@@ -197,7 +238,7 @@ function Card(arg0) {
 		className: "absolute inset-0 rounded-(--clarify-theme-tokens-radius-xl)",
 		"aria-hidden": "true"
 	}) : null] });
-	const classes = clsx("group relative block rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-5 shadow-(--clarify-ui-accent-glow) transition hover:shadow-xs", className);
+	const classes = clsx("group relative block rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-4 transition duration-200", href && "hover:-translate-y-0.5 hover:border-(--clarify-ui-accent-border) hover:shadow-md hover:shadow-zinc-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) focus-visible:ring-offset-2 dark:hover:shadow-none", className);
 	if (!href) return /* @__PURE__ */ jsx("div", {
 		className: classes,
 		children: content
@@ -211,7 +252,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = lazy(() => import("./MermaidViewer-dXsomvM7.js"));
+var MermaidViewer = lazy(() => import("./MermaidViewer-CkIxyqtf.js"));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -337,6 +378,12 @@ function getNodeText(node) {
 	if (isValidElement(node)) return getNodeText(node.props.children);
 	return "";
 }
+function getCodeTitle(node) {
+	if (!isValidElement(node)) return void 0;
+	const { title, children } = node.props;
+	if (title) return title;
+	return Children.toArray(children).map(getCodeTitle).find(Boolean);
+}
 function getCodeLanguage(node) {
 	if (!isValidElement(node)) return void 0;
 	const { className, language, children } = node.props;
@@ -345,7 +392,14 @@ function getCodeLanguage(node) {
 	if (languageClass) return languageClass.slice(9);
 	return 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 = useBuiltInText();
 	const [copyCount, setCopyCount] = useState(0);
@@ -406,7 +460,7 @@ function CodePanel(arg0) {
 			children: [/* @__PURE__ */ jsx("pre", {
 				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-(--clarify-code-text)",
 				children
-			}), /* @__PURE__ */ jsx(CopyButton, { code: copyText })]
+			}), /* @__PURE__ */ jsx(CopyButton$1, { code: copyText })]
 		})]
 	});
 }
@@ -425,10 +479,7 @@ function CodeGroupHeader(arg0) {
 			className: "clarify-code-tabs -mr-2 -mb-px flex gap-0 text-xs font-medium",
 			children: Children.map(children, (child, childIndex) => /* @__PURE__ */ jsxs(Tab, {
 				className: clsx("clarify-code-tab relative border-b border-transparent px-2 py-3 transition-colors hover:bg-(--clarify-code-control-background-hover) data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "text-(--clarify-code-accent-text)" : "text-(--clarify-code-control-text) hover:text-(--clarify-code-text)"),
-				children: [getPanelTitle({
-					...isValidElement(child) ? child.props : {},
-					fallbackTitle: t("actions.code")
-				}), childIndex === selectedIndex ? /* @__PURE__ */ jsx(motion.span, {
+				children: [getCodePanelTitle(child, t("actions.code")), childIndex === selectedIndex ? /* @__PURE__ */ jsx(motion.span, {
 					layoutId: indicatorLayoutId,
 					className: "absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-(--clarify-code-accent-text)",
 					transition: {
@@ -502,10 +553,7 @@ var CodeGroupContext = createContext(false);
 function CodeGroup(arg0) {
 	const { children, title, ...props } = arg0;
 	const t = useBuiltInText();
-	const tabGroupProps = useTabGroupProps(Children.map(children, (child) => getPanelTitle({
-		...isValidElement(child) ? child.props : {},
-		fallbackTitle: t("actions.code")
-	})) ?? []);
+	const tabGroupProps = useTabGroupProps(Children.map(children, (child) => getCodePanelTitle(child, t("actions.code"))) ?? []);
 	const hasTabs = Children.count(children) > 1;
 	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)";
 	const header = /* @__PURE__ */ jsx(CodeGroupHeader, {
@@ -561,8 +609,9 @@ function Pre(arg0) {
 //#endregion
 //#region source/components/Collapse.tsx
 function Collapse(arg0) {
-	const { children, title, summary, defaultOpen = false, className, ...props } = arg0;
-	const [open, setOpen] = useState(defaultOpen);
+	const { children, title, summary, defaultOpen = false, open: controlledOpen, onOpenChange, className, ...props } = arg0;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const open = controlledOpen ?? uncontrolledOpen;
 	const contentRef = useRef(null);
 	const [maxHeight, setMaxHeight] = useState("0px");
 	const summaryLabel = title ?? summary ?? "Details";
@@ -572,16 +621,20 @@ function Collapse(arg0) {
 		setMaxHeight(open ? `${contentRef.current.scrollHeight}px` : "0px");
 	}, [open, children]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)", className),
+		className: clsx("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) transition-colors", open && "border-(--clarify-ui-accent-border)", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: "flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-sm font-semibold text-(--clarify-theme-tokens-colors-foreground) transition hover:bg-(--clarify-ui-hover-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) focus-visible:ring-offset-2 focus-visible:ring-offset-(--clarify-theme-tokens-colors-background)",
+			className: "flex min-h-11 w-full cursor-pointer items-center justify-between gap-3 px-4 py-2.5 text-left text-sm font-semibold text-(--clarify-theme-tokens-colors-foreground) transition hover:bg-(--clarify-ui-hover-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
 			"aria-expanded": open,
 			"aria-controls": contentId,
-			onClick: () => setOpen((value) => !value),
+			onClick: () => {
+				const nextOpen = !open;
+				if (controlledOpen === void 0) setUncontrolledOpen(nextOpen);
+				onOpenChange?.(nextOpen);
+			},
 			children: [/* @__PURE__ */ jsx("span", { children: summaryLabel }), /* @__PURE__ */ jsx(ChevronDown, {
-				className: clsx("h-4 w-4 text-(--clarify-theme-tokens-colors-muted) transition-transform duration-200", open && "rotate-180"),
+				className: clsx("size-4 rounded-full text-(--clarify-ui-text-faint) transition duration-200", open && "rotate-180"),
 				"aria-hidden": "true"
 			})]
 		}), /* @__PURE__ */ jsx("div", {
@@ -593,7 +646,7 @@ function Collapse(arg0) {
 			},
 			children: /* @__PURE__ */ jsx("div", {
 				ref: contentRef,
-				className: clsx("px-4 py-4 text-sm/6 text-(--clarify-theme-tokens-colors-foreground) transition-opacity duration-200 ease-out", open ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-1"),
+				className: clsx("px-4 py-4 text-sm/6 text-(--clarify-ui-text-soft) transition-opacity duration-200 ease-out *:first:mt-0 *:last:mb-0", open ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-1"),
 				children
 			})
 		})]
@@ -669,6 +722,55 @@ function Feedback() {
 	});
 }
 //#endregion
+//#region source/components/FileTree.tsx
+function FileTree(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("clarify-file-tree not-prose my-6 overflow-x-auto rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-4 py-3 font-mono text-[13px]/6 text-(--clarify-ui-text-soft)", className),
+		...props,
+		children: /* @__PURE__ */ jsx("ul", {
+			role: "tree",
+			className: "m-0 min-w-max list-none p-0",
+			children
+		})
+	});
+}
+function FileTreeItem(arg0) {
+	const { name, description, type, children, className, ...props } = arg0;
+	const isFolder = type === "folder" || children != null;
+	const FolderIcon = children ? FolderOpen : Folder;
+	return /* @__PURE__ */ jsxs("li", {
+		role: "treeitem",
+		"aria-expanded": isFolder ? children != null : void 0,
+		className: clsx("clarify-file-tree-item m-0 p-0", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-6 items-center gap-2 whitespace-nowrap",
+			children: [
+				isFolder ? /* @__PURE__ */ jsx(FolderIcon, {
+					className: "size-4 flex-none text-(--clarify-ui-accent-text)",
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ jsx(File, {
+					className: "size-4 flex-none text-(--clarify-ui-text-faint)",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-(--clarify-theme-tokens-colors-foreground)",
+					children: name
+				}),
+				description ? /* @__PURE__ */ jsx("span", {
+					className: "font-sans text-xs text-(--clarify-ui-text-faint)",
+					children: description
+				}) : null
+			]
+		}), children ? /* @__PURE__ */ jsx("ul", {
+			role: "group",
+			className: "m-0 ml-2.5 list-none border-l border-(--clarify-theme-tokens-colors-border) pl-4",
+			children
+		}) : null]
+	});
+}
+//#endregion
 //#region source/components/Tag.tsx
 var tagVariantStyles = {
 	small: "",
@@ -875,10 +977,50 @@ function Prose(arg0) {
 	});
 }
 //#endregion
+//#region source/components/Steps.tsx
+function Steps(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ jsx("ol", {
+		className: clsx("clarify-steps my-8 ml-3 list-none border-l-2 border-(--clarify-theme-tokens-colors-border) p-0", className),
+		...props,
+		children
+	});
+}
+function Step(arg0) {
+	const { children, title, className, ...props } = arg0;
+	return /* @__PURE__ */ jsxs("li", {
+		className: clsx("clarify-step relative m-0 pb-10 pl-9 last:pb-0", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "absolute top-0 -left-3.5 flex size-7 items-center justify-center rounded-full bg-(--clarify-theme-tokens-colors-primary) text-xs font-semibold text-white shadow-[0_0_0_4px_var(--clarify-theme-tokens-colors-background)] before:content-[counter(list-item)] dark:text-zinc-950",
+				"aria-hidden": "true"
+			}),
+			title ? /* @__PURE__ */ jsx("h3", {
+				className: "m-0 pt-0.5 text-base font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+				children: title
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: clsx("text-sm/6 text-(--clarify-ui-text-soft) *:last:mb-0", title && "mt-2.5", !title && "*:first:mt-0"),
+				children
+			})
+		]
+	});
+}
+//#endregion
 //#region source/components/Tabs.tsx
+function TabItem(_props) {
+	return null;
+}
 function Tabs(arg0) {
-	const { items, selectedIndex, onChange, className, listClassName, panelsClassName } = arg0;
-	const [internalIndex, setInternalIndex] = useState(0);
+	const { items, children, defaultValue, selectedIndex, onChange, className, listClassName, panelsClassName } = arg0;
+	const childItems = Children.toArray(children).filter((child) => isValidElement(child) && child.type === TabItem).map((child, index) => ({
+		id: child.props.value ?? `tab-${index}`,
+		label: child.props.title,
+		panel: child.props.children
+	}));
+	const resolvedItems = items ?? childItems;
+	const [internalIndex, setInternalIndex] = useState(defaultValue ? Math.max(0, resolvedItems.findIndex((item) => item.id === defaultValue)) : 0);
 	const resolvedIndex = typeof selectedIndex === "number" ? selectedIndex : internalIndex;
 	const indicatorLayoutId = useId();
 	const handleChange = (index) => {
@@ -888,32 +1030,93 @@ function Tabs(arg0) {
 	return /* @__PURE__ */ jsxs(TabGroup, {
 		selectedIndex: resolvedIndex,
 		onChange: handleChange,
-		className,
+		className: clsx("clarify-tabs my-6", className),
 		children: [/* @__PURE__ */ jsx(TabList, {
-			className: clsx("-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__ */ jsx(Tab, {
-				className: ({ selected }) => clsx("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: clsx("flex max-w-full items-stretch gap-1 overflow-x-auto border-b border-(--clarify-theme-tokens-colors-border)", listClassName),
+			children: resolvedItems.map((item) => /* @__PURE__ */ jsx(Tab, {
+				className: ({ selected }) => clsx("clarify-content-tab clarify-ui-tab relative my-1 inline-flex h-9 shrink-0 items-center rounded-(--clarify-theme-tokens-radius-md) px-2.5 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)", selected && "clarify-ui-tab-active"),
 				children: ({ selected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: item.label }), selected ? /* @__PURE__ */ jsx(motion.span, {
 					layoutId: indicatorLayoutId,
-					className: "absolute inset-x-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__ */ jsx(TabPanels, {
-			className: clsx("mt-4", panelsClassName),
-			children: items.map((item) => /* @__PURE__ */ jsx(TabPanel, {
-				className: "focus:outline-none",
+			className: clsx("mt-5", panelsClassName),
+			children: resolvedItems.map((item) => /* @__PURE__ */ jsx(TabPanel, {
+				className: "focus:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
 				children: item.panel
 			}, item.id))
 		})]
 	});
 }
 //#endregion
+//#region source/components/Tooltip.tsx
+function Tooltip(arg0) {
+	const { content, children, side = "top", className, triggerClassName, ...props } = arg0;
+	const contentId = useId();
+	const [open, setOpen] = useState(false);
+	const triggerRef = useRef(null);
+	const tooltipRef = useRef(null);
+	const [position, setPosition] = useState();
+	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]);
+	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__ */ jsxs("span", {
+		className: clsx("clarify-tooltip group inline-flex align-baseline", className),
+		onMouseEnter: () => setOpen(true),
+		onMouseLeave: () => setOpen(false),
+		...props,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			ref: triggerRef,
+			"aria-describedby": contentId,
+			"aria-expanded": open,
+			className: clsx("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__ */ jsx("span", {
+			ref: tooltipRef,
+			id: contentId,
+			role: "tooltip",
+			popover: "manual",
+			style: position,
+			className: clsx("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;
@@ -936,53 +1139,122 @@ function WebFrame(arg0) {
 		children
 	});
 	if (!showWindow) return /* @__PURE__ */ jsx("div", {
-		className: clsx("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-accent-glow)", className),
+		className: clsx("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-lg shadow-zinc-900/5 dark:shadow-none", className),
 		children: frame
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-(--clarify-ui-accent-glow)", className),
+		className: clsx("clarify-web-frame not-prose my-10 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-lg shadow-zinc-900/5 dark:shadow-none", className),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex h-10 items-center gap-2 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background) px-4",
+			className: "grid h-10 grid-cols-[1fr_minmax(0,2fr)_1fr] items-center gap-3 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background) px-3",
 			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: "size-3 rounded-full bg-red-400",
-					"aria-hidden": "true"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "size-3 rounded-full bg-yellow-400",
-					"aria-hidden": "true"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "size-3 rounded-full bg-green-400",
-					"aria-hidden": "true"
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-red-400/80" }),
+						/* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-amber-400/80" }),
+						/* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-emerald-400/80" })
+					]
 				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sr-only",
+				/* @__PURE__ */ jsx("div", {
+					className: "truncate rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-3 py-1 text-center text-xs text-(--clarify-ui-text-faint)",
 					children: title
-				})
+				}),
+				/* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
 			]
 		}), frame]
 	});
 }
 //#endregion
+//#region source/components/Image.tsx
+function Image(arg0) {
+	const { src, alt = "", caption, zoom = false, className, ...props } = arg0;
+	const [open, setOpen] = useState(false);
+	const image = /* @__PURE__ */ jsx("img", {
+		...props,
+		src,
+		alt,
+		className: clsx("block h-auto max-w-full object-contain", className)
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "clarify-figure not-prose mx-auto my-8 w-fit max-w-full",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "group relative w-fit max-w-full overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-subtle-background)",
+				children: zoom ? /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "block max-w-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+					"aria-label": `Enlarge image: ${alt}`,
+					onClick: () => setOpen(true),
+					children: [image, /* @__PURE__ */ jsx("span", {
+						className: "absolute right-3 bottom-3 grid size-8 place-items-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background)/90 text-(--clarify-ui-text-soft) opacity-0 shadow-sm transition group-hover:opacity-100 group-focus-within:opacity-100",
+						children: /* @__PURE__ */ jsx(Maximize2, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					})]
+				}) : image
+			}),
+			caption ? /* @__PURE__ */ jsx("figcaption", {
+				className: "mt-2 text-center text-xs/5 text-(--clarify-ui-text-faint)",
+				children: caption
+			}) : null,
+			zoom ? /* @__PURE__ */ jsxs(Dialog, {
+				open,
+				onClose: setOpen,
+				className: "relative z-50",
+				children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/75 backdrop-blur-sm" }), /* @__PURE__ */ jsx("div", {
+					className: "fixed inset-0 flex items-center justify-center p-4 sm:p-8",
+					children: /* @__PURE__ */ jsxs(DialogPanel, {
+						className: "relative max-h-full max-w-full overflow-auto rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-theme-tokens-colors-background) p-2 shadow-2xl",
+						children: [/* @__PURE__ */ jsx("img", {
+							src,
+							alt,
+							className: "max-h-[calc(100dvh-5rem)] max-w-[calc(100vw-5rem)] object-contain"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "absolute top-4 right-4 grid size-9 place-items-center rounded-md border border-white/20 bg-black/65 text-white transition hover:bg-black/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white",
+							"aria-label": "Close image preview",
+							onClick: () => setOpen(false),
+							children: /* @__PURE__ */ jsx(X, {
+								className: "size-4",
+								"aria-hidden": "true"
+							})
+						})]
+					})
+				})]
+			}) : null
+		]
+	});
+}
+//#endregion
 //#region source/mdx/primitives.tsx
 var primitives_exports = /* @__PURE__ */ __exportAll({
+	AccordionGroup: () => AccordionGroup,
 	Button: () => Button,
 	Callout: () => Callout,
 	Card: () => Card,
 	CardGroup: () => CardGroup,
 	CodeGroup: () => CodeGroup,
 	Col: () => Col,
+	FileTree: () => FileTree,
+	FileTreeItem: () => FileTreeItem,
 	Note: () => Note,
 	Properties: () => Properties,
 	Property: () => Property,
 	Row: () => Row,
+	Step: () => Step,
+	Steps: () => Steps,
+	Tab: () => TabItem,
+	Tabs: () => Tabs,
+	Tooltip: () => Tooltip,
 	WebFrame: () => WebFrame,
 	a: () => a,
 	code: () => code,
 	h1: () => h1,
 	h2: () => h2,
 	h3: () => h3,
+	img: () => img,
 	pre: () => pre,
 	table: () => table,
 	wrapper: () => wrapper
@@ -1027,6 +1299,7 @@ function h1(arg0) {
 }
 var code = Code;
 var pre = Pre;
+var img = Image;
 function h2(props) {
 	return createElement(Heading, {
 		level: 2,
@@ -1042,8 +1315,8 @@ function h3(props) {
 function Note(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-note my-6 flex gap-2.5 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) p-4 text-sm/6 text-(--clarify-theme-tokens-colors-foreground) [--tw-prose-links-hover:var(--clarify-ui-accent-text)] [--tw-prose-links:var(--clarify-theme-tokens-colors-foreground)]",
-		children: [/* @__PURE__ */ jsx(Info, { className: "mt-1 h-4 w-4 flex-none stroke-(--clarify-ui-accent-text)" }), /* @__PURE__ */ jsx("div", {
+		className: "clarify-note my-6 flex gap-3 rounded-r-(--clarify-theme-tokens-radius-lg) border-l-2 border-(--clarify-theme-tokens-colors-primary) bg-(--clarify-ui-subtle-background) px-4 py-3 text-sm/6 text-(--clarify-ui-text-soft) [--tw-prose-links-hover:var(--clarify-ui-accent-text)] [--tw-prose-links:var(--clarify-theme-tokens-colors-foreground)]",
+		children: [/* @__PURE__ */ jsx(Info, { className: "mt-1 size-4 flex-none stroke-(--clarify-ui-accent-text)" }), /* @__PURE__ */ jsx("div", {
 			className: "*:first:mt-0 *:last:mb-0",
 			children
 		})]
@@ -1417,6 +1690,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__ */ jsx("span", {
+		className: clsx("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 = createCssVariablesTheme();
 function HighlightedCode(arg0) {
@@ -1474,6 +1764,15 @@ var snippetControlCharacters = [
 	}
 ];
 var snippetGenerator = 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);
@@ -1492,7 +1791,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;
@@ -1500,16 +1799,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;
 }
@@ -1557,15 +1856,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 } : {}
 	};
@@ -1883,6 +2181,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,
@@ -1890,7 +2192,7 @@ function buildRequestCodeExamples(input) {
 		languageKey: option.languageKey,
 		clientKey: option.client,
 		clientTitle: option.clientTitle,
-		code: buildSnippet(input, option)
+		code: buildSnippet(redactedInput, option)
 	}));
 }
 //#endregion
@@ -1902,7 +2204,7 @@ function SelectControl(arg0) {
 		label: option
 	} : option);
 	const selectedOption = normalizedOptions.find((option) => option.value === value) ?? normalizedOptions[0];
-	const wrapperClassName = compact ? "clarify-api-select relative min-w-0 text-xs" : "clarify-api-select relative shrink-0 text-xs";
+	const wrapperClassName = compact ? "clarify-openai-select relative min-w-0 text-xs" : "clarify-openai-select relative shrink-0 text-xs";
 	const buttonSizeClassName = compact ? "w-full min-w-0 max-w-32" : "min-w-28 max-w-48";
 	if (normalizedOptions.length <= 1) return null;
 	return /* @__PURE__ */ jsx(Listbox, {
@@ -1912,7 +2214,7 @@ function SelectControl(arg0) {
 			className: wrapperClassName,
 			children: [/* @__PURE__ */ jsxs(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__ */ jsxs("span", {
 					className: "flex min-w-0 items-center gap-1.5 overflow-hidden",
 					children: [icon ? /* @__PURE__ */ jsx("span", {
@@ -1928,10 +2230,10 @@ function SelectControl(arg0) {
 				})]
 			}), /* @__PURE__ */ jsx(ListboxOptions, {
 				anchor: "bottom end",
-				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-(--clarify-code-surface) p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-(--clarify-code-border) [--anchor-gap:--spacing(1)] focus:outline-none",
+				className: "clarify-openai-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-(--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__ */ jsxs(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__ */ jsx("span", { children: option.label }), /* @__PURE__ */ jsx(CheckIcon, {
 						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
 						"aria-hidden": "true"
@@ -1980,31 +2282,36 @@ function ExampleMetaValue(arg0) {
 	});
 }
 function CodeToolbar(arg0) {
-	const { code, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
+	const { code, leadingControls, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
 	const t = useBuiltInText();
+	const inlineControls = Boolean(leadingControls);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "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__ */ 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__ */ jsx(SelectControl, {
-				label: t("openapi.language"),
-				value: selectedLanguageKey,
-				options: languageOptions,
-				onChange: onSelectLanguage,
-				icon: /* @__PURE__ */ jsx(CodeIcon, {
-					className: "h-3.5 w-3.5",
-					"aria-hidden": "true"
-				})
-			}) : null, clientOptions && clientOptions.length > 1 && selectedClientKey && onSelectClient ? /* @__PURE__ */ jsx(SelectControl, {
-				label: t("openapi.client"),
-				value: selectedClientKey,
-				options: clientOptions,
-				onChange: onSelectClient,
-				icon: /* @__PURE__ */ jsx(PackageIcon, {
-					className: "h-3.5 w-3.5",
-					"aria-hidden": "true"
-				})
-			}) : null]
+			className: `clarify-openai-code-toolbar-controls flex min-w-0 flex-1 items-center gap-2${inlineControls ? " flex-nowrap overflow-x-auto" : " flex-wrap"}`,
+			children: [
+				leadingControls,
+				languageOptions && languageOptions.length > 1 && selectedLanguageKey && onSelectLanguage ? /* @__PURE__ */ jsx(SelectControl, {
+					label: t("openapi.language"),
+					value: selectedLanguageKey,
+					options: languageOptions,
+					onChange: onSelectLanguage,
+					icon: /* @__PURE__ */ jsx(CodeIcon, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					})
+				}) : null,
+				clientOptions && clientOptions.length > 1 && selectedClientKey && onSelectClient ? /* @__PURE__ */ jsx(SelectControl, {
+					label: t("openapi.client"),
+					value: selectedClientKey,
+					options: clientOptions,
+					onChange: onSelectClient,
+					icon: /* @__PURE__ */ jsx(PackageIcon, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					})
+				}) : null
+			]
 		}), /* @__PURE__ */ jsx(CopyCodeButton, { code })]
 	});
 }
@@ -2040,12 +2347,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 "";
@@ -2076,21 +2388,38 @@ function getClientOptions(codeOptions, languageKey) {
 //#endregion
 //#region source/openapi/components/ExamplePanels.tsx
 function ApiExampleCodeGroup(arg0) {
-	const { title, tag, tagOptions, onSelectTag, label, labelOptions, onSelectLabel, comfortableMeta = false, code, language, mediaTypes, selectedMediaType, onSelectMediaType, examples, selectedExampleKey, onSelectExample, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
+	const { title, tag, tagOptions, onSelectTag, label, labelOptions, onSelectLabel, comfortableMeta = false, metaInToolbar = false, code, language, mediaTypes, selectedMediaType, onSelectMediaType, examples, selectedExampleKey, onSelectExample, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
 	const t = useBuiltInText();
-	const metaClassName = comfortableMeta ? "flex min-h-11 min-w-0 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4 py-2" : "flex h-9 min-w-0 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4";
+	const 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__ */ jsxs(Fragment$1, { children: [
+		tag ? /* @__PURE__ */ jsx(ExampleMetaValue, {
+			label: t("openapi.status"),
+			value: tag,
+			options: tagOptions,
+			onChange: onSelectTag,
+			className: "clarify-openai-example-status font-semibold text-emerald-400"
+		}) : null,
+		tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
+		label ? /* @__PURE__ */ jsx(ExampleMetaValue, {
+			label: t("openapi.mediaType"),
+			value: label,
+			options: labelOptions,
+			onChange: onSelectLabel,
+			className: "min-w-0 truncate text-xs text-(--clarify-code-muted)"
+		}) : null
+	] });
 	return /* @__PURE__ */ jsx("div", {
-		className: "clarify-api-example my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)",
+		className: "clarify-openai-example my-6 overflow-hidden rounded-lg border border-(--clarify-code-border) bg-(--clarify-code-background) shadow-sm",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "not-prose",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "clarify-api-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4 py-2",
+					className: "clarify-openai-example-header flex min-h-11 items-center gap-3 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-3.5 py-1.5",
 					children: [/* @__PURE__ */ 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__ */ 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__ */ jsx(SelectControl, {
 							label: t("openapi.mediaType"),
 							value: selectedMediaType,
@@ -2109,30 +2438,15 @@ function ApiExampleCodeGroup(arg0) {
 						}) : null]
 					})]
 				}),
-				tag || label ? /* @__PURE__ */ jsxs("div", {
+				(tag || label) && !metaInToolbar ? /* @__PURE__ */ jsx("div", {
 					className: metaClassName,
-					children: [
-						tag ? /* @__PURE__ */ jsx(ExampleMetaValue, {
-							label: t("openapi.status"),
-							value: tag,
-							options: tagOptions,
-							onChange: onSelectTag,
-							className: "clarify-api-example-status font-semibold text-emerald-400"
-						}) : null,
-						tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
-						label ? /* @__PURE__ */ jsx(ExampleMetaValue, {
-							label: t("openapi.mediaType"),
-							value: label,
-							options: labelOptions,
-							onChange: onSelectLabel,
-							className: "min-w-0 truncate text-xs text-(--clarify-code-muted)"
-						}) : null
-					]
+					children: meta
 				}) : null,
 				/* @__PURE__ */ jsxs("div", {
-					className: "clarify-api-example-code group bg-(--clarify-code-background)",
+					className: "clarify-openai-example-code group bg-(--clarify-code-background)",
 					children: [/* @__PURE__ */ jsx(CodeToolbar, {
 						code,
+						leadingControls: metaInToolbar ? meta : void 0,
 						languageOptions,
 						selectedLanguageKey,
 						onSelectLanguage,
@@ -2328,6 +2642,9 @@ function ResponseExamplesPanel(arg0) {
 	if (!state.selectedContent || !state.responseBody) return null;
 	return /* @__PURE__ */ 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,
@@ -2335,7 +2652,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
@@ -2535,11 +2853,11 @@ function getRootSchemaNode(spec, schema, defaultExpanded) {
 	};
 }
 function EnumValueNode(arg0) {
-	const { node, depth = 0 } = arg0;
+	const { node } = arg0;
 	return /* @__PURE__ */ 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__ */ jsx("div", {
-			className: clsx("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__ */ jsxs("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ jsx("div", {
@@ -2573,7 +2891,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 = clsx("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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 		className: "min-w-0 flex-1",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -2601,7 +2919,7 @@ function SchemaNode(arg0) {
 		children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
 	}) : null] });
 	return /* @__PURE__ */ 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__ */ jsx("button", {
 			type: "button",
 			"aria-label": expanded ? t("openapi.collapse") : t("openapi.expand"),
@@ -2623,7 +2941,7 @@ function SchemaTree(arg0) {
 	if (nodes.length === 0) return null;
 	return /* @__PURE__ */ jsx("ul", {
 		role: "list",
-		className: clsx("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: clsx("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__ */ jsx(SchemaNode, {
 			node,
 			depth,
@@ -2636,7 +2954,7 @@ function SchemaProperties(arg0) {
 	const root = getRootSchemaNode(spec, schema, defaultExpanded);
 	if (!root || root.children.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title }), /* @__PURE__ */ jsx("div", {
-		className: "clarify-schema-properties my-6",
+		className: "clarify-schema-properties not-prose my-6",
 		children: /* @__PURE__ */ jsx(SchemaTree, { nodes: root.children })
 	})] });
 }
@@ -2721,7 +3039,8 @@ function ResponseList(arg0) {
 				response
 			})
 		})),
-		panelsClassName: "mt-4"
+		className: "mt-4 mb-6",
+		panelsClassName: "mt-5"
 	})] });
 }
 //#endregion
@@ -2746,7 +3065,7 @@ function EndpointRequest(arg0) {
 		})] });
 	};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderDescription(), /* @__PURE__ */ jsxs(Row, {
-		className: "relative mt-6",
+		className: "clarify-openapi-request-workspace relative mt-8 pt-6",
 		children: [/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs("div", {
 			className: "w-full",
 			children: [
@@ -2793,9 +3112,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__ */ jsx("div", {
-		className: "mt-6",
+		className: "mt-10 pt-6",
 		children: /* @__PURE__ */ jsxs(Row, {
-			className: "relative",
+			className: "clarify-openapi-response-workspace relative",
 			children: [/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx("div", {
 				className: "w-full",
 				children: /* @__PURE__ */ jsx(ResponseList, {
@@ -2824,6 +3143,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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "block truncate",
+			children: option.label
+		}), option.description ? /* @__PURE__ */ jsx("span", {
+			className: "mt-0.5 block truncate text-2xs text-(--clarify-ui-text-faint)",
+			children: option.description
+		}) : null]
+	}), /* @__PURE__ */ jsx(CheckIcon, {
+		className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
+		"aria-hidden": "true"
+	})] });
+}
+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__ */ jsx(Listbox, {
+		value,
+		onChange,
+		disabled,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("pointer-events-auto relative inline-flex min-w-0 w-full", className),
+			children: [/* @__PURE__ */ jsx(ListboxButton, {
+				"aria-label": label,
+				"aria-invalid": invalid || void 0,
+				"aria-describedby": describedBy,
+				className: clsx(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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selected?.label ?? (value || label)
+				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-ui-text-faint)",
+					"aria-hidden": "true"
+				})] })
+			}), /* @__PURE__ */ jsx(ListboxOptions, {
+				anchor: "bottom start",
+				className: optionsClassName,
+				children: options.map((option) => /* @__PURE__ */ jsx(ListboxOption, {
+					value: option.value,
+					className: optionClassName,
+					children: /* @__PURE__ */ 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__ */ jsx(Listbox, {
+		value,
+		onChange,
+		multiple: true,
+		disabled,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-auto relative inline-flex min-w-0 w-full",
+			children: [/* @__PURE__ */ jsxs(ListboxButton, {
+				"aria-label": label,
+				"aria-invalid": invalid || void 0,
+				"aria-describedby": describedBy,
+				className: clsx(defaultButtonClassName, "min-h-8 w-full px-2 text-xs"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selectedLabel || label
+				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-ui-text-faint)",
+					"aria-hidden": "true"
+				})]
+			}), /* @__PURE__ */ jsx(ListboxOptions, {
+				anchor: "bottom start",
+				className: optionsClassName,
+				children: options.map((option) => /* @__PURE__ */ jsx(ListboxOption, {
+					value: option.value,
+					className: optionClassName,
+					children: /* @__PURE__ */ 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 = 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);
@@ -2874,9 +3316,13 @@ function useOperationServerState(spec, operation, path, source = "path") {
 }
 function useOperationAuthState(spec, operation) {
 	const authOptions = getAuthOptions(spec, operation);
-	const [selectedAuthName, setSelectedAuthName] = useState(authOptions[0]?.name ?? "");
-	const selectedAuth = authOptions.find((option) => option.name === selectedAuthName);
-	const [authValues, setAuthValues] = useState({});
+	const [selectedAuthName, setSelectedAuthName] = 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] = useState(false);
 	return {
 		authOptions,
@@ -2884,104 +3330,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__ */ jsx("span", {
-		className: clsx("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 = useBuiltInText();
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "min-w-0 flex-1 overflow-x-auto text-sm font-bold leading-6 whitespace-nowrap",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "select-text font-mono text-(--clarify-theme-tokens-colors-foreground)",
-				children: path || "/"
-			})
-		}), onCopy ? /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": copied ? t("actions.copied") : t("actions.copy"),
-			title: copied ? t("actions.copied") : t("actions.copy"),
-			onClick: onCopy,
-			className: clsx("flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", copied && "border-emerald-400/70 bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-200"),
-			children: copied ? /* @__PURE__ */ jsx(CheckIcon, {
-				className: "h-3.5 w-3.5",
-				"aria-hidden": "true"
-			}) : /* @__PURE__ */ jsx(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 = useBuiltInText();
+	if (authOptions.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid divide-y divide-(--clarify-theme-tokens-colors-border)",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
+			children: [/* @__PURE__ */ 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__ */ 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__ */ jsxs("label", {
+			className: "group grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
+			children: [/* @__PURE__ */ 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__ */ jsxs("div", {
+				className: "flex min-w-0 items-center focus-within:bg-(--clarify-ui-hover-background)",
+				children: [/* @__PURE__ */ 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__ */ 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__ */ jsx(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 = 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__ */ jsxs(Tooltip, {
+		content: /* @__PURE__ */ 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__ */ jsx(InfoIcon, {
+			className: "size-4",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: t("openapi.fieldDescription")
+		})]
+	}) : null;
+	return /* @__PURE__ */ 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__ */ jsx("div", {
+				className: "flex min-h-8 items-center justify-center border-r border-(--clarify-theme-tokens-colors-border)",
+				children: /* @__PURE__ */ 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__ */ jsx("div", {
+				className: "flex min-h-8 min-w-0 items-center border-r border-(--clarify-theme-tokens-colors-border) px-2",
+				children: /* @__PURE__ */ 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__ */ jsx("span", {
+							className: "truncate font-mono",
+							children: parameter.name
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono text-2xs text-(--clarify-ui-text-faint)",
+							children: type
+						}),
+						parameter.required ? /* @__PURE__ */ jsx("span", {
+							className: "text-(--clarify-error-accent-text)",
+							children: "*"
+						}) : null
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("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__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: itemOptions.length > 0 ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("details", {
+		open: defaultOpen,
+		className: clsx("group shrink-0 border-b border-(--clarify-theme-tokens-colors-border)", className),
+		children: [/* @__PURE__ */ 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__ */ jsx(ChevronDownIcon, {
+					className: "size-4 shrink-0 -rotate-90 transition group-open:rotate-0",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1",
+					children: title
+				}),
+				typeof count === "number" ? /* @__PURE__ */ jsx("span", {
+					className: "font-mono text-xs text-(--clarify-ui-text-faint)",
+					children: count
+				}) : null,
+				actions ? /* @__PURE__ */ jsx("span", {
+					className: "flex items-center gap-1",
+					onClick: (event) => {
+						event.preventDefault();
+						event.stopPropagation();
+					},
+					children: actions
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: clsx("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__ */ jsx("div", {
+		className: "grid min-h-56 flex-1 place-items-center px-6 py-10 text-center",
+		role: error ? "alert" : "status",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "pointer-events-auto relative inline-flex min-w-0",
-			children: [/* @__PURE__ */ jsxs(ListboxButton, {
-				"aria-label": label,
-				className: clsx("inline-flex min-w-0 items-center gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) font-semibold text-(--clarify-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__ */ jsx("span", {
-					className: "truncate",
-					children: selected?.label ?? value
-				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-ui-text-faint)",
+			className: "max-w-sm",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: clsx("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__ */ jsx(Icon, {
+						className: "size-4.5",
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: clsx("text-sm font-semibold", error ? "text-(--clarify-code-danger)" : "text-(--clarify-code-text)"),
+					children: title
+				}),
+				/* @__PURE__ */ 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__ */ jsx("div", {
+		className: "space-y-1 border-l border-(--clarify-code-border) pl-3",
+		children: value.map((item, index) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+			className: "mr-2 text-(--clarify-code-faint)",
+			children: index
+		}), /* @__PURE__ */ jsx(JsonPreview, { value: item })] }, index))
+	});
+	if (isRecord$1(value)) return /* @__PURE__ */ jsx("div", {
+		className: "space-y-1 border-l border-(--clarify-code-border) pl-3",
+		children: Object.entries(value).map(([key, item]) => /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-[minmax(5rem,auto)_1fr] gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-(--clarify-code-property)",
+				children: key
+			}), /* @__PURE__ */ jsx(JsonPreview, { value: item })]
+		}, key))
+	});
+	if (value === null) return /* @__PURE__ */ jsx("span", {
+		className: "text-(--clarify-code-faint)",
+		children: "null"
+	});
+	if (typeof value === "string") return /* @__PURE__ */ jsx("span", {
+		className: "wrap-break-word text-(--clarify-code-string)",
+		children: value
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-(--clarify-code-number)",
+		children: String(value)
+	});
+}
+function CopyButton(arg0) {
+	const { value } = arg0;
+	const t = useBuiltInText();
+	const [copied, setCopied] = useState(false);
+	async function copy() {
+		const success = await copyTextToClipboard(value);
+		setCopied(success);
+		if (success) window.setTimeout(() => setCopied(false), 1600);
+	}
+	return /* @__PURE__ */ 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__ */ jsx(CheckIcon, {
+			className: "size-4 text-(--clarify-code-success)",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ jsx(CopyIcon, {
+			className: "size-4",
+			"aria-hidden": "true"
+		})
+	});
+}
+function ResponseMedia(arg0) {
+	const { blob, type } = arg0;
+	const elementRef = useRef(null);
+	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__ */ jsx("img", {
+		ref: elementRef,
+		alt: "",
+		className: "max-h-128 max-w-full object-contain"
+	});
+	if (type === "audio") return /* @__PURE__ */ jsx("audio", {
+		ref: elementRef,
+		controls: true,
+		className: "w-full"
+	});
+	return /* @__PURE__ */ jsx("video", {
+		ref: elementRef,
+		controls: true,
+		className: "max-h-128 max-w-full"
+	});
+}
+function ResponsePreview(arg0) {
+	const { exchange } = arg0;
+	const t = useBuiltInText();
+	const contentType = exchange.contentType.toLowerCase();
+	if (!exchange.size) return /* @__PURE__ */ jsx(ResponseState, {
+		icon: FileX2Icon,
+		title: t("openapi.responseBodyEmptyTitle"),
+		description: t("openapi.responseBodyEmpty")
+	});
+	if (contentType.includes("json")) {
+		const parsed = parseJson(exchange.body);
+		return typeof parsed === "undefined" ? /* @__PURE__ */ jsx("pre", {
+			className: "whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
+			children: exchange.body
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "overflow-auto font-mono text-xs/5",
+			children: /* @__PURE__ */ jsx(JsonPreview, { value: parsed })
+		});
+	}
+	if (contentType.startsWith("image/")) return /* @__PURE__ */ jsx(ResponseMedia, {
+		blob: exchange.blob,
+		type: "image"
+	});
+	if (contentType.startsWith("audio/")) return /* @__PURE__ */ jsx(ResponseMedia, {
+		blob: exchange.blob,
+		type: "audio"
+	});
+	if (contentType.startsWith("video/")) return /* @__PURE__ */ jsx(ResponseMedia, {
+		blob: exchange.blob,
+		type: "video"
+	});
+	if (contentType.includes("html")) return /* @__PURE__ */ 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__ */ jsx("pre", {
+		className: "whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
+		children: exchange.body
+	});
+	return /* @__PURE__ */ 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 = useBuiltInText();
+	const [query, setQuery] = useState("");
+	const normalizedQuery = query.trim().toLowerCase();
+	const headers = normalizedQuery ? sourceHeaders.filter(([name, value]) => `${name} ${value}`.toLowerCase().includes(normalizedQuery)) : sourceHeaders;
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ 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__ */ jsx(SearchIcon, {
+					className: "size-4 shrink-0 text-(--clarify-code-muted)",
 					"aria-hidden": "true"
-				})]
-			}), /* @__PURE__ */ jsx(ListboxOptions, {
-				anchor: "bottom start",
-				className: "z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-(--clarify-theme-tokens-colors-surface) p-1 text-xs shadow-lg shadow-black/10 ring-1 ring-(--clarify-theme-tokens-colors-border) [--anchor-gap:--spacing(1)] focus:outline-none",
-				children: options.map((option) => /* @__PURE__ */ jsxs(ListboxOption, {
-					value: option.value,
-					className: "group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs text-(--clarify-ui-text) select-none data-focus:bg-(--clarify-ui-hover-background) data-focus:text-(--clarify-ui-text-strong) data-selected:bg-(--clarify-ui-active-background) data-selected:text-(--clarify-ui-accent-text)",
-					children: [/* @__PURE__ */ jsxs("span", {
-						className: "min-w-0",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "block truncate",
-							children: option.label
-						}), option.description ? /* @__PURE__ */ jsx("span", {
-							className: "mt-0.5 block truncate text-2xs text-(--clarify-ui-text-faint)",
-							children: option.description
-						}) : null]
-					}), /* @__PURE__ */ jsx(CheckIcon, {
-						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: t("openapi.searchHeaders")
+				}),
+				/* @__PURE__ */ 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__ */ jsx("div", {
+			className: "overflow-x-auto",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full min-w-96 table-fixed border-collapse text-left font-mono text-xs/5",
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "bg-(--clarify-code-control-background) text-(--clarify-code-muted)",
+					children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: "w-2/5 border-r border-(--clarify-code-border) px-3 py-2 font-semibold",
+							children: t("openapi.headerName")
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "px-3 py-2 font-semibold",
+							children: t("openapi.headerValue")
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "w-10",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: t("actions.copy")
+							})
+						})
+					] })
+				}), /* @__PURE__ */ jsx("tbody", { children: headers.map(([name, value], index) => /* @__PURE__ */ jsxs("tr", {
+					className: "border-t border-(--clarify-code-border) hover:bg-(--clarify-code-control-background)",
+					children: [
+						/* @__PURE__ */ jsx("td", {
+							className: "break-all border-r border-(--clarify-code-border) px-3 py-2 align-top text-(--clarify-code-property)",
+							children: name
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "break-all px-3 py-2 align-top text-(--clarify-code-text)",
+							children: value
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "pr-1",
+							children: /* @__PURE__ */ jsx(CopyButton, { value: `${name}: ${value}` })
+						})
+					]
+				}, `${name}:${index}`)) })]
+			})
+		}),
+		headers.length === 0 ? /* @__PURE__ */ 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 = useBuiltInText();
+	return /* @__PURE__ */ jsxs("table", {
+		className: "w-full table-fixed border-collapse text-left text-xs/5",
+		children: [/* @__PURE__ */ jsx("thead", {
+			className: "bg-(--clarify-code-control-background) text-(--clarify-code-muted)",
+			children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+				className: "w-2/5 border-r border-(--clarify-code-border) px-3 py-2 font-semibold",
+				children: t("openapi.headerName")
+			}), /* @__PURE__ */ jsx("th", {
+				className: "px-3 py-2 font-semibold",
+				children: t("openapi.headerValue")
+			})] })
+		}), /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", {
+			className: "border-t border-(--clarify-code-border)",
+			children: /* @__PURE__ */ 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 = useBuiltInText();
+	const [bodyMode, setBodyMode] = 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__ */ 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__ */ 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__ */ jsx("span", {
+					className: "mr-auto text-(--clarify-code-text)",
+					children: t("openapi.response")
+				}), exchange ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-xs font-semibold text-(--clarify-code-muted)",
+						children: [exchange.duration, " ms"]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-(--clarify-code-faint)",
+						children: formatBytes(exchange.size)
+					}),
+					/* @__PURE__ */ jsx("span", { className: clsx("size-2 rounded-full", exchange.status < 400 ? "bg-(--clarify-code-success)" : "bg-(--clarify-code-danger)") }),
+					/* @__PURE__ */ jsxs("span", {
+						className: clsx("text-xs font-semibold", exchange.status < 400 ? "text-(--clarify-code-success)" : "text-(--clarify-code-danger)"),
+						children: [
+							exchange.status,
+							" ",
+							exchange.statusText
+						]
+					})
+				] }) : null]
+			}),
+			error ? /* @__PURE__ */ jsx(ResponseState, {
+				icon: CircleAlertIcon,
+				title: t("openapi.responseErrorTitle"),
+				description: error,
+				tone: "error"
+			}) : null,
+			!error && !exchange ? /* @__PURE__ */ jsx(ResponseState, {
+				icon: SendIcon,
+				title: t("openapi.responseEmptyTitle"),
+				description: t("openapi.responseEmpty")
+			}) : null,
+			exchange ? /* @__PURE__ */ jsxs("div", {
+				className: "min-h-0 flex-1 overflow-auto",
+				children: [
+					/* @__PURE__ */ jsx(RequestSection, {
+						title: t("openapi.cookies"),
+						count: 0,
+						children: /* @__PURE__ */ jsx(HiddenCookies, {})
+					}),
+					/* @__PURE__ */ jsx(RequestSection, {
+						title: t("openapi.requestHeaders"),
+						count: exchange.request.headers.length,
+						children: /* @__PURE__ */ jsx(ResponseHeaders, { headers: exchange.request.headers })
+					}),
+					/* @__PURE__ */ jsx(RequestSection, {
+						title: t("openapi.responseHeaders"),
+						count: exchange.headers.length,
+						children: /* @__PURE__ */ jsx(ResponseHeaders, { headers: exchange.headers })
+					}),
+					/* @__PURE__ */ jsx(RequestSection, {
+						title: t("openapi.body"),
+						defaultOpen: true,
+						actions: /* @__PURE__ */ jsx("span", {
+							className: "font-mono text-2xs font-normal text-(--clarify-code-faint)",
+							children: exchange.contentType || t("openapi.unknownContentType")
+						}),
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "min-h-72",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex h-10 items-center justify-between border-b border-(--clarify-code-border) px-3",
+								children: [/* @__PURE__ */ jsx("div", {
+									role: "tablist",
+									className: "flex",
+									children: ["preview", "raw"].map((mode) => /* @__PURE__ */ jsx("button", {
+										type: "button",
+										role: "tab",
+										"aria-selected": bodyMode === mode,
+										onClick: () => setBodyMode(mode),
+										className: clsx("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__ */ jsxs("div", {
+									className: "flex",
+									children: [/* @__PURE__ */ jsx(CopyButton, { value: exchange.body }), /* @__PURE__ */ 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__ */ jsx(DownloadIcon, {
+											className: "size-4",
+											"aria-hidden": "true"
+										})
+									})]
+								})]
+							}), /* @__PURE__ */ jsx("div", {
+								className: "p-4",
+								children: bodyMode === "preview" ? /* @__PURE__ */ jsx(ResponsePreview, { exchange }) : exchange.size ? /* @__PURE__ */ jsx("pre", {
+									className: "max-h-128 overflow-auto whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
+									children: exchange.body
+								}) : /* @__PURE__ */ 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__ */ 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__ */ jsx(LoaderCircleIcon, {
+			className: "size-4 animate-spin",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ jsx(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] = useState(getServerKey(servers[0], 0));
+	const selectedServer = servers.find((server, index) => getServerKey(server, index) === selectedServerKey) ?? servers[0];
+	const [serverVariables, setServerVariables] = useState(defaultServerVariables(selectedServer));
+	const authOptions = getAuthOptions(spec, operation);
+	const [selectedAuthName, setSelectedAuthName] = 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] = useState(requestContents[0]?.mediaType ?? "");
+	const [body, setBody] = 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] = useState(() => Object.fromEntries(parameters.map((parameter) => [parameterKey(parameter), initialParameterValue(parameter)])));
+	const [parameterEnabled, setParameterEnabled] = useState(() => Object.fromEntries(parameters.map((parameter) => [parameterKey(parameter), true])));
+	const [parameterIssues, setParameterIssues] = 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] = useState();
+	const [error, setError] = useState("");
+	const [sending, setSending] = useState(false);
+	const requestController = useRef(null);
+	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 = 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__ */ 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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ jsx(RotateCcwIcon, {
+				className: "size-3.5",
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ 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__ */ jsx(EraserIcon, {
+				className: "size-3.5",
+				"aria-hidden": "true"
+			})
+		})] });
+		return /* @__PURE__ */ jsx(RequestSection, {
+			title: parameterGroupLabel(location, t),
+			count: grouped.length,
+			defaultOpen: true,
+			actions,
+			children: location === "cookie" ? /* @__PURE__ */ 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__ */ 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__ */ jsx(EndpointMethodBadge, { method: method.toUpperCase() }),
+				servers.length > 0 ? /* @__PURE__ */ 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__ */ 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__ */ jsx(SendRequestButton, {
+					label: sending ? t("openapi.sendingRequest") : t("openapi.sendRequest"),
+					busy: sending,
+					text: t("openapi.sendRequest"),
+					onClick: sendRequest
+				}),
+				onClose ? /* @__PURE__ */ 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__ */ jsx(XIcon, {
+						className: "size-4",
 						"aria-hidden": "true"
-					})]
-				}, option.value))
+					})
+				}) : null
+			]
+		});
+	}
+	function renderVariables() {
+		if (serverVariableEntries.length === 0) return null;
+		return /* @__PURE__ */ jsx(RequestSection, {
+			title: t("openapi.variables"),
+			count: serverVariableEntries.length,
+			defaultOpen: true,
+			children: serverVariableEntries.map(([name, variable]) => /* @__PURE__ */ jsxs("label", {
+				className: "grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
+				children: [/* @__PURE__ */ 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__ */ 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__ */ 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: clsx("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__ */ jsx("div", { children: /* @__PURE__ */ jsx(InlineListbox, {
+				label: t("openapi.mediaType"),
+				value: mediaType,
+				options: requestContents.map((entry) => ({
+					value: entry.mediaType,
+					label: entry.mediaType
+				})),
+				onChange: selectMediaType
+			}) }) : null, /* @__PURE__ */ 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__ */ jsxs("div", {
+		className: clsx("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__ */ 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__ */ jsxs("div", {
+				className: "flex min-h-0 min-w-0 flex-col overflow-y-auto",
+				children: [
+					authOptions.length > 0 ? /* @__PURE__ */ jsx(RequestSection, {
+						title: t("openapi.authentication"),
+						count: selectedAuth?.schemes.length ?? 0,
+						defaultOpen: true,
+						children: /* @__PURE__ */ 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__ */ jsx(RequestSection, {
+						title: t("openapi.pathParameters"),
+						count: pathParameters.length,
+						defaultOpen: true,
+						children: pathParameters.map(renderParameterField)
+					}) : null,
+					parameterGroups.map(renderParameterGroup),
+					renderRequestBody(),
+					!hasRequestConfiguration ? /* @__PURE__ */ jsx(RequestSection, {
+						title: t("openapi.requestConfiguration"),
+						count: 0,
+						defaultOpen: true,
+						children: /* @__PURE__ */ jsx("p", {
+							className: "px-3 py-5 text-xs/5 text-(--clarify-ui-text-faint)",
+							children: t("openapi.noRequestConfiguration")
+						})
+					}) : null
+				]
+			}), /* @__PURE__ */ 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__ */ jsx(OpenApiResponseViewer, {
+					exchange,
+					error
+				})
+			})]
+		})]
+	});
+}
+function OpenApiRequestDialog(arg0) {
+	const { open, onClose, ...workbenchProps } = arg0;
+	const t = useBuiltInText();
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open,
+		onClose: () => {},
+		className: "relative z-50",
+		children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 bg-(--clarify-ui-overlay-background) backdrop-blur-sm" }), /* @__PURE__ */ jsx("div", {
+			className: "fixed inset-0 grid place-items-center overflow-y-auto p-3 sm:p-6",
+			children: /* @__PURE__ */ jsxs(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__ */ jsx(DialogTitle, {
+					className: "sr-only",
+					children: t("openapi.tryRequest")
+				}), /* @__PURE__ */ jsx(OpenApiRequestWorkbench, {
+					...workbenchProps,
+					compact: true,
+					onClose
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+//#region source/openapi/components/OpenApiOperation.tsx
+function EndpointPath(arg0) {
+	const { path, copied = false, onCopy } = arg0;
+	const t = useBuiltInText();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 overflow-x-auto text-sm font-bold leading-6 whitespace-nowrap",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "select-text font-mono text-(--clarify-theme-tokens-colors-foreground)",
+				children: path || "/"
+			})
+		}), onCopy ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": copied ? t("actions.copied") : t("actions.copy"),
+			title: copied ? t("actions.copied") : t("actions.copy"),
+			onClick: onCopy,
+			className: clsx("flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", copied && "border-emerald-400/70 bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-200"),
+			children: copied ? /* @__PURE__ */ jsx(CheckIcon, {
+				className: "h-3.5 w-3.5",
+				"aria-hidden": "true"
+			}) : /* @__PURE__ */ jsx(CopyIcon, {
+				className: "h-3.5 w-3.5",
+				"aria-hidden": "true"
+			})
+		}) : null]
 	});
 }
 function getServerPreviewUrl(server, variables) {
@@ -3007,7 +4651,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__ */ jsxs("span", {
@@ -3030,12 +4674,47 @@ function ServerUrlValue(arg0) {
 			})]
 		})]
 	});
+	if (directSelect) return /* @__PURE__ */ jsx(InlineListbox, {
+		label: "Server",
+		value: selectedKey,
+		options: servers.map((option, index) => ({
+			value: getServerKey(option, index),
+			label: getServerLabel(option, index),
+			description: option.description
+		})),
+		onChange: onSelect,
+		className: "w-8 shrink-0 sm:w-fit sm:min-w-16 sm:max-w-(--clarify-server-url-max-width)",
+		buttonClassName: "group flex h-8 w-full min-w-0 cursor-pointer items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) px-0 text-(--clarify-ui-text) transition-colors hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background) data-open:text-(--clarify-theme-tokens-colors-foreground) sm:px-1.5",
+		buttonContent: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "sm:hidden",
+			children: /* @__PURE__ */ jsx(ServerIcon, {
+				className: "h-4 w-4",
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
+			children: [
+				protocolLabel ? /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 rounded bg-sky-100 px-1.5 py-0.5 text-2xs font-black text-sky-700 dark:bg-sky-400/15 dark:text-sky-200",
+					children: protocolLabel
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate font-semibold text-xs",
+					children: url
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: "h-3.5 w-3.5 shrink-0 text-zinc-400 transition-transform group-data-open:rotate-180",
+					"aria-hidden": "true"
+				})
+			]
+		})] })
+	});
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"aria-expanded": open,
 		"aria-label": "Server",
 		onClick: onToggle,
-		className: clsx("flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text) 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: clsx("flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text) transition-colors hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5", open ? "bg-(--clarify-ui-active-background) text-(--clarify-theme-tokens-colors-foreground)" : null),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ jsx(ServerIcon, {
@@ -3054,7 +4733,7 @@ function ServerUrlValue(arg0) {
 					children: url
 				}),
 				/* @__PURE__ */ jsx(ChevronDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-zinc-400",
+					className: clsx("h-3.5 w-3.5 shrink-0 text-zinc-400 transition-transform", open && "rotate-180"),
 					"aria-hidden": "true"
 				})
 			]
@@ -3121,51 +4800,10 @@ function ServerPanel(arg0) {
 		})
 	});
 }
-function AuthPanel(arg0) {
-	const { authOptions, selectedAuthName, selectedAuth, authValues, onSelectAuth, onChangeAuthValue } = arg0;
-	if (authOptions.length === 0) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-subtle-background) p-3",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "grid gap-3 sm:grid-cols-(--clarify-openapi-control-grid)",
-			children: [/* @__PURE__ */ jsxs("label", {
-				className: "flex min-w-0 flex-col gap-1.5",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-2xs font-semibold text-(--clarify-ui-text-soft)",
-					children: "Auth"
-				}), /* @__PURE__ */ jsx(InlineListbox, {
-					label: "Auth",
-					value: selectedAuthName,
-					options: authOptions.map(({ name, scheme }) => ({
-						value: name,
-						label: name,
-						description: authLabel(name, scheme)
-					})),
-					onChange: onSelectAuth
-				})]
-			}), selectedAuth ? /* @__PURE__ */ jsxs("label", {
-				className: "flex min-w-0 flex-col gap-1.5",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-2xs font-semibold text-(--clarify-ui-text-soft)",
-					children: "Credential"
-				}), /* @__PURE__ */ 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__ */ 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__ */ 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 = 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] = useState(false);
 	const fullUrl = getFullEndpointUrl(selectedServer, serverVariables, path);
@@ -3178,58 +4816,41 @@ function EndpointIdentity(arg0) {
 		if (await copyTextToClipboard(fullUrl)) setCopiedUrl(true);
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "not-prose flex w-full flex-col overflow-hidden rounded-xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-xs",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 items-center gap-1.5 overflow-hidden px-2.5 py-2",
-				children: [
-					/* @__PURE__ */ jsx(EndpointMethodBadge, { method }),
-					operationSource === "webhook" ? /* @__PURE__ */ jsx(EndpointMethodBadge, { method: "WEBHOOK" }) : null,
-					/* @__PURE__ */ jsx(ServerUrlValue, {
-						server: selectedServer,
-						variables: serverVariables,
-						open: serverOpen,
-						interactive: serverInteractive,
-						onToggle: onToggleServer
-					}),
-					/* @__PURE__ */ jsx(EndpointPath, {
-						path,
-						copied: copiedUrl,
-						onCopy: handleCopyUrl
-					}),
-					authOptions.length > 0 ? /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"aria-expanded": authOpen,
-						"aria-label": "Auth",
-						onClick: onToggleAuth,
-						className: clsx("ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-emerald-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) dark:hover:text-emerald-200", authOpen ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-100" : "bg-(--clarify-ui-subtle-background)"),
-						children: authOpen ? /* @__PURE__ */ jsx(UnlockKeyholeIcon, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						}) : /* @__PURE__ */ jsx(LockKeyholeIcon, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						})
-					}) : null
-				]
-			}),
-			serverInteractive && serverOpen ? /* @__PURE__ */ jsx(ServerPanel, {
-				servers,
-				selectedKey: selectedServerKey,
-				selectedServer,
-				variables: serverVariables,
-				onSelectServer,
-				onChangeVariable: onChangeServerVariable
-			}) : null,
-			authOpen ? /* @__PURE__ */ 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__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-1.5 overflow-hidden px-2.5 py-2",
+			children: [
+				/* @__PURE__ */ jsx(EndpointMethodBadge, { method }),
+				operationSource === "webhook" ? /* @__PURE__ */ jsx(EndpointMethodBadge, { method: "WEBHOOK" }) : null,
+				/* @__PURE__ */ jsx(ServerUrlValue, {
+					servers,
+					selectedKey: selectedServerKey,
+					server: selectedServer,
+					variables: serverVariables,
+					open: serverOpen,
+					interactive: serverInteractive,
+					directSelect: directServerSelect,
+					onSelect: onSelectServer,
+					onToggle: onToggleServer
+				}),
+				/* @__PURE__ */ jsx(EndpointPath, {
+					path,
+					copied: copiedUrl,
+					onCopy: handleCopyUrl
+				}),
+				onTryRequest ? /* @__PURE__ */ jsx(SendRequestButton, {
+					label: t("openapi.tryRequest"),
+					onClick: onTryRequest
+				}) : null
+			]
+		}), serverInteractive && !directServerSelect && serverOpen ? /* @__PURE__ */ jsx(ServerPanel, {
+			servers,
+			selectedKey: selectedServerKey,
+			selectedServer,
+			variables: serverVariables,
+			onSelectServer,
+			onChangeVariable: onChangeServerVariable
+		}) : null]
 	});
 }
 function OpenApiOperation(arg0) {
@@ -3242,8 +4863,9 @@ function OpenApiOperation(arg0) {
 	const authState = useOperationAuthState(spec, operation);
 	const [linkedExampleKey, setLinkedExampleKey] = useState("");
 	const [selectedResponseStatus, setSelectedResponseStatus] = useState(() => getDefaultResponseStatus(operation, spec));
+	const [requestOpen, setRequestOpen] = useState(false);
 	return /* @__PURE__ */ jsxs("section", {
-		className: "clarify-api-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
+		className: "clarify-openai-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
 		children: [
 			/* @__PURE__ */ jsx(Heading, {
@@ -3259,23 +4881,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__ */ jsx(OpenApiRequestDialog, {
+				open: requestOpen,
+				onClose: () => setRequestOpen(false),
+				spec,
+				path,
+				method,
+				operation,
+				operationSource
 			}),
 			/* @__PURE__ */ jsx(EndpointRequest, {
 				spec,
@@ -3309,6 +4927,6 @@ function OpenApiOperation(arg0) {
 	});
 }
 //#endregion
-export { CardGroup as A, Feedback as C, Pre as D, CodeGroup as E, Button as M, Mermaid as O, Tag as S, Code as T, Prose as _, authPlaceholder as a, Logo as b, getServerKey as c, listOpenApiOperations as d, getMediaTypeEntries as f, WebFrame as g, primitives_exports as h, ResponseExamplesPanel as i, Callout as j, Card as k, getServers as l, Markdown as m, OpenApiOperation as n, defaultServerVariables as o, getRequestBody$1 as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getOpenApiOperationEntry as u, GridPattern as v, Collapse as w, Heading as x, HeroPattern as y };
+export { Code as A, GridPattern as C, Tag as D, Heading as E, CardGroup as F, Callout as I, Button as L, Pre as M, Mermaid as N, Feedback as O, Card as P, Prose as S, Logo as T, WebFrame as _, ResponseExamplesPanel as a, Step as b, getAuthOptions as c, getOpenApiOperationEntry as d, listOpenApiOperations as f, primitives_exports as g, Markdown as h, RequestExamplesPanel as i, CodeGroup as j, Collapse as k, getServerKey as l, getRequestBody$1 as m, OpenApiOperation as n, authPlaceholder as o, getMediaTypeEntries as p, OpenApiRequestWorkbench as r, defaultServerVariables as s, EndpointIdentity as t, getServers as u, TabItem as v, HeroPattern as w, Steps as x, Tabs as y };
 
-//# sourceMappingURL=OpenApiOperation-DgrqzeiS.js.map
+//# sourceMappingURL=OpenApiOperation-C2vJztWZ.js.map