@clarify-labs/renderer 0.9.1 → 0.9.2

package/output/{OpenApiOperation-E8lSLsSK.js → OpenApiOperation-DIFaYAe5.js}

@@ -1,4 +1,4 @@
-import { D as copyTextToClipboard, M as useConfig, N as useLocale, O as useBuiltInText, T as localizeHref, c as remToPx, g as useTheme, l as lucideIconRegistry, n as PageTitleActions, s as useSectionStore, u as resolveLucideIconName, w as isExternalHref } from "./PageActions-DaXQgMYP.js";
+import { D as copyTextToClipboard, M as useConfig, N as useLocale, O as useBuiltInText, T as localizeHref, c as remToPx, g as useTheme, l as lucideIconRegistry, n as PageTitleActions, s as useSectionStore, u as resolveLucideIconName, w as isExternalHref } from "./PageActions-tmnpzi23.js";
 import { t as markdownRemarkPlugins } from "./remark-Dd2WU50s.js";
 import clsx from "clsx";
 import { Children, createContext, createElement, forwardRef, isValidElement, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
@@ -1734,7 +1734,7 @@ function buildRequestCodeExamples(input) {
 	}));
 }
 //#endregion
-//#region source/openapi/components/ExamplePanels.tsx
+//#region source/openapi/components/SelectControl.tsx
 function SelectControl(arg0) {
 	const { label, value, options, onChange, icon, compact = false } = arg0;
 	const normalizedOptions = options.map((option) => typeof option === "string" ? {
@@ -1781,69 +1781,8 @@ function SelectControl(arg0) {
 		})
 	});
 }
-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, path) {
-	const operationServers = operation.servers;
-	const pathServers = path ? getPathItem(spec, path)?.servers : void 0;
-	const servers = Array.isArray(operationServers) ? operationServers : Array.isArray(pathServers) ? pathServers : 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.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}` : ""}`;
-}
+//#endregion
+//#region source/openapi/components/CodeDisplay.tsx
 function CopyCodeButton(arg0) {
 	const { code } = arg0;
 	const t = useBuiltInText();
@@ -1909,6 +1848,73 @@ function CodeToolbar(arg0) {
 		}), /* @__PURE__ */ jsx(CopyCodeButton, { code })]
 	});
 }
+//#endregion
+//#region source/openapi/components/helpers.ts
+function getServers(spec, operation, path) {
+	const operationServers = operation.servers;
+	const pathServers = path ? getPathItem(spec, path)?.servers : void 0;
+	const servers = Array.isArray(operationServers) ? operationServers : Array.isArray(pathServers) ? pathServers : 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.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 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
+	}));
+}
+//#endregion
+//#region source/openapi/components/ExamplePanels.tsx
 function ApiExampleCodeGroup(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();
@@ -1985,15 +1991,18 @@ function ApiExampleCodeGroup(arg0) {
 		})
 	});
 }
-function RequestExamplesPanel(arg0) {
-	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth } = arg0;
-	const t = useBuiltInText();
+function firstExampleKeyForMediaType(requestContents, mediaType) {
+	return getExampleEntries(requestContents.find((content) => content.mediaType === mediaType)?.value)[0]?.key ?? "";
+}
+function useRequestExamplesState(arg0) {
+	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth, sharedExampleKey, onSelectExampleKey } = arg0;
 	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 currentExampleKey = (sharedExampleKey && examples.some((example) => example.key === sharedExampleKey) ? sharedExampleKey : void 0) ?? selectedExampleKey;
+	const selectedExample = examples.find((example) => example.key === currentExampleKey) ?? examples[0];
 	const codeOptions = buildRequestCodeExamples({
 		spec,
 		path,
@@ -2013,38 +2022,71 @@ function RequestExamplesPanel(arg0) {
 	});
 	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: selectedCode.code,
-		language: selectedCode.language,
-		mediaTypes: requestContents.map((content) => content.mediaType),
-		selectedMediaType: selectedContent?.mediaType,
+	return {
+		selectedContent,
+		selectedExample,
+		selectedCode,
+		languageOptions: getLanguageOptions(codeOptions),
+		clientOptions: getClientOptions(codeOptions, selectedCode.languageKey),
+		examples,
 		onSelectMediaType: (value) => {
 			onSelectMediaType(value);
-			setSelectedExampleKey(getExampleEntries(requestContents.find((content) => content.mediaType === value)?.value)[0]?.key ?? "");
+			setSelectedExampleKey(firstExampleKeyForMediaType(requestContents, value));
+		},
+		onSelectExample: (value) => {
+			setSelectedExampleKey(value);
+			onSelectExampleKey?.(value);
 		},
-		examples,
-		selectedExampleKey: selectedExample?.key,
-		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, spec } = arg0;
+function RequestExamplesPanel(arg0) {
+	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth, sharedExampleKey, onSelectExampleKey } = arg0;
 	const t = useBuiltInText();
+	const state = useRequestExamplesState({
+		spec,
+		path,
+		method,
+		parameters,
+		requestContents,
+		selectedMediaType,
+		onSelectMediaType,
+		selectedServer,
+		serverVariables,
+		auth,
+		sharedExampleKey,
+		onSelectExampleKey
+	});
+	return /* @__PURE__ */ jsx(ApiExampleCodeGroup, {
+		title: t("openapi.request"),
+		tag: method,
+		label: path,
+		code: state.selectedCode.code,
+		language: state.selectedCode.language,
+		mediaTypes: requestContents.map((content) => content.mediaType),
+		selectedMediaType: state.selectedContent?.mediaType,
+		onSelectMediaType: state.onSelectMediaType,
+		examples: state.examples,
+		selectedExampleKey: state.selectedExample?.key,
+		onSelectExample: state.onSelectExample,
+		languageOptions: state.languageOptions,
+		selectedLanguageKey: state.selectedCode.languageKey,
+		onSelectLanguage: state.onSelectLanguage,
+		clientOptions: state.clientOptions,
+		selectedClientKey: state.selectedCode.clientKey,
+		onSelectClient: state.onSelectClient
+	});
+}
+function firstExampleKeyForResponseContent(content) {
+	return getExampleEntries(content?.value)[0]?.key ?? "";
+}
+function useResponseExamplesState(arg0) {
+	const { operation, spec, sharedExampleKey, onSelectExampleKey } = arg0;
 	const responses = getResponseEntries(operation, spec).filter(({ response }) => getMediaTypeEntries(response.content, spec).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];
@@ -2053,31 +2095,56 @@ function ResponseExamplesPanel(arg0) {
 	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__ */ jsx(ApiExampleCodeGroup, {
-		title: t("openapi.response"),
-		tag: selectedResponse.status,
-		tagOptions: responses.map(({ status }) => status),
-		onSelectTag: (value) => {
+	const currentExampleKey = (sharedExampleKey && examples.some((example) => example.key === sharedExampleKey) ? sharedExampleKey : void 0) ?? selectedExampleKey;
+	const selectedExample = examples.find((example) => example.key === currentExampleKey) ?? examples[0];
+	return {
+		responses,
+		selectedResponse,
+		responseContents,
+		selectedContent,
+		examples,
+		selectedExample,
+		responseCode: stringifyExample(selectedExample?.value),
+		onSelectStatus: (value) => {
 			const nextContents = getMediaTypeEntries(responses.find(({ status }) => status === value)?.response.content, spec);
 			setSelectedStatus(value);
 			setSelectedMediaType(nextContents[0]?.mediaType ?? "");
-			setSelectedExampleKey(getExampleEntries(nextContents[0]?.value)[0]?.key ?? "");
+			setSelectedExampleKey(firstExampleKeyForResponseContent(nextContents[0]));
 		},
-		label: selectedContent.mediaType,
-		labelOptions: responseContents.map((content) => content.mediaType),
-		onSelectLabel: (value) => {
+		onSelectMediaType: (value) => {
 			setSelectedMediaType(value);
-			setSelectedExampleKey(getExampleEntries(responseContents.find((content) => content.mediaType === value)?.value)[0]?.key ?? "");
+			setSelectedExampleKey(firstExampleKeyForResponseContent(responseContents.find((content) => content.mediaType === value)));
 		},
+		onSelectExample: (value) => {
+			setSelectedExampleKey(value);
+			onSelectExampleKey?.(value);
+		}
+	};
+}
+function ResponseExamplesPanel(arg0) {
+	const { operation, spec, sharedExampleKey, onSelectExampleKey } = arg0;
+	const t = useBuiltInText();
+	const state = useResponseExamplesState({
+		operation,
+		spec,
+		sharedExampleKey,
+		onSelectExampleKey
+	});
+	if (!state.selectedResponse || !state.selectedContent || !state.responseCode) return null;
+	return /* @__PURE__ */ jsx(ApiExampleCodeGroup, {
+		title: t("openapi.response"),
+		tag: state.selectedResponse.status,
+		tagOptions: state.responses.map(({ status }) => status),
+		onSelectTag: state.onSelectStatus,
+		label: state.selectedContent.mediaType,
+		labelOptions: state.responseContents.map((content) => content.mediaType),
+		onSelectLabel: state.onSelectMediaType,
 		comfortableMeta: true,
-		code: responseCode,
-		language: codeLanguageForMediaType(selectedContent.mediaType),
-		examples,
-		selectedExampleKey: selectedExample?.key,
-		onSelectExample: setSelectedExampleKey
+		code: state.responseCode,
+		language: codeLanguageForMediaType(state.selectedContent.mediaType),
+		examples: state.examples,
+		selectedExampleKey: state.selectedExample?.key,
+		onSelectExample: state.onSelectExample
 	});
 }
 //#endregion
@@ -2340,7 +2407,7 @@ function ResponseList(arg0) {
 //#endregion
 //#region source/openapi/components/EndpointSections.tsx
 function EndpointRequest(arg0) {
-	const { spec, path, method, description, groupedParameters, parameters, requestBody, requestContents, requestSchema, selectedRequestMediaType, onSelectRequestMediaType, selectedServer, serverVariables, auth } = arg0;
+	const { spec, path, method, description, groupedParameters, parameters, requestBody, requestContents, requestSchema, selectedRequestMediaType, onSelectRequestMediaType, selectedServer, serverVariables, auth, sharedExampleKey, onSelectExampleKey } = arg0;
 	const t = useBuiltInText();
 	return /* @__PURE__ */ jsxs(Row, {
 		className: "relative mt-6",
@@ -2379,13 +2446,15 @@ function EndpointRequest(arg0) {
 				onSelectMediaType: onSelectRequestMediaType,
 				selectedServer,
 				serverVariables,
-				auth
+				auth,
+				sharedExampleKey,
+				onSelectExampleKey
 			})
 		})]
 	});
 }
 function EndpointResponse(arg0) {
-	const { spec, operation } = arg0;
+	const { spec, operation, sharedExampleKey, onSelectExampleKey } = arg0;
 	return /* @__PURE__ */ jsxs(Row, {
 		className: "relative mt-6",
 		children: [/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(ResponseList, {
@@ -2395,27 +2464,127 @@ function EndpointResponse(arg0) {
 			sticky: true,
 			children: /* @__PURE__ */ jsx(ResponseExamplesPanel, {
 				operation,
-				spec
+				spec,
+				sharedExampleKey,
+				onSelectExampleKey
 			})
 		})]
 	});
 }
 //#endregion
+//#region source/openapi/components/OpenApiOperation.state.ts
+function useOperationRequestState(spec, path, operation) {
+	const parameters = getOperationParameters(spec, path, operation);
+	const requestBody = getRequestBody$1(spec, operation);
+	const requestContents = getMediaTypeEntries(requestBody?.content, spec);
+	const [selectedRequestMediaType, setSelectedRequestMediaType] = useState(requestContents[0]?.mediaType ?? "");
+	const selectedRequestContent = requestContents.find((content) => content.mediaType === selectedRequestMediaType) ?? requestContents[0];
+	const requestSchema = selectedRequestContent?.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 {
+		parameters,
+		requestBody,
+		requestContents,
+		selectedRequestMediaType: selectedRequestContent?.mediaType ?? "",
+		setSelectedRequestMediaType,
+		requestSchema,
+		groupedParameters
+	};
+}
+function useOperationServerState(spec, operation, path) {
+	const servers = getServers(spec, operation, path);
+	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);
+	return {
+		servers,
+		selectedServerKey,
+		selectedServer,
+		serverVariables,
+		serverOpen,
+		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),
+		closeServer: () => setServerOpen(false)
+	};
+}
+function useOperationAuthState(spec, operation) {
+	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);
+	return {
+		authOptions,
+		selectedAuthName,
+		selectedAuth,
+		authValues,
+		authOpen,
+		authInput: selectedAuth ? {
+			name: selectedAuth.name,
+			scheme: selectedAuth.scheme,
+			value: authValues[selectedAuth.name] ?? authPlaceholder(selectedAuth)
+		} : void 0,
+		onSelectAuth: setSelectedAuthName,
+		onChangeAuthValue: (name, value) => setAuthValues((current) => ({
+			...current,
+			[name]: value
+		})),
+		onToggleAuth: () => setAuthOpen((current) => !current),
+		closeAuth: () => setAuthOpen(false)
+	};
+}
+//#endregion
 //#region source/openapi/components/OpenApiOperation.tsx
-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"
+var endpointMethodStyleVars = {
+	GET: "bg-(--clarify-http-method-get-background) text-(--clarify-http-method-get-text)",
+	POST: "bg-(--clarify-http-method-post-background) text-(--clarify-http-method-post-text)",
+	PUT: "bg-(--clarify-http-method-put-background) text-(--clarify-http-method-put-text)",
+	PATCH: "bg-(--clarify-http-method-patch-background) text-(--clarify-http-method-patch-text)",
+	DELETE: "bg-(--clarify-http-method-delete-background) text-(--clarify-http-method-delete-text)"
 };
 function EndpointMethodBadge(arg0) {
 	const { method } = arg0;
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("rounded-(--clarify-theme-tokens-radius-md) px-2.5 py-0.5 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"),
+		className: clsx("rounded-(--clarify-theme-tokens-radius-md) px-2.5 py-0.5 text-xs/6 font-black tracking-wide", endpointMethodStyleVars[method] ?? "bg-(--clarify-http-method-default-background) text-(--clarify-http-method-default-text)"),
 		children: method
 	});
 }
+function EndpointPath(arg0) {
+	const { path } = arg0;
+	const segments = path.split("/").filter(Boolean);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-w-0 flex-1 items-center overflow-x-auto text-sm font-bold leading-6 whitespace-nowrap",
+		children: segments.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-(--clarify-ui-text-faint)",
+			children: "/"
+		}), segments.map((segment, index) => /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center",
+			children: [index > 0 ? /* @__PURE__ */ jsx("span", {
+				className: "text-(--clarify-ui-text-faint)",
+				children: "/"
+			}) : null, /* @__PURE__ */ jsx("span", {
+				className: "font-bold text-(--clarify-theme-tokens-colors-foreground)",
+				children: segment
+			})]
+		}, `${segment}-${index}`))] }) : /* @__PURE__ */ jsx("span", {
+			className: "font-bold text-(--clarify-theme-tokens-colors-foreground)",
+			children: "/"
+		})
+	});
+}
 function InlineListbox(arg0) {
 	const { label, value, options, onChange, compact = false } = arg0;
 	const selected = options.find((option) => option.value === value) ?? options[0];
@@ -2531,7 +2700,7 @@ function ServerPanel(arg0) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-subtle-background) p-3",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "grid gap-3 sm:grid-cols-(--clarify-openapi-control-grid)",
+			className: "flex flex-col gap-3",
 			children: [servers.length > 1 ? /* @__PURE__ */ jsxs("label", {
 				className: "flex min-w-0 flex-col gap-1.5",
 				children: [/* @__PURE__ */ jsx("span", {
@@ -2547,18 +2716,21 @@ function ServerPanel(arg0) {
 					})),
 					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-(--clarify-ui-text-soft)",
-					children: name
-				}), /* @__PURE__ */ jsx(ServerVariableControl, {
-					name,
-					variable,
-					value: variables[name] ?? variable.default ?? "",
-					onChange: (value) => onChangeVariable(name, value)
-				})]
-			}, name))]
+			}) : null, variableEntries.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "grid gap-3 sm:grid-cols-(--clarify-openapi-variable-grid)",
+				children: 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-(--clarify-ui-text-soft)",
+						children: name
+					}), /* @__PURE__ */ jsx(ServerVariableControl, {
+						name,
+						variable,
+						value: variables[name] ?? variable.default ?? "",
+						onChange: (value) => onChangeVariable(name, value)
+					})]
+				}, name))
+			}) : null]
 		})
 	});
 }
@@ -2606,7 +2778,6 @@ function AuthPanel(arg0) {
 }
 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);
 	const serverInteractive = servers.length > 1 || Object.keys(selectedServer.variables ?? {}).length > 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "not-prose flex w-full flex-col overflow-hidden rounded-xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-xs",
@@ -2622,25 +2793,7 @@ function EndpointIdentity(arg0) {
 						interactive: serverInteractive,
 						onToggle: onToggleServer
 					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "flex min-w-0 flex-1 items-center overflow-x-auto text-sm font-bold leading-6 whitespace-nowrap",
-						children: segments.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-							className: "text-(--clarify-ui-text-faint)",
-							children: "/"
-						}), segments.map((segment, index) => /* @__PURE__ */ jsxs("span", {
-							className: "flex items-center",
-							children: [index > 0 ? /* @__PURE__ */ jsx("span", {
-								className: "text-(--clarify-ui-text-faint)",
-								children: "/"
-							}) : null, /* @__PURE__ */ jsx("span", {
-								className: "font-bold text-(--clarify-theme-tokens-colors-foreground)",
-								children: segment
-							})]
-						}, `${segment}-${index}`))] }) : /* @__PURE__ */ jsx("span", {
-							className: "font-bold text-(--clarify-theme-tokens-colors-foreground)",
-							children: "/"
-						})
-					}),
+					/* @__PURE__ */ jsx(EndpointPath, { path }),
 					authOptions.length > 0 ? /* @__PURE__ */ jsx("button", {
 						type: "button",
 						"aria-expanded": authOpen,
@@ -2681,32 +2834,10 @@ function OpenApiOperation(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$1(spec, operation);
-	const requestContents = getMediaTypeEntries(requestBody?.content, spec);
-	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, path);
-	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")
-	};
+	const requestState = useOperationRequestState(spec, path, operation);
+	const serverState = useOperationServerState(spec, operation, path);
+	const authState = useOperationAuthState(spec, operation);
+	const [linkedExampleKey, setLinkedExampleKey] = useState("");
 	return /* @__PURE__ */ jsxs("section", {
 		className: "clarify-api-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
@@ -2718,58 +2849,52 @@ function OpenApiOperation(arg0) {
 			/* @__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
-				})),
+				servers: serverState.servers,
+				selectedServerKey: serverState.selectedServerKey,
+				selectedServer: serverState.selectedServer,
+				serverVariables: serverState.serverVariables,
+				serverOpen: serverState.serverOpen,
+				authOptions: authState.authOptions,
+				selectedAuthName: authState.selectedAuthName,
+				selectedAuth: authState.selectedAuth,
+				authValues: authState.authValues,
+				authOpen: authState.authOpen,
+				onSelectServer: serverState.onSelectServer,
+				onChangeServerVariable: serverState.onChangeServerVariable,
 				onToggleServer: () => {
-					setServerOpen((current) => !current);
-					setAuthOpen(false);
+					serverState.onToggleServer();
+					authState.closeAuth();
 				},
 				onToggleAuth: () => {
-					setAuthOpen((current) => !current);
-					setServerOpen(false);
+					authState.onToggleAuth();
+					serverState.closeServer();
 				},
-				onSelectAuth: setSelectedAuthName,
-				onChangeAuthValue: (name, value) => setAuthValues((current) => ({
-					...current,
-					[name]: value
-				}))
+				onSelectAuth: authState.onSelectAuth,
+				onChangeAuthValue: authState.onChangeAuthValue
 			}),
 			/* @__PURE__ */ jsx(EndpointRequest, {
 				spec,
 				path,
 				method,
 				description,
-				groupedParameters,
-				parameters,
-				requestBody,
-				requestContents,
-				requestSchema,
-				selectedRequestMediaType: selectedRequestContent?.mediaType ?? "",
-				onSelectRequestMediaType: setSelectedRequestMediaType,
-				selectedServer,
-				serverVariables,
-				auth: authInput
+				groupedParameters: requestState.groupedParameters,
+				parameters: requestState.parameters,
+				requestBody: requestState.requestBody,
+				requestContents: requestState.requestContents,
+				requestSchema: requestState.requestSchema,
+				selectedRequestMediaType: requestState.selectedRequestMediaType,
+				onSelectRequestMediaType: requestState.setSelectedRequestMediaType,
+				selectedServer: serverState.selectedServer,
+				serverVariables: serverState.serverVariables,
+				auth: authState.authInput,
+				sharedExampleKey: linkedExampleKey,
+				onSelectExampleKey: setLinkedExampleKey
 			}),
 			/* @__PURE__ */ jsx(EndpointResponse, {
 				spec,
-				operation
+				operation,
+				sharedExampleKey: linkedExampleKey,
+				onSelectExampleKey: setLinkedExampleKey
 			})
 		]
 	});
@@ -2777,4 +2902,4 @@ function OpenApiOperation(arg0) {
 //#endregion
 export { Button as A, Code as C, Card as D, Mermaid as E, CardGroup as O, Collapse as S, Pre as T, HeroPattern as _, authPlaceholder as a, Tag as b, getServerKey as c, getRequestBody$1 as d, Markdown as f, GridPattern as g, Prose as h, ResponseExamplesPanel as i, Callout as k, getServers as l, WebFrame as m, OpenApiOperation as n, defaultServerVariables as o, primitives_exports as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getMediaTypeEntries as u, Logo as v, CodeGroup as w, Feedback as x, Heading as y };
 
-//# sourceMappingURL=OpenApiOperation-E8lSLsSK.js.map
+//# sourceMappingURL=OpenApiOperation-DIFaYAe5.js.map