@clarify-labs/renderer 0.10.3 → 0.11.0

package/output/{OpenApiOperation-DbZjxIuj.cjs → OpenApiOperation-D-5uE5v7.cjs}

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