@clarify-labs/renderer 0.2.0 → 0.4.0

package/output/index.js

@@ -1,12 +1,13 @@
-import { C as Card, D as SectionProvider, E as BuiltWithClarify, O as useSectionStore, S as Pre, T as Callout, _ as GridPattern, a as Heading, b as Code, c as Tag, d as useTheme, f as PageFooter, g as useOpenApis, h as useClarifyConfig, i as DocShell, k as remToPx, l as ThemeToggle, m as OpenApisContext, n as ApiEndpointCard, o as Logo, p as ClarifyConfigContext, r as Button, s as Prose, t as AppShell, u as ThemeProvider, v as HeroPattern, w as CardGroup, x as CodeGroup, y as Feedback } from "./AppShell-Ci894P_0.js";
-import { t as render } from "./render-bPMMBoDH.js";
-import { createElement, useRef, useState } from "react";
+import { A as remToPx, C as useBuiltInText, D as useOpenApis, E as useClarifyConfig, O as SectionProvider, S as BuiltWithClarify, T as OpenApisContext, _ as CodeGroup, a as Heading, b as CardGroup, c as Tag, d as useTheme, f as PageFooter, g as Code, h as Feedback, i as DocShell, k as useSectionStore, l as ThemeToggle, m as HeroPattern, n as ApiEndpointCard, o as Logo, p as GridPattern, r as Button, s as Prose, t as AppShell, u as ThemeProvider, v as Pre, w as ClarifyConfigContext, x as Callout, y as Card } from "./AppShell-nQnuKyn2.js";
+import { t as render } from "./render-BCiQn6Q1.js";
+import clsx from "clsx";
+import { createElement, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import { CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, ClipboardIcon, CodeIcon, LockKeyholeIcon, PackageIcon, ServerIcon, UnlockKeyholeIcon } from "lucide-react";
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
-import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
 import { slug } from "github-slugger";
+import { snippetz } from "@scalar/snippetz";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
@@ -40,12 +41,12 @@ var primitives_exports = /* @__PURE__ */ __exportAll({
 });
 function wrapper(arg0) {
 	const { children } = arg0;
-	return /* @__PURE__ */ jsxs("article", {
+	return /* @__PURE__ */ jsx("article", {
 		className: "clarify-mdx-page flex h-full flex-col pt-16 pb-10",
-		children: [/* @__PURE__ */ jsx(Prose, {
+		children: /* @__PURE__ */ jsx(Prose, {
 			className: "flex-auto",
 			children
-		}), /* @__PURE__ */ jsx(PageFooter, {})]
+		})
 	});
 }
 function a(arg0) {
@@ -104,8 +105,8 @@ function InfoIcon(props) {
 function Note(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-note my-6 flex gap-2.5 rounded-2xl border border-emerald-500/20 bg-emerald-50/50 p-4 text-sm/6 text-emerald-900 dark:border-emerald-500/30 dark:bg-emerald-500/5 dark:text-emerald-200 dark:[--tw-prose-links-hover:var(--color-emerald-300)] dark:[--tw-prose-links:var(--color-white)]",
-		children: [/* @__PURE__ */ jsx(InfoIcon, { className: "mt-1 h-4 w-4 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200" }), /* @__PURE__ */ jsx("div", {
+		className: "clarify-note my-6 flex gap-2.5 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) p-4 text-sm/6 text-(--clarify-theme-tokens-colors-foreground) dark:text-zinc-100 dark:[--tw-prose-links-hover:var(--clarify-ui-accent-text)] dark:[--tw-prose-links:var(--color-white)]",
+		children: [/* @__PURE__ */ jsx(InfoIcon, { className: "mt-1 h-4 w-4 flex-none fill-(--clarify-ui-accent-text) stroke-(--clarify-theme-tokens-colors-surface) dark:fill-(--clarify-ui-accent-background) dark:stroke-(--clarify-ui-accent-text)" }), /* @__PURE__ */ jsx("div", {
 			className: "*:first:mt-0 *:last:mb-0",
 			children
 		})]
@@ -114,7 +115,7 @@ function Note(arg0) {
 function Row(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ jsx("div", {
-		className: "clarify-row grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2",
+		className: "clarify-row grid grid-cols-1 items-start gap-x-8 gap-y-10 xl:max-w-none xl:grid-cols-2",
 		children
 	});
 }
@@ -147,12 +148,15 @@ function Property(arg0) {
 					className: "sr-only",
 					children: "Name"
 				}),
-				/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("code", { children: name }) }),
+				/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("span", {
+					className: "text-sm/5 font-semibold text-zinc-950 dark:text-white",
+					children: name
+				}) }),
 				type ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
 					className: "sr-only",
 					children: "Type"
 				}), /* @__PURE__ */ jsx("dd", {
-					className: "font-mono text-xs text-zinc-400 dark:text-zinc-500",
+					className: "font-mono text-xs text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-500",
 					children: type
 				})] }) : null,
 				/* @__PURE__ */ jsx("dt", {
@@ -168,43 +172,7 @@ function Property(arg0) {
 	});
 }
 //#endregion
-//#region source/openapi/utils.ts
-var OPENAPI_HTTP_METHODS = [
-	"get",
-	"put",
-	"post",
-	"delete",
-	"options",
-	"head",
-	"patch",
-	"trace"
-];
-function isOpenAPIHttpMethod(method) {
-	return OPENAPI_HTTP_METHODS.includes(method.toLowerCase());
-}
-function getOpenApiOperation(spec, path, method) {
-	if (!isOpenAPIHttpMethod(method)) return void 0;
-	return spec.paths?.[path]?.[method.toLowerCase()];
-}
-function listOpenApiOperations(spec) {
-	const paths = spec.paths ?? {};
-	const operations = [];
-	for (const [path, pathItem] of Object.entries(paths)) {
-		if (!pathItem) continue;
-		for (const method of OPENAPI_HTTP_METHODS) {
-			const operation = pathItem[method];
-			if (operation) operations.push({
-				path,
-				method,
-				operation
-			});
-		}
-	}
-	return operations;
-}
-//#endregion
-//#region source/openapi/index.tsx
-var VIRTUAL_PREFIX = "virtual:clarify-page/";
+//#region source/openapi/helpers.ts
 function isRecord(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -214,6 +182,16 @@ function isReference(value) {
 function resolveReferenceName(ref) {
 	return ref.split("/").filter(Boolean).at(-1) ?? ref;
 }
+function resolveOpenApiRef(spec, ref) {
+	if (!ref.startsWith("#/")) return void 0;
+	return ref.slice(2).split("/").map((part) => part.replace(/~1/g, "/").replace(/~0/g, "~")).reduce((current, part) => isRecord(current) ? current[part] : void 0, spec);
+}
+function resolveSchema(spec, schema, seen = /* @__PURE__ */ new Set()) {
+	if (!isReference(schema)) return schema;
+	if (seen.has(schema.$ref)) return schema;
+	seen.add(schema.$ref);
+	return resolveSchema(spec, resolveOpenApiRef(spec, schema.$ref), seen) ?? schema;
+}
 function getPathItem(spec, path) {
 	const pathItem = spec.paths?.[path];
 	return isRecord(pathItem) ? pathItem : void 0;
@@ -223,7 +201,7 @@ function getOperationParameters(spec, path, operation) {
 	const operationParameters = operation.parameters;
 	return [...Array.isArray(pathParameters) ? pathParameters : [], ...Array.isArray(operationParameters) ? operationParameters : []].filter((parameter) => isRecord(parameter) && !isReference(parameter));
 }
-function getRequestBody(operation) {
+function getRequestBody$1(operation) {
 	const requestBody = operation.requestBody;
 	return isRecord(requestBody) && !isReference(requestBody) ? requestBody : void 0;
 }
@@ -279,7 +257,7 @@ function getExampleEntries(mediaType) {
 	const generated = schemaToExample(mediaType.schema);
 	return typeof generated === "undefined" ? [] : [{
 		key: "schema",
-		title: "Schema example",
+		title: "schema",
 		value: generated,
 		generated: true
 	}];
@@ -290,11 +268,14 @@ function getContentExample(mediaType) {
 function schemaToType(schema) {
 	if (!isRecord(schema)) return void 0;
 	if (isReference(schema)) return resolveReferenceName(schema.$ref);
+	if (typeof schema.const !== "undefined") return JSON.stringify(schema.const);
 	if (Array.isArray(schema.enum)) return schema.enum.map(String).join(" | ");
 	const oneOf = schema.oneOf ?? schema.anyOf;
 	if (Array.isArray(oneOf)) return oneOf.map(schemaToType).filter(Boolean).join(" | ");
+	if (Array.isArray(schema.allOf)) return schema.allOf.map(schemaToType).filter(Boolean).join(" & ");
 	if (schema.type === "array") return `${schemaToType(schema.items) ?? "unknown"}[]`;
-	return typeof schema.type === "string" ? schema.type : void 0;
+	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;
 }
 function schemaToExample(schema, depth = 0) {
 	if (!isRecord(schema) || depth > 3) return void 0;
@@ -322,33 +303,6 @@ function stringifyExample(value) {
 	if (typeof value === "string") return value;
 	return JSON.stringify(value, null, 2);
 }
-function shellQuote(value) {
-	return `'${value.replace(/'/g, `'"'"'`)}'`;
-}
-function getServerUrl(spec) {
-	const servers = spec.servers;
-	if (!Array.isArray(servers)) return "";
-	const firstServer = servers.find(isRecord);
-	return typeof firstServer?.url === "string" ? firstServer.url : "";
-}
-function buildOperationUrl(spec, path, parameters) {
-	const query = parameters.filter((parameter) => parameter.in === "query" && parameter.name).map((parameter) => `${parameter.name}={${parameter.name}}`).join("&");
-	return `${getServerUrl(spec).replace(/\/$/, "")}${path}${query ? `?${query}` : ""}`;
-}
-function buildCurlExample(arg0) {
-	const { spec, path, method, parameters, requestContent } = arg0;
-	const url = buildOperationUrl(spec, path, parameters);
-	const lines = [`curl ${method === "GET" ? "-G " : ""}${shellQuote(url)}`];
-	if (method !== "GET") lines.push(`  -X ${method}`);
-	lines.push("  -H 'Authorization: Bearer {token}'");
-	lines.push("  -H 'Accept: application/json'");
-	const requestExample = getContentExample(requestContent?.value);
-	if (requestContent && typeof requestExample !== "undefined") {
-		lines.push(`  -H 'Content-Type: ${requestContent.mediaType}'`);
-		lines.push(`  -d ${shellQuote(stringifyExample(requestExample))}`);
-	}
-	return lines.join(" \\\n");
-}
 function getResponseEntries(operation) {
 	const responses = operation.responses;
 	if (!isRecord(responses)) return [];
@@ -357,45 +311,6 @@ function getResponseEntries(operation) {
 		response
 	}));
 }
-function SchemaProperties(arg0) {
-	const { title, schema } = arg0;
-	const targetSchema = isReference(schema) ? void 0 : schema;
-	const properties = isRecord(targetSchema) && isRecord(targetSchema.properties) ? targetSchema.properties : void 0;
-	const required = isRecord(targetSchema) && Array.isArray(targetSchema.required) ? targetSchema.required.map(String) : [];
-	if (!properties || Object.keys(properties).length === 0) return null;
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title }), /* @__PURE__ */ jsx(Properties, { children: Object.entries(properties).map(([name, propertySchema]) => {
-		const property = isRecord(propertySchema) ? propertySchema : {};
-		const type = schemaToType(propertySchema);
-		const description = typeof property.description === "string" ? property.description : void 0;
-		const isRequired = required.includes(name);
-		return /* @__PURE__ */ jsx(Property, {
-			name,
-			type: isRequired && type ? `${type}, required` : type,
-			children: description ?? (isRequired ? "Required." : "Optional.")
-		}, name);
-	}) })] });
-}
-function ParameterList(arg0) {
-	const { title, parameters } = arg0;
-	if (parameters.length === 0) return null;
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title }), /* @__PURE__ */ jsx(Properties, { children: parameters.map((parameter) => /* @__PURE__ */ jsx(Property, {
-		name: parameter.name ?? "parameter",
-		type: [schemaToType(parameter.schema), parameter.required ? "required" : void 0].filter(Boolean).join(", ") || void 0,
-		children: parameter.description ?? `${parameter.in ?? "Operation"} parameter.`
-	}, `${parameter.in}-${parameter.name}`)) })] });
-}
-function ResponseList(arg0) {
-	const { operation } = arg0;
-	const responses = getResponseEntries(operation);
-	if (responses.length === 0) return null;
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: "Responses" }), /* @__PURE__ */ jsx(Properties, { children: responses.map(({ status, response }) => {
-		return /* @__PURE__ */ jsx(Property, {
-			name: status,
-			type: schemaToType(getJsonLikeContent(response.content)?.value.schema),
-			children: response.description ?? "Response."
-		}, status);
-	}) })] });
-}
 function codeLanguageForMediaType(mediaType) {
 	if (!mediaType) return "json";
 	if (mediaType.includes("json")) return "json";
@@ -404,112 +319,523 @@ function codeLanguageForMediaType(mediaType) {
 	if (mediaType.includes("xml")) return "xml";
 	return "text";
 }
+//#endregion
+//#region source/openapi/request-code.ts
+var snippetGenerator = snippetz();
+function getDefaultServer(spec) {
+	const servers = spec.servers;
+	if (!Array.isArray(servers)) return { url: "https://api.example.com" };
+	const firstServer = servers.find(isRecord);
+	return firstServer && typeof firstServer.url === "string" ? firstServer : { url: "https://api.example.com" };
+}
+function expandServerUrl(server, serverVariables = {}) {
+	return (server.url ?? "https://api.example.com").replace(/\{([^}]+)\}/g, (_, name) => {
+		const fallback = server.variables?.[name]?.default ?? name;
+		return serverVariables[name] ?? fallback;
+	});
+}
+function buildOperationUrl(input) {
+	return `${expandServerUrl(input.server ?? getDefaultServer(input.spec), input.serverVariables).replace(/\/$/, "")}${input.path}`;
+}
+function getQueryString(parameters, auth) {
+	const queryString = parameters.filter((parameter) => parameter.in === "query" && parameter.name).map((parameter) => ({
+		name: parameter.name,
+		value: encodeUrlPlaceholders(`{${parameter.name}}`)
+	}));
+	if (auth?.scheme.type === "apiKey" && auth.scheme.in === "query" && auth.scheme.name) queryString.push({
+		name: auth.scheme.name,
+		value: auth.value
+	});
+	return queryString;
+}
+function isFormMediaType(mediaType) {
+	return mediaType.includes("multipart/form-data") || mediaType.includes("application/x-www-form-urlencoded");
+}
+function isBinarySchema(schema) {
+	return isRecord(schema) && schema.type === "string" && schema.format === "binary";
+}
+function getSchemaProperties(schema) {
+	return isRecord(schema) && isRecord(schema.properties) ? schema.properties : {};
+}
+function getFieldValue(name, value, schema) {
+	if (isRecord(value) && typeof value[name] !== "undefined") return value[name];
+	if (isBinarySchema(schema)) return `@${name}`;
+}
+function getFormParams(value, requestContent) {
+	const properties = getSchemaProperties(requestContent.value.schema);
+	return Array.from(new Set([...Object.keys(properties), ...isRecord(value) ? Object.keys(value) : []])).flatMap((name) => {
+		const fieldValue = getFieldValue(name, value, properties[name]);
+		if (typeof fieldValue === "undefined") return [];
+		const contentType = requestContent.value.encoding?.[name]?.contentType;
+		return [{
+			name,
+			value: typeof fieldValue === "string" ? fieldValue : stringifyExample(fieldValue),
+			...contentType ? { contentType } : {}
+		}];
+	});
+}
+function getBodySize(requestBody) {
+	if (requestBody?.serialized) return requestBody.serialized.length;
+	return requestBody?.params?.reduce((size, param) => size + param.name.length + String(param.value ?? "").length, 0) ?? 0;
+}
+function getRequestBody(requestContent) {
+	const value = getContentExample(requestContent?.value);
+	if (!requestContent || typeof value === "undefined") return void 0;
+	if (isFormMediaType(requestContent.mediaType)) {
+		const params = getFormParams(value, requestContent);
+		return params.length > 0 ? { params } : void 0;
+	}
+	return { serialized: stringifyExample(value) };
+}
+function getAuthorizationValue(auth) {
+	if (auth.scheme.type === "http" && auth.scheme.scheme?.toLowerCase() === "bearer") return `Bearer ${auth.value}`;
+	if (auth.scheme.type === "http" && auth.scheme.scheme?.toLowerCase() === "basic") return `Basic ${auth.value}`;
+	if (auth.scheme.type === "oauth2" || auth.scheme.type === "openIdConnect") return `Bearer ${auth.value}`;
+}
+function getAuthHeaders(auth) {
+	if (!auth) return {};
+	if (auth.scheme.type === "apiKey" && auth.scheme.in === "header" && auth.scheme.name) return { [auth.scheme.name]: auth.value };
+	const authorization = getAuthorizationValue(auth);
+	return authorization ? { Authorization: authorization } : {};
+}
+function getRequestHeaders(requestContent, auth) {
+	return {
+		...getAuthHeaders(auth),
+		Accept: "application/json",
+		...requestContent ? { "Content-Type": requestContent.mediaType } : {}
+	};
+}
+function encodeUrlPlaceholders(url) {
+	return url.replace(/\{([^}]+)\}/g, (_, name) => `%7B${encodeURIComponent(name)}%7D`);
+}
+function decodeUrlPlaceholders(code) {
+	return code.replace(/%7B([^%]+)%7D/g, (_, name) => `{${decodeURIComponent(name)}}`);
+}
+function buildHarRequest(input) {
+	const requestBody = getRequestBody(input.requestContent);
+	const url = encodeUrlPlaceholders(buildOperationUrl(input));
+	return {
+		method: input.method,
+		url,
+		httpVersion: "HTTP/1.1",
+		cookies: [],
+		headers: Object.entries(getRequestHeaders(input.requestContent, input.auth)).map(([name, value]) => ({
+			name,
+			value
+		})),
+		queryString: getQueryString(input.parameters, input.auth),
+		headersSize: -1,
+		bodySize: getBodySize(requestBody),
+		postData: requestBody ? {
+			mimeType: input.requestContent?.mediaType ?? "",
+			...requestBody.serialized ? { text: requestBody.serialized } : {},
+			...requestBody.params ? { params: requestBody.params } : {}
+		} : void 0
+	};
+}
+function buildSnippet(input, target) {
+	return decodeUrlPlaceholders(snippetGenerator.print(target.target, target.client, buildHarRequest(input)) || "");
+}
+var requestSnippetOptions = [
+	{
+		languageKey: "shell",
+		title: "Shell",
+		language: "bash",
+		target: "shell",
+		client: "curl",
+		clientTitle: "cURL"
+	},
+	{
+		languageKey: "shell",
+		title: "Shell",
+		language: "bash",
+		target: "shell",
+		client: "wget",
+		clientTitle: "Wget"
+	},
+	{
+		languageKey: "shell",
+		title: "Shell",
+		language: "bash",
+		target: "shell",
+		client: "httpie",
+		clientTitle: "HTTPie"
+	},
+	{
+		languageKey: "javascript",
+		title: "JavaScript",
+		language: "javascript",
+		target: "js",
+		client: "fetch",
+		clientTitle: "Fetch"
+	},
+	{
+		languageKey: "javascript",
+		title: "JavaScript",
+		language: "javascript",
+		target: "js",
+		client: "axios",
+		clientTitle: "Axios"
+	},
+	{
+		languageKey: "javascript",
+		title: "JavaScript",
+		language: "javascript",
+		target: "js",
+		client: "ofetch",
+		clientTitle: "ofetch"
+	},
+	{
+		languageKey: "javascript",
+		title: "JavaScript",
+		language: "javascript",
+		target: "js",
+		client: "xhr",
+		clientTitle: "XHR"
+	},
+	{
+		languageKey: "typescript",
+		title: "TypeScript",
+		language: "typescript",
+		target: "js",
+		client: "fetch",
+		clientTitle: "Fetch"
+	},
+	{
+		languageKey: "typescript",
+		title: "TypeScript",
+		language: "typescript",
+		target: "js",
+		client: "axios",
+		clientTitle: "Axios"
+	},
+	{
+		languageKey: "typescript",
+		title: "TypeScript",
+		language: "typescript",
+		target: "js",
+		client: "ofetch",
+		clientTitle: "ofetch"
+	},
+	{
+		languageKey: "python",
+		title: "Python",
+		language: "python",
+		target: "python",
+		client: "requests",
+		clientTitle: "Requests"
+	},
+	{
+		languageKey: "python",
+		title: "Python",
+		language: "python",
+		target: "python",
+		client: "python3",
+		clientTitle: "http.client"
+	},
+	{
+		languageKey: "python",
+		title: "Python",
+		language: "python",
+		target: "python",
+		client: "httpx_sync",
+		clientTitle: "HTTPX"
+	},
+	{
+		languageKey: "python",
+		title: "Python",
+		language: "python",
+		target: "python",
+		client: "aiohttp",
+		clientTitle: "aiohttp"
+	},
+	{
+		languageKey: "go",
+		title: "Go",
+		language: "go",
+		target: "go",
+		client: "native",
+		clientTitle: "NewRequest"
+	},
+	{
+		languageKey: "node",
+		title: "Node.js",
+		language: "javascript",
+		target: "node",
+		client: "fetch",
+		clientTitle: "Fetch"
+	},
+	{
+		languageKey: "node",
+		title: "Node.js",
+		language: "javascript",
+		target: "node",
+		client: "axios",
+		clientTitle: "Axios"
+	},
+	{
+		languageKey: "node",
+		title: "Node.js",
+		language: "javascript",
+		target: "node",
+		client: "ofetch",
+		clientTitle: "ofetch"
+	},
+	{
+		languageKey: "node",
+		title: "Node.js",
+		language: "javascript",
+		target: "node",
+		client: "undici",
+		clientTitle: "undici"
+	},
+	{
+		languageKey: "java",
+		title: "Java",
+		language: "java",
+		target: "java",
+		client: "nethttp",
+		clientTitle: "java.net.http"
+	},
+	{
+		languageKey: "java",
+		title: "Java",
+		language: "java",
+		target: "java",
+		client: "okhttp",
+		clientTitle: "OkHttp"
+	},
+	{
+		languageKey: "java",
+		title: "Java",
+		language: "java",
+		target: "java",
+		client: "unirest",
+		clientTitle: "Unirest"
+	},
+	{
+		languageKey: "java",
+		title: "Java",
+		language: "java",
+		target: "java",
+		client: "asynchttp",
+		clientTitle: "AsyncHttp"
+	},
+	{
+		languageKey: "csharp",
+		title: "C#",
+		language: "csharp",
+		target: "csharp",
+		client: "httpclient",
+		clientTitle: "HttpClient"
+	},
+	{
+		languageKey: "csharp",
+		title: "C#",
+		language: "csharp",
+		target: "csharp",
+		client: "restsharp",
+		clientTitle: "RestSharp"
+	},
+	{
+		languageKey: "php",
+		title: "PHP",
+		language: "php",
+		target: "php",
+		client: "guzzle",
+		clientTitle: "Guzzle"
+	},
+	{
+		languageKey: "php",
+		title: "PHP",
+		language: "php",
+		target: "php",
+		client: "curl",
+		clientTitle: "cURL"
+	},
+	{
+		languageKey: "php",
+		title: "PHP",
+		language: "php",
+		target: "php",
+		client: "laravel",
+		clientTitle: "Laravel HTTP Client"
+	},
+	{
+		languageKey: "ruby",
+		title: "Ruby",
+		language: "ruby",
+		target: "ruby",
+		client: "native",
+		clientTitle: "net::http"
+	},
+	{
+		languageKey: "rust",
+		title: "Rust",
+		language: "rust",
+		target: "rust",
+		client: "reqwest",
+		clientTitle: "reqwest"
+	},
+	{
+		languageKey: "swift",
+		title: "Swift",
+		language: "swift",
+		target: "swift",
+		client: "nsurlsession",
+		clientTitle: "NSURLSession"
+	},
+	{
+		languageKey: "kotlin",
+		title: "Kotlin",
+		language: "kotlin",
+		target: "kotlin",
+		client: "okhttp",
+		clientTitle: "OkHttp"
+	},
+	{
+		languageKey: "powershell",
+		title: "PowerShell",
+		language: "powershell",
+		target: "powershell",
+		client: "restmethod",
+		clientTitle: "Invoke-RestMethod"
+	},
+	{
+		languageKey: "powershell",
+		title: "PowerShell",
+		language: "powershell",
+		target: "powershell",
+		client: "webrequest",
+		clientTitle: "Invoke-WebRequest"
+	}
+];
+function buildRequestCodeExamples(input) {
+	return requestSnippetOptions.map((option) => ({
+		key: `${option.languageKey}:${option.client}`,
+		title: option.title,
+		language: option.language,
+		languageKey: option.languageKey,
+		clientKey: option.client,
+		clientTitle: option.clientTitle,
+		code: buildSnippet(input, option)
+	}));
+}
+//#endregion
+//#region source/openapi/example-panels.tsx
 function SelectControl(arg0) {
-	const { label, value, options, onChange } = arg0;
-	if (options.length <= 1) return null;
+	const { label, value, options, onChange, icon, compact = false } = arg0;
+	const normalizedOptions = options.map((option) => typeof option === "string" ? {
+		value: option,
+		label: option
+	} : option);
+	const selectedOption = normalizedOptions.find((option) => option.value === value) ?? normalizedOptions[0];
+	const wrapperClassName = compact ? "clarify-api-select relative min-w-0 text-xs" : "clarify-api-select relative shrink-0 text-xs";
+	const buttonSizeClassName = compact ? "w-full min-w-0 max-w-32" : "min-w-28 max-w-48";
+	if (normalizedOptions.length <= 1) return null;
 	return /* @__PURE__ */ jsx(Listbox, {
 		value,
 		onChange,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "clarify-api-select relative flex flex-col gap-1 text-[0.625rem]/5 font-semibold tracking-widest text-zinc-400 uppercase",
+			className: wrapperClassName,
 			children: [/* @__PURE__ */ jsxs(ListboxButton, {
-				className: "clarify-api-select-button flex min-w-32 items-center justify-between gap-2 rounded-lg border border-white/10 bg-zinc-900 px-2.5 py-1.5 font-mono text-xs font-medium tracking-normal text-zinc-100 outline-hidden transition hover:border-white/20 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/20 data-open:border-emerald-400 data-open:ring-2 data-open:ring-emerald-400/20",
+				"aria-label": label,
+				className: `clarify-api-select-button flex ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg bg-black/30 px-2 py-1 font-mono text-xs font-medium whitespace-nowrap text-zinc-100 outline-hidden transition hover:bg-black/50 focus:ring-2 focus:ring-emerald-400/25 data-open:bg-white/10 data-open:ring-2 data-open:ring-emerald-400/25`,
 				children: [/* @__PURE__ */ jsxs("span", {
-					className: "flex flex-col items-start gap-0.5 truncate",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "font-sans text-[0.625rem]/4 font-semibold tracking-widest text-zinc-500 uppercase",
-						children: label
-					}), /* @__PURE__ */ jsx("span", {
+					className: "flex min-w-0 items-center gap-1.5 overflow-hidden",
+					children: [icon ? /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-zinc-500",
+						children: icon
+					}) : null, /* @__PURE__ */ jsx("span", {
 						className: "truncate",
-						children: value
+						children: selectedOption?.label ?? value
 					})]
 				}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, {
 					className: "h-3.5 w-3.5 shrink-0 text-zinc-500",
 					"aria-hidden": "true"
 				})]
 			}), /* @__PURE__ */ jsx(ListboxOptions, {
-				anchor: "bottom start",
-				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-(--button-width) min-w-40 overflow-auto rounded-xl border border-white/10 bg-zinc-900 p-1 text-xs shadow-lg shadow-black/20 [--anchor-gap:--spacing(1)] focus:outline-none",
-				children: options.map((option) => /* @__PURE__ */ jsxs(ListboxOption, {
-					value: option,
-					className: "clarify-api-select-option group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 font-mono text-xs text-zinc-300 select-none data-focus:bg-white/10 data-focus:text-white data-selected:text-emerald-300",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "truncate",
-						children: option
-					}), /* @__PURE__ */ jsx(CheckIcon, {
+				anchor: "bottom end",
+				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-[min(32rem,calc(100vw-2rem))] overflow-auto rounded-xl bg-zinc-900 p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-white/10 [--anchor-gap:--spacing(1)] focus:outline-none",
+				children: normalizedOptions.map((option) => /* @__PURE__ */ jsxs(ListboxOption, {
+					value: option.value,
+					className: "clarify-api-select-option group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 font-mono text-xs whitespace-nowrap text-zinc-300 select-none data-focus:bg-white/10 data-focus:text-white data-selected:text-emerald-300",
+					children: [/* @__PURE__ */ jsx("span", { children: option.label }), /* @__PURE__ */ jsx(CheckIcon, {
 						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
 						"aria-hidden": "true"
 					})]
-				}, option))
+				}, option.value))
 			})]
 		})
 	});
 }
-function ExamplePicker(arg0) {
-	const { examples, selectedKey, onSelect } = arg0;
-	const scrollerRef = useRef(null);
-	if (examples.length <= 1) return null;
-	function scrollBy(direction) {
-		const el = scrollerRef.current;
-		if (!el) return;
-		el.scrollBy({
-			left: direction * Math.max(120, el.clientWidth * .6),
-			behavior: "smooth"
-		});
-	}
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative -mr-1 flex min-w-0 flex-1 items-center gap-1",
-		children: [
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-label": "Scroll examples left",
-				onClick: () => scrollBy(-1),
-				className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-zinc-500 transition hover:bg-white/5 hover:text-zinc-200",
-				children: /* @__PURE__ */ jsx("svg", {
-					viewBox: "0 0 20 20",
-					fill: "currentColor",
-					className: "h-3 w-3",
-					children: /* @__PURE__ */ jsx("path", {
-						fillRule: "evenodd",
-						d: "M12.79 5.23a.75.75 0 010 1.06L9.06 10l3.73 3.71a.75.75 0 11-1.06 1.06l-4.25-4.24a.75.75 0 010-1.06l4.25-4.24a.75.75 0 011.06 0z",
-						clipRule: "evenodd"
-					})
-				})
-			}),
-			/* @__PURE__ */ jsx("div", {
-				ref: scrollerRef,
-				className: "flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto whitespace-nowrap scroll-smooth scrollbar-none [&::-webkit-scrollbar]:hidden",
-				children: examples.map((example) => /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => onSelect(example.key),
-					title: example.summary,
-					className: ["shrink-0 rounded-md px-2 py-0.5 text-xs font-medium transition", example.key === selectedKey ? "bg-white/10 text-white" : "text-zinc-400 hover:bg-white/5 hover:text-zinc-200"].join(" "),
-					children: example.title
-				}, example.key))
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-label": "Scroll examples right",
-				onClick: () => scrollBy(1),
-				className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-zinc-500 transition hover:bg-white/5 hover:text-zinc-200",
-				children: /* @__PURE__ */ jsx("svg", {
-					viewBox: "0 0 20 20",
-					fill: "currentColor",
-					className: "h-3 w-3",
-					children: /* @__PURE__ */ jsx("path", {
-						fillRule: "evenodd",
-						d: "M7.21 14.77a.75.75 0 010-1.06L10.94 10 7.21 6.29a.75.75 0 111.06-1.06l4.25 4.24a.75.75 0 010 1.06l-4.25 4.24a.75.75 0 01-1.06 0z",
-						clipRule: "evenodd"
-					})
-				})
-			})
-		]
-	});
+function getExampleLabel(example, t) {
+	return example.generated && example.title === "schema" ? t("openapi.schemaExample") : example.title;
+}
+function getLanguageOptions(codeOptions) {
+	const languages = /* @__PURE__ */ new Map();
+	for (const option of codeOptions ?? []) languages.set(option.languageKey, option.title);
+	return Array.from(languages, ([value, label]) => ({
+		value,
+		label
+	}));
+}
+function getClientOptions(codeOptions, languageKey) {
+	return (codeOptions ?? []).filter((option) => option.languageKey === languageKey).map((option) => ({
+		value: option.clientKey,
+		label: option.clientTitle
+	}));
+}
+function getServers(spec, operation) {
+	const operationServers = operation.servers;
+	const servers = Array.isArray(operationServers) ? operationServers : spec.servers;
+	if (!Array.isArray(servers)) return [{ url: "https://api.example.com" }];
+	const validServers = servers.filter((server) => isRecord(server) && typeof server.url === "string");
+	return validServers.length > 0 ? validServers : [{ url: "https://api.example.com" }];
+}
+function getServerKey(server, index) {
+	return `${index}:${server.url ?? ""}`;
+}
+function getServerLabel(server, index) {
+	return server.description ? `${server.description} (${server.url})` : server.url ?? `Server ${index + 1}`;
+}
+function defaultServerVariables(server) {
+	return Object.fromEntries(Object.entries(server?.variables ?? {}).map(([name, variable]) => [name, variable.default ?? variable.enum?.[0] ?? ""]));
+}
+function getSecuritySchemes(spec) {
+	const schemes = spec.components;
+	if (!isRecord(schemes) || !isRecord(schemes.securitySchemes)) return {};
+	return Object.fromEntries(Object.entries(schemes.securitySchemes).filter((entry) => isRecord(entry[1])));
+}
+function getSecurityRequirements(spec, operation) {
+	const operationSecurity = operation.security;
+	if (Array.isArray(operationSecurity)) return operationSecurity.filter(isRecord);
+	const specSecurity = spec.security;
+	return Array.isArray(specSecurity) ? specSecurity.filter(isRecord) : [];
+}
+function getAuthOptions(spec, operation) {
+	const schemes = getSecuritySchemes(spec);
+	const requirements = getSecurityRequirements(spec, operation);
+	const names = new Set(requirements.flatMap((requirement) => Object.keys(requirement)));
+	return Array.from(names).map((name) => ({
+		name,
+		scheme: schemes[name]
+	})).filter((option) => Boolean(option.scheme));
+}
+function authPlaceholder(auth) {
+	if (!auth) return "";
+	if (auth.scheme.type === "apiKey") return "{api_key}";
+	if (auth.scheme.type === "http" && auth.scheme.scheme?.toLowerCase() === "basic") return "{base64_credentials}";
+	return "{token}";
+}
+function authLabel(name, scheme) {
+	return `${name}${scheme.type === "apiKey" && scheme.in && scheme.name ? ` · ${scheme.in}: ${scheme.name}` : ""}`;
 }
 function CopyCodeButton(arg0) {
 	const { code } = arg0;
+	const t = useBuiltInText();
 	const [copied, setCopied] = useState(false);
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		onClick: () => {
 			window.navigator.clipboard.writeText(code).then(() => {
@@ -517,64 +843,144 @@ function CopyCodeButton(arg0) {
 				window.setTimeout(() => setCopied(false), 1e3);
 			});
 		},
-		className: "absolute top-3.5 right-4 rounded-full bg-white/5 px-3 py-1 text-2xs font-medium text-zinc-400 opacity-0 transition hover:bg-white/10 hover:text-zinc-200 group-hover:opacity-100 focus:opacity-100",
-		children: copied ? "Copied!" : "Copy"
+		className: "flex items-center gap-1.5 rounded-full bg-black/ px-2.5 py-1.5 text-2xs font-medium text-zinc-400 transition hover:bg-black/50 hover:text-zinc-200 focus:bg-black/50 focus:text-zinc-200",
+		children: [copied ? /* @__PURE__ */ jsx(CheckIcon, {
+			className: "h-3.5 w-3.5 text-emerald-300",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ jsx(ClipboardIcon, {
+			className: "h-3.5 w-3.5 text-zinc-500",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("span", { children: copied ? t("actions.copied") : t("actions.copy") })]
+	});
+}
+function ExampleMetaValue(arg0) {
+	const { label, value, options, onChange, className } = arg0;
+	if (options && options.length > 1 && onChange) return /* @__PURE__ */ jsx(SelectControl, {
+		label,
+		value,
+		options,
+		onChange
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		children: value
+	});
+}
+function CodeToolbar(arg0) {
+	const { code, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
+	const t = useBuiltInText();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "absolute top-3.5 right-4 left-4 z-10 flex items-center justify-between gap-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [languageOptions && languageOptions.length > 1 && selectedLanguageKey && onSelectLanguage ? /* @__PURE__ */ jsx(SelectControl, {
+				label: t("openapi.language"),
+				value: selectedLanguageKey,
+				options: languageOptions,
+				onChange: onSelectLanguage,
+				icon: /* @__PURE__ */ jsx(CodeIcon, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				})
+			}) : null, clientOptions && clientOptions.length > 1 && selectedClientKey && onSelectClient ? /* @__PURE__ */ jsx(SelectControl, {
+				label: t("openapi.client"),
+				value: selectedClientKey,
+				options: clientOptions,
+				onChange: onSelectClient,
+				icon: /* @__PURE__ */ jsx(PackageIcon, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				})
+			}) : null]
+		}), /* @__PURE__ */ jsx(CopyCodeButton, { code })]
 	});
 }
 function ApiExampleCodeGroup(arg0) {
-	const { title, tag, label, code, language, examples, selectedExampleKey, onSelectExample } = arg0;
+	const { title, tag, tagOptions, onSelectTag, label, labelOptions, onSelectLabel, comfortableMeta = false, code, language, mediaTypes, selectedMediaType, onSelectMediaType, examples, selectedExampleKey, onSelectExample, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
+	const t = useBuiltInText();
+	const metaClassName = comfortableMeta ? "flex min-h-11 min-w-0 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 py-2 dark:border-b-white/5 dark:bg-white/1" : "flex h-9 min-w-0 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1";
 	return /* @__PURE__ */ jsx("div", {
 		className: "clarify-api-example my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "not-prose",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "clarify-api-example-header flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-center gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent",
+					className: "clarify-api-example-header flex min-h-[calc(--spacing(12)+1px)] items-center gap-3 border-b border-zinc-700 bg-zinc-800 px-4 py-2 dark:border-zinc-800 dark:bg-transparent",
 					children: [/* @__PURE__ */ jsx("h3", {
-						className: "shrink-0 py-3 text-xs font-semibold text-white",
+						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-white",
 						children: title
-					}), examples && examples.length > 1 && selectedExampleKey && onSelectExample ? /* @__PURE__ */ jsx(ExamplePicker, {
-						examples,
-						selectedKey: selectedExampleKey,
-						onSelect: onSelectExample
-					}) : null]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
+						children: [mediaTypes && mediaTypes.length > 1 && selectedMediaType && onSelectMediaType ? /* @__PURE__ */ jsx(SelectControl, {
+							label: t("openapi.mediaType"),
+							value: selectedMediaType,
+							options: mediaTypes,
+							onChange: onSelectMediaType,
+							compact: true
+						}) : null, examples && examples.length > 1 && selectedExampleKey && onSelectExample ? /* @__PURE__ */ jsx(SelectControl, {
+							label: t("openapi.example"),
+							value: selectedExampleKey,
+							options: examples.map((example) => ({
+								value: example.key,
+								label: getExampleLabel(example, t)
+							})),
+							onChange: onSelectExample,
+							compact: true
+						}) : null]
+					})]
 				}),
 				tag || label ? /* @__PURE__ */ jsxs("div", {
-					className: "flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1",
+					className: metaClassName,
 					children: [
-						tag ? /* @__PURE__ */ jsx("span", {
-							className: "font-mono text-[0.625rem]/6 font-semibold text-emerald-400",
-							children: tag
+						tag ? /* @__PURE__ */ jsx(ExampleMetaValue, {
+							label: t("openapi.status"),
+							value: tag,
+							options: tagOptions,
+							onChange: onSelectTag,
+							className: "font-mono text-[0.625rem]/6 font-semibold text-emerald-400"
 						}) : null,
-						tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
-						label ? /* @__PURE__ */ jsx("span", {
-							className: "font-mono text-xs text-zinc-400",
-							children: label
+						tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-zinc-500" }) : null,
+						label ? /* @__PURE__ */ jsx(ExampleMetaValue, {
+							label: t("openapi.mediaType"),
+							value: label,
+							options: labelOptions,
+							onChange: onSelectLabel,
+							className: "min-w-0 truncate font-mono text-xs text-zinc-400"
 						}) : null
 					]
 				}) : null,
 				/* @__PURE__ */ jsxs("div", {
 					className: "clarify-api-example-code group relative",
-					children: [/* @__PURE__ */ jsx("pre", {
-						className: "overflow-x-auto p-4 text-xs text-white",
+					children: [/* @__PURE__ */ jsx(CodeToolbar, {
+						code,
+						languageOptions,
+						selectedLanguageKey,
+						onSelectLanguage,
+						clientOptions,
+						selectedClientKey,
+						onSelectClient
+					}), /* @__PURE__ */ jsx("pre", {
+						className: `overflow-x-auto p-4 text-xs text-white ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
 						children: /* @__PURE__ */ jsx("code", {
 							className: `language-${language}`,
 							children: code
 						})
-					}), /* @__PURE__ */ jsx(CopyCodeButton, { code })]
+					})]
 				})
 			]
 		})
 	});
 }
 function RequestExamplesPanel(arg0) {
-	const { spec, path, method, parameters, requestContents } = arg0;
-	const [selectedMediaType, setSelectedMediaType] = useState(requestContents[0]?.mediaType ?? "");
+	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth } = arg0;
+	const t = useBuiltInText();
 	const selectedContent = requestContents.find((content) => content.mediaType === selectedMediaType) ?? requestContents[0];
 	const examples = getExampleEntries(selectedContent?.value);
 	const [selectedExampleKey, setSelectedExampleKey] = useState(examples[0]?.key ?? "");
+	const [selectedLanguageKey, setSelectedLanguageKey] = useState("shell");
+	const [selectedClientKey, setSelectedClientKey] = useState("curl");
 	const selectedExample = examples.find((example) => example.key === selectedExampleKey) ?? examples[0];
-	const curl = buildCurlExample({
+	const codeOptions = buildRequestCodeExamples({
 		spec,
 		path,
 		method,
@@ -586,32 +992,45 @@ function RequestExamplesPanel(arg0) {
 				example: selectedExample?.value,
 				examples: void 0
 			}
-		} : void 0
+		} : void 0,
+		server: selectedServer,
+		serverVariables,
+		auth
 	});
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-		className: "mb-3 flex flex-wrap gap-3",
-		children: /* @__PURE__ */ jsx(SelectControl, {
-			label: "Media type",
-			value: selectedContent?.mediaType ?? "",
-			options: requestContents.map((content) => content.mediaType),
-			onChange: (value) => {
-				setSelectedMediaType(value);
-				setSelectedExampleKey(getExampleEntries(requestContents.find((content) => content.mediaType === value)?.value)[0]?.key ?? "");
-			}
-		})
-	}), /* @__PURE__ */ jsx(ApiExampleCodeGroup, {
-		title: "Request",
+	const selectedLanguage = codeOptions.find((option) => option.languageKey === selectedLanguageKey) ?? codeOptions[0];
+	const selectedCode = codeOptions.find((option) => option.languageKey === selectedLanguage.languageKey && option.clientKey === selectedClientKey) ?? selectedLanguage;
+	const languageOptions = getLanguageOptions(codeOptions);
+	const clientOptions = getClientOptions(codeOptions, selectedCode.languageKey);
+	return /* @__PURE__ */ jsx(ApiExampleCodeGroup, {
+		title: t("openapi.request"),
 		tag: method,
 		label: path,
-		code: curl,
-		language: "bash",
+		code: selectedCode.code,
+		language: selectedCode.language,
+		mediaTypes: requestContents.map((content) => content.mediaType),
+		selectedMediaType: selectedContent?.mediaType,
+		onSelectMediaType: (value) => {
+			onSelectMediaType(value);
+			setSelectedExampleKey(getExampleEntries(requestContents.find((content) => content.mediaType === value)?.value)[0]?.key ?? "");
+		},
 		examples,
 		selectedExampleKey: selectedExample?.key,
-		onSelectExample: setSelectedExampleKey
-	})] });
+		onSelectExample: setSelectedExampleKey,
+		languageOptions,
+		selectedLanguageKey: selectedCode.languageKey,
+		onSelectLanguage: (value) => {
+			const nextCode = codeOptions.find((option) => option.languageKey === value);
+			setSelectedLanguageKey(nextCode?.languageKey ?? value);
+			setSelectedClientKey(nextCode?.clientKey ?? "");
+		},
+		clientOptions,
+		selectedClientKey: selectedCode.clientKey,
+		onSelectClient: setSelectedClientKey
+	});
 }
 function ResponseExamplesPanel(arg0) {
 	const { operation } = arg0;
+	const t = useBuiltInText();
 	const responses = getResponseEntries(operation).filter(({ response }) => getMediaTypeEntries(response.content).length > 0);
 	const [selectedStatus, setSelectedStatus] = useState(responses.find(({ status }) => status.startsWith("2"))?.status ?? responses[0]?.status ?? "");
 	const selectedResponse = responses.find(({ status }) => status === selectedStatus) ?? responses[0];
@@ -623,40 +1042,328 @@ function ResponseExamplesPanel(arg0) {
 	const selectedExample = examples.find((example) => example.key === selectedExampleKey) ?? examples[0];
 	const responseCode = stringifyExample(selectedExample?.value);
 	if (!selectedResponse || !selectedContent || !responseCode) return null;
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-		className: "mb-3 flex flex-wrap gap-3",
-		children: [/* @__PURE__ */ jsx(SelectControl, {
-			label: "Status",
-			value: selectedResponse.status,
-			options: responses.map(({ status }) => status),
-			onChange: (value) => {
-				const nextContents = getMediaTypeEntries(responses.find(({ status }) => status === value)?.response.content);
-				setSelectedStatus(value);
-				setSelectedMediaType(nextContents[0]?.mediaType ?? "");
-				setSelectedExampleKey(getExampleEntries(nextContents[0]?.value)[0]?.key ?? "");
-			}
-		}), /* @__PURE__ */ jsx(SelectControl, {
-			label: "Media type",
-			value: selectedContent.mediaType,
-			options: responseContents.map((content) => content.mediaType),
-			onChange: (value) => {
-				setSelectedMediaType(value);
-				setSelectedExampleKey(getExampleEntries(responseContents.find((content) => content.mediaType === value)?.value)[0]?.key ?? "");
-			}
-		})]
-	}), /* @__PURE__ */ jsx(ApiExampleCodeGroup, {
-		title: "Response",
+	return /* @__PURE__ */ jsx(ApiExampleCodeGroup, {
+		title: t("openapi.response"),
 		tag: selectedResponse.status,
+		tagOptions: responses.map(({ status }) => status),
+		onSelectTag: (value) => {
+			const nextContents = getMediaTypeEntries(responses.find(({ status }) => status === value)?.response.content);
+			setSelectedStatus(value);
+			setSelectedMediaType(nextContents[0]?.mediaType ?? "");
+			setSelectedExampleKey(getExampleEntries(nextContents[0]?.value)[0]?.key ?? "");
+		},
 		label: selectedContent.mediaType,
+		labelOptions: responseContents.map((content) => content.mediaType),
+		onSelectLabel: (value) => {
+			setSelectedMediaType(value);
+			setSelectedExampleKey(getExampleEntries(responseContents.find((content) => content.mediaType === value)?.value)[0]?.key ?? "");
+		},
+		comfortableMeta: true,
 		code: responseCode,
 		language: codeLanguageForMediaType(selectedContent.mediaType),
 		examples,
 		selectedExampleKey: selectedExample?.key,
 		onSelectExample: setSelectedExampleKey
+	});
+}
+//#endregion
+//#region source/openapi/schema-properties.tsx
+function getSchemaDescription(schema) {
+	const details = [
+		Array.isArray(schema.enum) ? `enum: ${schema.enum.map(String).join(", ")}` : void 0,
+		typeof schema.const !== "undefined" ? `const: ${String(schema.const)}` : void 0,
+		typeof schema.default !== "undefined" ? `default: ${String(schema.default)}` : void 0,
+		typeof schema.pattern === "string" ? `pattern: ${schema.pattern}` : void 0,
+		typeof schema.minimum === "number" ? `minimum: ${String(schema.minimum)}` : void 0,
+		typeof schema.maximum === "number" ? `maximum: ${String(schema.maximum)}` : void 0,
+		typeof schema.additionalProperties === "boolean" ? `additionalProperties: ${String(schema.additionalProperties)}` : void 0
+	].filter(Boolean);
+	return [typeof schema.description === "string" ? schema.description : void 0, details.length > 0 ? details.join("; ") : void 0].filter(Boolean).join(" ");
+}
+function getComposedBranches(schema) {
+	const entries = [];
+	for (const key of [
+		"allOf",
+		"oneOf",
+		"anyOf"
+	]) {
+		const items = schema[key];
+		if (!Array.isArray(items)) continue;
+		for (const [index, item] of items.entries()) entries.push({
+			label: `${key}[${index}]`,
+			schema: item
+		});
+	}
+	return entries;
+}
+function getSchemaChildren(arg0) {
+	const { spec, schema, path, required = [], depth = 0, seen = /* @__PURE__ */ new Set() } = arg0;
+	if (depth > 12) return [];
+	if (isReference(schema)) {
+		if (seen.has(schema.$ref)) return [];
+		return getSchemaChildren({
+			spec,
+			schema: resolveSchema(spec, schema),
+			path,
+			required,
+			depth,
+			seen: new Set([...seen, schema.$ref])
+		});
+	}
+	if (!isRecord(schema)) return [];
+	const arrayChildren = schema.type === "array" ? getSchemaChildren({
+		spec,
+		schema: schema.items,
+		path: `${path}[]`,
+		depth: depth + 1,
+		seen
+	}) : [];
+	const objectRequired = Array.isArray(schema.required) ? schema.required.map(String) : required;
+	const properties = isRecord(schema.properties) ? schema.properties : {};
+	const propertyChildren = Object.entries(properties).map(([name, propertySchema]) => {
+		const resolvedProperty = resolveSchema(spec, propertySchema);
+		const property = isRecord(resolvedProperty) ? resolvedProperty : isRecord(propertySchema) ? propertySchema : {};
+		const isArray = isRecord(property) && property.type === "array";
+		const childPath = path ? `${path}.${name}` : name;
+		const children = getSchemaChildren({
+			spec,
+			schema: isArray ? property.items : propertySchema,
+			path: isArray ? `${childPath}[]` : childPath,
+			depth: depth + 1,
+			seen
+		});
+		return {
+			key: childPath,
+			name,
+			type: schemaToType(propertySchema),
+			description: getSchemaDescription(property),
+			required: objectRequired.includes(name),
+			children
+		};
+	});
+	const additionalPropertyChildren = isRecord(schema.additionalProperties) ? [{
+		key: `${path || "root"}.*`,
+		name: "*",
+		type: schemaToType(schema.additionalProperties),
+		description: getSchemaDescription(schema.additionalProperties),
+		required: false,
+		children: getSchemaChildren({
+			spec,
+			schema: schema.additionalProperties,
+			path: `${path || "root"}.*`,
+			depth: depth + 1,
+			seen
+		})
+	}] : [];
+	const composedChildren = getComposedBranches(schema).map(({ label, schema: branchSchema }) => ({
+		key: `${path || "root"}.${label}`,
+		name: label,
+		type: schemaToType(branchSchema),
+		description: isRecord(resolveSchema(spec, branchSchema)) ? getSchemaDescription(resolveSchema(spec, branchSchema)) : void 0,
+		required: false,
+		children: getSchemaChildren({
+			spec,
+			schema: branchSchema,
+			path: `${path || "root"}.${label}`,
+			required: objectRequired,
+			depth: depth + 1,
+			seen
+		})
+	}));
+	return [
+		...arrayChildren,
+		...propertyChildren,
+		...additionalPropertyChildren,
+		...composedChildren
+	];
+}
+function getRootSchemaNode(spec, schema) {
+	if (isReference(schema)) {
+		const resolvedSchema = resolveSchema(spec, schema);
+		const resolved = isRecord(resolvedSchema) ? resolvedSchema : {};
+		return {
+			key: schema.$ref,
+			name: resolveReferenceName(schema.$ref),
+			type: schemaToType(schema),
+			description: getSchemaDescription(resolved),
+			required: false,
+			children: getSchemaChildren({
+				spec,
+				schema: resolvedSchema,
+				path: resolveReferenceName(schema.$ref),
+				seen: new Set([schema.$ref])
+			})
+		};
+	}
+	if (!isRecord(schema)) return void 0;
+	return {
+		key: "root",
+		name: "body",
+		type: schemaToType(schema),
+		description: getSchemaDescription(schema),
+		required: false,
+		children: getSchemaChildren({
+			spec,
+			schema,
+			path: ""
+		})
+	};
+}
+function SchemaNode(arg0) {
+	const { node, depth = 0 } = arg0;
+	const t = useBuiltInText();
+	const [expanded, setExpanded] = useState(depth < 1);
+	const hasChildren = node.children.length > 0;
+	const type = [node.type, node.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0;
+	const description = node.description || (node.required ? t("openapi.required") : t("openapi.optional"));
+	const rowClassName = clsx("flex min-w-0 items-start rounded py-0.5 text-left", depth > 0 ? "-mx-2 w-[calc(100%+1rem)] px-2" : "w-full px-1");
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm/5 font-semibold text-zinc-950 dark:text-white",
+				children: node.name
+			}), type ? /* @__PURE__ */ jsx("span", {
+				className: "font-mono text-xs text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-500",
+				children: type
+			}) : null]
+		}), description ? /* @__PURE__ */ jsx("div", {
+			className: "mt-0.5 text-sm/5 text-zinc-600 dark:text-zinc-400",
+			children: description
+		}) : null]
+	}), hasChildren ? /* @__PURE__ */ jsx("span", {
+		className: "ml-2 flex h-5 w-5 flex-none items-center justify-center text-zinc-500 dark:text-zinc-400",
+		"aria-hidden": "true",
+		children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+	}) : null] });
+	return /* @__PURE__ */ jsxs("li", {
+		className: "clarify-schema-node m-0 px-0 py-2 first:pt-0 last:pb-0",
+		children: [hasChildren ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": expanded ? t("openapi.collapse") : t("openapi.expand"),
+			"aria-expanded": expanded,
+			onClick: () => setExpanded((value) => !value),
+			className: clsx(rowClassName, "cursor-pointer transition"),
+			children: content
+		}) : /* @__PURE__ */ jsx("div", {
+			className: rowClassName,
+			children: content
+		}), hasChildren && expanded ? /* @__PURE__ */ jsx(SchemaTree, {
+			nodes: node.children,
+			depth: depth + 1
+		}) : null]
+	});
+}
+function SchemaTree(arg0) {
+	const { nodes, depth = 0 } = arg0;
+	if (nodes.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		role: "list",
+		className: clsx("m-0 list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5", depth > 0 && "mt-2 rounded-lg bg-zinc-950/[0.025] px-2 py-1 dark:bg-white/[0.04]"),
+		children: nodes.map((node) => /* @__PURE__ */ jsx(SchemaNode, {
+			node,
+			depth
+		}, node.key))
+	});
+}
+function SchemaProperties(arg0) {
+	const { title, schema, spec } = arg0;
+	const root = getRootSchemaNode(spec, schema);
+	if (!root || root.children.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title }), /* @__PURE__ */ jsx("div", {
+		className: "clarify-schema-properties my-6",
+		children: /* @__PURE__ */ jsx(SchemaTree, { nodes: root.children })
 	})] });
 }
+function ParameterList(arg0) {
+	const { title, parameters } = arg0;
+	const t = useBuiltInText();
+	if (parameters.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title }), /* @__PURE__ */ jsx(Properties, { children: parameters.map((parameter) => /* @__PURE__ */ jsx(Property, {
+		name: parameter.name ?? t("openapi.parameter"),
+		type: [schemaToType(parameter.schema), parameter.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0,
+		children: parameter.description ?? t("openapi.operationParameter")
+	}, `${parameter.in}-${parameter.name}`)) })] });
+}
+function ResponseList(arg0) {
+	const { operation } = arg0;
+	const t = useBuiltInText();
+	const responses = getResponseEntries(operation);
+	if (responses.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: t("openapi.responses") }), /* @__PURE__ */ jsx(Properties, { children: responses.map(({ status, response }) => {
+		return /* @__PURE__ */ jsx(Property, {
+			name: status,
+			type: schemaToType(getJsonLikeContent(response.content)?.value.schema),
+			children: response.description ?? `${t("openapi.response")}.`
+		}, status);
+	}) })] });
+}
+//#endregion
+//#region source/openapi/spec-path.ts
+var VIRTUAL_PREFIX = "virtual:clarify-page/";
+function resolveRelativePath(fromDir, to) {
+	const parts = (fromDir + "/" + to).split("/").filter(Boolean);
+	const stack = [];
+	for (const part of parts) if (part === "..") stack.pop();
+	else if (part !== ".") stack.push(part);
+	return stack.join("/");
+}
+function normalizeSpecPath(specPath, currentRoutePath, routePrefix = "") {
+	if (specPath.startsWith(VIRTUAL_PREFIX)) return specPath;
+	const normalizedRoutePrefix = routePrefix.replace(/^\/+|\/+$/g, "");
+	const normalizedSpecPath = specPath.startsWith("/") && normalizedRoutePrefix && specPath.slice(1).startsWith(`${normalizedRoutePrefix}/`) ? "/" + specPath.slice(normalizedRoutePrefix.length + 2) : specPath;
+	if (normalizedSpecPath.startsWith("/")) return VIRTUAL_PREFIX + normalizedSpecPath.replace(/^\//, "");
+	const fromDir = currentRoutePath === "/" ? "" : currentRoutePath?.replace(/^\//, "").replace(/\/[^/]*$/, "") ?? "";
+	return VIRTUAL_PREFIX + resolveRelativePath(normalizedRoutePrefix && fromDir.startsWith(`${normalizedRoutePrefix}/`) ? fromDir.slice(normalizedRoutePrefix.length + 1) : fromDir, normalizedSpecPath);
+}
+function useOpenApiSpec(spec, specPath) {
+	const specs = useOpenApis();
+	const location = useLocation();
+	const config = useClarifyConfig();
+	if (spec) return spec;
+	if (!specPath) return null;
+	return specs[normalizeSpecPath(specPath, location.pathname, config.routePrefix)] ?? null;
+}
+//#endregion
+//#region source/openapi/utils.ts
+var OPENAPI_HTTP_METHODS = [
+	"get",
+	"put",
+	"post",
+	"delete",
+	"options",
+	"head",
+	"patch",
+	"trace"
+];
+function isOpenAPIHttpMethod(method) {
+	return OPENAPI_HTTP_METHODS.includes(method.toLowerCase());
+}
+function getOpenApiOperation(spec, path, method) {
+	if (!isOpenAPIHttpMethod(method)) return void 0;
+	return spec.paths?.[path]?.[method.toLowerCase()];
+}
+function listOpenApiOperations(spec) {
+	const paths = spec.paths ?? {};
+	const operations = [];
+	for (const [path, pathItem] of Object.entries(paths)) {
+		if (!pathItem) continue;
+		for (const method of OPENAPI_HTTP_METHODS) {
+			const operation = pathItem[method];
+			if (operation) operations.push({
+				path,
+				method,
+				operation
+			});
+		}
+	}
+	return operations;
+}
+//#endregion
+//#region source/openapi/openapi-page.tsx
 function EndpointExamples(arg0) {
-	const { spec, path, method, operation, parameters, requestContents } = arg0;
+	const { spec, path, method, operation, parameters, requestContents, selectedRequestMediaType, onSelectRequestMediaType, selectedServer, serverVariables, auth } = arg0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-6",
 		children: [/* @__PURE__ */ jsx(RequestExamplesPanel, {
@@ -664,93 +1371,416 @@ function EndpointExamples(arg0) {
 			path,
 			method,
 			parameters,
-			requestContents
+			requestContents,
+			selectedMediaType: selectedRequestMediaType,
+			onSelectMediaType: onSelectRequestMediaType,
+			selectedServer,
+			serverVariables,
+			auth
 		}), /* @__PURE__ */ jsx(ResponseExamplesPanel, { operation })]
 	});
 }
 function OpenApiHeader(arg0) {
 	const { spec } = arg0;
+	const t = useBuiltInText();
 	return /* @__PURE__ */ jsxs("header", {
 		className: "mb-16",
 		children: [
 			/* @__PURE__ */ jsx("p", {
 				className: "mb-3 font-mono text-xs/6 font-medium tracking-widest text-emerald-500 uppercase dark:text-emerald-400",
-				children: "OpenAPI Reference"
+				children: t("openapi.openApiReference")
 			}),
-			/* @__PURE__ */ jsx("h1", { children: spec.info?.title ?? "API Documentation" }),
+			/* @__PURE__ */ jsx("h1", { children: spec.info?.title ?? t("openapi.apiDocumentation") }),
 			spec.info?.description ? /* @__PURE__ */ jsx("p", {
 				className: "lead",
 				children: spec.info.description
 			}) : null,
-			spec.info?.version ? /* @__PURE__ */ jsxs("p", {
+			spec.info?.version ? /* @__PURE__ */ jsx("p", {
 				className: "text-sm text-zinc-500 dark:text-zinc-400",
-				children: ["Version ", spec.info.version]
+				children: t("openapi.version", { version: spec.info.version })
+			}) : null
+		]
+	});
+}
+var endpointMethodStyles = {
+	GET: "bg-emerald-400/15 text-emerald-600 dark:bg-emerald-400/20 dark:text-emerald-300",
+	POST: "bg-sky-400/15 text-sky-600 dark:bg-sky-400/20 dark:text-sky-300",
+	PUT: "bg-amber-400/15 text-amber-600 dark:bg-amber-400/20 dark:text-amber-300",
+	PATCH: "bg-amber-400/15 text-amber-600 dark:bg-amber-400/20 dark:text-amber-300",
+	DELETE: "bg-rose-400/15 text-rose-600 dark:bg-rose-400/20 dark:text-rose-300"
+};
+function EndpointMethodBadge(arg0) {
+	const { method } = arg0;
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("rounded-(--clarify-theme-tokens-radius-md) px-2.5 py-0.5 font-mono text-xs/6 font-black tracking-wide", endpointMethodStyles[method] ?? "bg-zinc-400/15 text-zinc-700 dark:bg-zinc-400/20 dark:text-zinc-200"),
+		children: method
+	});
+}
+function InlineListbox(arg0) {
+	const { label, value, options, onChange, compact = false } = arg0;
+	const selected = options.find((option) => option.value === value) ?? options[0];
+	return /* @__PURE__ */ jsx(Listbox, {
+		value: selected?.value ?? value,
+		onChange,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-auto relative inline-flex min-w-0",
+			children: [/* @__PURE__ */ jsxs(ListboxButton, {
+				"aria-label": label,
+				className: clsx("inline-flex min-w-0 items-center gap-1 rounded-md border border-zinc-200 bg-white font-mono font-semibold text-zinc-900 shadow-xs outline-hidden transition hover:border-zinc-300 hover:bg-zinc-50 data-open:border-zinc-300 data-open:bg-zinc-50 dark:border-white/10 dark:bg-zinc-950 dark:text-zinc-100 dark:hover:border-white/15 dark:hover:bg-zinc-900 dark:data-open:border-white/15 dark:data-open:bg-zinc-900", compact ? "max-w-32 px-1.5 py-0.5 text-xs" : "w-full px-2.5 py-1.5 text-xs"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selected?.label ?? value
+				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: "h-3.5 w-3.5 shrink-0 text-zinc-500 dark:text-zinc-400",
+					"aria-hidden": "true"
+				})]
+			}), /* @__PURE__ */ jsx(ListboxOptions, {
+				anchor: "bottom start",
+				className: "z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-[min(32rem,calc(100vw-2rem))] overflow-auto rounded-xl bg-white p-1 text-xs shadow-lg shadow-black/10 ring-1 ring-zinc-950/10 [--anchor-gap:--spacing(1)] focus:outline-none dark:bg-zinc-950 dark:ring-white/10",
+				children: options.map((option) => /* @__PURE__ */ jsxs(ListboxOption, {
+					value: option.value,
+					className: "group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 font-mono text-xs text-zinc-700 select-none data-focus:bg-zinc-100 data-selected:text-emerald-700 dark:text-zinc-200 dark:data-focus:bg-white/10 dark:data-selected:text-emerald-300",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "block truncate",
+							children: option.label
+						}), option.description ? /* @__PURE__ */ jsx("span", {
+							className: "mt-0.5 block truncate text-2xs text-zinc-500 dark:text-zinc-400",
+							children: option.description
+						}) : null]
+					}), /* @__PURE__ */ jsx(CheckIcon, {
+						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
+						"aria-hidden": "true"
+					})]
+				}, option.value))
+			})]
+		})
+	});
+}
+function getServerPreviewUrl(server, variables) {
+	return (server.url ?? "").replace(/\{([^}]+)\}/g, (_, name) => variables[name] ?? server.variables?.[name]?.default ?? `{${name}}`);
+}
+function ServerUrlValue(arg0) {
+	const { server, variables, open, onToggle } = arg0;
+	const url = getServerPreviewUrl(server, variables);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-expanded": open,
+		"aria-label": "Server",
+		onClick: onToggle,
+		className: clsx("flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-zinc-100/50 text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950 dark:bg-white/5 dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-white sm:w-auto sm:min-w-16 sm:max-w-[min(36%,16rem)] sm:px-1.5", open ? "bg-zinc-200 text-zinc-950 dark:bg-white/12 dark:text-white" : null),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sm:hidden",
+			children: /* @__PURE__ */ jsx(ServerIcon, {
+				className: "h-4 w-4",
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate font-mono text-xs",
+				children: url
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+				className: "h-3.5 w-3.5 shrink-0 text-zinc-400",
+				"aria-hidden": "true"
+			})]
+		})]
+	});
+}
+function ServerVariableControl(arg0) {
+	const { name, variable, value, onChange, compact = false } = arg0;
+	if (variable?.enum?.length) return /* @__PURE__ */ jsx(InlineListbox, {
+		label: name,
+		value,
+		options: variable.enum.map((option) => ({
+			value: option,
+			label: option
+		})),
+		onChange,
+		compact
+	});
+	return /* @__PURE__ */ jsx("input", {
+		"aria-label": name,
+		value,
+		placeholder: variable?.default ?? name,
+		onChange: (event) => onChange(event.target.value),
+		className: clsx("pointer-events-auto rounded-md border border-zinc-200 bg-white font-mono text-xs font-semibold text-zinc-900 shadow-xs outline-hidden transition placeholder:text-zinc-500 hover:border-zinc-300 hover:bg-zinc-50 focus:border-zinc-400 focus:bg-white dark:border-white/10 dark:bg-zinc-950 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:hover:border-white/15 dark:hover:bg-zinc-900 dark:focus:border-white/20 dark:focus:bg-zinc-950", compact ? "mx-0.5 w-24 px-1.5 py-0.5" : "w-full px-2.5 py-1.5")
+	});
+}
+function ServerPanel(arg0) {
+	const { servers, selectedKey, selectedServer, variables, onSelectServer, onChangeVariable } = arg0;
+	const variableEntries = Object.entries(selectedServer.variables ?? {});
+	return /* @__PURE__ */ jsx("div", {
+		className: "border-t border-zinc-200 bg-zinc-100/70 p-3 dark:border-white/10 dark:bg-zinc-900/60",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "grid gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]",
+			children: [servers.length > 1 ? /* @__PURE__ */ jsxs("label", {
+				className: "flex min-w-0 flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-2xs font-semibold text-zinc-700 dark:text-zinc-300",
+					children: "Server"
+				}), /* @__PURE__ */ jsx(InlineListbox, {
+					label: "Server",
+					value: selectedKey,
+					options: servers.map((server, index) => ({
+						value: getServerKey(server, index),
+						label: getServerLabel(server, index),
+						description: server.description
+					})),
+					onChange: onSelectServer
+				})]
+			}) : null, variableEntries.map(([name, variable]) => /* @__PURE__ */ jsxs("label", {
+				className: "flex min-w-0 flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-2xs font-semibold text-zinc-700 dark:text-zinc-300",
+					children: name
+				}), /* @__PURE__ */ jsx(ServerVariableControl, {
+					name,
+					variable,
+					value: variables[name] ?? variable.default ?? "",
+					onChange: (value) => onChangeVariable(name, value)
+				})]
+			}, name))]
+		})
+	});
+}
+function AuthPanel(arg0) {
+	const { authOptions, selectedAuthName, selectedAuth, authValues, onSelectAuth, onChangeAuthValue } = arg0;
+	if (authOptions.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "border-t border-zinc-200 bg-zinc-100/70 p-3 dark:border-white/10 dark:bg-zinc-900/60",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "grid gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]",
+			children: [/* @__PURE__ */ jsxs("label", {
+				className: "flex min-w-0 flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-2xs font-semibold text-zinc-700 dark:text-zinc-300",
+					children: "Auth"
+				}), /* @__PURE__ */ jsx(InlineListbox, {
+					label: "Auth",
+					value: selectedAuthName,
+					options: authOptions.map(({ name, scheme }) => ({
+						value: name,
+						label: name,
+						description: authLabel(name, scheme)
+					})),
+					onChange: onSelectAuth
+				})]
+			}), selectedAuth ? /* @__PURE__ */ jsxs("label", {
+				className: "flex min-w-0 flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-2xs font-semibold text-zinc-700 dark:text-zinc-300",
+					children: "Credential"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center rounded-md border border-zinc-200 bg-white px-2.5 py-1.5 shadow-xs dark:border-white/10 dark:bg-zinc-950",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mr-2 shrink-0 font-mono text-2xs font-semibold text-zinc-600 dark:text-zinc-400",
+						children: selectedAuth.scheme.type === "apiKey" ? selectedAuth.scheme.in ?? "apiKey" : selectedAuth.scheme.scheme ?? selectedAuth.scheme.type ?? "token"
+					}), /* @__PURE__ */ jsx("input", {
+						value: authValues[selectedAuth.name] ?? authPlaceholder(selectedAuth),
+						onChange: (event) => onChangeAuthValue(selectedAuth.name, event.target.value),
+						className: "min-w-0 flex-1 border-0 bg-transparent px-0 py-0 font-mono text-xs font-semibold text-zinc-900 outline-hidden placeholder:text-zinc-500 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+					})]
+				})]
+			}) : null]
+		})
+	});
+}
+function EndpointIdentity(arg0) {
+	const { method, path, servers, selectedServerKey, selectedServer, serverVariables, serverOpen, authOptions, selectedAuthName, selectedAuth, authValues, authOpen, onSelectServer, onChangeServerVariable, onToggleServer, onToggleAuth, onSelectAuth, onChangeAuthValue } = arg0;
+	const segments = path.split("/").filter(Boolean);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "not-prose flex w-full flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xs dark:border-white/10 dark:bg-zinc-950",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-1.5 overflow-hidden px-2.5 py-2",
+				children: [
+					/* @__PURE__ */ jsx(EndpointMethodBadge, { method }),
+					/* @__PURE__ */ jsx(ServerUrlValue, {
+						server: selectedServer,
+						variables: serverVariables,
+						open: serverOpen,
+						onToggle: onToggleServer
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex min-w-0 flex-1 items-center overflow-x-auto font-mono text-sm font-bold leading-6 whitespace-nowrap",
+						children: segments.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+							className: "text-zinc-400",
+							children: "/"
+						}), segments.map((segment, index) => /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center",
+							children: [index > 0 ? /* @__PURE__ */ jsx("span", {
+								className: "text-zinc-400",
+								children: "/"
+							}) : null, /* @__PURE__ */ jsx("span", {
+								className: "font-bold text-zinc-800 dark:text-white",
+								children: segment
+							})]
+						}, `${segment}-${index}`))] }) : /* @__PURE__ */ jsx("span", {
+							className: "font-bold text-zinc-800 dark:text-white",
+							children: "/"
+						})
+					}),
+					authOptions.length > 0 ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-expanded": authOpen,
+						"aria-label": "Auth",
+						onClick: onToggleAuth,
+						className: clsx("ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-zinc-600 transition hover:bg-zinc-100 hover:text-emerald-700 dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-emerald-200", authOpen ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-100" : "bg-zinc-50 dark:bg-white/5"),
+						children: authOpen ? /* @__PURE__ */ jsx(UnlockKeyholeIcon, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}) : /* @__PURE__ */ jsx(LockKeyholeIcon, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}) : null
+				]
+			}),
+			serverOpen ? /* @__PURE__ */ jsx(ServerPanel, {
+				servers,
+				selectedKey: selectedServerKey,
+				selectedServer,
+				variables: serverVariables,
+				onSelectServer,
+				onChangeVariable: onChangeServerVariable
+			}) : null,
+			authOpen ? /* @__PURE__ */ jsx(AuthPanel, {
+				authOptions,
+				selectedAuthName,
+				selectedAuth,
+				authValues,
+				onSelectAuth,
+				onChangeAuthValue
 			}) : null
 		]
 	});
 }
 function OpenApiOperation(arg0) {
 	const { spec, path, method, operation } = arg0;
+	const t = useBuiltInText();
 	const id = slug(`${method.toLowerCase()} ${path}`);
 	const summary = operation.summary ?? `${method} ${path}`;
 	const description = operation.description;
 	const parameters = getOperationParameters(spec, path, operation);
-	const requestBody = getRequestBody(operation);
+	const requestBody = getRequestBody$1(operation);
 	const requestContents = getMediaTypeEntries(requestBody?.content);
-	const requestSchema = requestContents[0]?.value.schema;
+	const [selectedRequestMediaType, setSelectedRequestMediaType] = useState(requestContents[0]?.mediaType ?? "");
+	const selectedRequestContent = requestContents.find((content) => content.mediaType === selectedRequestMediaType) ?? requestContents[0];
+	const requestSchema = selectedRequestContent?.value.schema;
+	const servers = getServers(spec, operation);
+	const [selectedServerKey, setSelectedServerKey] = useState(getServerKey(servers[0], 0));
+	const selectedServer = servers.find((server, index) => getServerKey(server, index) === selectedServerKey) ?? servers[0];
+	const [serverVariables, setServerVariables] = useState(defaultServerVariables(selectedServer));
+	const [serverOpen, setServerOpen] = useState(false);
+	const authOptions = getAuthOptions(spec, operation);
+	const [selectedAuthName, setSelectedAuthName] = useState(authOptions[0]?.name ?? "");
+	const selectedAuth = authOptions.find((option) => option.name === selectedAuthName);
+	const [authValues, setAuthValues] = useState({});
+	const [authOpen, setAuthOpen] = useState(false);
+	const authInput = selectedAuth ? {
+		name: selectedAuth.name,
+		scheme: selectedAuth.scheme,
+		value: authValues[selectedAuth.name] ?? authPlaceholder(selectedAuth)
+	} : void 0;
 	const groupedParameters = {
 		path: parameters.filter((parameter) => parameter.in === "path"),
 		query: parameters.filter((parameter) => parameter.in === "query"),
 		header: parameters.filter((parameter) => parameter.in === "header")
 	};
 	return /* @__PURE__ */ jsxs("section", {
-		className: "clarify-api-endpoint scroll-mt-24",
+		className: "clarify-api-endpoint scroll-mt-24 py-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
-		children: [/* @__PURE__ */ jsx(Heading, {
-			id,
-			tag: method,
-			label: path,
-			children: summary
-		}), /* @__PURE__ */ jsxs(Row, { children: [/* @__PURE__ */ jsxs(Col, { children: [
-			description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
-			/* @__PURE__ */ jsx(ParameterList, {
-				title: "Path parameters",
-				parameters: groupedParameters.path
-			}),
-			/* @__PURE__ */ jsx(ParameterList, {
-				title: "Query parameters",
-				parameters: groupedParameters.query
+		children: [
+			/* @__PURE__ */ jsx(EndpointIdentity, {
+				method,
+				path,
+				servers,
+				selectedServerKey,
+				selectedServer,
+				serverVariables,
+				serverOpen,
+				authOptions,
+				selectedAuthName,
+				selectedAuth,
+				authValues,
+				authOpen,
+				onSelectServer: (value) => {
+					const nextServer = servers.find((server, index) => getServerKey(server, index) === value) ?? servers[0];
+					setSelectedServerKey(value);
+					setServerVariables(defaultServerVariables(nextServer));
+				},
+				onChangeServerVariable: (name, value) => setServerVariables((current) => ({
+					...current,
+					[name]: value
+				})),
+				onToggleServer: () => {
+					setServerOpen((current) => !current);
+					setAuthOpen(false);
+				},
+				onToggleAuth: () => {
+					setAuthOpen((current) => !current);
+					setServerOpen(false);
+				},
+				onSelectAuth: setSelectedAuthName,
+				onChangeAuthValue: (name, value) => setAuthValues((current) => ({
+					...current,
+					[name]: value
+				}))
 			}),
-			/* @__PURE__ */ jsx(ParameterList, {
-				title: "Headers",
-				parameters: groupedParameters.header
+			/* @__PURE__ */ jsx(Heading, {
+				id,
+				className: "mt-4",
+				children: summary
 			}),
-			requestBody && requestContents.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				/* @__PURE__ */ jsx("h3", { children: "Request body" }),
-				typeof requestBody.description === "string" ? /* @__PURE__ */ jsx("p", { children: requestBody.description }) : null,
-				/* @__PURE__ */ jsx(SchemaProperties, {
-					title: "Body properties",
-					schema: requestSchema
+			/* @__PURE__ */ jsxs(Row, { children: [/* @__PURE__ */ jsxs(Col, { children: [
+				description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+				/* @__PURE__ */ jsx(ParameterList, {
+					title: t("openapi.pathParameters"),
+					parameters: groupedParameters.path
+				}),
+				/* @__PURE__ */ jsx(ParameterList, {
+					title: t("openapi.queryParameters"),
+					parameters: groupedParameters.query
+				}),
+				/* @__PURE__ */ jsx(ParameterList, {
+					title: t("openapi.headers"),
+					parameters: groupedParameters.header
+				}),
+				requestBody && requestContents.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("h3", { children: t("openapi.requestBody") }),
+					typeof requestBody.description === "string" ? /* @__PURE__ */ jsx("p", { children: requestBody.description }) : null,
+					/* @__PURE__ */ jsx(SchemaProperties, {
+						title: t("openapi.bodyProperties"),
+						schema: requestSchema,
+						spec
+					})
+				] }) : null,
+				/* @__PURE__ */ jsx(ResponseList, { operation })
+			] }), /* @__PURE__ */ jsx(Col, {
+				sticky: true,
+				children: /* @__PURE__ */ jsx(EndpointExamples, {
+					spec,
+					path,
+					method,
+					operation,
+					parameters,
+					requestContents,
+					selectedRequestMediaType: selectedRequestContent?.mediaType ?? "",
+					onSelectRequestMediaType: setSelectedRequestMediaType,
+					selectedServer,
+					serverVariables,
+					auth: authInput
 				})
-			] }) : null,
-			/* @__PURE__ */ jsx(ResponseList, { operation })
-		] }), /* @__PURE__ */ jsx(Col, {
-			sticky: true,
-			children: /* @__PURE__ */ jsx(EndpointExamples, {
-				spec,
-				path,
-				method,
-				operation,
-				parameters,
-				requestContents
-			})
-		})] })]
+			})] })
+		]
 	});
 }
 function OpenApiPaths(arg0) {
 	const { spec } = arg0;
 	return /* @__PURE__ */ jsx("div", {
-		className: "clarify-api-endpoints space-y-16",
+		className: "clarify-api-endpoints divide-y divide-zinc-200/70 dark:divide-white/10",
 		children: listOpenApiOperations(spec).map(({ path, method, operation }) => ({
 			path,
 			method: method.toUpperCase(),
@@ -763,29 +1793,6 @@ function OpenApiPaths(arg0) {
 		}, `${method}-${path}`))
 	});
 }
-function resolveRelativePath(fromDir, to) {
-	const parts = (fromDir + "/" + to).split("/").filter(Boolean);
-	const stack = [];
-	for (const part of parts) if (part === "..") stack.pop();
-	else if (part !== ".") stack.push(part);
-	return stack.join("/");
-}
-function normalizeSpecPath(specPath, currentRoutePath, routePrefix = "") {
-	if (specPath.startsWith(VIRTUAL_PREFIX)) return specPath;
-	const normalizedRoutePrefix = routePrefix.replace(/^\/+|\/+$/g, "");
-	const normalizedSpecPath = specPath.startsWith("/") && normalizedRoutePrefix && specPath.slice(1).startsWith(`${normalizedRoutePrefix}/`) ? "/" + specPath.slice(normalizedRoutePrefix.length + 2) : specPath;
-	if (normalizedSpecPath.startsWith("/")) return VIRTUAL_PREFIX + normalizedSpecPath.replace(/^\//, "");
-	const fromDir = currentRoutePath === "/" ? "" : currentRoutePath?.replace(/^\//, "").replace(/\/[^/]*$/, "") ?? "";
-	return VIRTUAL_PREFIX + resolveRelativePath(normalizedRoutePrefix && fromDir.startsWith(`${normalizedRoutePrefix}/`) ? fromDir.slice(normalizedRoutePrefix.length + 1) : fromDir, normalizedSpecPath);
-}
-function useOpenApiSpec(spec, specPath) {
-	const specs = useOpenApis();
-	const location = useLocation();
-	const config = useClarifyConfig();
-	if (spec) return spec;
-	if (!specPath) return null;
-	return specs[normalizeSpecPath(specPath, location.pathname, config.routePrefix)] ?? null;
-}
 function WarningBox(arg0) {
 	const { children, tone = "amber" } = arg0;
 	return /* @__PURE__ */ jsx("div", {
@@ -795,27 +1802,24 @@ function WarningBox(arg0) {
 }
 function OpenApiPage(arg0) {
 	const { spec, specPath } = arg0;
+	const t = useBuiltInText();
 	const resolved = useOpenApiSpec(spec, specPath);
-	if (!resolved) return /* @__PURE__ */ jsxs(WarningBox, { children: ["OpenAPI spec not found: ", specPath ?? "（未提供 spec 或 specPath）"] });
-	return /* @__PURE__ */ jsxs("article", {
+	if (!resolved) return /* @__PURE__ */ jsx(WarningBox, { children: t("openapi.specNotFound", { specPath: specPath ?? t("openapi.specPathMissing") }) });
+	return /* @__PURE__ */ jsx("article", {
 		className: "clarify-openapi-page flex h-full flex-col pt-16 pb-10",
-		children: [/* @__PURE__ */ jsxs(Prose, {
+		children: /* @__PURE__ */ jsxs(Prose, {
 			className: "flex-auto",
 			children: [/* @__PURE__ */ jsx(OpenApiHeader, { spec: resolved }), /* @__PURE__ */ jsx(OpenApiPaths, { spec: resolved })]
-		}), /* @__PURE__ */ jsx(PageFooter, {})]
+		})
 	});
 }
 function ApiEndpoint(arg0) {
 	const { spec, path, method } = arg0;
+	const t = useBuiltInText();
 	const op = getOpenApiOperation(spec, path, method);
-	if (!op) return /* @__PURE__ */ jsxs(WarningBox, {
+	if (!op) return /* @__PURE__ */ jsx(WarningBox, {
 		tone: "red",
-		children: [
-			"Endpoint not found: ",
-			method.toUpperCase(),
-			" ",
-			path
-		]
+		children: t("openapi.endpointNotFound", { endpoint: `${method.toUpperCase()} ${path}` })
 	});
 	return /* @__PURE__ */ jsx(OpenApiOperation, {
 		spec,
@@ -826,8 +1830,9 @@ function ApiEndpoint(arg0) {
 }
 function OpenApiEndpoint(arg0) {
 	const { specPath, path, method } = arg0;
+	const t = useBuiltInText();
 	const spec = useOpenApiSpec(void 0, specPath);
-	if (!spec) return /* @__PURE__ */ jsxs(WarningBox, { children: ["OpenAPI spec not found: ", specPath] });
+	if (!spec) return /* @__PURE__ */ jsx(WarningBox, { children: t("openapi.specNotFound", { specPath }) });
 	return /* @__PURE__ */ jsx(ApiEndpoint, {
 		spec,
 		path,