@clarify-labs/renderer 0.7.0 → 0.7.2

package/output/{OpenApiOperation-CWSOhUVa.js → OpenApiOperation-tUKf7lZ4.js}

@@ -1,10 +1,10 @@
-import { C as isExternalHref, D as useBuiltInText, E as copyTextToClipboard, M as useClarifyLocale, a as useSectionStore, c as resolveLucideIconName, j as useClarifyConfig, o as remToPx, s as lucideIconRegistry, w as localizeHref } from "./shell-CumiARRe.js";
+import { C as isExternalHref, D as useBuiltInText, E as copyTextToClipboard, M as useLocale, c as remToPx, j as useConfig, l as lucideIconRegistry, n as PageTitleActions, s as useSectionStore, u as resolveLucideIconName, w as localizeHref } from "./PageActions-yoDRjkq8.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";
 import { Link } from "react-router-dom";
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition } from "@headlessui/react";
-import { AlertTriangle, ArrowRight, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, Info, Lightbulb, LinkIcon, LockKeyholeIcon, PackageIcon, ServerIcon, UnlockKeyholeIcon, XCircle } from "lucide-react";
+import { AlertTriangle, ArrowRight, Check, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, Info, Lightbulb, LinkIcon, LockKeyholeIcon, PackageIcon, ServerIcon, UnlockKeyholeIcon, XCircle } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useInView } from "framer-motion";
 import { create } from "zustand";
@@ -25,7 +25,7 @@ var __exportAll = (all, no_symbols) => {
 //#endregion
 //#region source/components/LocalizedLink.tsx
 function useLocalizedHref(href) {
-	return localizeHref(href, useClarifyConfig(), useClarifyLocale());
+	return localizeHref(href, useConfig(), useLocale());
 }
 function LocalizedLink(arg0) {
 	const { href, ...props } = arg0;
@@ -247,38 +247,30 @@ function CopyButton(arg0) {
 		return () => window.clearTimeout(timeout);
 	}, [copyCount]);
 	if (!code) return null;
-	return /* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: clsx("clarify-code-copy group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100", copied ? "clarify-code-copy-copied" : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"),
+		className: clsx("clarify-code-copy group/button absolute top-3.5 right-4 inline-flex items-center gap-1 overflow-hidden rounded-full border border-(--clarify-code-border) py-1 pr-3 pl-2 text-2xs font-medium whitespace-nowrap opacity-100 shadow-sm backdrop-blur-sm transition sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100", copied ? "clarify-code-copy-copied text-(--clarify-code-text)" : "bg-(--clarify-code-control-background) text-(--clarify-code-text) hover:bg-(--clarify-code-control-background-hover)"),
 		onClick: () => {
 			copyTextToClipboard(code).then((ok) => {
 				if (ok) setCopyCount((count) => count + 1);
 			});
 		},
-		children: [/* @__PURE__ */ jsxs("span", {
-			"aria-hidden": copied,
-			className: clsx("pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300", copied && "-translate-y-1.5 opacity-0"),
-			children: [/* @__PURE__ */ jsx(Clipboard, { className: "h-5 w-5 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), t("actions.copy")]
-		}), /* @__PURE__ */ jsx("span", {
-			"aria-hidden": !copied,
-			className: clsx("pointer-events-none absolute inset-0 flex items-center justify-center text-(--clarify-theme-tokens-colors-primary) transition duration-300", !copied && "translate-y-1.5 opacity-0"),
-			children: t("actions.copied")
-		})]
+		children: copied ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 stroke-(--clarify-theme-tokens-colors-primary)" }), t("actions.copied")] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Clipboard, { className: "h-3.5 w-3.5 stroke-(--clarify-code-muted) transition-colors group-hover/button:stroke-(--clarify-code-text)" }), t("actions.copy")] })
 	});
 }
 function CodePanelHeader(arg0) {
 	const { tag, label } = arg0;
 	if (!tag && !label) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-code-panel-header 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: "clarify-code-panel-header flex h-9 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4",
 		children: [
 			tag ? /* @__PURE__ */ jsx("span", {
 				className: "clarify-code-panel-tag font-semibold text-(--clarify-theme-tokens-colors-primary)",
 				children: tag
 			}) : null,
-			tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
+			tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-(--clarify-code-faint)" }) : null,
 			label ? /* @__PURE__ */ jsx("span", {
-				className: "text-xs text-zinc-400",
+				className: "truncate text-xs text-(--clarify-code-muted)",
 				children: label
 			}) : null
 		]
@@ -296,14 +288,14 @@ function CodePanel(arg0) {
 	}
 	const copyText = code ?? getNodeText(children);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-code-panel group dark:bg-white/2.5",
+		className: "clarify-code-panel group bg-(--clarify-code-background)",
 		children: [/* @__PURE__ */ jsx(CodePanelHeader, {
 			tag,
 			label
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "relative",
 			children: [/* @__PURE__ */ jsx("pre", {
-				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-white",
+				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-(--clarify-code-text)",
 				children
 			}), /* @__PURE__ */ jsx(CopyButton, { code: copyText })]
 		})]
@@ -315,14 +307,14 @@ function CodeGroupHeader(arg0) {
 	const hasTabs = Children.count(children) > 1;
 	if (!title && !hasTabs) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-code-group-header flex min-h-(--clarify-code-header-min-height) flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent",
+		className: "clarify-code-group-header flex min-h-(--clarify-code-header-min-height) flex-wrap items-start gap-x-4 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4",
 		children: [title ? /* @__PURE__ */ jsx("h3", {
-			className: "mr-auto pt-3 text-xs font-semibold text-white",
+			className: "mr-auto pt-3 text-xs font-semibold text-(--clarify-code-text)",
 			children: title
 		}) : null, hasTabs ? /* @__PURE__ */ jsx(TabList, {
 			className: "clarify-code-tabs -mb-px flex gap-4 text-xs font-medium",
 			children: Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx(Tab, {
-				className: clsx("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-theme-tokens-colors-primary)" : "border-transparent text-zinc-400 hover:text-zinc-300"),
+				className: clsx("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-theme-tokens-colors-primary)" : "border-transparent text-(--clarify-code-muted) hover:text-(--clarify-code-text)"),
 				children: getPanelTitle({
 					...isValidElement(child) ? child.props : {},
 					fallbackTitle: t("actions.code")
@@ -396,7 +388,7 @@ function CodeGroup(arg0) {
 		fallbackTitle: t("actions.code")
 	})) ?? []);
 	const hasTabs = Children.count(children) > 1;
-	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
+	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)";
 	const header = /* @__PURE__ */ jsx(CodeGroupHeader, {
 		title,
 		selectedIndex: tabGroupProps.selectedIndex,
@@ -457,7 +449,7 @@ function Collapse(arg0) {
 		setMaxHeight(open ? `${contentRef.current.scrollHeight}px` : "0px");
 	}, [open, children]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-sm", className),
+		className: clsx("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
@@ -826,6 +818,7 @@ var primitives_exports = /* @__PURE__ */ __exportAll({
 	WebFrame: () => WebFrame,
 	a: () => a,
 	code: () => code,
+	h1: () => h1,
 	h2: () => h2,
 	h3: () => h3,
 	pre: () => pre,
@@ -834,7 +827,7 @@ var primitives_exports = /* @__PURE__ */ __exportAll({
 function wrapper(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ jsx("article", {
-		className: "clarify-mdx-page flex h-full flex-col pt-16 pb-10",
+		className: "clarify-mdx-page flex h-full flex-col pt-14 pb-10",
 		children: /* @__PURE__ */ jsx(Prose, {
 			className: "flex-auto",
 			children
@@ -848,6 +841,17 @@ function a(arg0) {
 		...props
 	});
 }
+function h1(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "clarify-page-title-row flex flex-col gap-4  pb-4 sm:flex-row sm:items-start sm:justify-between",
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: clsx("clarify-page-title min-w-0 flex-1", className),
+			...props,
+			children
+		}), /* @__PURE__ */ jsx(PageTitleActions, {})]
+	});
+}
 var code = Code;
 var pre = Pre;
 function h2(props) {
@@ -873,16 +877,16 @@ function Note(arg0) {
 	});
 }
 function Row(arg0) {
-	const { children } = arg0;
+	const { children, className } = arg0;
 	return /* @__PURE__ */ jsx("div", {
-		className: "clarify-row grid grid-cols-1 items-start gap-x-8 gap-y-10 xl:max-w-none xl:grid-cols-2",
+		className: clsx("clarify-row grid grid-cols-1 items-start gap-x-8 gap-y-10 xl:max-w-none xl:grid-cols-2", className),
 		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"),
+		className: clsx("clarify-col *:first:mt-0 *:last:mb-0", sticky && "xl:sticky xl:top-[calc(var(--clarify-header-offset,3.5rem)+1.5rem)] xl:self-start"),
 		children
 	});
 }
@@ -1552,26 +1556,26 @@ function SelectControl(arg0) {
 			className: wrapperClassName,
 			children: [/* @__PURE__ */ jsxs(ListboxButton, {
 				"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 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`,
+				className: `clarify-api-select-button flex ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg bg-(--clarify-code-control-background) px-2 py-1 text-xs font-medium whitespace-nowrap text-(--clarify-code-text) outline-hidden transition hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:bg-(--clarify-code-control-background-hover) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)`,
 				children: [/* @__PURE__ */ jsxs("span", {
 					className: "flex min-w-0 items-center gap-1.5 overflow-hidden",
 					children: [icon ? /* @__PURE__ */ jsx("span", {
-						className: "shrink-0 text-zinc-500",
+						className: "shrink-0 text-(--clarify-code-faint)",
 						children: icon
 					}) : null, /* @__PURE__ */ jsx("span", {
 						className: "truncate",
 						children: selectedOption?.label ?? value
 					})]
 				}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, {
-					className: "h-3.5 w-3.5 shrink-0 text-zinc-500",
+					className: "h-3.5 w-3.5 shrink-0 text-(--clarify-code-faint)",
 					"aria-hidden": "true"
 				})]
 			}), /* @__PURE__ */ jsx(ListboxOptions, {
 				anchor: "bottom end",
-				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) 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",
+				className: "clarify-api-select-options z-30 mt-1 max-h-64 w-max min-w-(--button-width) max-w-(--clarify-popover-max-width) overflow-auto rounded-xl bg-(--clarify-code-surface) p-1 text-xs shadow-lg shadow-black/20 ring-1 ring-(--clarify-code-border) [--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 text-xs whitespace-nowrap text-zinc-300 select-none data-focus:bg-white/10 data-focus:text-white data-selected:text-emerald-300",
+					className: "clarify-api-select-option group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-(--clarify-code-muted) select-none data-focus:bg-(--clarify-code-control-background-hover) data-focus:text-(--clarify-code-text) data-selected:text-(--clarify-theme-tokens-colors-primary)",
 					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"
@@ -1657,12 +1661,12 @@ function CopyCodeButton(arg0) {
 				window.setTimeout(() => setCopied(false), 1e3);
 			});
 		},
-		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",
+		className: "flex items-center gap-1.5 rounded-full bg-(--clarify-code-control-background) px-2.5 py-1.5 text-2xs font-medium text-(--clarify-code-muted) transition hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus:bg-(--clarify-code-control-background-hover) focus:text-(--clarify-code-text)",
 		children: [copied ? /* @__PURE__ */ jsx(CheckIcon, {
-			className: "h-3.5 w-3.5 text-emerald-300",
+			className: "h-3.5 w-3.5 text-(--clarify-theme-tokens-colors-primary)",
 			"aria-hidden": "true"
 		}) : /* @__PURE__ */ jsx(ClipboardIcon, {
-			className: "h-3.5 w-3.5 text-zinc-500",
+			className: "h-3.5 w-3.5 text-(--clarify-code-faint)",
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ jsx("span", { children: copied ? t("actions.copied") : t("actions.copy") })]
 	});
@@ -1712,16 +1716,16 @@ function CodeToolbar(arg0) {
 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();
-	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";
+	const metaClassName = comfortableMeta ? "flex min-h-11 min-w-0 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4 py-2" : "flex h-9 min-w-0 items-center gap-2 border-y border-(--clarify-code-border) border-t-transparent bg-(--clarify-code-background) px-4";
 	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",
+		className: "clarify-api-example my-6 overflow-hidden rounded-2xl bg-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "not-prose",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "clarify-api-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-zinc-700 bg-zinc-800 px-4 py-2 dark:border-zinc-800 dark:bg-transparent",
+					className: "clarify-api-example-header flex min-h-(--clarify-code-header-min-height) items-center gap-3 border-b border-(--clarify-code-border) bg-(--clarify-code-header-background) px-4 py-2",
 					children: [/* @__PURE__ */ jsx("h3", {
-						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-white",
+						className: "mr-auto min-w-16 truncate py-1 text-xs font-semibold text-(--clarify-code-text)",
 						children: title
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
@@ -1753,18 +1757,18 @@ function ApiExampleCodeGroup(arg0) {
 							onChange: onSelectTag,
 							className: "clarify-api-example-status font-semibold text-emerald-400"
 						}) : null,
-						tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-zinc-500" }) : null,
+						tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
 						label ? /* @__PURE__ */ jsx(ExampleMetaValue, {
 							label: t("openapi.mediaType"),
 							value: label,
 							options: labelOptions,
 							onChange: onSelectLabel,
-							className: "min-w-0 truncate text-xs text-zinc-400"
+							className: "min-w-0 truncate text-xs text-(--clarify-code-muted)"
 						}) : null
 					]
 				}) : null,
 				/* @__PURE__ */ jsxs("div", {
-					className: "clarify-api-example-code group relative",
+					className: "clarify-api-example-code group relative bg-(--clarify-code-background)",
 					children: [/* @__PURE__ */ jsx(CodeToolbar, {
 						code,
 						languageOptions,
@@ -1774,7 +1778,7 @@ function ApiExampleCodeGroup(arg0) {
 						selectedClientKey,
 						onSelectClient
 					}), /* @__PURE__ */ jsx("pre", {
-						className: `max-h-128 overflow-auto overscroll-contain p-4 text-xs text-white ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
+						className: `max-h-128 overflow-auto overscroll-contain p-4 text-xs text-(--clarify-code-text) ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
 						children: /* @__PURE__ */ jsx("code", {
 							className: `language-${language}`,
 							children: code
@@ -2056,7 +2060,10 @@ function SchemaNode(arg0) {
 			}) : null]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "mt-0.5 text-sm/5 text-(--clarify-ui-text-soft) *:first:mt-0 *:last:mb-0",
-			children: [node.description ? /* @__PURE__ */ jsx(Markdown, { children: node.description }) : fallbackDescription, node.details ? /* @__PURE__ */ jsx("p", {
+			children: [node.description ? /* @__PURE__ */ jsx(Markdown, {
+				className: "*:first:mt-0 *:last:mb-0",
+				children: node.description
+			}) : fallbackDescription, node.details ? /* @__PURE__ */ jsx("p", {
 				className: "text-xs text-(--clarify-ui-text-faint)",
 				children: node.details
 			}) : null]
@@ -2112,7 +2119,10 @@ function ParameterList(arg0) {
 	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 ? /* @__PURE__ */ jsx(Markdown, { children: parameter.description }) : t("openapi.operationParameter")
+		children: parameter.description ? /* @__PURE__ */ jsx(Markdown, {
+			className: "*:first:mt-0 *:last:mb-0",
+			children: parameter.description
+		}) : t("openapi.operationParameter")
 	}, `${parameter.in}-${parameter.name}`)) })] });
 }
 function ResponseList(arg0) {
@@ -2124,33 +2134,78 @@ function ResponseList(arg0) {
 		return /* @__PURE__ */ jsx(Property, {
 			name: status,
 			type: schemaToType(getJsonLikeContent(response.content, spec)?.value.schema),
-			children: response.description ? /* @__PURE__ */ jsx(Markdown, { children: response.description }) : `${t("openapi.response")}.`
+			children: response.description ? /* @__PURE__ */ jsx(Markdown, {
+				className: "*:first:mt-0 *:last:mb-0",
+				children: response.description
+			}) : `${t("openapi.response")}.`
 		}, status);
 	}) })] });
 }
 //#endregion
-//#region source/openapi/components/OpenApiOperation.tsx
-function EndpointExamples(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, {
-			spec,
-			path,
-			method,
-			parameters,
-			requestContents,
-			selectedMediaType: selectedRequestMediaType,
-			onSelectMediaType: onSelectRequestMediaType,
-			selectedServer,
-			serverVariables,
-			auth
-		}), /* @__PURE__ */ jsx(ResponseExamplesPanel, {
+//#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 t = useBuiltInText();
+	return /* @__PURE__ */ jsxs(Row, {
+		className: "relative mt-6",
+		children: [/* @__PURE__ */ jsxs(Col, { children: [
+			description ? /* @__PURE__ */ jsx(Markdown, { 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(Markdown, { children: requestBody.description }) : null,
+				/* @__PURE__ */ jsx(SchemaProperties, {
+					title: t("openapi.bodyProperties"),
+					schema: requestSchema,
+					spec
+				})
+			] }) : null
+		] }), /* @__PURE__ */ jsx(Col, {
+			sticky: true,
+			children: /* @__PURE__ */ jsx(RequestExamplesPanel, {
+				spec,
+				path,
+				method,
+				parameters,
+				requestContents,
+				selectedMediaType: selectedRequestMediaType,
+				onSelectMediaType: onSelectRequestMediaType,
+				selectedServer,
+				serverVariables,
+				auth
+			})
+		})]
+	});
+}
+function EndpointResponse(arg0) {
+	const { spec, operation } = arg0;
+	return /* @__PURE__ */ jsxs(Row, {
+		className: "relative mt-6",
+		children: [/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(ResponseList, {
 			operation,
 			spec
+		}) }), /* @__PURE__ */ jsx(Col, {
+			sticky: true,
+			children: /* @__PURE__ */ jsx(ResponseExamplesPanel, {
+				operation,
+				spec
+			})
 		})]
 	});
 }
+//#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",
@@ -2211,14 +2266,31 @@ 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 { server, variables, open, interactive, onToggle } = arg0;
 	const url = getServerPreviewUrl(server, variables);
+	if (!interactive) return /* @__PURE__ */ jsxs("span", {
+		"aria-label": "Server",
+		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-foreground) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sm:hidden",
+			children: /* @__PURE__ */ jsx(ServerIcon, {
+				className: "h-4 w-4",
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "hidden min-w-0 items-center overflow-hidden sm:flex",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "truncate font-semibold text-xs",
+				children: url
+			})
+		})]
+	});
 	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-(--clarify-ui-subtle-background) text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5", open ? "bg-(--clarify-ui-active-background) text-(--clarify-theme-tokens-colors-foreground)" : null),
+		className: clsx("flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-foreground) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) sm:w-auto sm:min-w-16 sm:max-w-(--clarify-server-url-max-width) sm:px-1.5", open ? "bg-(--clarify-ui-active-background) text-(--clarify-theme-tokens-colors-foreground)" : null),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ jsx(ServerIcon, {
@@ -2228,7 +2300,7 @@ function ServerUrlValue(arg0) {
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate text-xs",
+				className: "truncate font-semibold text-xs",
 				children: url
 			}), /* @__PURE__ */ jsx(ChevronDownIcon, {
 				className: "h-3.5 w-3.5 shrink-0 text-zinc-400",
@@ -2339,6 +2411,7 @@ 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",
 		children: [
@@ -2350,6 +2423,7 @@ function EndpointIdentity(arg0) {
 						server: selectedServer,
 						variables: serverVariables,
 						open: serverOpen,
+						interactive: serverInteractive,
 						onToggle: onToggleServer
 					}),
 					/* @__PURE__ */ jsx("div", {
@@ -2387,7 +2461,7 @@ function EndpointIdentity(arg0) {
 					}) : null
 				]
 			}),
-			serverOpen ? /* @__PURE__ */ jsx(ServerPanel, {
+			serverInteractive && serverOpen ? /* @__PURE__ */ jsx(ServerPanel, {
 				servers,
 				selectedKey: selectedServerKey,
 				selectedServer,
@@ -2408,7 +2482,6 @@ function EndpointIdentity(arg0) {
 }
 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;
@@ -2442,6 +2515,10 @@ function OpenApiOperation(arg0) {
 		className: "clarify-api-endpoint scroll-mt-24 py-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
 		children: [
+			/* @__PURE__ */ jsx(Heading, {
+				id,
+				children: summary
+			}),
 			/* @__PURE__ */ jsx(EndpointIdentity, {
 				method,
 				path,
@@ -2478,61 +2555,30 @@ function OpenApiOperation(arg0) {
 					[name]: value
 				}))
 			}),
-			/* @__PURE__ */ jsx(Heading, {
-				id,
-				className: "mt-6",
-				children: summary
+			/* @__PURE__ */ jsx(EndpointRequest, {
+				spec,
+				path,
+				method,
+				description,
+				groupedParameters,
+				parameters,
+				requestBody,
+				requestContents,
+				requestSchema,
+				selectedRequestMediaType: selectedRequestContent?.mediaType ?? "",
+				onSelectRequestMediaType: setSelectedRequestMediaType,
+				selectedServer,
+				serverVariables,
+				auth: authInput
 			}),
-			/* @__PURE__ */ jsxs(Row, { children: [/* @__PURE__ */ jsxs(Col, { children: [
-				description ? /* @__PURE__ */ jsx(Markdown, {
-					className: "mt-4 *:first:mt-0 *:last:mb-0",
-					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(Markdown, { children: requestBody.description }) : null,
-					/* @__PURE__ */ jsx(SchemaProperties, {
-						title: t("openapi.bodyProperties"),
-						schema: requestSchema,
-						spec
-					})
-				] }) : null,
-				/* @__PURE__ */ jsx(ResponseList, {
-					operation,
-					spec
-				})
-			] }), /* @__PURE__ */ jsx(Col, {
-				sticky: true,
-				children: /* @__PURE__ */ jsx(EndpointExamples, {
-					spec,
-					path,
-					method,
-					operation,
-					parameters,
-					requestContents,
-					selectedRequestMediaType: selectedRequestContent?.mediaType ?? "",
-					onSelectRequestMediaType: setSelectedRequestMediaType,
-					selectedServer,
-					serverVariables,
-					auth: authInput
-				})
-			})] })
+			/* @__PURE__ */ jsx(EndpointResponse, {
+				spec,
+				operation
+			})
 		]
 	});
 }
 //#endregion
 export { Code as C, CardGroup as D, Card as E, Callout 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, Button 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-CWSOhUVa.js.map
+//# sourceMappingURL=OpenApiOperation-tUKf7lZ4.js.map