@clarify-labs/renderer 0.10.1 → 0.10.2

package/output/{OpenApiOperation-DK46w2dq.cjs → OpenApiOperation-B52IWlKb.cjs}

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
 const require_i18n = require("./i18n-b4iTLeia.cjs");
 const require_PageActions = require("./PageActions-BjB6PYmL.cjs");
-const require_remark = require("./remark-zSQT0MBv.cjs");
+const require_remark = require("./remark-DTLbG8PK.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
 let react = require("react");
@@ -13,7 +13,10 @@ let framer_motion = require("framer-motion");
 let zustand = require("zustand");
 let react_markdown = require("react-markdown");
 react_markdown = require_rolldown_runtime.__toESM(react_markdown, 1);
+let rehype_raw = require("rehype-raw");
+rehype_raw = require_rolldown_runtime.__toESM(rehype_raw, 1);
 let github_slugger = require("github-slugger");
+let shiki = require("shiki");
 let _scalar_snippetz = require("@scalar/snippetz");
 //#region source/components/LocalizedLink.tsx
 function useLocalizedHref(href) {
@@ -326,6 +329,14 @@ function getNodeText(node) {
 	if ((0, react.isValidElement)(node)) return getNodeText(node.props.children);
 	return "";
 }
+function getCodeLanguage(node) {
+	if (!(0, react.isValidElement)(node)) return void 0;
+	const { className, language, children } = node.props;
+	if (language) return language;
+	const languageClass = className?.split(/\s+/).find((value) => value.startsWith("language-"));
+	if (languageClass) return languageClass.slice(9);
+	return react.Children.toArray(children).map(getCodeLanguage).find(Boolean);
+}
 function CopyButton(arg0) {
 	const { code } = arg0;
 	const t = require_i18n.useBuiltInText();
@@ -395,6 +406,7 @@ function CodeGroupHeader(arg0) {
 	const { title, children, selectedIndex } = arg0;
 	const t = require_i18n.useBuiltInText();
 	const hasTabs = react.Children.count(children) > 1;
+	const indicatorLayoutId = (0, react.useId)();
 	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-(--clarify-code-border) bg-(--clarify-code-header-background) px-4",
@@ -402,13 +414,22 @@ function CodeGroupHeader(arg0) {
 			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-(--clarify-code-muted) hover:text-(--clarify-code-text)"),
-				children: getPanelTitle({
+			className: "clarify-code-tabs -mr-2 -mb-px flex gap-0 text-xs font-medium",
+			children: react.Children.map(children, (child, childIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Tab, {
+				className: (0, clsx.default)("clarify-code-tab relative border-b border-transparent px-2 py-3 transition-colors hover:bg-(--clarify-code-control-background-hover) data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "text-(--clarify-code-accent-text)" : "text-(--clarify-code-control-text) hover:text-(--clarify-code-text)"),
+				children: [getPanelTitle({
 					...(0, react.isValidElement)(child) ? child.props : {},
 					fallbackTitle: t("actions.code")
-				})
+				}), childIndex === selectedIndex ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
+					layoutId: indicatorLayoutId,
+					className: "absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-(--clarify-code-accent-text)",
+					transition: {
+						type: "spring",
+						stiffness: 460,
+						damping: 34,
+						mass: .7
+					}
+				}) : null]
 			}))
 		}) : null]
 	});
@@ -520,7 +541,9 @@ function Code(arg0) {
 function Pre(arg0) {
 	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) });
+	const resolvedLanguage = language ?? getCodeLanguage(children);
+	const resolvedCode = code ?? getNodeText(children);
+	if (resolvedLanguage === "mermaid") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Mermaid, { chart: resolvedCode });
 	if (isGrouped) return children;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroup, {
 		...props,
@@ -859,16 +882,17 @@ function Tabs(arg0) {
 		onChange: handleChange,
 		className,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabList, {
-			className: (0, clsx.default)("flex flex-wrap items-center gap-6 border-b border-(--clarify-theme-tokens-colors-border) pb-0", listClassName),
+			className: (0, clsx.default)("-mx-2 flex flex-wrap items-center gap-2 border-b border-(--clarify-theme-tokens-colors-border) px-2 pb-0", listClassName),
 			children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
-				className: ({ selected }) => (0, clsx.default)("clarify-ui-tab relative inline-flex h-10 shrink-0 items-center px-0 py-0 text-sm font-medium transition focus:outline-none", selected && "clarify-ui-tab-active"),
+				className: ({ selected }) => (0, clsx.default)("clarify-content-tab clarify-ui-tab relative inline-flex h-10 shrink-0 items-center rounded-t-md px-2 py-0 text-sm font-medium transition-colors focus:outline-none", selected && "clarify-ui-tab-active"),
 				children: ({ selected }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }), selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
 					layoutId: indicatorLayoutId,
-					className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-(--clarify-theme-tokens-colors-foreground)",
+					className: "absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-(--clarify-ui-tab-indicator) shadow-[0_0_0.5rem_var(--clarify-ui-accent-glow)]",
 					transition: {
-						type: "tween",
-						duration: .16,
-						ease: "easeOut"
+						type: "spring",
+						stiffness: 460,
+						damping: 34,
+						mass: .7
 					}
 				}) : null] })
 			}, item.id))
@@ -1123,6 +1147,7 @@ function Markdown(arg0) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
 			components: markdownComponents,
 			remarkPlugins: require_remark.markdownRemarkPlugins,
+			rehypePlugins: [rehype_raw.default],
 			children
 		})
 	});
@@ -1384,8 +1409,72 @@ function listOpenApiOperations(spec) {
 	return [...listOperationsFromPathItems(paths, "path", spec), ...isRecord(webhooks) ? listOperationsFromPathItems(webhooks, "webhook", spec) : []];
 }
 //#endregion
+//#region source/components/HighlightedCode.tsx
+var cssVariablesTheme = (0, shiki.createCssVariablesTheme)();
+function HighlightedCode(arg0) {
+	const { code, language } = arg0;
+	const [lines, setLines] = (0, react.useState)();
+	(0, react.useEffect)(() => {
+		let active = true;
+		(0, shiki.codeToTokens)(code, {
+			lang: language,
+			theme: cssVariablesTheme
+		}).then((result) => {
+			if (active) setLines(result.tokens);
+		}).catch(() => {
+			if (active) setLines(void 0);
+		});
+		return () => {
+			active = false;
+		};
+	}, [code, language]);
+	if (!lines) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+		className: `language-${language}`,
+		children: code
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+		className: `language-${language}`,
+		children: lines.map((line, lineIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "line",
+			children: [line.map((token, tokenIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					color: token.color,
+					...token.htmlStyle
+				},
+				children: token.content
+			}, tokenIndex)), lineIndex < lines.length - 1 ? "\n" : null]
+		}, lineIndex))
+	});
+}
+//#endregion
 //#region source/openapi/lib/request-code.ts
+var snippetControlCharacters = [
+	{
+		character: "\n",
+		placeholder: "",
+		escape: "\\n"
+	},
+	{
+		character: "\r",
+		placeholder: "",
+		escape: "\\r"
+	},
+	{
+		character: "	",
+		placeholder: "",
+		escape: "\\t"
+	}
+];
 var snippetGenerator = (0, _scalar_snippetz.snippetz)();
+function protectSnippetControlCharacters(value) {
+	if (typeof value === "string") return snippetControlCharacters.reduce((result, item) => result.replaceAll(item.character, item.placeholder), value);
+	if (Array.isArray(value)) return value.map(protectSnippetControlCharacters);
+	if (!isRecord$1(value)) return value;
+	return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, protectSnippetControlCharacters(item)]));
+}
+function restoreSnippetControlCharacters(code) {
+	return snippetControlCharacters.reduce((result, item) => result.replaceAll(item.placeholder, item.escape), code);
+}
 function getDefaultServer(spec) {
 	const servers = spec.servers;
 	if (!Array.isArray(servers)) return { url: "https://api.example.com" };
@@ -1453,7 +1542,7 @@ function getRequestBody(requestContent) {
 		const params = getFormParams(value, requestContent);
 		return params.length > 0 ? { params } : void 0;
 	}
-	return { serialized: stringifyExample(value) };
+	return { serialized: stringifyExample(protectSnippetControlCharacters(value)) };
 }
 function getAuthorizationValue(auth) {
 	if (auth.scheme.type === "http" && auth.scheme.scheme?.toLowerCase() === "bearer") return `Bearer ${auth.value}`;
@@ -1506,7 +1595,7 @@ function buildSnippetErrorMessage(error) {
 }
 function buildSnippet(input, target) {
 	try {
-		return decodeUrlPlaceholders(snippetGenerator.print(target.target, target.client, buildHarRequest(input)) || "");
+		return restoreSnippetControlCharacters(decodeUrlPlaceholders(snippetGenerator.print(target.target, target.client, buildHarRequest(input)) || ""));
 	} catch (error) {
 		return buildSnippetErrorMessage(error);
 	}
@@ -1815,7 +1904,7 @@ 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-(--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)`,
+				className: `clarify-api-select-button flex min-h-8 ${buttonSizeClassName} items-center justify-between gap-2 rounded-lg border border-(--clarify-code-border) bg-(--clarify-code-control-background) px-2.5 py-1 text-xs font-medium whitespace-nowrap text-(--clarify-code-text) outline-hidden transition hover:border-white/20 hover:bg-(--clarify-code-control-background-hover) focus:ring-2 focus:ring-(--clarify-ui-accent-border) data-open:border-white/20 data-open:bg-(--clarify-code-control-background-active) 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", {
@@ -1834,7 +1923,7 @@ function SelectControl(arg0) {
 				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-(--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)",
+					className: "clarify-api-select-option group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs whitespace-nowrap text-(--clarify-code-control-text) select-none data-focus:bg-(--clarify-code-control-background-hover) data-focus:text-(--clarify-code-text) data-selected:bg-(--clarify-code-accent-background) data-selected:text-(--clarify-code-accent-text)",
 					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"
@@ -1859,7 +1948,7 @@ function CopyCodeButton(arg0) {
 				setTimeout(() => setCopied(false), 1e3);
 			});
 		},
-		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)",
+		className: "ml-auto flex shrink-0 items-center gap-1.5 rounded-full bg-(--clarify-code-control-background) px-2.5 py-1.5 text-2xs font-medium whitespace-nowrap 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-(--clarify-theme-tokens-colors-primary)",
 			"aria-hidden": "true"
@@ -1886,9 +1975,9 @@ function CodeToolbar(arg0) {
 	const { code, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
 	const t = require_i18n.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",
+		className: "clarify-api-code-toolbar flex items-center gap-2 px-4 pt-3",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex min-w-0 items-center gap-2",
+			className: "clarify-api-code-toolbar-controls flex min-w-0 flex-1 flex-wrap items-center gap-2",
 			children: [languageOptions && languageOptions.length > 1 && selectedLanguageKey && onSelectLanguage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectControl, {
 				label: t("openapi.language"),
 				value: selectedLanguageKey,
@@ -1993,7 +2082,7 @@ function ApiExampleCodeGroup(arg0) {
 						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",
+						className: "clarify-api-example-header-controls ml-auto flex min-w-0 items-center gap-2 whitespace-nowrap",
 						children: [mediaTypes && mediaTypes.length > 1 && selectedMediaType && onSelectMediaType ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectControl, {
 							label: t("openapi.mediaType"),
 							value: selectedMediaType,
@@ -2033,7 +2122,7 @@ function ApiExampleCodeGroup(arg0) {
 					]
 				}) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "clarify-api-example-code group relative bg-(--clarify-code-background)",
+					className: "clarify-api-example-code group bg-(--clarify-code-background)",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeToolbar, {
 						code,
 						languageOptions,
@@ -2043,10 +2132,10 @@ 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-(--clarify-code-text) ${languageOptions && languageOptions.length > 1 ? "pt-14" : ""}`,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-							className: `language-${language}`,
-							children: code
+						className: "max-h-128 overflow-auto overscroll-contain px-4 pt-3 pb-4 text-xs text-(--clarify-code-text)",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightedCode, {
+							code,
+							language
 						})
 					})]
 				})
@@ -2150,6 +2239,9 @@ function RequestExamplesPanel(arg0) {
 function firstExampleKeyForResponseContent(content, spec) {
 	return getExampleEntries(content?.value, spec)[0]?.key ?? "";
 }
+function getResponseExampleBody(content, example) {
+	return content ? stringifyExample(example?.value) : "";
+}
 function useResponseExamplesState(arg0) {
 	const { operation, spec, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus } = arg0;
 	const orderedResponses = [...getResponseEntries(operation, spec)].sort((left, right) => {
@@ -2160,8 +2252,7 @@ function useResponseExamplesState(arg0) {
 		if (!Number.isNaN(leftCode) && !Number.isNaN(rightCode)) return leftCode - rightCode;
 		return left.status.localeCompare(right.status);
 	});
-	const defaultStatus = orderedResponses.find(({ status }) => status === "default")?.status ?? orderedResponses.find(({ status }) => status.startsWith("2"))?.status ?? orderedResponses[0]?.status ?? "";
-	const [internalSelectedStatus, setInternalSelectedStatus] = (0, react.useState)(defaultStatus);
+	const [internalSelectedStatus, setInternalSelectedStatus] = (0, react.useState)(orderedResponses.find(({ status }) => status === "default")?.status ?? orderedResponses.find(({ status }) => status.startsWith("2"))?.status ?? orderedResponses[0]?.status ?? "");
 	const activeStatus = selectedStatus ?? internalSelectedStatus;
 	const selectedResponse = orderedResponses.find(({ status }) => status === activeStatus) ?? orderedResponses[0];
 	const responseContents = getMediaTypeEntries(selectedResponse?.response.content, spec);
@@ -2187,7 +2278,7 @@ function useResponseExamplesState(arg0) {
 		selectedContent,
 		examples,
 		selectedExample,
-		responseCode: selectedContent ? stringifyExample(selectedExample?.value) : `HTTP/1.1 ${selectedResponse?.status ?? defaultStatus}${selectedResponse?.status === "204" ? " No Content" : ""}`,
+		responseBody: getResponseExampleBody(selectedContent, selectedExample),
 		onSelectStatus: (value) => {
 			const nextContents = getMediaTypeEntries(orderedResponses.find(({ status }) => status === value)?.response.content, spec);
 			if (typeof selectedStatus === "undefined") setInternalSelectedStatus(value);
@@ -2226,18 +2317,14 @@ function ResponseExamplesPanel(arg0) {
 		selectedStatus,
 		onSelectStatus
 	});
-	if (!state.selectedResponse || !state.responseCode) return null;
+	if (!state.selectedContent || !state.responseBody) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApiExampleCodeGroup, {
 		title: title ?? t("openapi.response"),
-		tag: state.selectedResponse.status,
-		tagOptions: state.responses.map(({ status }) => status),
-		onSelectTag: state.onSelectStatus,
 		label: state.selectedContent?.mediaType,
 		labelOptions: state.responseContents.map((content) => content.mediaType),
 		onSelectLabel: state.responseContents.length > 0 ? state.onSelectMediaType : void 0,
-		comfortableMeta: true,
-		code: state.responseCode,
-		language: state.selectedContent ? codeLanguageForMediaType(state.selectedContent.mediaType) : "http",
+		code: state.responseBody,
+		language: codeLanguageForMediaType(state.selectedContent.mediaType),
 		examples: state.examples,
 		selectedExampleKey: state.selectedExample?.key,
 		onSelectExample: state.onSelectExample
@@ -2496,7 +2583,7 @@ function SchemaNode(arg0) {
 				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)",
+				className: "text-xs text-(--clarify-ui-text-soft)",
 				children: node.details
 			}) : null]
 		})]
@@ -2512,7 +2599,7 @@ function SchemaNode(arg0) {
 			"aria-label": expanded ? t("openapi.collapse") : t("openapi.expand"),
 			"aria-expanded": expanded,
 			onClick: () => setExpanded((value) => !value),
-			className: (0, clsx.default)(rowClassName, "cursor-pointer transition"),
+			className: (0, clsx.default)(rowClassName, "cursor-pointer transition hover:bg-(--clarify-ui-hover-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)"),
 			children: content
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: rowClassName,
@@ -2580,10 +2667,10 @@ function ResponseList(arg0) {
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex flex-wrap items-center gap-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					children: [orderedResponses.length === 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "text-sm/5 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
 						children: status
-					}), type ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					}) : null, type ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "text-xs text-(--clarify-theme-tokens-colors-muted)",
 						children: type
 					}) : null]
@@ -2836,7 +2923,7 @@ function EndpointPath(arg0) {
 			"aria-label": copied ? t("actions.copied") : t("actions.copy"),
 			title: copied ? t("actions.copied") : t("actions.copy"),
 			onClick: onCopy,
-			className: (0, clsx.default)("flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)", copied && "border-emerald-400/70 bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-200"),
+			className: (0, clsx.default)("flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", copied && "border-emerald-400/70 bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-200"),
 			children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
 				className: "h-3.5 w-3.5",
 				"aria-hidden": "true"
@@ -2857,7 +2944,7 @@ function InlineListbox(arg0) {
 			className: "pointer-events-auto relative inline-flex min-w-0",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxButton, {
 				"aria-label": label,
-				className: (0, clsx.default)("inline-flex min-w-0 items-center gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) data-open:border-(--clarify-ui-text-faint) data-open:bg-(--clarify-ui-hover-background)", compact ? "max-w-32 px-1.5 py-0.5 text-xs" : "w-full px-2.5 py-1.5 text-xs"),
+				className: (0, clsx.default)("inline-flex min-w-0 items-center gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) font-semibold text-(--clarify-ui-text-strong) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) data-open:border-(--clarify-ui-accent-border) data-open:bg-(--clarify-ui-active-background) data-open:ring-2 data-open:ring-(--clarify-ui-accent-border)", compact ? "min-h-7 max-w-32 px-2 py-0.5 text-xs" : "min-h-8 w-full px-2.5 py-1.5 text-xs"),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "truncate",
 					children: selected?.label ?? value
@@ -2870,7 +2957,7 @@ function InlineListbox(arg0) {
 				className: "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-theme-tokens-colors-surface) p-1 text-xs shadow-lg shadow-black/10 ring-1 ring-(--clarify-theme-tokens-colors-border) [--anchor-gap:--spacing(1)] focus:outline-none",
 				children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.ListboxOption, {
 					value: option.value,
-					className: "group flex cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs text-(--clarify-ui-text) select-none data-focus:bg-(--clarify-ui-hover-background) data-selected:text-(--clarify-theme-tokens-colors-primary)",
+					className: "group flex min-h-9 cursor-default items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-xs text-(--clarify-ui-text) select-none data-focus:bg-(--clarify-ui-hover-background) data-focus:text-(--clarify-ui-text-strong) data-selected:bg-(--clarify-ui-active-background) data-selected:text-(--clarify-ui-accent-text)",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: "min-w-0",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -2917,7 +3004,7 @@ function ServerUrlValue(arg0) {
 	const protocolLabel = getServerProtocolLabel(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",
+		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text) 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, {
@@ -2940,7 +3027,7 @@ function ServerUrlValue(arg0) {
 		"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-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),
+		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) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) 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, {
@@ -3059,7 +3146,8 @@ function AuthPanel(arg0) {
 						className: "mr-2 shrink-0 text-2xs font-semibold text-(--clarify-ui-text-soft)",
 						children: selectedAuth.scheme.type === "apiKey" ? selectedAuth.scheme.in ?? "apiKey" : selectedAuth.scheme.scheme ?? selectedAuth.scheme.type ?? "token"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						value: authValues[selectedAuth.name] ?? authPlaceholder(selectedAuth),
+						value: authValues[selectedAuth.name] ?? "",
+						placeholder: authPlaceholder(selectedAuth),
 						onChange: (event) => onChangeAuthValue(selectedAuth.name, event.target.value),
 						className: "min-w-0 flex-1 border-0 bg-transparent px-0 py-0 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) outline-hidden placeholder:text-(--clarify-ui-text-faint)"
 					})]
@@ -3106,7 +3194,7 @@ function EndpointIdentity(arg0) {
 						"aria-expanded": authOpen,
 						"aria-label": "Auth",
 						onClick: onToggleAuth,
-						className: (0, clsx.default)("ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-emerald-700 dark:hover:text-emerald-200", authOpen ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-100" : "bg-(--clarify-ui-subtle-background)"),
+						className: (0, clsx.default)("ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-emerald-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) dark:hover:text-emerald-200", authOpen ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-100" : "bg-(--clarify-ui-subtle-background)"),
 						children: authOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UnlockKeyholeIcon, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
@@ -3406,4 +3494,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-DK46w2dq.cjs.map
+//# sourceMappingURL=OpenApiOperation-B52IWlKb.cjs.map