@clarify-labs/renderer 0.10.3 → 0.11.0

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

@@ -1,11 +1,11 @@
-import { a as useConfig, s as useLocale, t as useBuiltInText } from "./i18n-Bqth9d6Q.js";
-import { C as isExternalHref, E as copyTextToClipboard, c as lucideIconRegistry, h as useTheme, l as resolveLucideIconName, n as PageTitleActions, o as useSectionStore, s as remToPx, w as localizeHref } from "./PageActions-BQeEmXbT.js";
+import { 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, cloneElement, createContext, createElement, forwardRef, isValidElement, lazy, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import { Dialog, DialogBackdrop, DialogPanel, Listbox, ListboxButton, ListboxOption, ListboxOptions, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition } from "@headlessui/react";
-import { AlertTriangle, ArrowRight, ArrowUpRight, Check, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, CopyIcon, File, Folder, FolderOpen, Info, Lightbulb, LinkIcon, LockKeyholeIcon, Maximize2, PackageIcon, ServerIcon, UnlockKeyholeIcon, X, XCircle } from "lucide-react";
+import { 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";
@@ -252,7 +252,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = lazy(() => import("./MermaidViewer-Bc9H25yK.js"));
+var MermaidViewer = lazy(() => import("./MermaidViewer-CkIxyqtf.js"));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -399,7 +399,7 @@ function getCodePanelTitle(node, fallbackTitle) {
 		fallbackTitle
 	});
 }
-function CopyButton(arg0) {
+function CopyButton$1(arg0) {
 	const { code } = arg0;
 	const t = useBuiltInText();
 	const [copyCount, setCopyCount] = useState(0);
@@ -460,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 })]
 		})]
 	});
 }
@@ -1057,28 +1057,61 @@ function Tabs(arg0) {
 //#endregion
 //#region source/components/Tooltip.tsx
 function Tooltip(arg0) {
-	const { content, children, side = "top", className, ...props } = 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 relative inline-flex align-baseline", className),
+		className: clsx("clarify-tooltip group inline-flex align-baseline", className),
 		onMouseEnter: () => setOpen(true),
 		onMouseLeave: () => setOpen(false),
 		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			tabIndex: 0,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			ref: triggerRef,
 			"aria-describedby": contentId,
-			className: "cursor-help rounded-sm border-b border-dotted border-current focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+			"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",
-			className: clsx("pointer-events-none absolute left-1/2 z-30 w-max max-w-64 -translate-x-1/2 rounded-md bg-(--clarify-theme-tokens-colors-foreground) px-2.5 py-1.5 text-center text-xs/5 font-normal text-(--clarify-theme-tokens-colors-background) shadow-lg transition duration-150", open ? "opacity-100" : "opacity-0", side === "top" ? "bottom-[calc(100%+0.5rem)]" : "top-[calc(100%+0.5rem)]"),
+			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
 		})]
 	});
@@ -1657,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) {
@@ -1714,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);
@@ -1732,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;
@@ -1740,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;
 }
@@ -1797,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 } : {}
 	};
@@ -2123,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,
@@ -2130,7 +2192,7 @@ function buildRequestCodeExamples(input) {
 		languageKey: option.languageKey,
 		clientKey: option.client,
 		clientTitle: option.clientTitle,
-		code: buildSnippet(input, option)
+		code: buildSnippet(redactedInput, option)
 	}));
 }
 //#endregion
@@ -2152,7 +2214,7 @@ function SelectControl(arg0) {
 			className: wrapperClassName,
 			children: [/* @__PURE__ */ jsxs(ListboxButton, {
 				"aria-label": label,
-				className: `clarify-openai-select-button flex min-h-8 ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg border border-(--clarify-code-border) bg-(--clarify-code-control-background) px-2.5 py-1 text-xs font-medium whitespace-nowrap text-(--clarify-code-text) outline-hidden transition hover:border-white/20 hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:border-white/20 data-open:bg-(--clarify-code-control-background-active) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)`,
+				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", {
@@ -2168,10 +2230,10 @@ function SelectControl(arg0) {
 				})]
 			}), /* @__PURE__ */ jsx(ListboxOptions, {
 				anchor: "bottom end",
-				className: "clarify-openai-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-(--clarify-code-surface) p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-(--clarify-code-border) [--anchor-gap:--spacing(1)] focus:outline-none",
+				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-openai-select-option group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-(--clarify-code-control-text) select-none data-focus:bg-(--clarify-code-control-background-hover) data-focus:text-(--clarify-code-text) data-selected:bg-(--clarify-code-accent-background) data-selected:text-(--clarify-code-accent-text)",
+					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"
@@ -2285,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 "";
@@ -2323,7 +2390,7 @@ function getClientOptions(codeOptions, languageKey) {
 function ApiExampleCodeGroup(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"),
@@ -2342,14 +2409,14 @@ function ApiExampleCodeGroup(arg0) {
 		}) : null
 	] });
 	return /* @__PURE__ */ jsx("div", {
-		className: "clarify-openai-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-openai-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4 py-2",
+					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-openai-example-header-controls ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
@@ -2786,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", {
@@ -2824,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", {
@@ -2852,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"),
@@ -2874,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,
@@ -2887,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 })
 	})] });
 }
@@ -2972,7 +3039,8 @@ function ResponseList(arg0) {
 				response
 			})
 		})),
-		panelsClassName: "mt-4"
+		className: "mt-4 mb-6",
+		panelsClassName: "mt-5"
 	})] });
 }
 //#endregion
@@ -2997,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: [
@@ -3044,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, {
@@ -3076,49 +3144,128 @@ 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 } = arg0;
-	const selected = options.find((option) => option.value === value) ?? options[0];
+	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: selected?.value ?? value,
+		value,
 		onChange,
+		disabled,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: clsx("pointer-events-auto relative inline-flex min-w-0", className),
+			className: clsx("pointer-events-auto relative inline-flex min-w-0 w-full", className),
 			children: [/* @__PURE__ */ jsx(ListboxButton, {
 				"aria-label": label,
-				className: clsx(buttonClassName ?? "inline-flex min-w-0 items-center gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) font-semibold text-(--clarify-ui-text-strong) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) data-open:border-(--clarify-ui-accent-border) data-open:bg-(--clarify-ui-active-background) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)", buttonClassName ? null : compact ? "min-h-7 max-w-32 px-2 py-0.5 text-xs" : "min-h-8 w-full px-2.5 py-1.5 text-xs"),
+				"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
+					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: "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, {
+				className: optionsClassName,
+				children: options.map((option) => /* @__PURE__ */ jsx(ListboxOption, {
 					value: option.value,
-					className: "group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs text-(--clarify-ui-text) select-none data-focus:bg-(--clarify-ui-hover-background) data-focus:text-(--clarify-ui-text-strong) data-selected:bg-(--clarify-ui-active-background) data-selected:text-(--clarify-ui-accent-text)",
-					children: [/* @__PURE__ */ jsxs("span", {
-						className: "min-w-0",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "block truncate",
-							children: option.label
-						}), option.description ? /* @__PURE__ */ jsx("span", {
-							className: "mt-0.5 block truncate text-2xs text-(--clarify-ui-text-faint)",
-							children: option.description
-						}) : null]
-					}), /* @__PURE__ */ jsx(CheckIcon, {
-						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
-						"aria-hidden": "true"
-					})]
+					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);
@@ -3169,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,
@@ -3179,37 +3330,1277 @@ 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;
+//#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 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))]
+	});
+}
+//#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: "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: 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
+		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("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"
+					})
+				}) : 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();
@@ -3409,51 +4800,9 @@ 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);
@@ -3468,61 +4817,40 @@ function EndpointIdentity(arg0) {
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		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
-					}),
-					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 && !directServerSelect && 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
-		]
+		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) {
@@ -3535,6 +4863,7 @@ 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-openai-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
@@ -3552,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,
@@ -3602,6 +4927,6 @@ function OpenApiOperation(arg0) {
 	});
 }
 //#endregion
-export { CodeGroup as A, HeroPattern as C, Feedback as D, Tag as E, Callout as F, Button as I, Mermaid as M, Card as N, Collapse as O, CardGroup as P, GridPattern as S, Heading as T, TabItem as _, authPlaceholder as a, Steps as b, getServerKey as c, listOpenApiOperations as d, getMediaTypeEntries as f, WebFrame as g, primitives_exports as h, ResponseExamplesPanel as i, Pre as j, Code as k, getServers as l, Markdown as m, OpenApiOperation as n, defaultServerVariables as o, getRequestBody$1 as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getOpenApiOperationEntry as u, Tabs as v, Logo as w, Prose as x, Step as y };
+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-BZWeCbvy.js.map
+//# sourceMappingURL=OpenApiOperation-C2vJztWZ.js.map