@clarify-labs/renderer 0.7.0 → 0.7.2

package/output/{OpenApiOperation-ZXToVSFC.cjs → OpenApiOperation-BcyW_ULy.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-DakpK96I.cjs");
-const require_shell = require("./shell-xxhV0p7k.cjs");
+const require_PageActions = require("./PageActions-1RDCHcUY.cjs");
 const require_remark = require("./remark-Dv3owbSH.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
@@ -16,12 +16,12 @@ let github_slugger = require("github-slugger");
 let _scalar_snippetz = require("@scalar/snippetz");
 //#region source/components/LocalizedLink.tsx
 function useLocalizedHref(href) {
-	return require_shell.localizeHref(href, require_shell.useClarifyConfig(), require_shell.useClarifyLocale());
+	return require_PageActions.localizeHref(href, require_PageActions.useConfig(), require_PageActions.useLocale());
 }
 function LocalizedLink(arg0) {
 	const { href, ...props } = arg0;
 	const localizedHref = useLocalizedHref(href);
-	if (!require_shell.isExternalHref(localizedHref) && !localizedHref.startsWith("#")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+	if (!require_PageActions.isExternalHref(localizedHref) && !localizedHref.startsWith("#")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
 		to: localizedHref,
 		...props
 	});
@@ -115,7 +115,7 @@ var defaultTitleKeys = {
 };
 function Callout(arg0) {
 	const { children, type = "info", title, icon = true, className, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const style = calloutStyles[type];
 	const Icon = style.Icon;
 	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
@@ -142,9 +142,9 @@ function Callout(arg0) {
 function CardIcon(arg0) {
 	const { name } = arg0;
 	if (!name) return null;
-	const iconName = require_shell.resolveLucideIconName(name);
+	const iconName = require_PageActions.resolveLucideIconName(name);
 	if (!iconName) return null;
-	const Icon = require_shell.lucideIconRegistry[iconName];
+	const Icon = require_PageActions.lucideIconRegistry[iconName];
 	if (!Icon) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "flex size-9 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border)",
@@ -229,7 +229,7 @@ function getNodeText(node) {
 }
 function CopyButton(arg0) {
 	const { code } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const [copyCount, setCopyCount] = (0, react.useState)(0);
 	const copied = copyCount > 0;
 	(0, react.useEffect)(() => {
@@ -238,38 +238,30 @@ function CopyButton(arg0) {
 		return () => window.clearTimeout(timeout);
 	}, [copyCount]);
 	if (!code) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
-		className: (0, clsx.default)("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: (0, clsx.default)("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: () => {
-			require_shell.copyTextToClipboard(code).then((ok) => {
+			require_PageActions.copyTextToClipboard(code).then((ok) => {
 				if (ok) setCopyCount((count) => count + 1);
 			});
 		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			"aria-hidden": copied,
-			className: (0, clsx.default)("pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300", copied && "-translate-y-1.5 opacity-0"),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clipboard, { className: "h-5 w-5 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), t("actions.copy")]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			"aria-hidden": !copied,
-			className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5 stroke-(--clarify-theme-tokens-colors-primary)" }), t("actions.copied")] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "clarify-code-panel-tag font-semibold text-(--clarify-theme-tokens-colors-primary)",
 				children: tag
 			}) : null,
-			tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
+			tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-(--clarify-code-faint)" }) : null,
 			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-xs text-zinc-400",
+				className: "truncate text-xs text-(--clarify-code-muted)",
 				children: label
 			}) : null
 		]
@@ -287,14 +279,14 @@ function CodePanel(arg0) {
 	}
 	const copyText = code ?? getNodeText(children);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-code-panel group dark:bg-white/2.5",
+		className: "clarify-code-panel group bg-(--clarify-code-background)",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodePanelHeader, {
 			tag,
 			label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(CopyButton, { code: copyText })]
 		})]
@@ -302,18 +294,18 @@ function CodePanel(arg0) {
 }
 function CodeGroupHeader(arg0) {
 	const { title, children, selectedIndex } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const hasTabs = react.Children.count(children) > 1;
 	if (!title && !hasTabs) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabList, {
 			className: "clarify-code-tabs -mb-px flex gap-4 text-xs font-medium",
 			children: react.Children.map(children, (child, childIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
-				className: (0, clsx.default)("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: (0, clsx.default)("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({
 					...(0, react.isValidElement)(child) ? child.props : {},
 					fallbackTitle: t("actions.code")
@@ -381,13 +373,13 @@ function useTabGroupProps(availableLanguages) {
 var CodeGroupContext = (0, react.createContext)(false);
 function CodeGroup(arg0) {
 	const { children, title, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const tabGroupProps = useTabGroupProps(react.Children.map(children, (child) => getPanelTitle({
 		...(0, react.isValidElement)(child) ? child.props : {},
 		fallbackTitle: t("actions.code")
 	})) ?? []);
 	const hasTabs = react.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__ */ (0, react_jsx_runtime.jsx)(CodeGroupHeader, {
 		title,
 		selectedIndex: tabGroupProps.selectedIndex,
@@ -448,7 +440,7 @@ function Collapse(arg0) {
 		setMaxHeight(open ? `${contentRef.current.scrollHeight}px` : "0px");
 	}, [open, children]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("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: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
@@ -486,7 +478,7 @@ function FeedbackButton(props) {
 }
 var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
 	const { onSubmit, className, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 		...props,
 		ref,
@@ -513,7 +505,7 @@ var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
 });
 var FeedbackThanks = (0, react.forwardRef)(function FeedbackThanks(arg0, ref) {
 	const { className, ...props } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
 		ref,
@@ -621,9 +613,9 @@ function Heading(arg0) {
 	const resolvedLevel = level ?? 2;
 	const Component = `h${resolvedLevel}`;
 	const ref = (0, react.useRef)(null);
-	const registerHeading = require_shell.useSectionStore((state) => state.registerHeading);
+	const registerHeading = require_PageActions.useSectionStore((state) => state.registerHeading);
 	const inView = (0, framer_motion.useInView)(ref, {
-		margin: `${require_shell.remToPx(-3.5)}px 0px 0px 0px`,
+		margin: `${require_PageActions.remToPx(-3.5)}px 0px 0px 0px`,
 		amount: "all"
 	});
 	(0, react.useEffect)(() => {
@@ -817,6 +809,7 @@ var primitives_exports = /* @__PURE__ */ require_chunk.__exportAll({
 	WebFrame: () => WebFrame,
 	a: () => a,
 	code: () => code,
+	h1: () => h1,
 	h2: () => h2,
 	h3: () => h3,
 	pre: () => pre,
@@ -825,7 +818,7 @@ var primitives_exports = /* @__PURE__ */ require_chunk.__exportAll({
 function wrapper(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Prose, {
 			className: "flex-auto",
 			children
@@ -839,6 +832,17 @@ function a(arg0) {
 		...props
 	});
 }
+function h1(arg0) {
+	const { children, className, ...props } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("h1", {
+			className: (0, clsx.default)("clarify-page-title min-w-0 flex-1", className),
+			...props,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.PageTitleActions, {})]
+	});
+}
 var code = Code;
 var pre = Pre;
 function h2(props) {
@@ -864,16 +868,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
 	});
 }
@@ -1543,26 +1547,26 @@ function SelectControl(arg0) {
 			className: wrapperClassName,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "flex min-w-0 items-center gap-1.5 overflow-hidden",
 					children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "shrink-0 text-zinc-500",
+						className: "shrink-0 text-(--clarify-code-faint)",
 						children: icon
 					}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "truncate",
 						children: selectedOption?.label ?? value
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsx)("span", { children: option.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
 						className: "h-3.5 w-3.5 shrink-0 opacity-0 group-data-selected:opacity-100",
 						"aria-hidden": "true"
@@ -1637,23 +1641,23 @@ function authLabel(name, scheme) {
 }
 function CopyCodeButton(arg0) {
 	const { code } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const [copied, setCopied] = (0, react.useState)(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		onClick: () => {
-			require_shell.copyTextToClipboard(code).then((ok) => {
+			require_PageActions.copyTextToClipboard(code).then((ok) => {
 				if (!ok) return;
 				setCopied(true);
 				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__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsx)("span", { children: copied ? t("actions.copied") : t("actions.copy") })]
 	});
@@ -1673,7 +1677,7 @@ function ExampleMetaValue(arg0) {
 }
 function CodeToolbar(arg0) {
 	const { code, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "absolute top-3.5 right-4 left-4 z-10 flex items-center justify-between gap-3",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1702,17 +1706,17 @@ 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 = require_shell.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 t = require_PageActions.useBuiltInText();
+	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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "not-prose",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
@@ -1744,18 +1748,18 @@ function ApiExampleCodeGroup(arg0) {
 							onChange: onSelectTag,
 							className: "clarify-api-example-status font-semibold text-emerald-400"
 						}) : null,
-						tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-zinc-500" }) : null,
+						tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 shrink-0 rounded-full bg-(--clarify-code-faint)" }) : null,
 						label ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "clarify-api-example-code group relative",
+					className: "clarify-api-example-code group relative bg-(--clarify-code-background)",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeToolbar, {
 						code,
 						languageOptions,
@@ -1765,7 +1769,7 @@ function ApiExampleCodeGroup(arg0) {
 						selectedClientKey,
 						onSelectClient
 					}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("code", {
 							className: `language-${language}`,
 							children: code
@@ -1778,7 +1782,7 @@ function ApiExampleCodeGroup(arg0) {
 }
 function RequestExamplesPanel(arg0) {
 	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const selectedContent = requestContents.find((content) => content.mediaType === selectedMediaType) ?? requestContents[0];
 	const examples = getExampleEntries(selectedContent?.value);
 	const [selectedExampleKey, setSelectedExampleKey] = (0, react.useState)(examples[0]?.key ?? "");
@@ -1835,7 +1839,7 @@ function RequestExamplesPanel(arg0) {
 }
 function ResponseExamplesPanel(arg0) {
 	const { operation, spec } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const responses = getResponseEntries(operation, spec).filter(({ response }) => getMediaTypeEntries(response.content, spec).length > 0);
 	const [selectedStatus, setSelectedStatus] = (0, react.useState)(responses.find(({ status }) => status.startsWith("2"))?.status ?? responses[0]?.status ?? "");
 	const selectedResponse = responses.find(({ status }) => status === selectedStatus) ?? responses[0];
@@ -2028,7 +2032,7 @@ function getRootSchemaNode(spec, schema) {
 }
 function SchemaNode(arg0) {
 	const { node, depth = 0 } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const [expanded, setExpanded] = (0, react.useState)(depth < 1);
 	const hasChildren = node.children.length > 0;
 	const type = [node.type, node.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0;
@@ -2047,7 +2051,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]
@@ -2098,50 +2105,98 @@ function SchemaProperties(arg0) {
 }
 function ParameterList(arg0) {
 	const { title, parameters } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	if (parameters.length === 0) return null;
 	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) {
 	const { operation, spec } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	const responses = getResponseEntries(operation, spec);
 	if (responses.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.responses") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Properties, { children: responses.map(({ status, response }) => {
 		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",
@@ -2202,14 +2257,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__ */ (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,
 		"aria-label": "Server",
 		onClick: onToggle,
-		className: (0, clsx.default)("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: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ServerIcon, {
@@ -2219,7 +2291,7 @@ function ServerUrlValue(arg0) {
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "hidden min-w-0 items-center gap-1 overflow-hidden sm:flex",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "truncate text-xs",
+				className: "truncate font-semibold text-xs",
 				children: url
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
 				className: "h-3.5 w-3.5 shrink-0 text-zinc-400",
@@ -2330,6 +2402,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: [
@@ -2341,6 +2414,7 @@ function EndpointIdentity(arg0) {
 						server: selectedServer,
 						variables: serverVariables,
 						open: serverOpen,
+						interactive: serverInteractive,
 						onToggle: onToggleServer
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2378,7 +2452,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,
@@ -2399,7 +2473,6 @@ function EndpointIdentity(arg0) {
 }
 function OpenApiOperation(arg0) {
 	const { spec, path, method, operation } = arg0;
-	const t = require_shell.useBuiltInText();
 	const id = (0, github_slugger.slug)(`${method.toLowerCase()} ${path}`);
 	const summary = operation.summary ?? `${method} ${path}`;
 	const description = operation.description;
@@ -2433,6 +2506,10 @@ function OpenApiOperation(arg0) {
 		className: "clarify-api-endpoint scroll-mt-24 py-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,
@@ -2469,57 +2546,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
+			})
 		]
 	});
 }
@@ -2699,4 +2745,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-ZXToVSFC.cjs.map
+//# sourceMappingURL=OpenApiOperation-BcyW_ULy.cjs.map