@clarify-labs/renderer 0.11.0 → 0.11.2

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

@@ -1,5 +1,5 @@
-import { a as useConfig, s as useLocale, t as useBuiltInText } from "./i18n-BPrC45nD.js";
-import { C as isExternalHref, E as copyTextToClipboard, c as lucideIconRegistry, h as useTheme, l as resolveLucideIconName, n as PageTitleActions, o as useSectionStore, s as remToPx, w as localizeHref } from "./PageActions-bugd7GZh.js";
+import { a as useConfig, s as useLocale, t as useBuiltInText } from "./i18n-DjRcGSuU.js";
+import { C as isExternalHref, E as copyTextToClipboard, c as lucideIconRegistry, h as useTheme, l as resolveLucideIconName, n as PageTitleActions, o as useSectionStore, s as remToPx, w as localizeHref } from "./PageActions-BLzCasvB.js";
 import { t as markdownRemarkPlugins } from "./remark-C9iRQM0R.js";
 import clsx from "clsx";
 import { Children, Suspense, cloneElement, createContext, createElement, forwardRef, isValidElement, lazy, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
@@ -14,6 +14,7 @@ import rehypeRaw from "rehype-raw";
 import { slug } from "github-slugger";
 import { codeToTokens, createCssVariablesTheme } from "shiki";
 import { snippetz } from "@scalar/snippetz";
+import { parse, stringify } from "yaml";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
@@ -252,7 +253,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = lazy(() => import("./MermaidViewer-CkIxyqtf.js"));
+var MermaidViewer = lazy(() => import("./MermaidViewer-Dby0ylNr.js"));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -1454,6 +1455,31 @@ function resolveSchema(spec, schema, seen = /* @__PURE__ */ new Set()) {
 	seen.add(schema.$ref);
 	return resolveSchema(spec, resolveOpenApiRef$1(spec, schema.$ref), seen) ?? schema;
 }
+function mergeAllOfSchemas(spec, schemas) {
+	const merged = {};
+	const properties = {};
+	const required = /* @__PURE__ */ new Set();
+	for (const schema of schemas) {
+		const resolved = resolveRequestSchema(spec, schema);
+		if (!isRecord$1(resolved)) continue;
+		Object.assign(merged, resolved);
+		if (isRecord$1(resolved.properties)) Object.assign(properties, resolved.properties);
+		if (Array.isArray(resolved.required)) resolved.required.forEach((name) => required.add(String(name)));
+	}
+	if (Object.keys(properties).length > 0) merged.properties = properties;
+	if (required.size > 0) merged.required = [...required];
+	delete merged.allOf;
+	return merged;
+}
+function resolveRequestSchema(spec, schema) {
+	const resolved = resolveSchema(spec, schema);
+	if (!isRecord$1(resolved)) return resolved;
+	const ownSchema = { ...resolved };
+	const allOf = Array.isArray(ownSchema.allOf) ? ownSchema.allOf : [];
+	if (allOf.length === 0) return ownSchema;
+	delete ownSchema.allOf;
+	return mergeAllOfSchemas(spec, [...allOf, ownSchema]);
+}
 function getPathItem$1(spec, path) {
 	return resolveObjectRef(spec, spec.paths?.[path]);
 }
@@ -1473,6 +1499,7 @@ function resolveObjectRef(spec, value) {
 }
 function schemaHasType(schema, type) {
 	if (!isRecord$1(schema)) return false;
+	if (type === "null" && schema.nullable === true) return true;
 	return schema.type === type || Array.isArray(schema.type) && schema.type.includes(type);
 }
 function getOperationParameters(spec, path, operation, source = "path") {
@@ -1542,7 +1569,7 @@ function getExampleEntries(mediaType, spec) {
 		title: "Example",
 		value: mediaType.example
 	}];
-	const generated = schemaToExample(spec ? resolveSchema(spec, mediaType.schema) : mediaType.schema);
+	const generated = schemaToExample(spec ? resolveRequestSchema(spec, mediaType.schema) : mediaType.schema);
 	return typeof generated === "undefined" ? [] : [{
 		key: "schema",
 		title: "schema",
@@ -1550,6 +1577,34 @@ function getExampleEntries(mediaType, spec) {
 		generated: true
 	}];
 }
+function getParameterExampleEntries(parameter) {
+	if (isRecord$1(parameter.examples)) {
+		const examples = [];
+		for (const [key, example] of Object.entries(parameter.examples)) {
+			const value = getExampleValue(example);
+			if (typeof value === "undefined") continue;
+			const { title, summary } = getExampleTitle(key, example);
+			examples.push({
+				key,
+				title,
+				summary,
+				value
+			});
+		}
+		if (examples.length > 0) return examples;
+	}
+	return typeof parameter.example === "undefined" ? [] : [{
+		key: "default",
+		title: "Example",
+		value: parameter.example
+	}];
+}
+function getRequestExampleEntries(parameters, mediaType) {
+	const entries = /* @__PURE__ */ new Map();
+	for (const example of getExampleEntries(mediaType).filter((entry) => !entry.generated)) entries.set(example.key, example);
+	for (const parameter of parameters) for (const example of getParameterExampleEntries(parameter)) if (!entries.has(example.key)) entries.set(example.key, example);
+	return [...entries.values()];
+}
 function getContentExample(mediaType) {
 	return getExampleEntries(mediaType)[0]?.value;
 }
@@ -1563,7 +1618,8 @@ function schemaToType(schema) {
 	if (Array.isArray(schema.allOf)) return schema.allOf.map((branch) => schemaToType(branch)).filter(Boolean).join(" & ");
 	if (schemaHasType(schema, "array")) return `${schemaToType(schema.items) ?? "unknown"}[]`;
 	const type = Array.isArray(schema.type) ? schema.type.map(String).join(" | ") : schema.type;
-	return typeof type === "string" ? [type, typeof schema.format === "string" ? `<${schema.format}>` : void 0].filter(Boolean).join("") : void 0;
+	const nullableType = schema.nullable === true && type !== "null" ? [type, "null"].filter(Boolean).join(" | ") : type;
+	return typeof nullableType === "string" ? [nullableType, typeof schema.format === "string" ? `<${schema.format}>` : void 0].filter(Boolean).join("") : void 0;
 }
 function schemaToExample(schema, depth = 0) {
 	if (!isRecord$1(schema) || depth > 3) return void 0;
@@ -1571,10 +1627,12 @@ function schemaToExample(schema, depth = 0) {
 	if (typeof schema.default !== "undefined") return schema.default;
 	if (Array.isArray(schema.enum)) return schema.enum[0];
 	if (isReference(schema)) return { id: resolveReferenceName(schema.$ref) };
+	const variant = Array.isArray(schema.oneOf) ? schema.oneOf[0] : Array.isArray(schema.anyOf) ? schema.anyOf[0] : void 0;
+	if (typeof variant !== "undefined") return schemaToExample(variant, depth + 1);
 	if (schemaHasType(schema, "array")) return [schemaToExample(schema.items, depth + 1) ?? "string"];
 	if (schemaHasType(schema, "object") || isRecord$1(schema.properties)) {
 		const properties = isRecord$1(schema.properties) ? schema.properties : {};
-		return Object.fromEntries(Object.entries(properties).slice(0, 8).map(([name, propertySchema]) => [name, schemaToExample(propertySchema, depth + 1) ?? exampleForType(schemaToType(propertySchema))]));
+		return Object.fromEntries(Object.entries(properties).filter(([, propertySchema]) => !isRecord$1(propertySchema) || propertySchema.readOnly !== true).slice(0, 8).map(([name, propertySchema]) => [name, schemaToExample(propertySchema, depth + 1) ?? exampleForType(schemaToType(propertySchema))]));
 	}
 	return exampleForType(schemaToType(schema));
 }
@@ -1812,10 +1870,10 @@ function getQueryString(parameters, auth = []) {
 	});
 	return queryString;
 }
-function isFormMediaType(mediaType) {
+function isFormMediaType$1(mediaType) {
 	return mediaType.includes("multipart/form-data") || mediaType.includes("application/x-www-form-urlencoded");
 }
-function isBinarySchema(schema) {
+function isBinarySchema$1(schema) {
 	return isRecord$1(schema) && schema.type === "string" && schema.format === "binary";
 }
 function getSchemaProperties(schema) {
@@ -1823,7 +1881,7 @@ function getSchemaProperties(schema) {
 }
 function getFieldValue(name, value, schema) {
 	if (isRecord$1(value) && typeof value[name] !== "undefined") return value[name];
-	if (isBinarySchema(schema)) return `@${name}`;
+	if (isBinarySchema$1(schema)) return `@${name}`;
 }
 function getFormParams(value, requestContent) {
 	const properties = getSchemaProperties(requestContent.value.schema);
@@ -1845,7 +1903,7 @@ function getBodySize(requestBody) {
 function getRequestBody(requestContent) {
 	const value = getContentExample(requestContent?.value);
 	if (!requestContent || typeof value === "undefined") return void 0;
-	if (isFormMediaType(requestContent.mediaType)) {
+	if (isFormMediaType$1(requestContent.mediaType)) {
 		const params = getFormParams(value, requestContent);
 		return params.length > 0 ? { params } : void 0;
 	}
@@ -2350,7 +2408,8 @@ function getAuthOptions(spec, operation) {
 	return getSecurityRequirements(spec, operation).map((requirement, index) => {
 		const requirementSchemes = Object.keys(requirement).map((name) => ({
 			name,
-			scheme: schemes[name]
+			scheme: schemes[name],
+			scopes: requirement[name] ?? []
 		})).filter((option) => Boolean(option.scheme));
 		return {
 			key: `requirement:${index}`,
@@ -2657,6 +2716,84 @@ function ResponseExamplesPanel(arg0) {
 	});
 }
 //#endregion
+//#region source/openapi/components/OpenApiAuthDocumentation.tsx
+function authSchemeType(option, apiKeyLabel) {
+	const { scheme } = option;
+	if (scheme.type === "http") return scheme.scheme?.toUpperCase() || "HTTP";
+	if (scheme.type === "apiKey") return apiKeyLabel;
+	if (scheme.type === "oauth2") return "OAUTH 2.0";
+	if (scheme.type === "openIdConnect") return "OPENID CONNECT";
+	return scheme.type?.toUpperCase() || "AUTH";
+}
+function OpenApiAuthDocumentation({ options }) {
+	const t = useBuiltInText();
+	if (options.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: t("openapi.authentication") }), /* @__PURE__ */ jsx("div", {
+		className: "not-prose my-6 border-y border-(--clarify-theme-tokens-colors-border)",
+		children: options.map((option, index) => /* @__PURE__ */ jsxs("div", { children: [index > 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3 py-1",
+			"aria-label": t("openapi.authOr"),
+			children: [
+				/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-(--clarify-theme-tokens-colors-border)" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-2xs font-semibold text-(--clarify-ui-text-faint)",
+					children: t("openapi.authOr")
+				}),
+				/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-(--clarify-theme-tokens-colors-border)" })
+			]
+		}) : null, option.schemes.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "py-4 text-sm/6 font-medium text-(--clarify-theme-tokens-colors-foreground)",
+			children: t("openapi.authNoAuth")
+		}) : /* @__PURE__ */ 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__ */ jsxs("div", { children: [schemeIndex > 0 ? /* @__PURE__ */ jsx("div", {
+					className: "relative h-0",
+					children: /* @__PURE__ */ 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__ */ jsxs("div", {
+					className: "py-4",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+								children: schemeOption.name
+							}), /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("span", {
+								className: "min-w-0 break-all font-mono",
+								children: detail
+							}, detail))
+						}) : null
+					]
+				})] }, schemeOption.name);
+			})
+		})] }, option.key))
+	})] });
+}
+//#endregion
 //#region source/openapi/components/SchemaProperties.tsx
 function getEnumDescriptions(schema) {
 	const descriptions = schema["x-enumDescriptions"];
@@ -3046,7 +3183,7 @@ function ResponseList(arg0) {
 //#endregion
 //#region source/openapi/components/EndpointSections.tsx
 function EndpointRequest(arg0) {
-	const { spec, path, method, operationSource = "path", description, groupedParameters, parameters, requestBody, requestContents, requestSchema, selectedRequestMediaType, onSelectRequestMediaType, selectedServer, serverVariables, auth, sharedExampleKey, onSelectExampleKey } = arg0;
+	const { spec, path, method, operationSource = "path", description, groupedParameters, parameters, requestBody, requestContents, requestSchema, selectedRequestMediaType, onSelectRequestMediaType, selectedServer, serverVariables, authOptions, auth, sharedExampleKey, onSelectExampleKey } = arg0;
 	const t = useBuiltInText();
 	const hasRequestBody = Boolean(requestBody && requestContents.length > 0);
 	const renderDescription = () => {
@@ -3069,6 +3206,7 @@ function EndpointRequest(arg0) {
 		children: [/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs("div", {
 			className: "w-full",
 			children: [
+				/* @__PURE__ */ jsx(OpenApiAuthDocumentation, { options: authOptions }),
 				/* @__PURE__ */ jsx(ParameterList, {
 					title: t("openapi.pathParameters"),
 					parameters: groupedParameters.path
@@ -3164,7 +3302,7 @@ function OptionContent(arg0) {
 	})] });
 }
 function InlineListbox(arg0) {
-	const { label, value, options, onChange, compact = false, buttonContent, buttonClassName, className, invalid, describedBy, disabled = false } = arg0;
+	const { label, value, options, onChange, compact = false, buttonContent, buttonClassName, className, invalid, describedBy, disabled = false, title } = arg0;
 	const selected = options.find((option) => option.value === value);
 	return /* @__PURE__ */ jsx(Listbox, {
 		value,
@@ -3176,6 +3314,7 @@ function InlineListbox(arg0) {
 				"aria-label": label,
 				"aria-invalid": invalid || void 0,
 				"aria-describedby": describedBy,
+				title,
 				className: clsx(buttonClassName ?? defaultButtonClassName, buttonClassName ? null : compact ? "min-h-7 max-w-32 px-2 py-0.5 text-xs" : "min-h-8 w-full px-2 text-xs"),
 				children: buttonContent ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 					className: "truncate",
@@ -3353,7 +3492,8 @@ function parseBodyObject(body) {
 		return;
 	}
 }
-function buildRequestBody(body, mediaType) {
+function buildRequestBody(body, mediaType, files) {
+	if (files[""] && !mediaType.includes("multipart/form-data")) return files[""];
 	const values = parseBodyObject(body);
 	if (mediaType.includes("application/x-www-form-urlencoded") && values) {
 		const params = new URLSearchParams();
@@ -3362,7 +3502,18 @@ function buildRequestBody(body, mediaType) {
 	}
 	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)));
+		Object.entries(values).forEach(([name, value]) => {
+			const file = files[name];
+			form.append(name, file ?? (typeof value === "string" ? value : JSON.stringify(value)));
+		});
+		Object.entries(files).forEach(([name, file]) => {
+			if (name && !(name in values)) form.append(name, file);
+		});
+		return form;
+	}
+	if (mediaType.includes("multipart/form-data") && Object.keys(files).length > 0) {
+		const form = new FormData();
+		Object.entries(files).forEach(([name, file]) => form.append(name, file));
 		return form;
 	}
 	return body;
@@ -3465,9 +3616,9 @@ function buildApiRequest(input) {
 	}
 	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 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;
+	const requestBody = (Boolean(body) || Object.keys(input.bodyFiles ?? {}).length > 0) && input.method.toUpperCase() !== "GET" && input.method.toUpperCase() !== "HEAD" ? buildRequestBody(body, mediaType, input.bodyFiles ?? {}) : void 0;
 	if (requestBody && !(requestBody instanceof FormData)) headers.set("Content-Type", mediaType);
 	return {
 		url: url.toString(),
@@ -3526,6 +3677,157 @@ function OpenApiAuthPanel(arg0) {
 	});
 }
 //#endregion
+//#region source/openapi/components/OpenApiRequestBodyEditor.tsx
+function parseBodyRecord(body) {
+	try {
+		const value = JSON.parse(body);
+		return isRecord$1(value) ? value : {};
+	} catch {
+		return {};
+	}
+}
+function isBinarySchema(schema) {
+	return isRecord$1(schema) && schema.format === "binary";
+}
+function isTextMediaType(mediaType) {
+	return mediaType.startsWith("text/") || mediaType.includes("json") || mediaType.includes("xml") || mediaType.includes("yaml") || mediaType.includes("javascript") || mediaType.includes("form");
+}
+function isFormMediaType(mediaType) {
+	const normalized = mediaType.split(";", 1)[0].trim().toLowerCase();
+	return normalized === "application/x-www-form-urlencoded" || normalized === "multipart/form-data";
+}
+function valueFromInput(schema, value) {
+	if (!isRecord$1(schema)) return value;
+	if (schemaHasType(schema, "integer")) return value === "" ? "" : Number.parseInt(value, 10);
+	if (schemaHasType(schema, "number")) return value === "" ? "" : Number(value);
+	if (schemaHasType(schema, "boolean")) return value === "true";
+	if (schemaHasType(schema, "array") || schemaHasType(schema, "object")) try {
+		return JSON.parse(value);
+	} catch {
+		return value;
+	}
+	return value;
+}
+function OpenApiRequestBodyEditor(arg0) {
+	const { spec, mediaType, content, body, files, onBodyChange, onFileChange } = arg0;
+	const schema = resolveSchema(spec, content?.schema);
+	const schemaRecord = isRecord$1(schema) ? schema : void 0;
+	const properties = isRecord$1(schemaRecord?.properties) ? schemaRecord.properties : void 0;
+	const required = new Set(Array.isArray(schemaRecord?.required) ? schemaRecord.required.map(String) : []);
+	const values = parseBodyRecord(body);
+	function updateProperty(name, propertySchema, value) {
+		onBodyChange(JSON.stringify({
+			...values,
+			[name]: valueFromInput(propertySchema, value)
+		}, null, 2));
+	}
+	function renderProperty(name, unresolvedSchema) {
+		const propertySchema = resolveSchema(spec, unresolvedSchema);
+		const propertyRecord = isRecord$1(propertySchema) ? propertySchema : void 0;
+		const type = schemaToType(propertySchema) ?? "string";
+		const value = values[name];
+		const fieldId = `openapi-request-body-${name}`.replace(/[^a-zA-Z0-9_-]/g, "-");
+		const options = Array.isArray(propertyRecord?.enum) ? propertyRecord.enum : [];
+		const structured = schemaHasType(propertySchema, "array") || schemaHasType(propertySchema, "object");
+		const serializedValue = structured && typeof value !== "undefined" ? JSON.stringify(value, null, 2) : String(value ?? "");
+		let control;
+		if (isBinarySchema(propertySchema)) control = /* @__PURE__ */ jsx("input", {
+			id: fieldId,
+			"aria-label": name,
+			type: "file",
+			required: required.has(name),
+			onChange: (event) => onFileChange(name, event.target.files?.[0]),
+			className: "min-h-8 w-full px-2 py-1 text-xs text-(--clarify-theme-tokens-colors-foreground) file:mr-2 file:rounded-(--clarify-theme-tokens-radius-md) file:border file:border-(--clarify-theme-tokens-colors-border) file:bg-(--clarify-ui-subtle-background) file:px-2 file:py-1 file:text-xs file:text-(--clarify-ui-text-strong)"
+		});
+		else if (options.length > 0) control = /* @__PURE__ */ jsxs("select", {
+			id: fieldId,
+			"aria-label": name,
+			value: serializedValue,
+			required: required.has(name),
+			onChange: (event) => updateProperty(name, propertySchema, 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 focus:bg-(--clarify-ui-hover-background)",
+			children: [!required.has(name) ? /* @__PURE__ */ jsx("option", { value: "" }) : null, options.map((option) => /* @__PURE__ */ jsx("option", {
+				value: String(option),
+				children: String(option)
+			}, String(option)))]
+		});
+		else if (schemaHasType(propertySchema, "boolean")) control = /* @__PURE__ */ jsx("input", {
+			id: fieldId,
+			"aria-label": name,
+			type: "checkbox",
+			checked: value === true,
+			onChange: (event) => updateProperty(name, propertySchema, String(event.target.checked)),
+			className: "size-4 accent-(--clarify-theme-tokens-colors-primary)"
+		});
+		else if (structured) control = /* @__PURE__ */ jsx("textarea", {
+			id: fieldId,
+			"aria-label": name,
+			value: serializedValue,
+			required: required.has(name),
+			rows: 3,
+			spellCheck: false,
+			onChange: (event) => updateProperty(name, propertySchema, event.target.value),
+			className: "w-full resize-y border-0 bg-transparent p-2 font-mono text-xs/5 text-(--clarify-theme-tokens-colors-foreground) outline-hidden focus:bg-(--clarify-ui-hover-background)"
+		});
+		else control = /* @__PURE__ */ jsx("input", {
+			id: fieldId,
+			"aria-label": name,
+			value: serializedValue,
+			type: schemaHasType(propertySchema, "integer") || schemaHasType(propertySchema, "number") ? "number" : propertyRecord?.format === "date" ? "date" : propertyRecord?.format === "date-time" ? "datetime-local" : "text",
+			required: required.has(name),
+			onChange: (event) => updateProperty(name, propertySchema, 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 focus:bg-(--clarify-ui-hover-background)"
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: "grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,1.3fr)]",
+			children: [/* @__PURE__ */ jsxs("label", {
+				htmlFor: fieldId,
+				className: "flex min-h-8 min-w-0 items-center gap-1.5 border-r border-(--clarify-theme-tokens-colors-border) px-2 text-xs text-(--clarify-ui-text-strong)",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate font-mono",
+						children: name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-mono text-2xs text-(--clarify-ui-text-faint)",
+						children: type
+					}),
+					required.has(name) ? /* @__PURE__ */ jsx("span", {
+						className: "text-(--clarify-error-accent-text)",
+						children: "*"
+					}) : null
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center",
+				children: [control, files[name] ? /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: files[name].name
+				}) : null]
+			})]
+		}, name);
+	}
+	if (properties && isFormMediaType(mediaType)) return /* @__PURE__ */ jsx("div", {
+		className: "divide-y divide-(--clarify-theme-tokens-colors-border)",
+		children: Object.entries(properties).map(([name, propertySchema]) => renderProperty(name, propertySchema))
+	});
+	if (isBinarySchema(schema) || !isTextMediaType(mediaType)) return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-44 items-start p-3",
+		children: /* @__PURE__ */ jsx("input", {
+			"aria-label": mediaType,
+			type: "file",
+			onChange: (event) => onFileChange("", event.target.files?.[0]),
+			className: "w-full text-xs text-(--clarify-theme-tokens-colors-foreground) file:mr-2 file:rounded-(--clarify-theme-tokens-radius-md) file:border file:border-(--clarify-theme-tokens-colors-border) file:bg-(--clarify-ui-subtle-background) file:px-2 file:py-1 file:text-xs file:text-(--clarify-ui-text-strong)"
+		})
+	});
+	return /* @__PURE__ */ jsx("textarea", {
+		"aria-label": mediaType,
+		value: body,
+		onChange: (event) => onBodyChange(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)"
+	});
+}
+//#endregion
 //#region source/openapi/components/OpenApiRequestFields.tsx
 function RequestField(arg0) {
 	const { spec, parameter, value, enabled, onChange, onEnabledChange, issue } = arg0;
@@ -3562,7 +3864,7 @@ function RequestField(arg0) {
 			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",
+		className: "mr-1 shrink-0 *:[[role=tooltip]]:w-80 *:[[role=tooltip]]:max-w-[min(20rem,calc(100vw-2rem))] *:[[role=tooltip]]:border *:[[role=tooltip]]:border-(--clarify-theme-tokens-colors-border) *:[[role=tooltip]]:bg-(--clarify-theme-tokens-colors-surface) *:[[role=tooltip]]:p-3 *:[[role=tooltip]]:text-(--clarify-ui-text) *:[[role=tooltip]]:shadow-xl",
 		triggerClassName: "clarify-field-description-trigger clarify-ui-control inline-flex size-7 items-center justify-center rounded-md !border-b-0 text-(--clarify-ui-text-faint) transition-colors",
 		children: [/* @__PURE__ */ jsx(InfoIcon, {
 			className: "size-4",
@@ -3608,7 +3910,7 @@ function RequestField(arg0) {
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: clsx("col-start-2 flex min-w-0 items-center border-t border-(--clarify-theme-tokens-colors-border) sm:col-start-3 sm:row-start-1 sm:border-t-0", !enabled && "opacity-45"),
+				className: clsx("col-start-2 flex min-w-0 items-center border-t border-(--clarify-theme-tokens-colors-border) sm:col-start-3 sm:row-start-1 sm:border-t-0", !enabled && "bg-(--clarify-ui-subtle-background)"),
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "min-w-0 flex-1",
 					children: itemOptions.length > 0 ? /* @__PURE__ */ jsx(MultiInlineListbox, {
@@ -3721,6 +4023,57 @@ function parseJson(value) {
 		return;
 	}
 }
+var textLanguages = {
+	"application/graphql": "graphql",
+	"application/javascript": "javascript",
+	"application/sql": "sql",
+	"application/typescript": "typescript",
+	"application/xml": "xml",
+	"application/x-httpd-php": "php",
+	"application/x-sh": "shellscript",
+	"application/xhtml+xml": "html",
+	"application/x-www-form-urlencoded": "http",
+	"text/css": "css",
+	"text/csv": "csv",
+	"text/html": "html",
+	"text/javascript": "javascript",
+	"text/markdown": "markdown",
+	"text/plain": "text",
+	"text/xml": "xml"
+};
+function normalizedMediaType(contentType) {
+	return contentType.split(";", 1)[0].trim().toLowerCase();
+}
+function getResponseTextPreview(contentType, body) {
+	const mediaType = normalizedMediaType(contentType);
+	if (mediaType === "application/json" || mediaType.endsWith("+json")) {
+		const parsed = parseJson(body);
+		return {
+			code: typeof parsed === "undefined" ? body : JSON.stringify(parsed, null, 2),
+			language: "json"
+		};
+	}
+	if (mediaType === "application/yaml" || mediaType === "application/x-yaml" || mediaType === "text/yaml" || mediaType === "text/x-yaml" || mediaType.endsWith("+yaml")) try {
+		return {
+			code: stringify(parse(body)).trimEnd(),
+			language: "yaml"
+		};
+	} catch {
+		return {
+			code: body,
+			language: "yaml"
+		};
+	}
+	const language = textLanguages[mediaType] ?? (mediaType.startsWith("text/") ? mediaType.slice(5) || "text" : void 0);
+	return language ? {
+		code: body,
+		language
+	} : void 0;
+}
+function canPreviewResponse(contentType) {
+	const mediaType = normalizedMediaType(contentType);
+	return Boolean(getResponseTextPreview(contentType, "") || mediaType.startsWith("image/") || mediaType.startsWith("audio/") || mediaType.startsWith("video/"));
+}
 function ResponseState(arg0) {
 	const { icon: Icon, title, description, tone = "default" } = arg0;
 	const error = tone === "error";
@@ -3749,38 +4102,6 @@ function ResponseState(arg0) {
 		})
 	});
 }
-function JsonPreview(arg0) {
-	const { value } = arg0;
-	if (Array.isArray(value)) return /* @__PURE__ */ jsx("div", {
-		className: "space-y-1 border-l border-(--clarify-code-border) pl-3",
-		children: value.map((item, index) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
-			className: "mr-2 text-(--clarify-code-faint)",
-			children: index
-		}), /* @__PURE__ */ jsx(JsonPreview, { value: item })] }, index))
-	});
-	if (isRecord$1(value)) return /* @__PURE__ */ jsx("div", {
-		className: "space-y-1 border-l border-(--clarify-code-border) pl-3",
-		children: Object.entries(value).map(([key, item]) => /* @__PURE__ */ jsxs("div", {
-			className: "grid grid-cols-[minmax(5rem,auto)_1fr] gap-3",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-(--clarify-code-property)",
-				children: key
-			}), /* @__PURE__ */ jsx(JsonPreview, { value: item })]
-		}, key))
-	});
-	if (value === null) return /* @__PURE__ */ jsx("span", {
-		className: "text-(--clarify-code-faint)",
-		children: "null"
-	});
-	if (typeof value === "string") return /* @__PURE__ */ jsx("span", {
-		className: "wrap-break-word text-(--clarify-code-string)",
-		children: value
-	});
-	return /* @__PURE__ */ jsx("span", {
-		className: "text-(--clarify-code-number)",
-		children: String(value)
-	});
-}
 function CopyButton(arg0) {
 	const { value } = arg0;
 	const t = useBuiltInText();
@@ -3837,22 +4158,12 @@ function ResponseMedia(arg0) {
 function ResponsePreview(arg0) {
 	const { exchange } = arg0;
 	const t = useBuiltInText();
-	const contentType = exchange.contentType.toLowerCase();
+	const contentType = normalizedMediaType(exchange.contentType);
 	if (!exchange.size) return /* @__PURE__ */ jsx(ResponseState, {
 		icon: FileX2Icon,
 		title: t("openapi.responseBodyEmptyTitle"),
 		description: t("openapi.responseBodyEmpty")
 	});
-	if (contentType.includes("json")) {
-		const parsed = parseJson(exchange.body);
-		return typeof parsed === "undefined" ? /* @__PURE__ */ jsx("pre", {
-			className: "whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
-			children: exchange.body
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "overflow-auto font-mono text-xs/5",
-			children: /* @__PURE__ */ jsx(JsonPreview, { value: parsed })
-		});
-	}
 	if (contentType.startsWith("image/")) return /* @__PURE__ */ jsx(ResponseMedia, {
 		blob: exchange.blob,
 		type: "image"
@@ -3865,15 +4176,19 @@ function ResponsePreview(arg0) {
 		blob: exchange.blob,
 		type: "video"
 	});
-	if (contentType.includes("html")) return /* @__PURE__ */ jsx("iframe", {
+	if (contentType === "text/html" || contentType === "application/xhtml+xml") return /* @__PURE__ */ jsx("iframe", {
 		srcDoc: exchange.body,
 		sandbox: "",
 		title: "Response preview",
 		className: "h-96 w-full border-0 bg-white"
 	});
-	if (contentType.startsWith("text/") || contentType.includes("xml") || contentType.includes("yaml")) return /* @__PURE__ */ jsx("pre", {
-		className: "whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
-		children: exchange.body
+	const textPreview = getResponseTextPreview(exchange.contentType, exchange.body);
+	if (textPreview) return /* @__PURE__ */ jsx("pre", {
+		className: "max-h-128 overflow-auto whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
+		children: /* @__PURE__ */ jsx(HighlightedCode, {
+			code: textPreview.code,
+			language: textPreview.language
+		})
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "grid min-h-56 place-items-center text-xs text-(--clarify-code-faint)",
@@ -3980,7 +4295,10 @@ function HiddenCookies() {
 function OpenApiResponseViewer(arg0) {
 	const { exchange, error } = arg0;
 	const t = useBuiltInText();
-	const [bodyMode, setBodyMode] = useState("preview");
+	const [bodyModeSelection, setBodyModeSelection] = useState();
+	const previewAvailable = exchange ? canPreviewResponse(exchange.contentType) : false;
+	const selectedBodyMode = bodyModeSelection && bodyModeSelection.exchange === exchange ? bodyModeSelection.mode : "preview";
+	const activeBodyMode = previewAvailable ? selectedBodyMode : "raw";
 	function downloadBody() {
 		if (!exchange) return;
 		const url = URL.createObjectURL(exchange.blob);
@@ -4062,12 +4380,15 @@ function OpenApiResponseViewer(arg0) {
 								children: [/* @__PURE__ */ jsx("div", {
 									role: "tablist",
 									className: "flex",
-									children: ["preview", "raw"].map((mode) => /* @__PURE__ */ jsx("button", {
+									children: ["preview", "raw"].filter((mode) => mode === "raw" || previewAvailable).map((mode) => /* @__PURE__ */ jsx("button", {
 										type: "button",
 										role: "tab",
-										"aria-selected": bodyMode === mode,
-										onClick: () => setBodyMode(mode),
-										className: clsx("border-b-2 px-2.5 py-1 text-2xs font-semibold", bodyMode === mode ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-code-text)" : "border-transparent text-(--clarify-code-muted)"),
+										"aria-selected": activeBodyMode === mode,
+										onClick: () => setBodyModeSelection({
+											exchange,
+											mode
+										}),
+										className: clsx("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__ */ jsxs("div", {
@@ -4086,7 +4407,7 @@ function OpenApiResponseViewer(arg0) {
 								})]
 							}), /* @__PURE__ */ jsx("div", {
 								className: "p-4",
-								children: bodyMode === "preview" ? /* @__PURE__ */ jsx(ResponsePreview, { exchange }) : exchange.size ? /* @__PURE__ */ jsx("pre", {
+								children: activeBodyMode === "preview" ? /* @__PURE__ */ jsx(ResponsePreview, { exchange }) : exchange.size ? /* @__PURE__ */ jsx("pre", {
 									className: "max-h-128 overflow-auto whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
 									children: exchange.body
 								}) : /* @__PURE__ */ jsx("div", {
@@ -4208,6 +4529,23 @@ function validateRequestParameters(spec, parameters, values) {
 }
 //#endregion
 //#region source/openapi/components/useOpenApiRequestState.ts
+function initialRequestBody(spec, content) {
+	const example = getExampleEntries(content, spec)[0];
+	if (!example?.generated) return stringifyExample(example?.value);
+	const schema = resolveSchema(spec, content?.schema);
+	if (isRecord$1(schema) && schema.format === "binary") return "";
+	if (!isRecord$1(example.value) || !isRecord$1(schema) || !isRecord$1(schema.properties)) return stringifyExample(example.value);
+	const value = { ...example.value };
+	Object.entries(schema.properties).forEach(([name, propertySchema]) => {
+		const resolved = resolveSchema(spec, propertySchema);
+		if (isRecord$1(resolved) && resolved.format === "binary") delete value[name];
+	});
+	return stringifyExample(value);
+}
+function requestBodyForExample(spec, content, exampleKey) {
+	const example = getExampleEntries(content, spec).find((entry) => !entry.generated && entry.key === exampleKey);
+	return example ? stringifyExample(example.value) : initialRequestBody(spec, content);
+}
 function useOpenApiRequestTarget(spec, path, operation, operationSource) {
 	const servers = getServers(spec, operation, path, operationSource);
 	const [selectedServerKey, setSelectedServerKey] = useState(getServerKey(servers[0], 0));
@@ -4222,7 +4560,9 @@ function useOpenApiRequestTarget(spec, path, operation, operationSource) {
 	const clearCredential = useOpenApiStore((state) => state.clearCredential);
 	const requestContents = getMediaTypeEntries(getRequestBody$1(spec, operation)?.content, spec);
 	const [mediaType, setMediaType] = useState(requestContents[0]?.mediaType ?? "");
-	const [body, setBody] = useState(stringifyExample(getExampleEntries((requestContents.find((entry) => entry.mediaType === mediaType) ?? requestContents[0])?.value, spec)[0]?.value));
+	const selectedContent = requestContents.find((entry) => entry.mediaType === mediaType) ?? requestContents[0];
+	const [body, setBody] = useState(initialRequestBody(spec, selectedContent?.value));
+	const [bodyFiles, setBodyFiles] = useState({});
 	function selectServer(value) {
 		const nextServer = servers.find((server, index) => getServerKey(server, index) === value) ?? servers[0];
 		setSelectedServerKey(value);
@@ -4231,7 +4571,20 @@ function useOpenApiRequestTarget(spec, path, operation, operationSource) {
 	function selectMediaType(value) {
 		const content = requestContents.find((entry) => entry.mediaType === value)?.value;
 		setMediaType(value);
-		setBody(stringifyExample(getExampleEntries(content, spec)[0]?.value));
+		setBody(initialRequestBody(spec, content));
+		setBodyFiles({});
+	}
+	function applyBodyExample(exampleKey) {
+		setBody(requestBodyForExample(spec, selectedContent?.value, exampleKey));
+		setBodyFiles({});
+	}
+	function setBodyFile(name, file) {
+		setBodyFiles((current) => {
+			const next = { ...current };
+			if (file) next[name] = file;
+			else delete next[name];
+			return next;
+		});
 	}
 	return {
 		servers,
@@ -4251,13 +4604,20 @@ function useOpenApiRequestTarget(spec, path, operation, operationSource) {
 		clearCredential,
 		requestContents,
 		mediaType,
+		selectedContent,
 		body,
 		setBody,
+		bodyFiles,
+		setBodyFile,
+		applyBodyExample,
 		selectMediaType
 	};
 }
-function useOpenApiParameterState(spec, parameters, initialParameterValue) {
-	const [parameterValues, setParameterValues] = useState(() => Object.fromEntries(parameters.map((parameter) => [parameterKey(parameter), initialParameterValue(parameter)])));
+function useOpenApiParameterState(spec, parameters, initialParameterValue, initialExampleKey = "") {
+	const [parameterValues, setParameterValues] = useState(() => Object.fromEntries(parameters.map((parameter) => {
+		const example = getParameterExampleEntries(parameter).find((entry) => entry.key === initialExampleKey);
+		return [parameterKey(parameter), example ? stringifyExample(example.value) : initialParameterValue(parameter)];
+	})));
 	const [parameterEnabled, setParameterEnabled] = useState(() => Object.fromEntries(parameters.map((parameter) => [parameterKey(parameter), true])));
 	const [parameterIssues, setParameterIssues] = useState({});
 	function setParameterGroupValues(grouped, mode) {
@@ -4292,6 +4652,13 @@ function useOpenApiParameterState(spec, parameters, initialParameterValue) {
 			return next;
 		});
 	}
+	function applyParameterExample(exampleKey) {
+		setParameterValues(Object.fromEntries(parameters.map((parameter) => {
+			const example = getParameterExampleEntries(parameter).find((entry) => entry.key === exampleKey);
+			return [parameterKey(parameter), example ? stringifyExample(example.value) : initialParameterValue(parameter)];
+		})));
+		setParameterIssues({});
+	}
 	function validate(parametersToValidate) {
 		const issues = validateRequestParameters(spec, parametersToValidate, parameterValues);
 		setParameterIssues(issues);
@@ -4304,6 +4671,7 @@ function useOpenApiParameterState(spec, parameters, initialParameterValue) {
 		setParameterGroupValues,
 		setParameterIncluded,
 		updateParameterValue,
+		applyParameterExample,
 		validate
 	};
 }
@@ -4343,6 +4711,7 @@ function useOpenApiRequestExecution() {
 //#endregion
 //#region source/openapi/components/OpenApiRequest.tsx
 function initialParameterValue(spec, parameter) {
+	if (typeof parameter.example !== "undefined") return stringifyExample(parameter.example);
 	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));
@@ -4357,9 +4726,12 @@ function OpenApiRequestWorkbench(arg0) {
 	const { spec, path, method, operation, operationSource = "path", compact = false, onClose } = arg0;
 	const t = useBuiltInText();
 	const parameters = getOperationParameters(spec, path, operation, operationSource);
-	const { servers, selectedServer, selectedServerKey, serverVariables, setServerVariables, serverVariableEntries, selectServer, authOptions, selectedAuthName, setSelectedAuthName, selectedAuth, credentialScope, credentials, setCredential, clearCredential, requestContents, mediaType, body, setBody, selectMediaType } = useOpenApiRequestTarget(spec, path, operation, operationSource);
-	const parameterState = useOpenApiParameterState(spec, parameters, (parameter) => initialParameterValue(spec, parameter));
-	const { parameterValues, parameterEnabled, parameterIssues, setParameterGroupValues, setParameterIncluded, updateParameterValue } = parameterState;
+	const { servers, selectedServer, selectedServerKey, serverVariables, setServerVariables, serverVariableEntries, selectServer, authOptions, selectedAuthName, setSelectedAuthName, selectedAuth, credentialScope, credentials, setCredential, clearCredential, requestContents, mediaType, selectedContent, body, setBody, bodyFiles, setBodyFile, applyBodyExample, selectMediaType } = useOpenApiRequestTarget(spec, path, operation, operationSource);
+	const requestExamples = getRequestExampleEntries(parameters, selectedContent?.value);
+	const [selectedRequestExampleKey, setSelectedRequestExampleKey] = useState(requestExamples[0]?.key ?? "");
+	const currentRequestExampleKey = requestExamples.some((example) => example.key === selectedRequestExampleKey) ? selectedRequestExampleKey : requestExamples[0]?.key ?? "";
+	const parameterState = useOpenApiParameterState(spec, parameters, (parameter) => initialParameterValue(spec, parameter), currentRequestExampleKey);
+	const { parameterValues, parameterEnabled, parameterIssues, setParameterGroupValues, setParameterIncluded, updateParameterValue, applyParameterExample } = parameterState;
 	const { exchange, error, sending, execute } = useOpenApiRequestExecution();
 	const parameterGroups = [
 		"cookie",
@@ -4371,6 +4743,18 @@ function OpenApiRequestWorkbench(arg0) {
 	})).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;
+	function applyRequestExample(exampleKey) {
+		setSelectedRequestExampleKey(exampleKey);
+		applyParameterExample(exampleKey);
+		applyBodyExample(exampleKey);
+	}
+	function selectRequestMediaType(value) {
+		const content = requestContents.find((entry) => entry.mediaType === value)?.value;
+		const nextExampleKey = getRequestExampleEntries(parameters, content)[0]?.key ?? "";
+		selectMediaType(value);
+		setSelectedRequestExampleKey(nextExampleKey);
+		applyParameterExample(nextExampleKey);
+	}
 	async function sendRequest() {
 		const enabledParameters = parameters.filter((parameter) => parameterEnabled[parameterKey(parameter)] !== false);
 		const issues = parameterState.validate(enabledParameters);
@@ -4389,6 +4773,7 @@ function OpenApiRequestWorkbench(arg0) {
 			})),
 			mediaType,
 			body,
+			bodyFiles,
 			baseUrl: window.location.href
 		}), t("openapi.requestCorsHint"));
 	}
@@ -4439,44 +4824,84 @@ function OpenApiRequestWorkbench(arg0) {
 		}, location);
 	}
 	function renderHeader() {
-		return /* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 items-center gap-1.5 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-2",
-			children: [
-				/* @__PURE__ */ jsx(EndpointMethodBadge, { method: method.toUpperCase() }),
-				servers.length > 0 ? /* @__PURE__ */ jsx(InlineListbox, {
-					label: t("openapi.server"),
-					value: selectedServerKey,
-					options: servers.map((server, index) => ({
-						value: getServerKey(server, index),
-						label: server.url ?? `Server ${index + 1}`,
-						description: server.description
-					})),
-					onChange: selectServer,
-					className: "min-w-0 max-w-48 shrink sm:max-w-48",
-					buttonClassName: "flex h-8 min-w-0 max-w-full items-center gap-1 rounded-(--clarify-theme-tokens-radius-md) px-2 text-xs font-medium text-(--clarify-ui-text-strong) outline-hidden transition hover:bg-(--clarify-ui-hover-background) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)"
-				}) : null,
-				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 flex-1 overflow-x-auto border-l border-(--clarify-theme-tokens-colors-border) pl-2 font-mono text-xs text-(--clarify-theme-tokens-colors-foreground)",
-					children: path || "/"
-				}),
-				/* @__PURE__ */ jsx(SendRequestButton, {
-					label: sending ? t("openapi.sendingRequest") : t("openapi.sendRequest"),
-					busy: sending,
-					text: t("openapi.sendRequest"),
-					onClick: sendRequest
-				}),
-				onClose ? /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: onClose,
-					"aria-label": t("openapi.closeRequest"),
-					title: t("openapi.closeRequest"),
-					className: "grid size-8 shrink-0 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
-					children: /* @__PURE__ */ jsx(XIcon, {
-						className: "size-4",
-						"aria-hidden": "true"
-					})
-				}) : null
-			]
+		return /* @__PURE__ */ jsx("div", {
+			className: "border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 grid-cols-[auto_auto_minmax(0,1fr)_auto_auto] items-center gap-1.5 px-2.5 py-2 lg:grid-cols-[auto_auto_minmax(0,1fr)_minmax(0,14rem)_auto_auto]",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "col-start-1 row-start-1",
+						children: /* @__PURE__ */ jsx(EndpointMethodBadge, { method: method.toUpperCase() })
+					}),
+					servers.length > 0 ? /* @__PURE__ */ jsx(InlineListbox, {
+						label: t("openapi.server"),
+						value: selectedServerKey,
+						options: servers.map((server, index) => ({
+							value: getServerKey(server, index),
+							label: server.url ?? `Server ${index + 1}`,
+							description: server.description
+						})),
+						onChange: selectServer,
+						title: selectedServer.url ?? t("openapi.server"),
+						buttonContent: /* @__PURE__ */ jsx(ServerIcon, {
+							className: "size-4",
+							"aria-hidden": "true"
+						}),
+						className: "col-start-2 row-start-1 size-8 shrink-0",
+						buttonClassName: "grid size-8 place-items-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-soft) outline-hidden transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background)"
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "col-start-3 row-start-1 min-w-0 truncate border-l border-(--clarify-theme-tokens-colors-border) pl-2 font-mono text-xs text-(--clarify-theme-tokens-colors-foreground)",
+						title: path || "/",
+						children: path || "/"
+					}),
+					requestExamples.length > 1 ? /* @__PURE__ */ jsxs("div", {
+						className: "col-span-full row-start-2 flex min-w-0 items-center gap-0.5 border-t border-(--clarify-theme-tokens-colors-border) pt-2 lg:col-span-1 lg:col-start-4 lg:row-start-1 lg:border-t-0 lg:pt-0",
+						children: [/* @__PURE__ */ jsx(InlineListbox, {
+							label: t("openapi.requestExample"),
+							value: currentRequestExampleKey,
+							options: requestExamples.map((example) => ({
+								value: example.key,
+								label: example.title,
+								description: example.summary
+							})),
+							onChange: applyRequestExample,
+							className: "min-w-0 flex-1",
+							buttonClassName: "flex h-8 w-full 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)"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							title: t("openapi.resetToExample"),
+							"aria-label": t("openapi.resetToExample"),
+							onClick: () => applyRequestExample(currentRequestExampleKey),
+							className: "grid size-8 shrink-0 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+							children: /* @__PURE__ */ jsx(RotateCcwIcon, {
+								className: "size-3.5",
+								"aria-hidden": "true"
+							})
+						})]
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						className: "col-start-4 row-start-1 lg:col-start-5",
+						children: /* @__PURE__ */ jsx(SendRequestButton, {
+							label: sending ? t("openapi.sendingRequest") : t("openapi.sendRequest"),
+							busy: sending,
+							text: t("openapi.sendRequest"),
+							onClick: sendRequest
+						})
+					}),
+					onClose ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onClose,
+						"aria-label": t("openapi.closeRequest"),
+						title: t("openapi.closeRequest"),
+						className: "col-start-5 row-start-1 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) lg:col-start-6",
+						children: /* @__PURE__ */ jsx(XIcon, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					}) : null
+				]
+			})
 		});
 	}
 	function renderVariables() {
@@ -4516,13 +4941,15 @@ function OpenApiRequestWorkbench(arg0) {
 					value: entry.mediaType,
 					label: entry.mediaType
 				})),
-				onChange: selectMediaType
-			}) }) : null, /* @__PURE__ */ jsx("textarea", {
-				"aria-label": t("openapi.requestBody"),
-				value: body,
-				onChange: (event) => setBody(event.target.value),
-				spellCheck: false,
-				className: "block h-full min-h-44 w-full resize-none border-0 bg-(--clarify-code-background) p-3 font-mono text-xs/5 text-(--clarify-code-text) outline-hidden focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary)"
+				onChange: selectRequestMediaType
+			}) }) : null, /* @__PURE__ */ jsx(OpenApiRequestBodyEditor, {
+				spec,
+				mediaType,
+				content: selectedContent?.value,
+				body,
+				files: bodyFiles,
+				onBodyChange: setBody,
+				onFileChange: setBodyFile
 			})]
 		});
 	}
@@ -4910,6 +5337,7 @@ function OpenApiOperation(arg0) {
 				onSelectRequestMediaType: requestState.setSelectedRequestMediaType,
 				selectedServer: serverState.selectedServer,
 				serverVariables: serverState.serverVariables,
+				authOptions: authState.authOptions,
 				auth: authState.authInput,
 				sharedExampleKey: linkedExampleKey,
 				onSelectExampleKey: setLinkedExampleKey
@@ -4929,4 +5357,4 @@ function OpenApiOperation(arg0) {
 //#endregion
 export { Code as A, GridPattern as C, Tag as D, Heading as E, CardGroup as F, Callout as I, Button as L, Pre as M, Mermaid as N, Feedback as O, Card as P, Prose as S, Logo as T, WebFrame as _, ResponseExamplesPanel as a, Step as b, getAuthOptions as c, getOpenApiOperationEntry as d, listOpenApiOperations as f, primitives_exports as g, Markdown as h, RequestExamplesPanel as i, CodeGroup as j, Collapse as k, getServerKey as l, getRequestBody$1 as m, OpenApiOperation as n, authPlaceholder as o, getMediaTypeEntries as p, OpenApiRequestWorkbench as r, defaultServerVariables as s, EndpointIdentity as t, getServers as u, TabItem as v, HeroPattern as w, Steps as x, Tabs as y };
 
-//# sourceMappingURL=OpenApiOperation-C2vJztWZ.js.map
+//# sourceMappingURL=OpenApiOperation-Cr8TxLjl.js.map