@clarify-labs/renderer 0.11.2 → 0.11.4

package/output/{OpenApiOperation-bdALspAY.cjs → OpenApiOperation-QqYCuqve.cjs}

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-L1XX-y6M.cjs");
-const require_PageActions = require("./PageActions-Bw9SAHLl.cjs");
+const require_i18n = require("./i18n-Ds-f-qlT.cjs");
+const require_PageActions = require("./PageActions-ypH6U0Vc.cjs");
 const require_remark = require("./remark-DTLbG8PK.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
@@ -245,7 +245,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = (0, react.lazy)(() => Promise.resolve().then(() => require("./MermaidViewer-EZjolX08.cjs")));
+var MermaidViewer = (0, react.lazy)(() => Promise.resolve().then(() => require("./MermaidViewer-CPuTNujY.cjs")));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -1006,7 +1006,7 @@ function TabItem(_props) {
 	return null;
 }
 function Tabs(arg0) {
-	const { items, children, defaultValue, selectedIndex, onChange, className, listClassName, panelsClassName } = arg0;
+	const { items, children, defaultValue, selectedIndex, onChange, className, spacingClassName = "my-6", listClassName, panelsClassName, actions, variant = "content" } = arg0;
 	const childItems = react.Children.toArray(children).filter((child) => (0, react.isValidElement)(child) && child.type === TabItem).map((child, index) => ({
 		id: child.props.value ?? `tab-${index}`,
 		label: child.props.title,
@@ -1023,23 +1023,26 @@ function Tabs(arg0) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.TabGroup, {
 		selectedIndex: resolvedIndex,
 		onChange: handleChange,
-		className: (0, clsx.default)("clarify-tabs my-6", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabList, {
-			className: (0, clsx.default)("flex max-w-full items-stretch gap-1 overflow-x-auto border-b border-(--clarify-theme-tokens-colors-border)", listClassName),
-			children: resolvedItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
-				className: ({ selected }) => (0, clsx.default)("clarify-content-tab clarify-ui-tab relative my-1 inline-flex h-9 shrink-0 items-center rounded-(--clarify-theme-tokens-radius-md) px-2.5 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)", selected && "clarify-ui-tab-active"),
+		className: (0, clsx.default)("clarify-tabs", spacingClassName, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.TabList, {
+			className: (0, clsx.default)("flex max-w-full items-stretch overflow-x-auto border-b", variant === "content" ? "gap-1 border-(--clarify-theme-tokens-colors-border)" : "h-10 gap-0 border-(--clarify-code-border) px-3", listClassName),
+			children: [resolvedItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
+				className: ({ selected }) => (0, clsx.default)("relative inline-flex shrink-0 items-center px-2.5 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)", variant === "content" ? "clarify-content-tab clarify-ui-tab my-1 h-9 rounded-(--clarify-theme-tokens-radius-md)" : "text-2xs font-semibold", selected && (variant === "content" ? "clarify-ui-tab-active" : "text-(--clarify-code-text)"), variant === "code" && !selected && "text-(--clarify-code-muted)"),
 				children: ({ selected }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }), selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
 					layoutId: indicatorLayoutId,
-					className: "absolute inset-x-2.5 -bottom-1 h-0.5 rounded-full bg-(--clarify-ui-tab-indicator)",
+					className: (0, clsx.default)("absolute inset-x-2.5 h-0.5 bg-(--clarify-ui-tab-indicator)", variant === "content" ? "-bottom-1 rounded-full" : "-bottom-px"),
 					transition: {
 						type: "tween",
 						duration: .16,
 						ease: "easeOut"
 					}
 				}) : null] })
-			}, item.id))
+			}, item.id)), actions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "sticky right-0 ml-auto flex shrink-0 items-center bg-(--clarify-code-background)",
+				children: actions
+			}) : null]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanels, {
-			className: (0, clsx.default)("mt-5", panelsClassName),
+			className: panelsClassName ?? "mt-5",
 			children: resolvedItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanel, {
 				className: "focus:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
 				children: item.panel
@@ -1254,12 +1257,15 @@ var primitives_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
 });
 function wrapper(arg0) {
 	const { children } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {
-		className: "clarify-mdx-page flex h-full min-w-0 flex-col pt-14 pb-10",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Prose, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+		className: "clarify-mdx-page relative flex h-full min-w-0 flex-col pt-14 pb-10",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "clarify-page-actions mb-4 flex justify-end sm:absolute sm:top-14 sm:right-0 sm:mb-0",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.PageActions, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Prose, {
 			className: "flex-auto",
 			children
-		})
+		})]
 	});
 }
 function table(arg0) {
@@ -1281,13 +1287,10 @@ function a(arg0) {
 }
 function h1(arg0) {
 	const { children, className, ...props } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-page-title-row flex flex-col gap-4  pb-4 sm:flex-row sm:items-start sm:justify-between",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-			className: (0, clsx.default)("clarify-page-title min-w-0 flex-1", className),
-			...props,
-			children
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.PageTitleActions, {})]
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+		className: (0, clsx.default)("clarify-page-title min-w-0 flex-1", className),
+		...props,
+		children
 	});
 }
 var code = Code;
@@ -1330,9 +1333,9 @@ function Col(arg0) {
 	});
 }
 function Properties(arg0) {
-	const { children } = arg0;
+	const { children, className, spacingClassName = "my-6" } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "clarify-properties my-6",
+		className: (0, clsx.default)("clarify-properties", spacingClassName, className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 			role: "list",
 			className: "m-0 list-none divide-y divide-(--clarify-theme-tokens-colors-border) p-0",
@@ -1472,6 +1475,57 @@ function resolveRequestSchema(spec, schema) {
 	delete ownSchema.allOf;
 	return mergeAllOfSchemas(spec, [...allOf, ownSchema]);
 }
+function fuzzyMatch(value, query) {
+	const candidate = value.toLocaleLowerCase();
+	const needle = query.trim().toLocaleLowerCase();
+	let candidateIndex = 0;
+	for (const character of needle) {
+		candidateIndex = candidate.indexOf(character, candidateIndex);
+		if (candidateIndex === -1) return false;
+		candidateIndex += 1;
+	}
+	return true;
+}
+var noExampleMatch = Symbol("no-example-match");
+function getSchemaSearchText(name, schema) {
+	if (!isRecord$1(schema)) return name;
+	return [
+		name,
+		schema.type,
+		schema.description,
+		schema.pattern,
+		schema.const,
+		schema.default,
+		schema.minimum,
+		schema.maximum,
+		schema.additionalProperties
+	].filter((value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean").join(" ");
+}
+function filterExampleValue(spec, schema, value, query) {
+	const resolved = resolveRequestSchema(spec, schema);
+	if (Array.isArray(value)) {
+		const itemSchema = isRecord$1(resolved) ? resolved.items : void 0;
+		const items = value.map((item) => filterExampleValue(spec, itemSchema, item, query)).filter((item) => item !== noExampleMatch);
+		return items.length > 0 ? items : noExampleMatch;
+	}
+	if (isRecord$1(value)) {
+		const properties = isRecord$1(resolved) && isRecord$1(resolved.properties) ? resolved.properties : {};
+		const filtered = Object.entries(value).flatMap(([name, propertyValue]) => {
+			const propertySchema = properties[name] ?? (isRecord$1(resolved) && isRecord$1(resolved.additionalProperties) ? resolved.additionalProperties : void 0);
+			if (fuzzyMatch(getSchemaSearchText(name, resolveRequestSchema(spec, propertySchema)), query)) return [[name, propertyValue]];
+			const child = filterExampleValue(spec, propertySchema, propertyValue, query);
+			return child === noExampleMatch ? [] : [[name, child]];
+		});
+		return filtered.length > 0 ? Object.fromEntries(filtered) : noExampleMatch;
+	}
+	return fuzzyMatch(getSchemaSearchText("", resolved), query) ? value : noExampleMatch;
+}
+function filterExampleBySchema(spec, schema, value, query) {
+	if (!query.trim()) return value;
+	const filtered = filterExampleValue(spec, schema, value, query);
+	if (filtered !== noExampleMatch) return filtered;
+	return Array.isArray(value) ? [] : isRecord$1(value) ? {} : value;
+}
 function getPathItem$1(spec, path) {
 	return resolveObjectRef(spec, spec.paths?.[path]);
 }
@@ -2519,8 +2573,11 @@ function ApiExampleCodeGroup(arg0) {
 function firstExampleKeyForMediaType(requestContents, mediaType, spec) {
 	return getExampleEntries(requestContents.find((content) => content.mediaType === mediaType)?.value, spec)[0]?.key ?? "";
 }
+function isStructuredMediaType(mediaType) {
+	return mediaType.includes("json") || mediaType.includes("yaml") || mediaType.includes("yml");
+}
 function useRequestExamplesState(arg0) {
-	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth, operationSource, sharedExampleKey, onSelectExampleKey } = arg0;
+	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth, operationSource, sharedExampleKey, onSelectExampleKey, query = "" } = arg0;
 	const selectedContent = requestContents.find((content) => content.mediaType === selectedMediaType) ?? requestContents[0];
 	const examples = getExampleEntries(selectedContent?.value, spec);
 	const [selectedExampleKey, setSelectedExampleKey] = (0, react.useState)(examples[0]?.key ?? "");
@@ -2528,6 +2585,7 @@ function useRequestExamplesState(arg0) {
 	const [selectedClientKey, setSelectedClientKey] = (0, react.useState)("curl");
 	const currentExampleKey = (sharedExampleKey && examples.some((example) => example.key === sharedExampleKey) ? sharedExampleKey : void 0) ?? selectedExampleKey;
 	const selectedExample = examples.find((example) => example.key === currentExampleKey) ?? examples[0];
+	const requestExample = selectedContent && isStructuredMediaType(selectedContent.mediaType) ? filterExampleBySchema(spec, selectedContent.value.schema, selectedExample?.value, query) : selectedExample?.value;
 	const codeOptions = buildRequestCodeExamples({
 		spec,
 		path,
@@ -2537,7 +2595,7 @@ function useRequestExamplesState(arg0) {
 			...selectedContent,
 			value: {
 				...selectedContent.value,
-				example: selectedExample?.value,
+				example: requestExample,
 				examples: void 0
 			}
 		} : void 0,
@@ -2572,7 +2630,7 @@ function useRequestExamplesState(arg0) {
 	};
 }
 function RequestExamplesPanel(arg0) {
-	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth, operationSource, sharedExampleKey, onSelectExampleKey } = arg0;
+	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth, operationSource, sharedExampleKey, onSelectExampleKey, query } = arg0;
 	const t = require_i18n.useBuiltInText();
 	const state = useRequestExamplesState({
 		spec,
@@ -2587,7 +2645,8 @@ function RequestExamplesPanel(arg0) {
 		auth,
 		operationSource,
 		sharedExampleKey,
-		onSelectExampleKey
+		onSelectExampleKey,
+		query
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApiExampleCodeGroup, {
 		title: t("openapi.request"),
@@ -2612,11 +2671,12 @@ function RequestExamplesPanel(arg0) {
 function firstExampleKeyForResponseContent(content, spec) {
 	return getExampleEntries(content?.value, spec)[0]?.key ?? "";
 }
-function getResponseExampleBody(content, example) {
-	return content ? stringifyExample(example?.value) : "";
+function getResponseExampleBody(content, example, spec, query = "") {
+	if (!content) return "";
+	return stringifyExample(spec && isStructuredMediaType(content.mediaType) ? filterExampleBySchema(spec, content.value.schema, example?.value, query) : example?.value);
 }
 function useResponseExamplesState(arg0) {
-	const { operation, spec, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus } = arg0;
+	const { operation, spec, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus, query = "" } = arg0;
 	const orderedResponses = [...getResponseEntries(operation, spec)].sort((left, right) => {
 		if (left.status === "default") return -1;
 		if (right.status === "default") return 1;
@@ -2651,7 +2711,7 @@ function useResponseExamplesState(arg0) {
 		selectedContent,
 		examples,
 		selectedExample,
-		responseBody: getResponseExampleBody(selectedContent, selectedExample),
+		responseBody: getResponseExampleBody(selectedContent, selectedExample, spec, query),
 		onSelectStatus: (value) => {
 			const nextContents = getMediaTypeEntries(orderedResponses.find(({ status }) => status === value)?.response.content, spec);
 			if (typeof selectedStatus === "undefined") setInternalSelectedStatus(value);
@@ -2680,7 +2740,7 @@ function useResponseExamplesState(arg0) {
 	};
 }
 function ResponseExamplesPanel(arg0) {
-	const { operation, spec, title, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus } = arg0;
+	const { operation, spec, title, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus, query } = arg0;
 	const t = require_i18n.useBuiltInText();
 	const state = useResponseExamplesState({
 		operation,
@@ -2688,7 +2748,8 @@ function ResponseExamplesPanel(arg0) {
 		sharedExampleKey,
 		onSelectExampleKey,
 		selectedStatus,
-		onSelectStatus
+		onSelectStatus,
+		query
 	});
 	if (!state.selectedContent || !state.responseBody) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApiExampleCodeGroup, {
@@ -2708,6 +2769,28 @@ function ResponseExamplesPanel(arg0) {
 	});
 }
 //#endregion
+//#region source/openapi/components/OpenApiDocumentSection.tsx
+function OpenApiDocumentSection(props) {
+	const { title, children, action, className, bodyClassName, level = 3 } = props;
+	const heading = level === 3 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+		className: "!m-0 text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+		children: title
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+		className: "!m-0 text-xs/5 font-semibold text-(--clarify-ui-text-soft)",
+		children: title
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: (0, clsx.default)("clarify-openapi-document-section", className),
+		children: [action ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 items-center justify-between gap-2",
+			children: [heading, action]
+		}) : heading, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("mt-2", bodyClassName),
+			children
+		})]
+	});
+}
+//#endregion
 //#region source/openapi/components/OpenApiAuthDocumentation.tsx
 function authSchemeType(option, apiKeyLabel) {
 	const { scheme } = option;
@@ -2717,73 +2800,73 @@ function authSchemeType(option, apiKeyLabel) {
 	if (scheme.type === "openIdConnect") return "OPENID CONNECT";
 	return scheme.type?.toUpperCase() || "AUTH";
 }
-function OpenApiAuthDocumentation({ options }) {
+function OpenApiAuthDocumentation(props) {
+	const { options } = props;
 	const t = require_i18n.useBuiltInText();
 	if (options.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.authentication") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "not-prose my-6 border-y border-(--clarify-theme-tokens-colors-border)",
-		children: options.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [index > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-3 py-1",
-			"aria-label": t("openapi.authOr"),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-px flex-1 bg-(--clarify-theme-tokens-colors-border)" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-2xs font-semibold text-(--clarify-ui-text-faint)",
-					children: t("openapi.authOr")
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-px flex-1 bg-(--clarify-theme-tokens-colors-border)" })
-			]
-		}) : null, option.schemes.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "py-4 text-sm/6 font-medium text-(--clarify-theme-tokens-colors-foreground)",
-			children: t("openapi.authNoAuth")
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "divide-y divide-(--clarify-theme-tokens-colors-border)",
-			children: option.schemes.map((schemeOption, schemeIndex) => {
-				const { scheme } = schemeOption;
-				const details = [
-					scheme.type === "apiKey" && scheme.in && scheme.name ? t("openapi.authLocation", {
-						in: scheme.in,
-						name: scheme.name
-					}) : void 0,
-					scheme.type === "http" && scheme.bearerFormat ? t("openapi.authBearerFormat", { format: scheme.bearerFormat }) : void 0,
-					scheme.type === "openIdConnect" ? scheme.openIdConnectUrl : void 0,
-					schemeOption.scopes.length > 0 ? t("openapi.authScopes", { scopes: schemeOption.scopes.join(", ") }) : void 0
-				].filter((value) => Boolean(value));
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [schemeIndex > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "relative h-0",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "absolute top-0 left-4 -translate-y-1/2 bg-(--clarify-theme-tokens-colors-background) px-1.5 text-2xs font-semibold text-(--clarify-ui-text-faint)",
-						children: t("openapi.authAnd")
-					})
-				}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "py-4",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex flex-wrap items-center gap-2",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
-								children: schemeOption.name
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "rounded bg-(--clarify-ui-subtle-background) px-1.5 py-0.5 text-2xs font-semibold text-(--clarify-ui-text-soft)",
-								children: authSchemeType(schemeOption, t("openapi.authApiKey"))
-							})]
-						}),
-						scheme.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
-							className: "mt-2 text-sm/6 text-(--clarify-ui-text-soft) *:first:mt-0 *:last:mb-0",
-							children: scheme.description
-						}) : null,
-						details.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mt-2 flex min-w-0 flex-wrap gap-x-4 gap-y-1 text-xs/5 text-(--clarify-ui-text-faint)",
-							children: details.map((detail) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "min-w-0 break-all font-mono",
-								children: detail
-							}, detail))
-						}) : null
-					]
-				})] }, schemeOption.name);
-			})
-		})] }, option.key))
-	})] });
+	const renderOption = (option) => option.schemes.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "border-b border-(--clarify-theme-tokens-colors-border) pt-2 pb-4 text-sm/6 font-medium text-(--clarify-theme-tokens-colors-foreground)",
+		children: t("openapi.authNoAuth")
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "divide-y divide-(--clarify-theme-tokens-colors-border) border-b border-(--clarify-theme-tokens-colors-border)",
+		children: option.schemes.map((schemeOption, schemeIndex) => {
+			const { scheme } = schemeOption;
+			const details = [
+				scheme.type === "apiKey" && scheme.in && scheme.name ? t("openapi.authLocation", {
+					in: scheme.in,
+					name: scheme.name
+				}) : void 0,
+				scheme.type === "http" && scheme.bearerFormat ? t("openapi.authBearerFormat", { format: scheme.bearerFormat }) : void 0,
+				scheme.type === "openIdConnect" ? scheme.openIdConnectUrl : void 0,
+				schemeOption.scopes.length > 0 ? t("openapi.authScopes", { scopes: schemeOption.scopes.join(", ") }) : void 0
+			].filter((value) => Boolean(value));
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [schemeIndex > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "relative h-0",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "absolute top-0 left-4 -translate-y-1/2 bg-(--clarify-theme-tokens-colors-background) px-1.5 text-2xs font-semibold text-(--clarify-ui-text-faint)",
+					children: t("openapi.authAnd")
+				})
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "py-4 first:pt-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+							children: schemeOption.name
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "rounded bg-(--clarify-ui-subtle-background) px-1.5 py-0.5 text-2xs font-semibold text-(--clarify-ui-text-soft)",
+							children: authSchemeType(schemeOption, t("openapi.authApiKey"))
+						})]
+					}),
+					scheme.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
+						className: "mt-2 text-sm/6 text-(--clarify-ui-text-soft) *:first:mt-0 *:last:mb-0",
+						children: scheme.description
+					}) : null,
+					details.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mt-2 flex min-w-0 flex-wrap gap-x-4 gap-y-1 text-xs/5 text-(--clarify-ui-text-faint)",
+						children: details.map((detail) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "min-w-0 break-all font-mono",
+							children: detail
+						}, detail))
+					}) : null
+				]
+			})] }, schemeOption.name);
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiDocumentSection, {
+		title: t("openapi.authentication"),
+		bodyClassName: "not-prose",
+		children: options.length === 1 ? renderOption(options[0]) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tabs, {
+			items: options.map((option) => ({
+				id: option.key,
+				label: option.label || t("openapi.none"),
+				panel: renderOption(option)
+			})),
+			spacingClassName: "m-0",
+			panelsClassName: "mt-2"
+		})
+	});
 }
 //#endregion
 //#region source/openapi/components/SchemaProperties.tsx
@@ -3010,10 +3093,11 @@ function EnumValueNode(arg0) {
 	});
 }
 function SchemaNode(arg0) {
-	const { node, depth = 0, defaultExpanded } = arg0;
+	const { node, depth = 0, defaultExpanded, forceExpanded = false } = arg0;
 	const t = require_i18n.useBuiltInText();
-	const [expanded, setExpanded] = (0, react.useState)(defaultExpanded ?? depth < 1);
+	const [locallyExpanded, setLocallyExpanded] = (0, react.useState)(defaultExpanded ?? depth < 1);
 	const hasChildren = node.children.length > 0;
+	const expanded = forceExpanded || locallyExpanded;
 	if (node.kind === "enum") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EnumValueNode, {
 		node,
 		depth
@@ -3053,7 +3137,7 @@ function SchemaNode(arg0) {
 			type: "button",
 			"aria-label": expanded ? t("openapi.collapse") : t("openapi.expand"),
 			"aria-expanded": expanded,
-			onClick: () => setExpanded((value) => !value),
+			onClick: () => setLocallyExpanded((value) => !value),
 			className: (0, clsx.default)(rowClassName, "cursor-pointer transition hover:bg-(--clarify-ui-hover-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)"),
 			children: content
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3061,12 +3145,13 @@ function SchemaNode(arg0) {
 			children: content
 		}), hasChildren && expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaTree, {
 			nodes: node.children,
-			depth: depth + 1
+			depth: depth + 1,
+			forceExpanded
 		}) : null]
 	});
 }
 function SchemaTree(arg0) {
-	const { nodes, depth = 0 } = arg0;
+	const { nodes, depth = 0, forceExpanded = false } = arg0;
 	if (nodes.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 		role: "list",
@@ -3074,34 +3159,68 @@ function SchemaTree(arg0) {
 		children: nodes.map((node) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaNode, {
 			node,
 			depth,
-			defaultExpanded: node.defaultExpanded
+			defaultExpanded: node.defaultExpanded,
+			forceExpanded
 		}, node.key))
 	});
 }
+function filterSchemaNodes(nodes, query) {
+	if (!query.trim()) return nodes;
+	return nodes.flatMap((node) => {
+		const children = filterSchemaNodes(node.children, query);
+		return fuzzyMatch(getSchemaSearchText(node.name, {
+			type: node.type,
+			description: node.description,
+			pattern: node.details
+		}), query) || children.length > 0 ? [{
+			...node,
+			children
+		}] : [];
+	});
+}
 function SchemaProperties(arg0) {
-	const { title, schema, spec, defaultExpanded } = arg0;
+	const { title, schema, spec, defaultExpanded, query = "", emptyText } = arg0;
+	const t = require_i18n.useBuiltInText();
 	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 not-prose my-6",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaTree, { nodes: root.children })
-	})] });
+	const filteredNodes = filterSchemaNodes(root.children, query);
+	const hasQuery = Boolean(query.trim());
+	const resolvedEmptyText = emptyText ?? t("openapi.noBodyProperties");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiDocumentSection, {
+		title,
+		level: 4,
+		bodyClassName: "clarify-schema-properties not-prose",
+		children: filteredNodes.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaTree, {
+			nodes: filteredNodes,
+			forceExpanded: hasQuery
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "m-0 py-2 text-sm/5 text-(--clarify-ui-text-soft)",
+			children: resolvedEmptyText
+		})
+	});
 }
 function ParameterList(arg0) {
 	const t = require_i18n.useBuiltInText();
 	const { title, parameters } = arg0;
 	if (parameters.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)(Properties, { children: parameters.map((parameter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Property, {
-		name: parameter.name ?? t("openapi.parameter"),
-		type: [schemaToType(parameter.schema), parameter.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0,
-		children: parameter.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
-			className: "*:first:mt-0 *:last:mb-0",
-			children: parameter.description
-		}) : t("openapi.operationParameter")
-	}, `${parameter.in}-${parameter.name}`)) })] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiDocumentSection, {
+		title,
+		bodyClassName: "not-prose",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Properties, {
+			spacingClassName: "m-0",
+			children: parameters.map((parameter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Property, {
+				name: parameter.name ?? t("openapi.parameter"),
+				type: [schemaToType(parameter.schema), parameter.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0,
+				children: parameter.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
+					className: "*:first:mt-0 *:last:mb-0",
+					children: parameter.description
+				}) : t("openapi.operationParameter")
+			}, `${parameter.in}-${parameter.name}`))
+		})
+	});
 }
 function ResponseList(arg0) {
-	const { title, operation, spec, selectedStatus, onSelectStatus } = arg0;
+	const { title, operation, spec, selectedStatus, onSelectStatus, query = "", search } = arg0;
 	const t = require_i18n.useBuiltInText();
 	const orderedResponses = [...getResponseEntries(operation, spec)].sort((left, right) => {
 		if (left.status === "default") return -1;
@@ -3138,11 +3257,13 @@ function ResponseList(arg0) {
 					}) : `${t("openapi.response")}.`
 				}),
 				responseSchema && spec ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mt-4",
+					className: "mt-6",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaProperties, {
 						title: t("openapi.responseBodyProperties"),
 						schema: responseSchema,
-						spec
+						spec,
+						query,
+						emptyText: t("openapi.noResponseBodyProperties")
 					})
 				}) : null
 			]
@@ -3150,27 +3271,91 @@ function ResponseList(arg0) {
 	};
 	if (orderedResponses.length === 1) {
 		const [{ status, response }] = orderedResponses;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title ?? t("openapi.responses") }), renderResponsePanel({
-			status,
-			response
-		})] });
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title ?? t("openapi.responses") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tabs, {
-		selectedIndex,
-		onChange: (index) => {
-			onSelectStatus?.(orderedResponses[index]?.status ?? "");
-		},
-		items: orderedResponses.map(({ status, response }) => ({
-			id: status,
-			label: status,
-			panel: renderResponsePanel({
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(OpenApiDocumentSection, {
+			title: title ?? t("openapi.responses"),
+			action: search?.action,
+			children: [search?.open ? search.input : null, renderResponsePanel({
 				status,
 				response
+			})]
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(OpenApiDocumentSection, {
+		title: title ?? t("openapi.responses"),
+		action: search?.action,
+		bodyClassName: "not-prose",
+		children: [search?.open ? search.input : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tabs, {
+			selectedIndex,
+			onChange: (index) => {
+				onSelectStatus?.(orderedResponses[index]?.status ?? "");
+			},
+			items: orderedResponses.map(({ status, response }) => ({
+				id: status,
+				label: status,
+				panel: renderResponsePanel({
+					status,
+					response
+				})
+			})),
+			spacingClassName: "m-0",
+			panelsClassName: "mt-2"
+		})]
+	});
+}
+//#endregion
+//#region source/openapi/components/SchemaSearch.tsx
+function useSchemaSearch() {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [query, setQuery] = (0, react.useState)("");
+	return {
+		open,
+		query,
+		onChange: (event) => setQuery(event.target.value),
+		toggle: () => {
+			setOpen((current) => {
+				if (current) setQuery("");
+				return !current;
+			});
+		}
+	};
+}
+function SchemaSearchButton(arg0) {
+	const { label, open, onClick } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-label": label,
+		"aria-pressed": open,
+		onClick,
+		className: (0, clsx.default)("flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", open ? "bg-(--clarify-ui-hover-background) text-(--clarify-theme-tokens-colors-primary)" : "text-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchIcon, {
+			className: "size-4",
+			"aria-hidden": "true"
+		})
+	});
+}
+function SchemaSearchInput(arg0) {
+	const { label, value, onChange } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: "not-prose mb-3 flex h-9 items-center gap-2 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-3 transition focus-within:border-(--clarify-theme-tokens-colors-primary) focus-within:ring-2 focus-within:ring-(--clarify-theme-tokens-colors-primary)/15",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchIcon, {
+				className: "size-4 shrink-0 text-(--clarify-ui-text-faint)",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "sr-only",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "search",
+				value,
+				onChange,
+				placeholder: label,
+				autoFocus: true,
+				className: "min-w-0 flex-1 bg-transparent text-sm text-(--clarify-theme-tokens-colors-foreground) outline-none placeholder:text-(--clarify-ui-text-faint)"
 			})
-		})),
-		className: "mt-4 mb-6",
-		panelsClassName: "mt-5"
-	})] });
+		]
+	});
 }
 //#endregion
 //#region source/openapi/components/EndpointSections.tsx
@@ -3178,6 +3363,7 @@ function EndpointRequest(arg0) {
 	const { spec, path, method, operationSource = "path", description, groupedParameters, parameters, requestBody, requestContents, requestSchema, selectedRequestMediaType, onSelectRequestMediaType, selectedServer, serverVariables, authOptions, auth, sharedExampleKey, onSelectExampleKey } = arg0;
 	const t = require_i18n.useBuiltInText();
 	const hasRequestBody = Boolean(requestBody && requestContents.length > 0);
+	const requestBodySearch = useSchemaSearch();
 	const renderDescription = () => {
 		if (!description) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: description });
@@ -3187,16 +3373,25 @@ function EndpointRequest(arg0) {
 			className: "text-sm/5 text-(--clarify-ui-text-soft)",
 			children: t("openapi.requestBodyEmpty")
 		});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [typeof requestBody?.description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: requestBody.description }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaProperties, {
-			title: t("openapi.bodyProperties"),
-			schema: requestSchema,
-			spec
-		})] });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			requestBodySearch.open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaSearchInput, {
+				label: t("openapi.searchBodyProperties"),
+				value: requestBodySearch.query,
+				onChange: requestBodySearch.onChange
+			}) : null,
+			typeof requestBody?.description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: requestBody.description }) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaProperties, {
+				title: t("openapi.bodyProperties"),
+				schema: requestSchema,
+				spec,
+				query: requestBodySearch.query
+			})
+		] });
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderDescription(), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
 		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",
+			className: "flex w-full flex-col gap-6",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiAuthDocumentation, { options: authOptions }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
@@ -3211,7 +3406,15 @@ function EndpointRequest(arg0) {
 					title: t("openapi.headers"),
 					parameters: groupedParameters.header
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.requestBody") }), renderRequestBody()] })
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiDocumentSection, {
+					title: t("openapi.requestBody"),
+					action: hasRequestBody ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaSearchButton, {
+						label: t("openapi.searchBodyProperties"),
+						open: requestBodySearch.open,
+						onClick: requestBodySearch.toggle
+					}) : null,
+					children: renderRequestBody()
+				})
 			]
 		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, {
 			sticky: true,
@@ -3230,7 +3433,8 @@ function EndpointRequest(arg0) {
 					auth,
 					operationSource,
 					sharedExampleKey,
-					onSelectExampleKey
+					onSelectExampleKey,
+					query: requestBodySearch.query
 				})
 			})
 		})]
@@ -3241,6 +3445,7 @@ function EndpointResponse(arg0) {
 	const t = require_i18n.useBuiltInText();
 	const responseTitle = operationSource === "webhook" ? t("openapi.webhookResponses") : t("openapi.responses");
 	const responseExampleTitle = operationSource === "webhook" ? t("openapi.webhookResponse") : t("openapi.response");
+	const responseBodySearch = useSchemaSearch();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "mt-10 pt-6",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
@@ -3252,7 +3457,21 @@ function EndpointResponse(arg0) {
 					operation,
 					spec,
 					selectedStatus,
-					onSelectStatus
+					onSelectStatus,
+					query: responseBodySearch.query,
+					search: {
+						open: responseBodySearch.open,
+						action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaSearchButton, {
+							label: t("openapi.searchResponseBodyProperties"),
+							open: responseBodySearch.open,
+							onClick: responseBodySearch.toggle
+						}),
+						input: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaSearchInput, {
+							label: t("openapi.searchResponseBodyProperties"),
+							value: responseBodySearch.query,
+							onChange: responseBodySearch.onChange
+						})
+					}
 				})
 			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, {
 				sticky: true,
@@ -3265,7 +3484,8 @@ function EndpointResponse(arg0) {
 						sharedExampleKey,
 						onSelectExampleKey,
 						selectedStatus,
-						onSelectStatus
+						onSelectStatus,
+						query: responseBodySearch.query
 					})
 				})
 			})]
@@ -4291,6 +4511,7 @@ function OpenApiResponseViewer(arg0) {
 	const previewAvailable = exchange ? canPreviewResponse(exchange.contentType) : false;
 	const selectedBodyMode = bodyModeSelection && bodyModeSelection.exchange === exchange ? bodyModeSelection.mode : "preview";
 	const activeBodyMode = previewAvailable ? selectedBodyMode : "raw";
+	const bodyModes = ["preview", "raw"].filter((mode) => mode === "raw" || previewAvailable);
 	function downloadBody() {
 		if (!exchange) return;
 		const url = URL.createObjectURL(exchange.blob);
@@ -4365,48 +4586,37 @@ function OpenApiResponseViewer(arg0) {
 							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"].filter((mode) => mode === "raw" || previewAvailable).map((mode) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										role: "tab",
-										"aria-selected": activeBodyMode === mode,
-										onClick: () => setBodyModeSelection({
-											exchange,
-											mode
-										}),
-										className: (0, clsx.default)("border-b-2 px-2.5 py-1 text-2xs font-semibold", activeBodyMode === 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: activeBodyMode === "preview" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsePreview, { exchange }) : exchange.size ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tabs, {
+							items: bodyModes.map((mode) => ({
+								id: mode,
+								label: mode === "preview" ? t("openapi.preview") : t("openapi.raw"),
+								panel: mode === "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")
 								})
-							})]
+							})),
+							selectedIndex: bodyModes.indexOf(activeBodyMode),
+							onChange: (index) => setBodyModeSelection({
+								exchange,
+								mode: bodyModes[index] ?? "raw"
+							}),
+							spacingClassName: "m-0 min-h-72",
+							panelsClassName: "p-4",
+							variant: "code",
+							actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { 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"
+								})
+							})] })
 						})
 					})
 				]
@@ -5169,7 +5379,8 @@ function ServerVariableControl(arg0) {
 			label: option
 		})),
 		onChange,
-		compact
+		compact,
+		buttonClassName: "inline-flex min-h-8 w-full min-w-0 items-center justify-between gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background)"
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		"aria-label": name,
@@ -5199,7 +5410,8 @@ function ServerPanel(arg0) {
 						label: getServerLabel(server, index),
 						description: server.description
 					})),
-					onChange: onSelectServer
+					onChange: onSelectServer,
+					buttonClassName: "inline-flex min-h-8 w-full min-w-0 items-center justify-between gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background)"
 				})]
 			}) : null, variableEntries.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "grid gap-3 sm:grid-cols-(--clarify-openapi-variable-grid)",
@@ -5570,4 +5782,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-bdALspAY.cjs.map
+//# sourceMappingURL=OpenApiOperation-QqYCuqve.cjs.map