@clarify-labs/renderer 0.2.0 → 0.5.0

package/output/index.js

@@ -1,174 +1,37 @@
-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 { Link, useLocation } from "react-router-dom";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
-import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
-import { slug } from "github-slugger";
-//#region \0rolldown/runtime.js
-var __defProp = Object.defineProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
-//#endregion
-//#region source/mdx/primitives.tsx
-var primitives_exports = /* @__PURE__ */ __exportAll({
-	Button: () => Button,
-	Callout: () => Callout,
-	Card: () => Card,
-	CardGroup: () => CardGroup,
-	CodeGroup: () => CodeGroup,
-	Col: () => Col,
-	Note: () => Note,
-	Properties: () => Properties,
-	Property: () => Property,
-	Row: () => Row,
-	a: () => a,
-	code: () => code,
-	h2: () => h2,
-	h3: () => h3,
-	pre: () => pre,
-	wrapper: () => wrapper
-});
-function wrapper(arg0) {
-	const { children } = arg0;
-	return /* @__PURE__ */ jsxs("article", {
-		className: "clarify-mdx-page flex h-full flex-col pt-16 pb-10",
-		children: [/* @__PURE__ */ jsx(Prose, {
-			className: "flex-auto",
-			children
-		}), /* @__PURE__ */ jsx(PageFooter, {})]
-	});
-}
-function a(arg0) {
-	const { href = "", ...props } = arg0;
-	if (href.startsWith("/") && !href.startsWith("//")) return /* @__PURE__ */ jsx(Link, {
-		to: href,
-		...props
-	});
-	return /* @__PURE__ */ jsx("a", {
-		href,
-		...props
-	});
-}
-var code = Code;
-var pre = Pre;
-function h2(props) {
-	return createElement(Heading, {
-		level: 2,
-		...props
-	});
-}
-function h3(props) {
-	return createElement(Heading, {
-		level: 3,
-		...props
-	});
-}
-function InfoIcon(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 16 16",
-		"aria-hidden": "true",
-		...props,
-		children: [
-			/* @__PURE__ */ jsx("circle", {
-				cx: "8",
-				cy: "8",
-				r: "8",
-				strokeWidth: "0"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				fill: "none",
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				strokeWidth: "1.5",
-				d: "M6.75 7.75h1.5v3.5"
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: "8",
-				cy: "4",
-				r: ".5",
-				fill: "none"
-			})
-		]
-	});
-}
-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: "*:first:mt-0 *:last:mb-0",
-			children
-		})]
-	});
-}
-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",
-		children
-	});
-}
-function Col(arg0) {
-	const { children, sticky = false } = arg0;
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("clarify-col *:first:mt-0 *:last:mb-0", sticky && "xl:sticky xl:top-24"),
-		children
-	});
+import { f as Markdown, n as OpenApiOperation$1, p as primitives_exports } from "./OpenApiOperation-DYXG-6Rw.js";
+import { E as useTheme, F as OpenApisContext, I as useClarifyConfig, L as useOpenApis, M as useBuiltInText, N as ClarifyConfigContext, T as ThemeProvider, _ as Callout, a as GridPattern, b as useSectionStore, c as Heading, d as Collapse, f as Code, g as CardGroup, h as Card, i as Prose, l as Tag, m as Pre, o as HeroPattern, p as CodeGroup, s as Logo, u as Feedback, v as Button, w as ThemeToggle, x as remToPx, y as SectionProvider } from "./shell-BlMMdTpZ.js";
+import { n as PageFooter, r as BuiltWithClarify, t as AppShell } from "./AppShell-D3FsVHQK.js";
+import { t as markdownRemarkPlugins } from "./remark-o5sg9Ilv.js";
+import { t as render } from "./render-BpavVnAe.js";
+import { useLocation } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region source/openapi/lib/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 Properties(arg0) {
-	const { children } = arg0;
-	return /* @__PURE__ */ jsx("div", {
-		className: "clarify-properties my-6",
-		children: /* @__PURE__ */ jsx("ul", {
-			role: "list",
-			className: "m-0 list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5",
-			children
-		})
-	});
+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 Property(arg0) {
-	const { name, children, type } = arg0;
-	return /* @__PURE__ */ jsx("li", {
-		className: "clarify-property m-0 px-0 py-4 first:pt-0 last:pb-0",
-		children: /* @__PURE__ */ jsxs("dl", {
-			className: "m-0 flex flex-wrap items-center gap-x-3 gap-y-2",
-			children: [
-				/* @__PURE__ */ jsx("dt", {
-					className: "sr-only",
-					children: "Name"
-				}),
-				/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("code", { 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",
-					children: type
-				})] }) : null,
-				/* @__PURE__ */ jsx("dt", {
-					className: "sr-only",
-					children: "Description"
-				}),
-				/* @__PURE__ */ jsx("dd", {
-					className: "w-full flex-none *:first:mt-0 *:last:mb-0",
-					children
-				})
-			]
-		})
-	});
+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
+//#region source/openapi/lib/utils.ts
 var OPENAPI_HTTP_METHODS = [
 	"get",
 	"put",
@@ -182,14 +45,27 @@ var OPENAPI_HTTP_METHODS = [
 function isOpenAPIHttpMethod(method) {
 	return OPENAPI_HTTP_METHODS.includes(method.toLowerCase());
 }
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+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 getPathItem(spec, path) {
+	const pathItem = spec.paths?.[path];
+	const resolved = isRecord(pathItem) && typeof pathItem.$ref === "string" ? resolveOpenApiRef(spec, pathItem.$ref) : pathItem;
+	return isRecord(resolved) ? resolved : void 0;
+}
 function getOpenApiOperation(spec, path, method) {
 	if (!isOpenAPIHttpMethod(method)) return void 0;
-	return spec.paths?.[path]?.[method.toLowerCase()];
+	return getPathItem(spec, path)?.[method.toLowerCase()];
 }
 function listOpenApiOperations(spec) {
 	const paths = spec.paths ?? {};
 	const operations = [];
-	for (const [path, pathItem] of Object.entries(paths)) {
+	for (const path of Object.keys(paths)) {
+		const pathItem = getPathItem(spec, path);
 		if (!pathItem) continue;
 		for (const method of OPENAPI_HTTP_METHODS) {
 			const operation = pathItem[method];
@@ -203,559 +79,38 @@ function listOpenApiOperations(spec) {
 	return operations;
 }
 //#endregion
-//#region source/openapi/index.tsx
-var VIRTUAL_PREFIX = "virtual:clarify-page/";
-function isRecord(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function isReference(value) {
-	return isRecord(value) && typeof value.$ref === "string";
-}
-function resolveReferenceName(ref) {
-	return ref.split("/").filter(Boolean).at(-1) ?? ref;
-}
-function getPathItem(spec, path) {
-	const pathItem = spec.paths?.[path];
-	return isRecord(pathItem) ? pathItem : void 0;
-}
-function getOperationParameters(spec, path, operation) {
-	const pathParameters = getPathItem(spec, path)?.parameters;
-	const operationParameters = operation.parameters;
-	return [...Array.isArray(pathParameters) ? pathParameters : [], ...Array.isArray(operationParameters) ? operationParameters : []].filter((parameter) => isRecord(parameter) && !isReference(parameter));
-}
-function getRequestBody(operation) {
-	const requestBody = operation.requestBody;
-	return isRecord(requestBody) && !isReference(requestBody) ? requestBody : void 0;
-}
-function getMediaTypeEntries(content) {
-	if (!isRecord(content)) return [];
-	return Object.entries(content).filter(([, value]) => isRecord(value) && !isReference(value)).map(([mediaType, value]) => ({
-		mediaType,
-		value
-	})).sort((a, z) => {
-		return (a.mediaType.includes("json") ? 0 : 1) - (z.mediaType.includes("json") ? 0 : 1);
-	});
-}
-function getJsonLikeContent(content) {
-	return getMediaTypeEntries(content)[0];
-}
-function getExampleValue(example) {
-	if (isRecord(example) && "value" in example) return example.value;
-	if (isRecord(example) && "externalValue" in example) return void 0;
-	return example;
-}
-function getExampleTitle(key, example) {
-	if (isRecord(example)) {
-		const summary = typeof example.summary === "string" ? example.summary : void 0;
-		return {
-			title: summary ?? key,
-			summary
-		};
-	}
-	return { title: key };
-}
-function getExampleEntries(mediaType) {
-	if (!mediaType) return [];
-	if (isRecord(mediaType.examples)) {
-		const examples = [];
-		for (const [key, example] of Object.entries(mediaType.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;
-	}
-	if (typeof mediaType.example !== "undefined") return [{
-		key: "default",
-		title: "Example",
-		value: mediaType.example
-	}];
-	const generated = schemaToExample(mediaType.schema);
-	return typeof generated === "undefined" ? [] : [{
-		key: "schema",
-		title: "Schema example",
-		value: generated,
-		generated: true
-	}];
-}
-function getContentExample(mediaType) {
-	return getExampleEntries(mediaType)[0]?.value;
-}
-function schemaToType(schema) {
-	if (!isRecord(schema)) return void 0;
-	if (isReference(schema)) return resolveReferenceName(schema.$ref);
-	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 (schema.type === "array") return `${schemaToType(schema.items) ?? "unknown"}[]`;
-	return typeof schema.type === "string" ? schema.type : void 0;
-}
-function schemaToExample(schema, depth = 0) {
-	if (!isRecord(schema) || depth > 3) return void 0;
-	if (typeof schema.example !== "undefined") return schema.example;
-	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) };
-	if (schema.type === "array") return [schemaToExample(schema.items, depth + 1) ?? "string"];
-	if (schema.type === "object" || isRecord(schema.properties)) {
-		const properties = isRecord(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 exampleForType(schemaToType(schema));
-}
-function exampleForType(type) {
-	if (!type) return "string";
-	if (type.endsWith("[]")) return [];
-	if (type.includes("integer") || type.includes("number")) return 42;
-	if (type.includes("boolean")) return true;
-	if (type.includes("object")) return {};
-	return "string";
-}
-function stringifyExample(value) {
-	if (typeof value === "undefined") return "";
-	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 [];
-	return Object.entries(responses).filter(([, response]) => isRecord(response) && !isReference(response)).map(([status, response]) => ({
-		status,
-		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";
-	if (mediaType.includes("yaml") || mediaType.includes("yml")) return "yaml";
-	if (mediaType.startsWith("text/")) return "text";
-	if (mediaType.includes("xml")) return "xml";
-	return "text";
-}
-function SelectControl(arg0) {
-	const { label, value, options, onChange } = arg0;
-	if (options.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",
-			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",
-				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: "truncate",
-						children: 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, {
-						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
-						"aria-hidden": "true"
-					})]
-				}, option))
-			})]
-		})
-	});
-}
-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 CopyCodeButton(arg0) {
-	const { code } = arg0;
-	const [copied, setCopied] = useState(false);
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick: () => {
-			window.navigator.clipboard.writeText(code).then(() => {
-				setCopied(true);
-				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"
-	});
-}
-function ApiExampleCodeGroup(arg0) {
-	const { title, tag, label, code, language, examples, selectedExampleKey, onSelectExample } = arg0;
-	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",
-					children: [/* @__PURE__ */ jsx("h3", {
-						className: "shrink-0 py-3 text-xs font-semibold text-white",
-						children: title
-					}), examples && examples.length > 1 && selectedExampleKey && onSelectExample ? /* @__PURE__ */ jsx(ExamplePicker, {
-						examples,
-						selectedKey: selectedExampleKey,
-						onSelect: onSelectExample
-					}) : 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",
-					children: [
-						tag ? /* @__PURE__ */ jsx("span", {
-							className: "font-mono text-[0.625rem]/6 font-semibold text-emerald-400",
-							children: tag
-						}) : 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
-						}) : 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("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 selectedContent = requestContents.find((content) => content.mediaType === selectedMediaType) ?? requestContents[0];
-	const examples = getExampleEntries(selectedContent?.value);
-	const [selectedExampleKey, setSelectedExampleKey] = useState(examples[0]?.key ?? "");
-	const selectedExample = examples.find((example) => example.key === selectedExampleKey) ?? examples[0];
-	const curl = buildCurlExample({
-		spec,
-		path,
-		method,
-		parameters,
-		requestContent: selectedContent ? {
-			...selectedContent,
-			value: {
-				...selectedContent.value,
-				example: selectedExample?.value,
-				examples: void 0
-			}
-		} : void 0
-	});
-	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",
-		tag: method,
-		label: path,
-		code: curl,
-		language: "bash",
-		examples,
-		selectedExampleKey: selectedExample?.key,
-		onSelectExample: setSelectedExampleKey
-	})] });
-}
-function ResponseExamplesPanel(arg0) {
-	const { operation } = arg0;
-	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];
-	const responseContents = getMediaTypeEntries(selectedResponse?.response.content);
-	const [selectedMediaType, setSelectedMediaType] = useState(responseContents[0]?.mediaType ?? "");
-	const selectedContent = responseContents.find((content) => content.mediaType === selectedMediaType) ?? responseContents[0];
-	const examples = getExampleEntries(selectedContent?.value);
-	const [selectedExampleKey, setSelectedExampleKey] = useState(examples[0]?.key ?? "");
-	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",
-		tag: selectedResponse.status,
-		label: selectedContent.mediaType,
-		code: responseCode,
-		language: codeLanguageForMediaType(selectedContent.mediaType),
-		examples,
-		selectedExampleKey: selectedExample?.key,
-		onSelectExample: setSelectedExampleKey
-	})] });
-}
-function EndpointExamples(arg0) {
-	const { spec, path, method, operation, parameters, requestContents } = arg0;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-6",
-		children: [/* @__PURE__ */ jsx(RequestExamplesPanel, {
-			spec,
-			path,
-			method,
-			parameters,
-			requestContents
-		}), /* @__PURE__ */ jsx(ResponseExamplesPanel, { operation })]
-	});
-}
+//#region source/openapi/entry.tsx
 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"
+				className: "mb-3 text-xs/6 font-medium tracking-widest text-emerald-500 uppercase dark:text-emerald-400",
+				children: t("openapi.openApiReference")
 			}),
-			/* @__PURE__ */ jsx("h1", { children: spec.info?.title ?? "API Documentation" }),
-			spec.info?.description ? /* @__PURE__ */ jsx("p", {
-				className: "lead",
+			/* @__PURE__ */ jsx("h1", { children: spec.info?.title ?? t("openapi.apiDocumentation") }),
+			spec.info?.description ? /* @__PURE__ */ jsx(Markdown, {
+				className: "lead *:first:mt-0 *:last:mb-0",
 				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
 		]
 	});
 }
-function OpenApiOperation(arg0) {
-	const { spec, path, method, operation } = arg0;
-	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 requestContents = getMediaTypeEntries(requestBody?.content);
-	const requestSchema = requestContents[0]?.value.schema;
-	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",
-		"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
-			}),
-			/* @__PURE__ */ jsx(ParameterList, {
-				title: "Headers",
-				parameters: groupedParameters.header
-			}),
-			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
-				})
-			] }) : 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(),
 			operation
-		})).map(({ path, method, operation }) => /* @__PURE__ */ jsx(OpenApiOperation, {
+		})).map(({ path, method, operation }) => /* @__PURE__ */ jsx(OpenApiOperation$1, {
 			spec,
 			path,
 			method,
@@ -763,72 +118,48 @@ 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", {
-		className: clsx("clarify-warning", tone === "red" ? "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200" : "rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200"),
+		className: `clarify-warning ${tone === "red" ? "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200" : "rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200"}`,
 		children
 	});
 }
-function OpenApiPage(arg0) {
+function OpenApiDocument(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) {
+function OpenApiOperationWithSpec(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, {
+	const normalizedMethod = method.toUpperCase();
+	return /* @__PURE__ */ jsx(OpenApiOperation$1, {
 		spec,
 		path,
-		method: method.toUpperCase(),
+		method: normalizedMethod,
 		operation: op
-	});
+	}, `${normalizedMethod}-${path}`);
 }
-function OpenApiEndpoint(arg0) {
+function OpenApiOperation(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] });
-	return /* @__PURE__ */ jsx(ApiEndpoint, {
+	if (!spec) return /* @__PURE__ */ jsx(WarningBox, { children: t("openapi.specNotFound", { specPath }) });
+	return /* @__PURE__ */ jsx(OpenApiOperationWithSpec, {
 		spec,
 		path,
 		method
@@ -836,18 +167,44 @@ function OpenApiEndpoint(arg0) {
 }
 //#endregion
 //#region source/mdx/components.ts
+var builtInMDXComponents = {
+	...primitives_exports,
+	Markdown,
+	Collapse
+};
+var builtInOpenAPIComponents = {
+	OpenApiDocument,
+	OpenApiOperation
+};
 function useMDXComponents(components = {}) {
 	return {
 		...components,
-		...primitives_exports,
-		OpenApiPage,
-		ApiEndpoint,
-		OpenApiEndpoint,
-		ApiEndpointCard,
-		DocShell
+		...builtInMDXComponents,
+		...builtInOpenAPIComponents
 	};
 }
 //#endregion
-export { ApiEndpoint, ApiEndpointCard, AppShell, BuiltWithClarify, Button, Callout, Card, CardGroup, ClarifyConfigContext, Code, CodeGroup, DocShell, Feedback, GridPattern, Heading, HeroPattern, Logo, OpenApiEndpoint, OpenApiPage, OpenApisContext, PageFooter, Pre, Prose, SectionProvider, Tag, ThemeProvider, ThemeToggle, remToPx, render, useClarifyConfig, useMDXComponents, useOpenApis, useSectionStore, useTheme };
+//#region source/mdx/DocShell.tsx
+function DocShell(arg0) {
+	const { title, subtitle, children } = arg0;
+	return /* @__PURE__ */ jsx("main", {
+		className: "clarify-doc-shell min-h-screen bg-white px-6 py-10 text-zinc-900 dark:bg-zinc-950 dark:text-white md:px-10",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto max-w-6xl",
+			children: [/* @__PURE__ */ jsxs("header", {
+				className: "mb-10",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-3xl font-bold tracking-tight md:text-5xl",
+					children: title
+				}), subtitle ? /* @__PURE__ */ jsx("p", {
+					className: "mt-3 max-w-2xl text-zinc-600 dark:text-zinc-400",
+					children: subtitle
+				}) : null]
+			}), /* @__PURE__ */ jsx(Prose, { children })]
+		})
+	});
+}
+//#endregion
+export { AppShell, BuiltWithClarify, Button, Callout, Card, CardGroup, ClarifyConfigContext, Code, CodeGroup, Collapse, DocShell, Feedback, GridPattern, Heading, HeroPattern, Logo, Markdown, OpenApiDocument, OpenApiOperation, OpenApisContext, PageFooter, Pre, Prose, SectionProvider, Tag, ThemeProvider, ThemeToggle, markdownRemarkPlugins, remToPx, render, useClarifyConfig, useMDXComponents, useOpenApis, useSectionStore, useTheme };
 
 //# sourceMappingURL=index.js.map