@clarify-labs/renderer 0.10.0 → 0.10.2

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

@@ -1,6 +1,7 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_PageActions = require("./PageActions-GS_cxeJN.cjs");
-const require_remark = require("./remark-zSQT0MBv.cjs");
+const require_i18n = require("./i18n-b4iTLeia.cjs");
+const require_PageActions = require("./PageActions-BjB6PYmL.cjs");
+const require_remark = require("./remark-DTLbG8PK.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
 let react = require("react");
@@ -10,14 +11,16 @@ 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_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) {
-	return require_PageActions.localizeHref(href, require_PageActions.useConfig(), require_PageActions.useLocale());
+	return require_PageActions.localizeHref(href, require_i18n.useConfig(), require_i18n.useLocale());
 }
 function LocalizedLink(arg0) {
 	const { href, ...props } = arg0;
@@ -116,7 +119,7 @@ var defaultTitleKeys = {
 };
 function Callout(arg0) {
 	const { children, type = "info", title, icon = true, className, ...props } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	const style = calloutStyles[type];
 	const Icon = style.Icon;
 	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
@@ -200,63 +203,19 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
+var MermaidViewer = (0, react.lazy)(() => Promise.resolve().then(() => require("./MermaidViewer-B6-BMCJG.cjs")));
 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 t = require_i18n.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() {
@@ -319,42 +278,24 @@ function Mermaid(arg0) {
 			children: chart.trim()
 		})
 	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MermaidStaticSvg, {
+			svg,
+			className
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MermaidViewer, {
+			svg,
+			className
+		})
+	});
+}
+function MermaidStaticSvg(arg0) {
+	const { svg, className } = arg0;
 	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")
-				})
-			]
+		className: (0, clsx.default)("clarify-mermaid 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)("div", {
+			className: "flex w-full justify-center [&_svg]:h-auto [&_svg]:max-w-full",
+			dangerouslySetInnerHTML: { __html: svg }
 		})
 	});
 }
@@ -388,15 +329,23 @@ 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_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	const [copyCount, setCopyCount] = (0, react.useState)(0);
 	const copied = copyCount > 0;
 	(0, react.useEffect)(() => {
 		if (copyCount === 0) return void 0;
-		const timeout = window.setTimeout(() => setCopyCount(0), 1e3);
-		return () => window.clearTimeout(timeout);
+		const timeout = setTimeout(() => setCopyCount(0), 1e3);
+		return () => clearTimeout(timeout);
 	}, [copyCount]);
 	if (!code) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -455,8 +404,9 @@ function CodePanel(arg0) {
 }
 function CodeGroupHeader(arg0) {
 	const { title, children, selectedIndex } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	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",
@@ -464,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]
 	});
@@ -534,7 +493,7 @@ function useTabGroupProps(availableLanguages) {
 var CodeGroupContext = (0, react.createContext)(false);
 function CodeGroup(arg0) {
 	const { children, title, ...props } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	const tabGroupProps = useTabGroupProps(react.Children.map(children, (child) => getPanelTitle({
 		...(0, react.isValidElement)(child) ? child.props : {},
 		fallbackTitle: t("actions.code")
@@ -582,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,
@@ -641,7 +602,7 @@ function FeedbackButton(props) {
 }
 var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
 	const { onSubmit, className, ...props } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 		...props,
 		ref,
@@ -668,7 +629,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_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
 		ref,
@@ -921,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))
@@ -1185,44 +1147,55 @@ function Markdown(arg0) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
 			components: markdownComponents,
 			remarkPlugins: require_remark.markdownRemarkPlugins,
+			rehypePlugins: [rehype_raw.default],
 			children
 		})
 	});
 }
 //#endregion
 //#region source/openapi/lib/helpers.ts
-function isRecord(value) {
+function isRecord$1(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function isReference(value) {
-	return isRecord(value) && typeof value.$ref === "string";
+	return isRecord$1(value) && typeof value.$ref === "string";
 }
 function resolveReferenceName(ref) {
 	return ref.split("/").filter(Boolean).at(-1) ?? ref;
 }
-function resolveOpenApiRef(spec, ref) {
+function resolveOpenApiRef$1(spec, ref) {
 	if (!ref.startsWith("#/")) return void 0;
-	return ref.slice(2).split("/").map((part) => part.replace(/~1/g, "/").replace(/~0/g, "~")).reduce((current, part) => isRecord(current) ? current[part] : void 0, spec);
+	return ref.slice(2).split("/").map((part) => part.replace(/~1/g, "/").replace(/~0/g, "~")).reduce((current, part) => isRecord$1(current) ? current[part] : void 0, spec);
 }
 function resolveSchema(spec, schema, seen = /* @__PURE__ */ new Set()) {
 	if (!isReference(schema)) return schema;
 	if (seen.has(schema.$ref)) return schema;
 	seen.add(schema.$ref);
-	return resolveSchema(spec, resolveOpenApiRef(spec, schema.$ref), seen) ?? schema;
+	return resolveSchema(spec, resolveOpenApiRef$1(spec, schema.$ref), seen) ?? schema;
 }
-function getPathItem(spec, path) {
+function getPathItem$1(spec, path) {
 	return resolveObjectRef(spec, spec.paths?.[path]);
 }
+function getOperationPathItem(spec, path, source = "path") {
+	if (source === "path") return getPathItem$1(spec, path);
+	const webhooks = spec.webhooks;
+	return resolveObjectRef(spec, isRecord$1(webhooks) ? webhooks[path] : void 0);
+}
+function joinPath(base, path) {
+	if (!base) return path || "/";
+	if (!path) return base;
+	return `${base.endsWith("/") ? base.slice(0, -1) : base}${path.startsWith("/") ? path : `/${path}`}`;
+}
 function resolveObjectRef(spec, value) {
-	const resolved = spec && isReference(value) ? resolveOpenApiRef(spec, value.$ref) : value;
-	return isRecord(resolved) && !isReference(resolved) ? resolved : void 0;
+	const resolved = spec && isReference(value) ? resolveOpenApiRef$1(spec, value.$ref) : value;
+	return isRecord$1(resolved) && !isReference(resolved) ? resolved : void 0;
 }
 function schemaHasType(schema, type) {
-	if (!isRecord(schema)) return false;
+	if (!isRecord$1(schema)) return false;
 	return schema.type === type || Array.isArray(schema.type) && schema.type.includes(type);
 }
-function getOperationParameters(spec, path, operation) {
-	const pathParameters = getPathItem(spec, path)?.parameters;
+function getOperationParameters(spec, path, operation, source = "path") {
+	const pathParameters = getOperationPathItem(spec, path, source)?.parameters;
 	const operationParameters = operation.parameters;
 	const parameters = [...Array.isArray(pathParameters) ? pathParameters : [], ...Array.isArray(operationParameters) ? operationParameters : []].map((parameter) => resolveObjectRef(spec, parameter)).filter((parameter) => Boolean(parameter));
 	const deduped = /* @__PURE__ */ new Map();
@@ -1240,7 +1213,7 @@ function getRequestBody$1(spec, operation) {
 	return resolveObjectRef(spec, requestBody);
 }
 function getMediaTypeEntries(content, spec) {
-	if (!isRecord(content)) return [];
+	if (!isRecord$1(content)) return [];
 	return Object.entries(content).map(([mediaType, value]) => ({
 		mediaType,
 		value: resolveObjectRef(spec, value)
@@ -1252,12 +1225,12 @@ function getJsonLikeContent(content, spec) {
 	return getMediaTypeEntries(content, spec)[0];
 }
 function getExampleValue(example) {
-	if (isRecord(example) && "value" in example) return example.value;
-	if (isRecord(example) && "externalValue" in example) return void 0;
+	if (isRecord$1(example) && "value" in example) return example.value;
+	if (isRecord$1(example) && "externalValue" in example) return void 0;
 	return example;
 }
 function getExampleTitle(key, example) {
-	if (isRecord(example)) {
+	if (isRecord$1(example)) {
 		const summary = typeof example.summary === "string" ? example.summary : void 0;
 		return {
 			title: summary ?? key,
@@ -1266,9 +1239,9 @@ function getExampleTitle(key, example) {
 	}
 	return { title: key };
 }
-function getExampleEntries(mediaType) {
+function getExampleEntries(mediaType, spec) {
 	if (!mediaType) return [];
-	if (isRecord(mediaType.examples)) {
+	if (isRecord$1(mediaType.examples)) {
 		const examples = [];
 		for (const [key, example] of Object.entries(mediaType.examples)) {
 			const value = getExampleValue(example);
@@ -1288,7 +1261,7 @@ function getExampleEntries(mediaType) {
 		title: "Example",
 		value: mediaType.example
 	}];
-	const generated = schemaToExample(mediaType.schema);
+	const generated = schemaToExample(spec ? resolveSchema(spec, mediaType.schema) : mediaType.schema);
 	return typeof generated === "undefined" ? [] : [{
 		key: "schema",
 		title: "schema",
@@ -1300,7 +1273,7 @@ function getContentExample(mediaType) {
 	return getExampleEntries(mediaType)[0]?.value;
 }
 function schemaToType(schema) {
-	if (!isRecord(schema)) return void 0;
+	if (!isRecord$1(schema)) return void 0;
 	if (isReference(schema)) return resolveReferenceName(schema.$ref);
 	if (typeof schema.const !== "undefined") return JSON.stringify(schema.const);
 	if (Array.isArray(schema.enum)) return "enum";
@@ -1312,14 +1285,14 @@ function schemaToType(schema) {
 	return typeof type === "string" ? [type, typeof schema.format === "string" ? `<${schema.format}>` : void 0].filter(Boolean).join("") : void 0;
 }
 function schemaToExample(schema, depth = 0) {
-	if (!isRecord(schema) || depth > 3) return void 0;
+	if (!isRecord$1(schema) || depth > 3) return void 0;
 	if (typeof schema.example !== "undefined") return schema.example;
 	if (typeof schema.default !== "undefined") return schema.default;
 	if (Array.isArray(schema.enum)) return schema.enum[0];
 	if (isReference(schema)) return { id: resolveReferenceName(schema.$ref) };
 	if (schemaHasType(schema, "array")) return [schemaToExample(schema.items, depth + 1) ?? "string"];
-	if (schemaHasType(schema, "object") || isRecord(schema.properties)) {
-		const properties = isRecord(schema.properties) ? schema.properties : {};
+	if (schemaHasType(schema, "object") || isRecord$1(schema.properties)) {
+		const properties = isRecord$1(schema.properties) ? schema.properties : {};
 		return Object.fromEntries(Object.entries(properties).slice(0, 8).map(([name, propertySchema]) => [name, schemaToExample(propertySchema, depth + 1) ?? exampleForType(schemaToType(propertySchema))]));
 	}
 	return exampleForType(schemaToType(schema));
@@ -1339,7 +1312,7 @@ function stringifyExample(value) {
 }
 function getResponseEntries(operation, spec) {
 	const responses = operation.responses;
-	if (!isRecord(responses)) return [];
+	if (!isRecord$1(responses)) return [];
 	return Object.entries(responses).map(([status, response]) => ({
 		status,
 		response: resolveObjectRef(spec, response)
@@ -1354,14 +1327,163 @@ function codeLanguageForMediaType(mediaType) {
 	return "text";
 }
 //#endregion
+//#region source/openapi/lib/utils.ts
+var OPENAPI_HTTP_METHODS = [
+	"get",
+	"put",
+	"post",
+	"delete",
+	"options",
+	"head",
+	"patch",
+	"trace"
+];
+var CLARIFY_OPENAPI_SECTION_ID_EXTENSION = "x-clarify-section-id";
+function getOpenApiOperationSectionId(operation) {
+	const sectionId = operation[CLARIFY_OPENAPI_SECTION_ID_EXTENSION];
+	return typeof sectionId === "string" ? sectionId : "";
+}
+function createOpenApiOperationSectionId(operation, method, path, source) {
+	return (typeof operation.operationId === "string" ? operation.operationId.trim() : "") || (0, github_slugger.slug)(`${source === "webhook" ? "webhook " : ""}${method.toLowerCase()} ${path}`);
+}
+function normalizeOpenApiOperationSectionId(operation, method, path, source) {
+	const sectionId = operation[CLARIFY_OPENAPI_SECTION_ID_EXTENSION];
+	if (typeof sectionId !== "string" || !sectionId) operation[CLARIFY_OPENAPI_SECTION_ID_EXTENSION] = createOpenApiOperationSectionId(operation, method, path, source);
+	return operation;
+}
+function isOpenAPIHttpMethod(method) {
+	return OPENAPI_HTTP_METHODS.includes(method.toLowerCase());
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function resolveOpenApiRef(spec, ref) {
+	if (!ref.startsWith("#/")) return void 0;
+	return ref.slice(2).split("/").map((part) => part.replace(/~1/g, "/").replace(/~0/g, "~")).reduce((current, part) => isRecord(current) ? current[part] : void 0, spec);
+}
+function getPathItem(spec, path) {
+	const pathItem = spec.paths?.[path];
+	const resolved = isRecord(pathItem) && typeof pathItem.$ref === "string" ? resolveOpenApiRef(spec, pathItem.$ref) : pathItem;
+	return isRecord(resolved) ? resolved : void 0;
+}
+function getWebhookItem(spec, path) {
+	const webhooks = spec.webhooks;
+	const pathItem = isRecord(webhooks) ? webhooks[path] : void 0;
+	const resolved = isRecord(pathItem) && typeof pathItem.$ref === "string" ? resolveOpenApiRef(spec, pathItem.$ref) : pathItem;
+	return isRecord(resolved) ? resolved : void 0;
+}
+function listOperationsFromPathItems(items, source, spec) {
+	const operations = [];
+	for (const path of Object.keys(items)) {
+		const pathItem = source === "webhook" ? getWebhookItem(spec, path) : getPathItem(spec, path);
+		if (!pathItem) continue;
+		for (const method of OPENAPI_HTTP_METHODS) {
+			const operation = pathItem[method];
+			if (isRecord(operation)) operations.push({
+				path,
+				method,
+				operation: normalizeOpenApiOperationSectionId(operation, method, path, source),
+				source
+			});
+		}
+	}
+	return operations;
+}
+function getOpenApiOperationEntry(spec, path, method, source) {
+	if (!isOpenAPIHttpMethod(method)) return void 0;
+	const normalizedMethod = method.toLowerCase();
+	const sources = source ? [source] : ["path", "webhook"];
+	for (const currentSource of sources) {
+		const operation = (currentSource === "webhook" ? getWebhookItem(spec, path) : getPathItem(spec, path))?.[normalizedMethod];
+		if (isRecord(operation)) return {
+			path,
+			method: normalizedMethod,
+			operation: normalizeOpenApiOperationSectionId(operation, normalizedMethod, path, currentSource),
+			source: currentSource
+		};
+	}
+}
+function listOpenApiOperations(spec) {
+	const paths = spec.paths ?? {};
+	const webhooks = spec.webhooks;
+	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" };
-	const firstServer = servers.find(isRecord);
+	const firstServer = servers.find(isRecord$1);
 	return firstServer && typeof firstServer.url === "string" ? firstServer : { url: "https://api.example.com" };
 }
+function getDefaultWebhookServer() {
+	return { url: "https://webhook.example.com" };
+}
 function expandServerUrl(server, serverVariables = {}) {
 	return (server.url ?? "https://api.example.com").replace(/\{([^}]+)\}/g, (_, name) => {
 		const fallback = server.variables?.[name]?.default ?? name;
@@ -1369,7 +1491,8 @@ function expandServerUrl(server, serverVariables = {}) {
 	});
 }
 function buildOperationUrl(input) {
-	return `${expandServerUrl(input.server ?? getDefaultServer(input.spec), input.serverVariables).replace(/\/$/, "")}${input.path}`;
+	const defaultServer = input.operationSource === "webhook" ? getDefaultWebhookServer() : getDefaultServer(input.spec);
+	return joinPath(expandServerUrl(input.server ?? defaultServer, input.serverVariables), input.path);
 }
 function getQueryString(parameters, auth) {
 	const queryString = parameters.filter((parameter) => parameter.in === "query" && parameter.name).map((parameter) => ({
@@ -1386,18 +1509,18 @@ function isFormMediaType(mediaType) {
 	return mediaType.includes("multipart/form-data") || mediaType.includes("application/x-www-form-urlencoded");
 }
 function isBinarySchema(schema) {
-	return isRecord(schema) && schema.type === "string" && schema.format === "binary";
+	return isRecord$1(schema) && schema.type === "string" && schema.format === "binary";
 }
 function getSchemaProperties(schema) {
-	return isRecord(schema) && isRecord(schema.properties) ? schema.properties : {};
+	return isRecord$1(schema) && isRecord$1(schema.properties) ? schema.properties : {};
 }
 function getFieldValue(name, value, schema) {
-	if (isRecord(value) && typeof value[name] !== "undefined") return value[name];
+	if (isRecord$1(value) && typeof value[name] !== "undefined") return value[name];
 	if (isBinarySchema(schema)) return `@${name}`;
 }
 function getFormParams(value, requestContent) {
 	const properties = getSchemaProperties(requestContent.value.schema);
-	return Array.from(/* @__PURE__ */ new Set([...Object.keys(properties), ...isRecord(value) ? Object.keys(value) : []])).flatMap((name) => {
+	return Array.from(/* @__PURE__ */ new Set([...Object.keys(properties), ...isRecord$1(value) ? Object.keys(value) : []])).flatMap((name) => {
 		const fieldValue = getFieldValue(name, value, properties[name]);
 		if (typeof fieldValue === "undefined") return [];
 		const contentType = requestContent.value.encoding?.[name]?.contentType;
@@ -1419,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}`;
@@ -1472,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);
 	}
@@ -1781,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", {
@@ -1800,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"
@@ -1814,7 +1937,7 @@ function SelectControl(arg0) {
 //#region source/openapi/components/CodeDisplay.tsx
 function CopyCodeButton(arg0) {
 	const { code } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	const [copied, setCopied] = (0, react.useState)(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
@@ -1822,10 +1945,10 @@ function CopyCodeButton(arg0) {
 			require_PageActions.copyTextToClipboard(code).then((ok) => {
 				if (!ok) return;
 				setCopied(true);
-				window.setTimeout(() => setCopied(false), 1e3);
+				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"
@@ -1850,11 +1973,11 @@ function ExampleMetaValue(arg0) {
 }
 function CodeToolbar(arg0) {
 	const { code, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	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,
@@ -1879,12 +2002,12 @@ function CodeToolbar(arg0) {
 }
 //#endregion
 //#region source/openapi/components/helpers.ts
-function getServers(spec, operation, path) {
+function getServers(spec, operation, path, source = "path") {
 	const operationServers = operation.servers;
-	const pathServers = path ? getPathItem(spec, path)?.servers : void 0;
-	const servers = Array.isArray(operationServers) ? operationServers : Array.isArray(pathServers) ? pathServers : spec.servers;
+	const pathServers = path ? getOperationPathItem(spec, path, source)?.servers : void 0;
+	const servers = Array.isArray(operationServers) ? operationServers : Array.isArray(pathServers) ? pathServers : source === "webhook" ? [{ url: "https://webhook.example.com" }] : spec.servers;
 	if (!Array.isArray(servers)) return [{ url: "https://api.example.com" }];
-	const validServers = servers.filter((server) => isRecord(server) && typeof server.url === "string");
+	const validServers = servers.filter((server) => isRecord$1(server) && typeof server.url === "string");
 	return validServers.length > 0 ? validServers : [{ url: "https://api.example.com" }];
 }
 function getServerKey(server, index) {
@@ -1898,14 +2021,14 @@ function defaultServerVariables(server) {
 }
 function getSecuritySchemes(spec) {
 	const schemes = spec.components;
-	if (!isRecord(schemes) || !isRecord(schemes.securitySchemes)) return {};
-	return Object.fromEntries(Object.entries(schemes.securitySchemes).filter((entry) => isRecord(entry[1])));
+	if (!isRecord$1(schemes) || !isRecord$1(schemes.securitySchemes)) return {};
+	return Object.fromEntries(Object.entries(schemes.securitySchemes).filter((entry) => isRecord$1(entry[1])));
 }
 function getSecurityRequirements(spec, operation) {
 	const operationSecurity = operation.security;
-	if (Array.isArray(operationSecurity)) return operationSecurity.filter(isRecord);
+	if (Array.isArray(operationSecurity)) return operationSecurity.filter(isRecord$1);
 	const specSecurity = spec.security;
-	return Array.isArray(specSecurity) ? specSecurity.filter(isRecord) : [];
+	return Array.isArray(specSecurity) ? specSecurity.filter(isRecord$1) : [];
 }
 function getAuthOptions(spec, operation) {
 	const schemes = getSecuritySchemes(spec);
@@ -1946,7 +2069,7 @@ function getClientOptions(codeOptions, languageKey) {
 //#region source/openapi/components/ExamplePanels.tsx
 function ApiExampleCodeGroup(arg0) {
 	const { title, tag, tagOptions, onSelectTag, label, labelOptions, onSelectLabel, comfortableMeta = false, code, language, mediaTypes, selectedMediaType, onSelectMediaType, examples, selectedExampleKey, onSelectExample, languageOptions, selectedLanguageKey, onSelectLanguage, clientOptions, selectedClientKey, onSelectClient } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const t = require_i18n.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-(--clarify-code-background) shadow-md ring-1 ring-(--clarify-code-border)",
@@ -1959,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,
@@ -1999,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,
@@ -2009,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
 						})
 					})]
 				})
@@ -2020,13 +2143,13 @@ function ApiExampleCodeGroup(arg0) {
 		})
 	});
 }
-function firstExampleKeyForMediaType(requestContents, mediaType) {
-	return getExampleEntries(requestContents.find((content) => content.mediaType === mediaType)?.value)[0]?.key ?? "";
+function firstExampleKeyForMediaType(requestContents, mediaType, spec) {
+	return getExampleEntries(requestContents.find((content) => content.mediaType === mediaType)?.value, spec)[0]?.key ?? "";
 }
 function useRequestExamplesState(arg0) {
-	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth, sharedExampleKey, onSelectExampleKey } = arg0;
+	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth, operationSource, sharedExampleKey, onSelectExampleKey } = arg0;
 	const selectedContent = requestContents.find((content) => content.mediaType === selectedMediaType) ?? requestContents[0];
-	const examples = getExampleEntries(selectedContent?.value);
+	const examples = getExampleEntries(selectedContent?.value, spec);
 	const [selectedExampleKey, setSelectedExampleKey] = (0, react.useState)(examples[0]?.key ?? "");
 	const [selectedLanguageKey, setSelectedLanguageKey] = (0, react.useState)("shell");
 	const [selectedClientKey, setSelectedClientKey] = (0, react.useState)("curl");
@@ -2047,7 +2170,8 @@ function useRequestExamplesState(arg0) {
 		} : void 0,
 		server: selectedServer,
 		serverVariables,
-		auth
+		auth,
+		operationSource
 	});
 	const selectedLanguage = codeOptions.find((option) => option.languageKey === selectedLanguageKey) ?? codeOptions[0];
 	const selectedCode = codeOptions.find((option) => option.languageKey === selectedLanguage.languageKey && option.clientKey === selectedClientKey) ?? selectedLanguage;
@@ -2060,7 +2184,7 @@ function useRequestExamplesState(arg0) {
 		examples,
 		onSelectMediaType: (value) => {
 			onSelectMediaType(value);
-			setSelectedExampleKey(firstExampleKeyForMediaType(requestContents, value));
+			setSelectedExampleKey(firstExampleKeyForMediaType(requestContents, value, spec));
 		},
 		onSelectExample: (value) => {
 			setSelectedExampleKey(value);
@@ -2075,8 +2199,8 @@ function useRequestExamplesState(arg0) {
 	};
 }
 function RequestExamplesPanel(arg0) {
-	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth, sharedExampleKey, onSelectExampleKey } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const { spec, path, method, parameters, requestContents, selectedMediaType, onSelectMediaType, selectedServer, serverVariables, auth, operationSource, sharedExampleKey, onSelectExampleKey } = arg0;
+	const t = require_i18n.useBuiltInText();
 	const state = useRequestExamplesState({
 		spec,
 		path,
@@ -2088,6 +2212,7 @@ function RequestExamplesPanel(arg0) {
 		selectedServer,
 		serverVariables,
 		auth,
+		operationSource,
 		sharedExampleKey,
 		onSelectExampleKey
 	});
@@ -2111,12 +2236,15 @@ function RequestExamplesPanel(arg0) {
 		onSelectClient: state.onSelectClient
 	});
 }
-function firstExampleKeyForResponseContent(content) {
-	return getExampleEntries(content?.value)[0]?.key ?? "";
+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).filter(({ response }) => getMediaTypeEntries(response.content, spec).length > 0)].sort((left, right) => {
+	const orderedResponses = [...getResponseEntries(operation, spec)].sort((left, right) => {
 		if (left.status === "default") return -1;
 		if (right.status === "default") return 1;
 		const leftCode = Number(left.status);
@@ -2131,15 +2259,15 @@ function useResponseExamplesState(arg0) {
 	const [selection, setSelection] = (0, react.useState)(() => ({
 		status: activeStatus,
 		mediaType: responseContents[0]?.mediaType ?? "",
-		exampleKey: firstExampleKeyForResponseContent(responseContents[0])
+		exampleKey: firstExampleKeyForResponseContent(responseContents[0], spec)
 	}));
 	const resolvedSelection = selection.status === activeStatus ? selection : {
 		status: activeStatus,
 		mediaType: responseContents[0]?.mediaType ?? "",
-		exampleKey: firstExampleKeyForResponseContent(responseContents[0])
+		exampleKey: firstExampleKeyForResponseContent(responseContents[0], spec)
 	};
 	const selectedContent = responseContents.find((content) => content.mediaType === resolvedSelection.mediaType) ?? responseContents[0];
-	const examples = getExampleEntries(selectedContent?.value);
+	const examples = getExampleEntries(selectedContent?.value, spec);
 	const selectedExampleKey = examples.some((example) => example.key === resolvedSelection.exampleKey) ? resolvedSelection.exampleKey : examples[0]?.key ?? "";
 	const currentExampleKey = (sharedExampleKey && examples.some((example) => example.key === sharedExampleKey) ? sharedExampleKey : void 0) ?? selectedExampleKey;
 	const selectedExample = examples.find((example) => example.key === currentExampleKey) ?? examples[0];
@@ -2150,7 +2278,7 @@ function useResponseExamplesState(arg0) {
 		selectedContent,
 		examples,
 		selectedExample,
-		responseCode: stringifyExample(selectedExample?.value),
+		responseBody: getResponseExampleBody(selectedContent, selectedExample),
 		onSelectStatus: (value) => {
 			const nextContents = getMediaTypeEntries(orderedResponses.find(({ status }) => status === value)?.response.content, spec);
 			if (typeof selectedStatus === "undefined") setInternalSelectedStatus(value);
@@ -2158,7 +2286,7 @@ function useResponseExamplesState(arg0) {
 			setSelection({
 				status: value,
 				mediaType: nextContents[0]?.mediaType ?? "",
-				exampleKey: firstExampleKeyForResponseContent(nextContents[0])
+				exampleKey: firstExampleKeyForResponseContent(nextContents[0], spec)
 			});
 		},
 		onSelectMediaType: (value) => {
@@ -2166,7 +2294,7 @@ function useResponseExamplesState(arg0) {
 			setSelection((current) => ({
 				...current,
 				mediaType: value,
-				exampleKey: firstExampleKeyForResponseContent(nextContent)
+				exampleKey: firstExampleKeyForResponseContent(nextContent, spec)
 			}));
 		},
 		onSelectExample: (value) => {
@@ -2179,8 +2307,8 @@ function useResponseExamplesState(arg0) {
 	};
 }
 function ResponseExamplesPanel(arg0) {
-	const { operation, spec, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const { operation, spec, title, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus } = arg0;
+	const t = require_i18n.useBuiltInText();
 	const state = useResponseExamplesState({
 		operation,
 		spec,
@@ -2189,17 +2317,13 @@ function ResponseExamplesPanel(arg0) {
 		selectedStatus,
 		onSelectStatus
 	});
-	if (!state.selectedResponse || !state.selectedContent || !state.responseCode) return null;
+	if (!state.selectedContent || !state.responseBody) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApiExampleCodeGroup, {
-		title: t("openapi.response"),
-		tag: state.selectedResponse.status,
-		tagOptions: state.responses.map(({ status }) => status),
-		onSelectTag: state.onSelectStatus,
-		label: state.selectedContent.mediaType,
+		title: title ?? t("openapi.response"),
+		label: state.selectedContent?.mediaType,
 		labelOptions: state.responseContents.map((content) => content.mediaType),
-		onSelectLabel: state.onSelectMediaType,
-		comfortableMeta: true,
-		code: state.responseCode,
+		onSelectLabel: state.responseContents.length > 0 ? state.onSelectMediaType : void 0,
+		code: state.responseBody,
 		language: codeLanguageForMediaType(state.selectedContent.mediaType),
 		examples: state.examples,
 		selectedExampleKey: state.selectedExample?.key,
@@ -2211,7 +2335,7 @@ function ResponseExamplesPanel(arg0) {
 function getEnumDescriptions(schema) {
 	const descriptions = schema["x-enumDescriptions"];
 	if (Array.isArray(descriptions)) return descriptions.map((value) => typeof value === "string" ? value : void 0);
-	if (isRecord(descriptions)) return Array.isArray(schema.enum) ? schema.enum.map((value) => {
+	if (isRecord$1(descriptions)) return Array.isArray(schema.enum) ? schema.enum.map((value) => {
 		const description = descriptions[String(value)];
 		return typeof description === "string" ? description : void 0;
 	}) : [];
@@ -2277,7 +2401,7 @@ function getSchemaChildren(arg0) {
 			defaultExpanded
 		});
 	}
-	if (!isRecord(schema)) return [];
+	if (!isRecord$1(schema)) return [];
 	const arrayChildren = schemaHasType(schema, "array") ? getSchemaChildren({
 		spec,
 		schema: schema.items,
@@ -2288,10 +2412,10 @@ function getSchemaChildren(arg0) {
 	}) : [];
 	const objectRequired = Array.isArray(schema.required) ? schema.required.map(String) : required;
 	const enumChildren = getEnumChildren(schema, path);
-	const properties = isRecord(schema.properties) ? schema.properties : {};
+	const properties = isRecord$1(schema.properties) ? schema.properties : {};
 	const propertyChildren = Object.entries(properties).map(([name, propertySchema]) => {
 		const resolvedProperty = resolveSchema(spec, propertySchema);
-		const property = isRecord(resolvedProperty) ? resolvedProperty : isRecord(propertySchema) ? propertySchema : {};
+		const property = isRecord$1(resolvedProperty) ? resolvedProperty : isRecord$1(propertySchema) ? propertySchema : {};
 		const isArray = schemaHasType(property, "array");
 		const childPath = path ? `${path}.${name}` : name;
 		const children = getSchemaChildren({
@@ -2315,7 +2439,7 @@ function getSchemaChildren(arg0) {
 			children
 		};
 	});
-	const additionalPropertyChildren = isRecord(schema.additionalProperties) ? [{
+	const additionalPropertyChildren = isRecord$1(schema.additionalProperties) ? [{
 		key: `${path || "root"}.*`,
 		name: "*",
 		kind: "property",
@@ -2335,7 +2459,7 @@ function getSchemaChildren(arg0) {
 	}] : [];
 	const composedChildren = getComposedBranches(schema).map(({ label, schema: branchSchema }) => {
 		const resolvedBranch = resolveSchema(spec, branchSchema);
-		const branch = isRecord(resolvedBranch) ? resolvedBranch : void 0;
+		const branch = isRecord$1(resolvedBranch) ? resolvedBranch : void 0;
 		return {
 			key: `${path || "root"}.${label}`,
 			name: label,
@@ -2367,7 +2491,7 @@ function getSchemaChildren(arg0) {
 function getRootSchemaNode(spec, schema, defaultExpanded) {
 	if (isReference(schema)) {
 		const resolvedSchema = resolveSchema(spec, schema);
-		const resolved = isRecord(resolvedSchema) ? resolvedSchema : {};
+		const resolved = isRecord$1(resolvedSchema) ? resolvedSchema : {};
 		return {
 			key: schema.$ref,
 			name: resolveReferenceName(schema.$ref),
@@ -2385,7 +2509,7 @@ function getRootSchemaNode(spec, schema, defaultExpanded) {
 			})
 		};
 	}
-	if (!isRecord(schema)) return void 0;
+	if (!isRecord$1(schema)) return void 0;
 	return {
 		key: "root",
 		name: "body",
@@ -2432,7 +2556,7 @@ function EnumValueNode(arg0) {
 }
 function SchemaNode(arg0) {
 	const { node, depth = 0, defaultExpanded } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	const [expanded, setExpanded] = (0, react.useState)(defaultExpanded ?? depth < 1);
 	const hasChildren = node.children.length > 0;
 	if (node.kind === "enum") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EnumValueNode, {
@@ -2459,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]
 		})]
@@ -2475,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,
@@ -2509,7 +2633,7 @@ function SchemaProperties(arg0) {
 	})] });
 }
 function ParameterList(arg0) {
-	const t = require_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	const { title, parameters } = arg0;
 	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, {
@@ -2522,8 +2646,8 @@ function ParameterList(arg0) {
 	}, `${parameter.in}-${parameter.name}`)) })] });
 }
 function ResponseList(arg0) {
-	const { operation, spec, selectedStatus, onSelectStatus } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const { title, operation, spec, selectedStatus, onSelectStatus } = arg0;
+	const t = require_i18n.useBuiltInText();
 	const orderedResponses = [...getResponseEntries(operation, spec)].sort((left, right) => {
 		if (left.status === "default") return -1;
 		if (right.status === "default") return 1;
@@ -2543,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]
@@ -2571,12 +2695,12 @@ function ResponseList(arg0) {
 	};
 	if (orderedResponses.length === 1) {
 		const [{ status, response }] = orderedResponses;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.responses") }), renderResponsePanel({
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title ?? t("openapi.responses") }), renderResponsePanel({
 			status,
 			response
 		})] });
 	}
-	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)(Tabs, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title ?? t("openapi.responses") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tabs, {
 		selectedIndex,
 		onChange: (index) => {
 			onSelectStatus?.(orderedResponses[index]?.status ?? "");
@@ -2595,8 +2719,8 @@ function ResponseList(arg0) {
 //#endregion
 //#region source/openapi/components/EndpointSections.tsx
 function EndpointRequest(arg0) {
-	const { spec, path, method, description, groupedParameters, parameters, requestBody, requestContents, requestSchema, selectedRequestMediaType, onSelectRequestMediaType, selectedServer, serverVariables, auth, sharedExampleKey, onSelectExampleKey } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const { spec, path, method, operationSource = "path", description, groupedParameters, parameters, requestBody, requestContents, requestSchema, selectedRequestMediaType, onSelectRequestMediaType, selectedServer, serverVariables, auth, sharedExampleKey, onSelectExampleKey } = arg0;
+	const t = require_i18n.useBuiltInText();
 	const hasRequestBody = Boolean(requestBody && requestContents.length > 0);
 	const renderDescription = () => {
 		if (!description) return null;
@@ -2647,6 +2771,7 @@ function EndpointRequest(arg0) {
 					selectedServer,
 					serverVariables,
 					auth,
+					operationSource,
 					sharedExampleKey,
 					onSelectExampleKey
 				})
@@ -2655,7 +2780,10 @@ function EndpointRequest(arg0) {
 	})] });
 }
 function EndpointResponse(arg0) {
-	const { spec, operation, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus } = arg0;
+	const { spec, operation, operationSource = "path", sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus } = arg0;
+	const t = require_i18n.useBuiltInText();
+	const responseTitle = operationSource === "webhook" ? t("openapi.webhookResponses") : t("openapi.responses");
+	const responseExampleTitle = operationSource === "webhook" ? t("openapi.webhookResponse") : t("openapi.response");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "mt-6",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
@@ -2663,6 +2791,7 @@ function EndpointResponse(arg0) {
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "w-full",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseList, {
+					title: responseTitle,
 					operation,
 					spec,
 					selectedStatus,
@@ -2675,6 +2804,7 @@ function EndpointResponse(arg0) {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseExamplesPanel, {
 						operation,
 						spec,
+						title: responseExampleTitle,
 						sharedExampleKey,
 						onSelectExampleKey,
 						selectedStatus,
@@ -2687,8 +2817,8 @@ function EndpointResponse(arg0) {
 }
 //#endregion
 //#region source/openapi/components/OpenApiOperation.state.ts
-function useOperationRequestState(spec, path, operation) {
-	const parameters = getOperationParameters(spec, path, operation);
+function useOperationRequestState(spec, path, operation, source = "path") {
+	const parameters = getOperationParameters(spec, path, operation, source);
 	const requestBody = getRequestBody$1(spec, operation);
 	const requestContents = getMediaTypeEntries(requestBody?.content, spec);
 	const [selectedRequestMediaType, setSelectedRequestMediaType] = (0, react.useState)(requestContents[0]?.mediaType ?? "");
@@ -2709,8 +2839,8 @@ function useOperationRequestState(spec, path, operation) {
 		groupedParameters
 	};
 }
-function useOperationServerState(spec, operation, path) {
-	const servers = getServers(spec, operation, path);
+function useOperationServerState(spec, operation, path, source = "path") {
+	const servers = getServers(spec, operation, path, source);
 	const [selectedServerKey, setSelectedServerKey] = (0, react.useState)(getServerKey(servers[0], 0));
 	const selectedServer = servers.find((server, index) => getServerKey(server, index) === selectedServerKey) ?? servers[0];
 	const [serverVariables, setServerVariables] = (0, react.useState)(defaultServerVariables(selectedServer));
@@ -2767,7 +2897,8 @@ var endpointMethodStyleVars = {
 	POST: "bg-(--clarify-http-method-post-background) text-(--clarify-http-method-post-text)",
 	PUT: "bg-(--clarify-http-method-put-background) text-(--clarify-http-method-put-text)",
 	PATCH: "bg-(--clarify-http-method-patch-background) text-(--clarify-http-method-patch-text)",
-	DELETE: "bg-(--clarify-http-method-delete-background) text-(--clarify-http-method-delete-text)"
+	DELETE: "bg-(--clarify-http-method-delete-background) text-(--clarify-http-method-delete-text)",
+	WEBHOOK: "bg-(--clarify-http-method-webhook-background) text-(--clarify-http-method-webhook-text)"
 };
 function EndpointMethodBadge(arg0) {
 	const { method } = arg0;
@@ -2778,7 +2909,7 @@ function EndpointMethodBadge(arg0) {
 }
 function EndpointPath(arg0) {
 	const { path, copied = false, onCopy } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2792,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"
@@ -2813,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
@@ -2826,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", {
@@ -2849,9 +2980,12 @@ function getServerPreviewUrl(server, variables) {
 	return (server.url ?? "").replace(/\{([^}]+)\}/g, (_, name) => variables[name] ?? server.variables?.[name]?.default ?? `{${name}}`);
 }
 function getFullEndpointUrl(server, variables, path) {
-	const base = getServerPreviewUrl(server, variables);
-	if (!base) return path;
-	return `${base.endsWith("/") ? base.slice(0, -1) : base}${path.startsWith("/") ? path : `/${path}`}`;
+	return joinPath(getServerPreviewUrl(server, variables), path);
+}
+function getServerProtocolLabel(server, variables) {
+	const url = getServerPreviewUrl(server, variables);
+	const protocol = /^([a-z][a-z0-9+.-]*):/i.exec(url)?.[1]?.toUpperCase();
+	return protocol === "WS" || protocol === "WSS" ? protocol : void 0;
 }
 function getDefaultResponseStatus(operation, spec) {
 	const orderedResponses = [...getResponseEntries(operation, spec).filter(({ response }) => getMediaTypeEntries(response.content, spec).length > 0)].sort((left, right) => {
@@ -2867,21 +3001,25 @@ function getDefaultResponseStatus(operation, spec) {
 function ServerUrlValue(arg0) {
 	const { server, variables, open, interactive, onToggle } = arg0;
 	const url = getServerPreviewUrl(server, variables);
+	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, {
 				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", {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "hidden min-w-0 items-center gap-1.5 overflow-hidden sm:flex",
+			children: [protocolLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "shrink-0 rounded bg-sky-100 px-1.5 py-0.5 text-2xs font-black text-sky-700 dark:bg-sky-400/15 dark:text-sky-200",
+				children: protocolLabel
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "truncate font-semibold text-xs",
 				children: url
-			})
+			})]
 		})]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -2889,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, {
@@ -2898,13 +3036,20 @@ 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 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",
-				"aria-hidden": "true"
-			})]
+			children: [
+				protocolLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "shrink-0 rounded bg-sky-100 px-1.5 py-0.5 text-2xs font-black text-sky-700 dark:bg-sky-400/15 dark:text-sky-200",
+					children: protocolLabel
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					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",
+					"aria-hidden": "true"
+				})
+			]
 		})]
 	});
 }
@@ -3001,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)"
 					})]
@@ -3011,14 +3157,14 @@ 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 { method, operationSource, path, servers, selectedServerKey, selectedServer, serverVariables, serverOpen, authOptions, selectedAuthName, selectedAuth, authValues, authOpen, onSelectServer, onChangeServerVariable, onToggleServer, onToggleAuth, onSelectAuth, onChangeAuthValue } = arg0;
 	const serverInteractive = servers.length > 1 || Object.keys(selectedServer.variables ?? {}).length > 0;
 	const [copiedUrl, setCopiedUrl] = (0, react.useState)(false);
 	const fullUrl = getFullEndpointUrl(selectedServer, serverVariables, path);
 	(0, react.useEffect)(() => {
 		if (!copiedUrl) return void 0;
-		const timeout = window.setTimeout(() => setCopiedUrl(false), 1200);
-		return () => window.clearTimeout(timeout);
+		const timeout = setTimeout(() => setCopiedUrl(false), 1200);
+		return () => clearTimeout(timeout);
 	}, [copiedUrl]);
 	async function handleCopyUrl() {
 		if (await require_PageActions.copyTextToClipboard(fullUrl)) setCopiedUrl(true);
@@ -3030,6 +3176,7 @@ function EndpointIdentity(arg0) {
 				className: "flex min-w-0 items-center gap-1.5 overflow-hidden px-2.5 py-2",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointMethodBadge, { method }),
+					operationSource === "webhook" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointMethodBadge, { method: "WEBHOOK" }) : null,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServerUrlValue, {
 						server: selectedServer,
 						variables: serverVariables,
@@ -3047,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"
@@ -3078,12 +3225,12 @@ function EndpointIdentity(arg0) {
 	});
 }
 function OpenApiOperation(arg0) {
-	const { spec, path, method, operation } = arg0;
-	const id = (0, github_slugger.slug)(`${method.toLowerCase()} ${path}`);
+	const { spec, path, method, operation, operationSource = "path" } = arg0;
+	const id = getOpenApiOperationSectionId(operation);
 	const summary = operation.summary ?? `${method} ${path}`;
 	const description = operation.description;
-	const requestState = useOperationRequestState(spec, path, operation);
-	const serverState = useOperationServerState(spec, operation, path);
+	const requestState = useOperationRequestState(spec, path, operation, operationSource);
+	const serverState = useOperationServerState(spec, operation, path, operationSource);
 	const authState = useOperationAuthState(spec, operation);
 	const [linkedExampleKey, setLinkedExampleKey] = (0, react.useState)("");
 	const [selectedResponseStatus, setSelectedResponseStatus] = (0, react.useState)(() => getDefaultResponseStatus(operation, spec));
@@ -3097,6 +3244,7 @@ function OpenApiOperation(arg0) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointIdentity, {
 				method,
+				operationSource,
 				path,
 				servers: serverState.servers,
 				selectedServerKey: serverState.selectedServerKey,
@@ -3125,6 +3273,7 @@ function OpenApiOperation(arg0) {
 				spec,
 				path,
 				method,
+				operationSource,
 				description,
 				groupedParameters: requestState.groupedParameters,
 				parameters: requestState.parameters,
@@ -3142,6 +3291,7 @@ function OpenApiOperation(arg0) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointResponse, {
 				spec,
 				operation,
+				operationSource,
 				sharedExampleKey: linkedExampleKey,
 				onSelectExampleKey: setLinkedExampleKey,
 				selectedStatus: selectedResponseStatus,
@@ -3307,6 +3457,12 @@ Object.defineProperty(exports, "getMediaTypeEntries", {
 		return getMediaTypeEntries;
 	}
 });
+Object.defineProperty(exports, "getOpenApiOperationEntry", {
+	enumerable: true,
+	get: function() {
+		return getOpenApiOperationEntry;
+	}
+});
 Object.defineProperty(exports, "getRequestBody", {
 	enumerable: true,
 	get: function() {
@@ -3325,6 +3481,12 @@ Object.defineProperty(exports, "getServers", {
 		return getServers;
 	}
 });
+Object.defineProperty(exports, "listOpenApiOperations", {
+	enumerable: true,
+	get: function() {
+		return listOpenApiOperations;
+	}
+});
 Object.defineProperty(exports, "primitives_exports", {
 	enumerable: true,
 	get: function() {
@@ -3332,4 +3494,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-qp5tFaWP.cjs.map
+//# sourceMappingURL=OpenApiOperation-B52IWlKb.cjs.map