@clarify-labs/renderer 0.11.0 → 0.11.2

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

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-wXINKKV0.cjs");
-const require_PageActions = require("./PageActions-DJRXlGhz.cjs");
+const require_i18n = require("./i18n-L1XX-y6M.cjs");
+const require_PageActions = require("./PageActions-Bw9SAHLl.cjs");
 const require_remark = require("./remark-DTLbG8PK.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
@@ -18,6 +18,7 @@ rehype_raw = require_rolldown_runtime.__toESM(rehype_raw, 1);
 let github_slugger = require("github-slugger");
 let shiki = require("shiki");
 let _scalar_snippetz = require("@scalar/snippetz");
+let yaml = require("yaml");
 //#region source/components/AccordionGroup.tsx
 function AccordionGroup(arg0) {
 	const { children, multiple = false, className, ...props } = arg0;
@@ -244,7 +245,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = (0, react.lazy)(() => Promise.resolve().then(() => require("./MermaidViewer-BZ8ghcFP.cjs")));
+var MermaidViewer = (0, react.lazy)(() => Promise.resolve().then(() => require("./MermaidViewer-EZjolX08.cjs")));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -1446,6 +1447,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]);
 }
@@ -1465,6 +1491,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") {
@@ -1534,7 +1561,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",
@@ -1542,6 +1569,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;
 }
@@ -1555,7 +1610,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;
@@ -1563,10 +1619,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));
 }
@@ -1804,10 +1862,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) {
@@ -1815,7 +1873,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);
@@ -1837,7 +1895,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;
 	}
@@ -2342,7 +2400,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}`,
@@ -2649,6 +2708,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 = 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))
+	})] });
+}
+//#endregion
 //#region source/openapi/components/SchemaProperties.tsx
 function getEnumDescriptions(schema) {
 	const descriptions = schema["x-enumDescriptions"];
@@ -3038,7 +3175,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 = require_i18n.useBuiltInText();
 	const hasRequestBody = Boolean(requestBody && requestContents.length > 0);
 	const renderDescription = () => {
@@ -3061,6 +3198,7 @@ function EndpointRequest(arg0) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "w-full",
 			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiAuthDocumentation, { options: authOptions }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
 					title: t("openapi.pathParameters"),
 					parameters: groupedParameters.path
@@ -3156,7 +3294,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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Listbox, {
 		value,
@@ -3168,6 +3306,7 @@ function InlineListbox(arg0) {
 				"aria-label": label,
 				"aria-invalid": invalid || void 0,
 				"aria-describedby": describedBy,
+				title,
 				className: (0, clsx.default)(buttonClassName ?? defaultButtonClassName, buttonClassName ? null : compact ? "min-h-7 max-w-32 px-2 py-0.5 text-xs" : "min-h-8 w-full px-2 text-xs"),
 				children: buttonContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "truncate",
@@ -3345,7 +3484,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();
@@ -3354,7 +3494,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;
@@ -3457,9 +3608,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(),
@@ -3518,6 +3669,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("option", { value: "" }) : null, options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: String(option),
+				children: String(option)
+			}, String(option)))]
+		});
+		else if (schemaHasType(propertySchema, "boolean")) control = /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,1.3fr)]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate font-mono",
+						children: name
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "font-mono text-2xs text-(--clarify-ui-text-faint)",
+						children: type
+					}),
+					required.has(name) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-(--clarify-error-accent-text)",
+						children: "*"
+					}) : null
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 items-center",
+				children: [control, files[name] ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "sr-only",
+					children: files[name].name
+				}) : null]
+			})]
+		}, name);
+	}
+	if (properties && isFormMediaType(mediaType)) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex min-h-44 items-start p-3",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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;
@@ -3554,7 +3856,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__ */ (0, react_jsx_runtime.jsx)(lucide_react.InfoIcon, {
 			className: "size-4",
@@ -3600,7 +3902,7 @@ function RequestField(arg0) {
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, clsx.default)("col-start-2 flex min-w-0 items-center border-t border-(--clarify-theme-tokens-colors-border) sm:col-start-3 sm:row-start-1 sm:border-t-0", !enabled && "opacity-45"),
+				className: (0, clsx.default)("col-start-2 flex min-w-0 items-center border-t border-(--clarify-theme-tokens-colors-border) sm:col-start-3 sm:row-start-1 sm:border-t-0", !enabled && "bg-(--clarify-ui-subtle-background)"),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "min-w-0 flex-1",
 					children: itemOptions.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultiInlineListbox, {
@@ -3713,6 +4015,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: (0, yaml.stringify)((0, yaml.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";
@@ -3741,38 +4094,6 @@ function ResponseState(arg0) {
 		})
 	});
 }
-function JsonPreview(arg0) {
-	const { value } = arg0;
-	if (Array.isArray(value)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "space-y-1 border-l border-(--clarify-code-border) pl-3",
-		children: value.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "mr-2 text-(--clarify-code-faint)",
-			children: index
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonPreview, { value: item })] }, index))
-	});
-	if (isRecord$1(value)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "space-y-1 border-l border-(--clarify-code-border) pl-3",
-		children: Object.entries(value).map(([key, item]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid grid-cols-[minmax(5rem,auto)_1fr] gap-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-(--clarify-code-property)",
-				children: key
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonPreview, { value: item })]
-		}, key))
-	});
-	if (value === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "text-(--clarify-code-faint)",
-		children: "null"
-	});
-	if (typeof value === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "wrap-break-word text-(--clarify-code-string)",
-		children: value
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "text-(--clarify-code-number)",
-		children: String(value)
-	});
-}
 function CopyButton(arg0) {
 	const { value } = arg0;
 	const t = require_i18n.useBuiltInText();
@@ -3829,22 +4150,12 @@ function ResponseMedia(arg0) {
 function ResponsePreview(arg0) {
 	const { exchange } = arg0;
 	const t = require_i18n.useBuiltInText();
-	const contentType = exchange.contentType.toLowerCase();
+	const contentType = normalizedMediaType(exchange.contentType);
 	if (!exchange.size) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseState, {
 		icon: lucide_react.FileX2Icon,
 		title: t("openapi.responseBodyEmptyTitle"),
 		description: t("openapi.responseBodyEmpty")
 	});
-	if (contentType.includes("json")) {
-		const parsed = parseJson(exchange.body);
-		return typeof parsed === "undefined" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-			className: "whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
-			children: exchange.body
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "overflow-auto font-mono text-xs/5",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonPreview, { value: parsed })
-		});
-	}
 	if (contentType.startsWith("image/")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseMedia, {
 		blob: exchange.blob,
 		type: "image"
@@ -3857,15 +4168,19 @@ function ResponsePreview(arg0) {
 		blob: exchange.blob,
 		type: "video"
 	});
-	if (contentType.includes("html")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+	if (contentType === "text/html" || contentType === "application/xhtml+xml") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
 		srcDoc: exchange.body,
 		sandbox: "",
 		title: "Response preview",
 		className: "h-96 w-full border-0 bg-white"
 	});
-	if (contentType.startsWith("text/") || contentType.includes("xml") || contentType.includes("yaml")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-		className: "whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
-		children: exchange.body
+	const textPreview = getResponseTextPreview(exchange.contentType, exchange.body);
+	if (textPreview) return /* @__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: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightedCode, {
+			code: textPreview.code,
+			language: textPreview.language
+		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "grid min-h-56 place-items-center text-xs text-(--clarify-code-faint)",
@@ -3972,7 +4287,10 @@ function HiddenCookies() {
 function OpenApiResponseViewer(arg0) {
 	const { exchange, error } = arg0;
 	const t = require_i18n.useBuiltInText();
-	const [bodyMode, setBodyMode] = (0, react.useState)("preview");
+	const [bodyModeSelection, setBodyModeSelection] = (0, react.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);
@@ -4054,12 +4372,15 @@ function OpenApiResponseViewer(arg0) {
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									role: "tablist",
 									className: "flex",
-									children: ["preview", "raw"].map((mode) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									children: ["preview", "raw"].filter((mode) => mode === "raw" || previewAvailable).map((mode) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										role: "tab",
-										"aria-selected": bodyMode === mode,
-										onClick: () => setBodyMode(mode),
-										className: (0, clsx.default)("border-b-2 px-2.5 py-1 text-2xs font-semibold", bodyMode === mode ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-code-text)" : "border-transparent text-(--clarify-code-muted)"),
+										"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", {
@@ -4078,7 +4399,7 @@ function OpenApiResponseViewer(arg0) {
 								})]
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "p-4",
-								children: bodyMode === "preview" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsePreview, { exchange }) : exchange.size ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+								children: activeBodyMode === "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", {
@@ -4200,6 +4521,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] = (0, react.useState)(getServerKey(servers[0], 0));
@@ -4214,7 +4552,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] = (0, react.useState)(requestContents[0]?.mediaType ?? "");
-	const [body, setBody] = (0, react.useState)(stringifyExample(getExampleEntries((requestContents.find((entry) => entry.mediaType === mediaType) ?? requestContents[0])?.value, spec)[0]?.value));
+	const selectedContent = requestContents.find((entry) => entry.mediaType === mediaType) ?? requestContents[0];
+	const [body, setBody] = (0, react.useState)(initialRequestBody(spec, selectedContent?.value));
+	const [bodyFiles, setBodyFiles] = (0, react.useState)({});
 	function selectServer(value) {
 		const nextServer = servers.find((server, index) => getServerKey(server, index) === value) ?? servers[0];
 		setSelectedServerKey(value);
@@ -4223,7 +4563,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,
@@ -4243,13 +4596,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] = (0, react.useState)(() => Object.fromEntries(parameters.map((parameter) => [parameterKey(parameter), initialParameterValue(parameter)])));
+function useOpenApiParameterState(spec, parameters, initialParameterValue, initialExampleKey = "") {
+	const [parameterValues, setParameterValues] = (0, react.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] = (0, react.useState)(() => Object.fromEntries(parameters.map((parameter) => [parameterKey(parameter), true])));
 	const [parameterIssues, setParameterIssues] = (0, react.useState)({});
 	function setParameterGroupValues(grouped, mode) {
@@ -4284,6 +4644,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);
@@ -4296,6 +4663,7 @@ function useOpenApiParameterState(spec, parameters, initialParameterValue) {
 		setParameterGroupValues,
 		setParameterIncluded,
 		updateParameterValue,
+		applyParameterExample,
 		validate
 	};
 }
@@ -4335,6 +4703,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));
@@ -4349,9 +4718,12 @@ function OpenApiRequestWorkbench(arg0) {
 	const { spec, path, method, operation, operationSource = "path", compact = false, onClose } = arg0;
 	const t = require_i18n.useBuiltInText();
 	const parameters = getOperationParameters(spec, path, operation, operationSource);
-	const { servers, selectedServer, selectedServerKey, serverVariables, setServerVariables, serverVariableEntries, selectServer, authOptions, selectedAuthName, setSelectedAuthName, selectedAuth, credentialScope, credentials, setCredential, clearCredential, requestContents, mediaType, body, setBody, selectMediaType } = useOpenApiRequestTarget(spec, path, operation, operationSource);
-	const parameterState = useOpenApiParameterState(spec, parameters, (parameter) => initialParameterValue(spec, parameter));
-	const { parameterValues, parameterEnabled, parameterIssues, setParameterGroupValues, setParameterIncluded, updateParameterValue } = parameterState;
+	const { 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] = (0, react.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",
@@ -4363,6 +4735,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);
@@ -4381,6 +4765,7 @@ function OpenApiRequestWorkbench(arg0) {
 			})),
 			mediaType,
 			body,
+			bodyFiles,
 			baseUrl: window.location.href
 		}), t("openapi.requestCorsHint"));
 	}
@@ -4431,44 +4816,84 @@ function OpenApiRequestWorkbench(arg0) {
 		}, location);
 	}
 	function renderHeader() {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex min-w-0 items-center gap-1.5 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-2",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointMethodBadge, { method: method.toUpperCase() }),
-				servers.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineListbox, {
-					label: t("openapi.server"),
-					value: selectedServerKey,
-					options: servers.map((server, index) => ({
-						value: getServerKey(server, index),
-						label: server.url ?? `Server ${index + 1}`,
-						description: server.description
-					})),
-					onChange: selectServer,
-					className: "min-w-0 max-w-48 shrink sm:max-w-48",
-					buttonClassName: "flex h-8 min-w-0 max-w-full items-center gap-1 rounded-(--clarify-theme-tokens-radius-md) px-2 text-xs font-medium text-(--clarify-ui-text-strong) outline-hidden transition hover:bg-(--clarify-ui-hover-background) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)"
-				}) : null,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "min-w-0 flex-1 overflow-x-auto border-l border-(--clarify-theme-tokens-colors-border) pl-2 font-mono text-xs text-(--clarify-theme-tokens-colors-foreground)",
-					children: path || "/"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SendRequestButton, {
-					label: sending ? t("openapi.sendingRequest") : t("openapi.sendRequest"),
-					busy: sending,
-					text: t("openapi.sendRequest"),
-					onClick: sendRequest
-				}),
-				onClose ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: onClose,
-					"aria-label": t("openapi.closeRequest"),
-					title: t("openapi.closeRequest"),
-					className: "grid size-8 shrink-0 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {
-						className: "size-4",
-						"aria-hidden": "true"
-					})
-				}) : null
-			]
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "col-start-1 row-start-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointMethodBadge, { method: method.toUpperCase() })
+					}),
+					servers.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineListbox, {
+						label: t("openapi.server"),
+						value: selectedServerKey,
+						options: servers.map((server, index) => ({
+							value: getServerKey(server, index),
+							label: server.url ?? `Server ${index + 1}`,
+							description: server.description
+						})),
+						onChange: selectServer,
+						title: selectedServer.url ?? t("openapi.server"),
+						buttonContent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.RotateCcwIcon, {
+								className: "size-3.5",
+								"aria-hidden": "true"
+							})
+						})]
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "col-start-4 row-start-1 lg:col-start-5",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SendRequestButton, {
+							label: sending ? t("openapi.sendingRequest") : t("openapi.sendRequest"),
+							busy: sending,
+							text: t("openapi.sendRequest"),
+							onClick: sendRequest
+						})
+					}),
+					onClose ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: onClose,
+						"aria-label": t("openapi.closeRequest"),
+						title: t("openapi.closeRequest"),
+						className: "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__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					}) : null
+				]
+			})
 		});
 	}
 	function renderVariables() {
@@ -4508,13 +4933,15 @@ function OpenApiRequestWorkbench(arg0) {
 					value: entry.mediaType,
 					label: entry.mediaType
 				})),
-				onChange: selectMediaType
-			}) }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-				"aria-label": t("openapi.requestBody"),
-				value: body,
-				onChange: (event) => setBody(event.target.value),
-				spellCheck: false,
-				className: "block h-full min-h-44 w-full resize-none border-0 bg-(--clarify-code-background) p-3 font-mono text-xs/5 text-(--clarify-code-text) outline-hidden focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary)"
+				onChange: selectRequestMediaType
+			}) }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiRequestBodyEditor, {
+				spec,
+				mediaType,
+				content: selectedContent?.value,
+				body,
+				files: bodyFiles,
+				onBodyChange: setBody,
+				onFileChange: setBodyFile
 			})]
 		});
 	}
@@ -4902,6 +5329,7 @@ function OpenApiOperation(arg0) {
 				onSelectRequestMediaType: requestState.setSelectedRequestMediaType,
 				selectedServer: serverState.selectedServer,
 				serverVariables: serverState.serverVariables,
+				authOptions: authState.authOptions,
 				auth: authState.authInput,
 				sharedExampleKey: linkedExampleKey,
 				onSelectExampleKey: setLinkedExampleKey
@@ -5142,4 +5570,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-D-5uE5v7.cjs.map
+//# sourceMappingURL=OpenApiOperation-bdALspAY.cjs.map