@clarify-labs/renderer 0.7.1 → 0.8.0

package/output/{OpenApiOperation-C4xZu4i0.cjs → OpenApiOperation-9SvCA_B4.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-DakpK96I.cjs");
-const require_PageActions = require("./PageActions-1RDCHcUY.cjs");
+const require_PageActions = require("./PageActions-yycPlNyL.cjs");
 const require_remark = require("./remark-Dv3owbSH.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
@@ -10,6 +10,7 @@ let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
 let zustand = require("zustand");
+let react_zoom_pan_pinch = require("react-zoom-pan-pinch");
 let react_markdown = require("react-markdown");
 react_markdown = require_chunk.__toESM(react_markdown, 1);
 let github_slugger = require("github-slugger");
@@ -198,6 +199,166 @@ function Card(arg0) {
 	});
 }
 //#endregion
+//#region source/components/Mermaid.tsx
+var mermaidModulePromise;
+async function loadMermaid() {
+	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
+	return mermaidModulePromise;
+}
+function ZoomControls() {
+	const { zoomIn, zoomOut, resetTransform } = (0, react_zoom_pan_pinch.useControls)();
+	const t = require_PageActions.useBuiltInText();
+	const buttonClassName = "flex h-7 w-7 items-center justify-center rounded-md bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "clarify-mermaid-controls absolute top-2 right-2 z-10 flex gap-1 opacity-0 transition group-hover:opacity-100 focus-within:opacity-100",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": t("mermaid.zoomIn"),
+				title: t("mermaid.zoomIn"),
+				onClick: () => zoomIn(),
+				className: buttonClassName,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": t("mermaid.zoomOut"),
+				title: t("mermaid.zoomOut"),
+				onClick: () => zoomOut(),
+				className: buttonClassName,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": t("mermaid.resetZoom"),
+				title: t("mermaid.resetZoom"),
+				onClick: () => resetTransform(),
+				className: buttonClassName,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Maximize2, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}
+function Mermaid(arg0) {
+	const { chart, className } = arg0;
+	const t = require_PageActions.useBuiltInText();
+	const { resolvedTheme } = require_PageActions.useTheme();
+	const renderId = `clarify-mermaid-${(0, react.useId)().replace(/[^a-zA-Z0-9]/g, "")}`;
+	const containerRef = (0, react.useRef)(null);
+	const [svg, setSvg] = (0, react.useState)("");
+	const [error, setError] = (0, react.useState)(void 0);
+	const [focused, setFocused] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		let cancelled = false;
+		async function renderChart() {
+			const source = chart.trim();
+			if (!source) {
+				setSvg("");
+				setError(void 0);
+				return;
+			}
+			try {
+				const mermaid = await loadMermaid();
+				mermaid.initialize({
+					startOnLoad: false,
+					securityLevel: "strict",
+					theme: resolvedTheme === "dark" ? "dark" : "default",
+					fontFamily: "inherit"
+				});
+				const { svg: renderedSvg } = await mermaid.render(renderId, source);
+				if (!cancelled) {
+					setSvg(renderedSvg);
+					setError(void 0);
+				}
+			} catch (renderError) {
+				if (!cancelled) {
+					setSvg("");
+					setError(renderError instanceof Error ? renderError.message : String(renderError));
+				}
+			}
+		}
+		renderChart();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		chart,
+		renderId,
+		resolvedTheme
+	]);
+	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("clarify-mermaid clarify-mermaid-error my-6 overflow-x-auto rounded-2xl border border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) p-4", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm font-semibold text-(--clarify-error-accent-text)",
+				children: t("mermaid.renderError")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+				className: "mt-2 text-xs whitespace-pre-wrap text-(--clarify-ui-text-soft)",
+				children: error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+				className: "mt-2 text-xs whitespace-pre-wrap text-(--clarify-ui-text-faint)",
+				children: chart.trim()
+			})
+		]
+	});
+	if (!svg) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("clarify-mermaid clarify-mermaid-loading not-prose my-6 overflow-x-auto rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-4", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+			className: "text-xs text-(--clarify-ui-text-soft)",
+			children: chart.trim()
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: containerRef,
+		tabIndex: 0,
+		role: "group",
+		onPointerDown: () => containerRef.current?.focus(),
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+		className: (0, clsx.default)("clarify-mermaid group not-prose relative my-6 overflow-hidden rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_zoom_pan_pinch.TransformWrapper, {
+			minScale: .5,
+			maxScale: 8,
+			initialScale: 1,
+			centerOnInit: true,
+			smooth: true,
+			wheel: {
+				step: .05,
+				wheelDisabled: !focused,
+				touchPadDisabled: !focused
+			},
+			doubleClick: { mode: "reset" },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomControls, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_zoom_pan_pinch.TransformComponent, {
+					wrapperClass: "!w-full !cursor-grab active:!cursor-grabbing",
+					contentClass: "!w-full justify-center [&_svg]:h-auto [&_svg]:max-w-full",
+					wrapperStyle: { height: "min(70vh, 32rem)" },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex h-full w-full items-center justify-center p-4",
+						dangerouslySetInnerHTML: { __html: svg }
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: (0, clsx.default)("clarify-mermaid-hint pointer-events-none absolute bottom-2 left-1/2 z-10 -translate-x-1/2 rounded-full bg-(--clarify-theme-tokens-colors-surface)/90 px-2.5 py-1 text-2xs text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) backdrop-blur-sm transition", focused ? "opacity-0" : "opacity-0 group-hover:opacity-100"),
+					children: t("mermaid.scrollHint")
+				})
+			]
+		})
+	});
+}
+//#endregion
 //#region source/components/Code.tsx
 var languageNames = {
 	js: "JavaScript",
@@ -419,8 +580,10 @@ function Code(arg0) {
 	});
 }
 function Pre(arg0) {
-	const { children, ...props } = arg0;
-	if ((0, react.useContext)(CodeGroupContext)) return children;
+	const { children, language, code, ...props } = arg0;
+	const isGrouped = (0, react.useContext)(CodeGroupContext);
+	if (language === "mermaid") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Mermaid, { chart: code ?? getNodeText(children) });
+	if (isGrouped) return children;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroup, {
 		...props,
 		children
@@ -738,7 +901,7 @@ function HeroPattern() {
 function Prose(arg0) {
 	const { as, className, ...props } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as ?? "div", {
-		className: (0, clsx.default)(className, "clarify-prose prose max-w-none dark:prose-invert", "[html_:where(&>*)]:w-full [html_:where(&>*)]:min-w-0 [html_:where(&>*)]:max-w-full"),
+		className: (0, clsx.default)(className, "clarify-prose prose max-w-none min-w-0 dark:prose-invert wrap-break-word", "[html_:where(&>*)]:w-full [html_:where(&>*)]:min-w-0 [html_:where(&>*)]:max-w-full"),
 		...props
 	});
 }
@@ -813,18 +976,29 @@ var primitives_exports = /* @__PURE__ */ require_chunk.__exportAll({
 	h2: () => h2,
 	h3: () => h3,
 	pre: () => pre,
+	table: () => table,
 	wrapper: () => wrapper
 });
 function wrapper(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {
-		className: "clarify-mdx-page flex h-full flex-col pt-14 pb-10",
+		className: "clarify-mdx-page flex h-full min-w-0 flex-col pt-14 pb-10",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Prose, {
 			className: "flex-auto",
 			children
 		})
 	});
 }
+function table(arg0) {
+	const { className, ...props } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "overflow-x-auto",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+			className,
+			...props
+		})
+	});
+}
 function a(arg0) {
 	const { href = "", ...props } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LocalizedLink, {
@@ -868,16 +1042,16 @@ function Note(arg0) {
 	});
 }
 function Row(arg0) {
-	const { children } = arg0;
+	const { children, className } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.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: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("clarify-col *:first:mt-0 *:last:mb-0", sticky && "xl:sticky xl:top-24"),
+		className: (0, clsx.default)("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
 	});
 }
@@ -928,6 +1102,23 @@ function Property(arg0) {
 }
 //#endregion
 //#region source/mdx/Markdown.tsx
+function getMermaidChart(children) {
+	if (!(0, react.isValidElement)(children)) return void 0;
+	const props = children.props;
+	const className = typeof props.className === "string" ? props.className : "";
+	if (!/\blanguage-mermaid\b/.test(className)) return void 0;
+	return typeof props.children === "string" ? props.children : void 0;
+}
+function MarkdownTable(arg0) {
+	const { className, ...props } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "overflow-x-auto",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+			className,
+			...props
+		})
+	});
+}
 var markdownComponents = {
 	a(props) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(a, { ...props });
@@ -937,10 +1128,15 @@ var markdownComponents = {
 	},
 	pre(arg0) {
 		const { children, ...props } = arg0;
+		const chart = getMermaidChart(children);
+		if (chart !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Mermaid, { chart });
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(pre, {
 			...props,
 			children
 		});
+	},
+	table(props) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownTable, { ...props });
 	}
 };
 function Markdown(arg0) {
@@ -2051,7 +2247,10 @@ function SchemaNode(arg0) {
 			}) : null]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "mt-0.5 text-sm/5 text-(--clarify-ui-text-soft) *:first:mt-0 *:last:mb-0",
-			children: [node.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: node.description }) : fallbackDescription, node.details ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			children: [node.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
+				className: "*:first:mt-0 *:last:mb-0",
+				children: node.description
+			}) : fallbackDescription, node.details ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "text-xs text-(--clarify-ui-text-faint)",
 				children: node.details
 			}) : null]
@@ -2107,7 +2306,10 @@ function ParameterList(arg0) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Properties, { children: parameters.map((parameter) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: parameter.description }) : t("openapi.operationParameter")
+		children: parameter.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
+			className: "*:first:mt-0 *:last:mb-0",
+			children: parameter.description
+		}) : t("openapi.operationParameter")
 	}, `${parameter.in}-${parameter.name}`)) })] });
 }
 function ResponseList(arg0) {
@@ -2119,33 +2321,78 @@ function ResponseList(arg0) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Property, {
 			name: status,
 			type: schemaToType(getJsonLikeContent(response.content, spec)?.value.schema),
-			children: response.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: response.description }) : `${t("openapi.response")}.`
+			children: response.description ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestExamplesPanel, {
-			spec,
-			path,
-			method,
-			parameters,
-			requestContents,
-			selectedMediaType: selectedRequestMediaType,
-			onSelectMediaType: onSelectRequestMediaType,
-			selectedServer,
-			serverVariables,
-			auth
-		}), /* @__PURE__ */ (0, react_jsx_runtime.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 = require_PageActions.useBuiltInText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+		className: "relative mt-6",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Col, { children: [
+			description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: description }) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
+				title: t("openapi.pathParameters"),
+				parameters: groupedParameters.path
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
+				title: t("openapi.queryParameters"),
+				parameters: groupedParameters.query
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
+				title: t("openapi.headers"),
+				parameters: groupedParameters.header
+			}),
+			requestBody && requestContents.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.requestBody") }),
+				typeof requestBody.description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: requestBody.description }) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaProperties, {
+					title: t("openapi.bodyProperties"),
+					schema: requestSchema,
+					spec
+				})
+			] }) : null
+		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, {
+			sticky: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestExamplesPanel, {
+				spec,
+				path,
+				method,
+				parameters,
+				requestContents,
+				selectedMediaType: selectedRequestMediaType,
+				onSelectMediaType: onSelectRequestMediaType,
+				selectedServer,
+				serverVariables,
+				auth
+			})
+		})]
+	});
+}
+function EndpointResponse(arg0) {
+	const { spec, operation } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+		className: "relative mt-6",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseList, {
 			operation,
 			spec
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, {
+			sticky: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -2206,8 +2453,25 @@ 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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sm:hidden",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ServerIcon, {
+				className: "h-4 w-4",
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "hidden min-w-0 items-center overflow-hidden sm:flex",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "truncate font-semibold text-xs",
+				children: url
+			})
+		})]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		"aria-expanded": open,
@@ -2334,6 +2598,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__ */ (0, react_jsx_runtime.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: [
@@ -2345,6 +2610,7 @@ function EndpointIdentity(arg0) {
 						server: selectedServer,
 						variables: serverVariables,
 						open: serverOpen,
+						interactive: serverInteractive,
 						onToggle: onToggleServer
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2382,7 +2648,7 @@ function EndpointIdentity(arg0) {
 					}) : null
 				]
 			}),
-			serverOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServerPanel, {
+			serverInteractive && serverOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServerPanel, {
 				servers,
 				selectedKey: selectedServerKey,
 				selectedServer,
@@ -2403,7 +2669,6 @@ function EndpointIdentity(arg0) {
 }
 function OpenApiOperation(arg0) {
 	const { spec, path, method, operation } = arg0;
-	const t = require_PageActions.useBuiltInText();
 	const id = (0, github_slugger.slug)(`${method.toLowerCase()} ${path}`);
 	const summary = operation.summary ?? `${method} ${path}`;
 	const description = operation.description;
@@ -2434,9 +2699,13 @@ function OpenApiOperation(arg0) {
 		header: parameters.filter((parameter) => parameter.in === "header")
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "clarify-api-endpoint scroll-mt-24 py-16 first:pt-0 last:pb-0",
+		className: "clarify-api-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
 		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+				id,
+				children: summary
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointIdentity, {
 				method,
 				path,
@@ -2473,57 +2742,26 @@ function OpenApiOperation(arg0) {
 					[name]: value
 				}))
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
-				id,
-				className: "mt-6",
-				children: summary
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointRequest, {
+				spec,
+				path,
+				method,
+				description,
+				groupedParameters,
+				parameters,
+				requestBody,
+				requestContents,
+				requestSchema,
+				selectedRequestMediaType: selectedRequestContent?.mediaType ?? "",
+				onSelectRequestMediaType: setSelectedRequestMediaType,
+				selectedServer,
+				serverVariables,
+				auth: authInput
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Col, { children: [
-				description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
-					className: "mt-4 *:first:mt-0 *:last:mb-0",
-					children: description
-				}) : null,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
-					title: t("openapi.pathParameters"),
-					parameters: groupedParameters.path
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
-					title: t("openapi.queryParameters"),
-					parameters: groupedParameters.query
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
-					title: t("openapi.headers"),
-					parameters: groupedParameters.header
-				}),
-				requestBody && requestContents.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.requestBody") }),
-					typeof requestBody.description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: requestBody.description }) : null,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaProperties, {
-						title: t("openapi.bodyProperties"),
-						schema: requestSchema,
-						spec
-					})
-				] }) : null,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseList, {
-					operation,
-					spec
-				})
-			] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, {
-				sticky: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointExamples, {
-					spec,
-					path,
-					method,
-					operation,
-					parameters,
-					requestContents,
-					selectedRequestMediaType: selectedRequestContent?.mediaType ?? "",
-					onSelectRequestMediaType: setSelectedRequestMediaType,
-					selectedServer,
-					serverVariables,
-					auth: authInput
-				})
-			})] })
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointResponse, {
+				spec,
+				operation
+			})
 		]
 	});
 }
@@ -2612,6 +2850,12 @@ Object.defineProperty(exports, "Markdown", {
 		return Markdown;
 	}
 });
+Object.defineProperty(exports, "Mermaid", {
+	enumerable: true,
+	get: function() {
+		return Mermaid;
+	}
+});
 Object.defineProperty(exports, "OpenApiOperation", {
 	enumerable: true,
 	get: function() {
@@ -2703,4 +2947,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-C4xZu4i0.cjs.map
+//# sourceMappingURL=OpenApiOperation-9SvCA_B4.cjs.map