fumadocs-openapi 10.9.1 → 10.10.0

package/dist/ui/components/dialog.js

@@ -1,7 +1,6 @@
 "use client";
 import { useTranslations } from "../client/i18n.js";
 import { cn } from "../../utils/cn.js";
-import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
@@ -10,13 +9,14 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
-	ref,
-	className: cn("fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", className),
-	...props
-}));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => {
+function DialogOverlay({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+		ref,
+		className: cn("fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", className),
+		...props
+	});
+}
+function DialogContent({ className, children, ref, ...props }) {
 	const t = useTranslations();
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 		ref,
@@ -31,29 +31,26 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
 			children: /* @__PURE__ */ jsx(X, {})
 		})]
 	})] });
-});
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex flex-col gap-1.5 text-center sm:text-start", className),
-	...props
-});
-DialogHeader.displayName = "DialogHeader";
-const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2", className),
-	...props
-});
-DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
-	ref,
-	className: cn("text-lg font-semibold leading-none tracking-tight", className),
-	...props
-}));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
-	ref,
-	className: cn("text-sm text-fd-muted-foreground", className),
-	...props
-}));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-1.5 text-center sm:text-start", className),
+		...props
+	});
+}
+function DialogTitle({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+		ref,
+		className: cn("text-lg font-semibold leading-none tracking-tight", className),
+		...props
+	});
+}
+function DialogDescription({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+		ref,
+		className: cn("text-sm text-fd-muted-foreground", className),
+		...props
+	});
+}
 //#endregion
 export { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger };

package/dist/ui/components/heading.js

@@ -0,0 +1,14 @@
+"use client";
+import { useAnchorId } from "../../utils/auto-anchor.client.js";
+import { jsx } from "react/jsx-runtime";
+import { Heading } from "fumadocs-ui/components/heading";
+//#region src/ui/components/heading.tsx
+function Heading$1({ id: _id, depth, ...props }) {
+	return /* @__PURE__ */ jsx(Heading, {
+		id: useAnchorId([_id]),
+		as: `h${depth}`,
+		...props
+	});
+}
+//#endregion
+export { Heading$1 as Heading };

package/dist/ui/components/select-tab.js

@@ -1,7 +1,9 @@
 "use client";
 import { cn } from "../../utils/cn.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
-import { createContext, use, useMemo, useState } from "react";
+import { anchorIdStartsWith } from "../../utils/auto-anchor.js";
+import { AnchorSection, useAnchorId } from "../../utils/auto-anchor.client.js";
+import { createContext, use, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/components/select-tab.tsx
 const Context = createContext(null);
@@ -15,14 +17,24 @@ function SelectTabs({ defaultValue, children }) {
 		children
 	});
 }
-function SelectTab({ value, ...props }) {
-	if (value !== use(Context)?.value) return;
-	return /* @__PURE__ */ jsx("div", {
-		...props,
-		children: props.children
-	});
+function SelectTab({ value, anchorSegments, ...props }) {
+	const { value: currentValue, setValue } = use(Context);
+	const id = useAnchorId(anchorSegments ?? false);
+	useEffect(() => {
+		if (id && anchorIdStartsWith(window.location.hash.slice(1), id)) setValue(value);
+	}, [
+		id,
+		value,
+		setValue
+	]);
+	if (value !== currentValue) return;
+	const content = /* @__PURE__ */ jsx("div", { ...props });
+	return anchorSegments ? /* @__PURE__ */ jsx(AnchorSection, {
+		segments: anchorSegments,
+		children: content
+	}) : content;
 }
-function SelectTabTrigger({ items, className, ...props }) {
+function SelectTabTrigger({ items, className, placeholder, ...props }) {
 	const { value, setValue } = use(Context);
 	return /* @__PURE__ */ jsxs(Select, {
 		value: value ?? "",
@@ -30,7 +42,10 @@ function SelectTabTrigger({ items, className, ...props }) {
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
 			className: cn("not-prose w-fit min-w-0 *:min-w-0", className),
 			...props,
-			children: /* @__PURE__ */ jsx(SelectValue, { children: value && items.find((item) => item.value === value)?.label })
+			children: /* @__PURE__ */ jsx(SelectValue, {
+				placeholder,
+				children: value && items.find((item) => item.value === value)?.label
+			})
 		}), /* @__PURE__ */ jsx(SelectContent, { children: items.map(({ label, value }) => /* @__PURE__ */ jsx(SelectItem, {
 			value,
 			children: label

package/dist/ui/create-client.js

@@ -5,11 +5,9 @@ import { AuthProvider } from "../playground/auth.js";
 import { dereferenceDocument } from "../utils/document/dereference.js";
 import { APIPage } from "./api-page.js";
 import { boundary_exports } from "./client/boundary.js";
-import { slug } from "github-slugger";
 import { Children, useMemo } from "react";
 import * as JsxRuntime from "react/jsx-runtime";
 import { jsx } from "react/jsx-runtime";
-import { Heading } from "fumadocs-ui/components/heading";
 import { remarkGfm } from "fumadocs-core/mdx-plugins/remark-gfm";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import { remark } from "remark";
@@ -90,21 +88,6 @@ function createClientAPIPage({ shiki = defaultShikiFactory, shikiOptions = { the
 				provider: options.playground?.provider ?? renderPlaygroundProviderDefault,
 				render: options.playground?.render ?? renderPlaygroundDefault
 			},
-			renderHeading(depth, text, props) {
-				const id = typeof text === "string" ? slug(text) : props?.id;
-				if (!id) throw new Error("missing 'id' for non-string children");
-				if (options.renderHeading) return options.renderHeading({
-					id,
-					children: text,
-					...props
-				}, depth);
-				return /* @__PURE__ */ jsx(Heading, {
-					id,
-					as: `h${depth}`,
-					...props,
-					children: text
-				}, id);
-			},
 			renderMarkdown(text) {
 				if (options.renderMarkdown) return options.renderMarkdown(text);
 				processor ??= createMarkdownProcessor();

package/dist/ui/operation/client.js

@@ -56,7 +56,7 @@ function CopyTypeScriptPanel({ name, code, className }) {
 	const t = useTranslations();
 	const useTypeText = t.useTypeInTypeScript.replace("{name}", name);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-start justify-between gap-2 bg-fd-card text-fd-card-foreground border rounded-xl p-3 not-prose mb-4 last:mb-0", className),
+		className: cn("flex items-start justify-between gap-2 bg-fd-card text-fd-card-foreground border rounded-xl p-3 not-prose", className),
 		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 			className: "font-medium text-sm mb-2",
 			children: t.typeScriptDefinitions

package/dist/ui/operation/index.js

@@ -7,11 +7,13 @@ import { cn } from "../../utils/cn.js";
 import { Badge, MethodLabel } from "../components/method-label.js";
 import { CopyTypeScriptPanel, OperationProvider } from "./client.js";
 import { Schema } from "../schema/index.js";
+import { AnchorSection } from "../../utils/auto-anchor.client.js";
 import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "../components/accordion.js";
 import { UsageTabs } from "./usage-tabs/index.js";
 import { RequestTabs } from "./request-tabs.js";
 import { getExampleRequests } from "./get-example-requests.js";
 import { SelectTab, SelectTabTrigger, SelectTabs } from "../components/select-tab.js";
+import { Heading } from "../components/heading.js";
 import { Fragment, use, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Callout } from "fumadocs-ui/components/callout";
@@ -40,7 +42,12 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 		const title = method.summary || (method.operationId ? idToTitle(method.operationId) : path);
 		headNode = /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-2 items-center justify-between",
-			children: [ctx.renderHeading(headingLevel, title, { className: "my-0!" }), method.deprecated && /* @__PURE__ */ jsx(Badge, {
+			children: [/* @__PURE__ */ jsx(Heading, {
+				id: title,
+				depth: headingLevel,
+				className: "my-0!",
+				children: title
+			}), method.deprecated && /* @__PURE__ */ jsx(Badge, {
 				color: "yellow",
 				className: "text-xs not-prose",
 				children: /* @__PURE__ */ jsx(I18nLabel, { label: "deprecated" })
@@ -53,22 +60,24 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 		className: "mt-0!"
 	});
 	const contentTypes = body?.content ? Object.entries(body.content) : null;
-	if (body && contentTypes && contentTypes.length > 0) {
-		const items = contentTypes.map(([key]) => ({
+	if (contentTypes && contentTypes.length > 0) {
+		const items = contentTypes.map(([type]) => ({
 			label: /* @__PURE__ */ jsx("code", {
 				className: "text-xs",
-				children: key
+				children: type
 			}),
-			value: key
+			value: type
 		}));
 		bodyNode = /* @__PURE__ */ jsxs(SelectTabs, {
 			defaultValue: items[0].value,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex gap-2 items-center justify-between mt-10",
-					children: [ctx.renderHeading(headingLevel, /* @__PURE__ */ jsx(I18nLabel, { label: "titleRequestBody" }), {
+					children: [/* @__PURE__ */ jsx(Heading, {
 						id: "request-body",
-						className: "my-0!"
+						depth: headingLevel,
+						className: "my-0!",
+						children: /* @__PURE__ */ jsx(I18nLabel, { label: "titleRequestBody" })
 					}), contentTypes.length > 1 ? /* @__PURE__ */ jsx(SelectTabTrigger, {
 						items,
 						className: "font-medium"
@@ -81,6 +90,7 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 				contentTypes.map(([type, content]) => {
 					if (!isMediaTypeSupported(type, ctx.mediaAdapters)) throw new Error(`Media type ${type} is not supported (in ${path})`);
 					return /* @__PURE__ */ jsx(SelectTab, {
+						anchorSegments: ["request-body", type],
 						value: type,
 						children: /* @__PURE__ */ jsx(RequestBodyContentItem, {
 							content,
@@ -94,7 +104,11 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 	}
 	if (method.responses && ctx.showResponseSchema !== false) {
 		const statuses = Object.keys(method.responses);
-		responseNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [ctx.renderHeading(headingLevel, /* @__PURE__ */ jsx(I18nLabel, { label: "titleResponseBody" }), { id: "response-body" }), /* @__PURE__ */ jsx(Accordions, {
+		responseNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Heading, {
+			id: "response-body",
+			depth: headingLevel,
+			children: /* @__PURE__ */ jsx(I18nLabel, { label: "titleResponseBody" })
+		}), /* @__PURE__ */ jsx(Accordions, {
 			type: "multiple",
 			children: statuses.map((status) => /* @__PURE__ */ jsx(ResponseAccordion, {
 				status,
@@ -106,22 +120,29 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 	const parameterNode = paramTypeKeys.map((type) => {
 		const params = method.parameters?.filter((param) => param.in === type);
 		if (!params || params.length === 0) return;
-		return /* @__PURE__ */ jsxs(Fragment, { children: [ctx.renderHeading(headingLevel, /* @__PURE__ */ jsx(I18nLabel, { label: `${type}Parameters` }), { id: `parameters-${type}` }), /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col",
-			children: params.map((param) => param.schema != null && /* @__PURE__ */ jsx(Schema, {
-				client: {
-					name: param.name,
-					required: param.required
-				},
-				root: typeof param.schema === "object" ? {
-					...param.schema,
-					description: param.description ?? param.schema?.description,
-					deprecated: (param.deprecated ?? false) || (param.schema?.deprecated ?? false)
-				} : param.schema,
-				readOnly: method.method === "get",
-				writeOnly: method.method !== "get",
-				ctx
-			}, param.name))
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, {
+			id: `parameters-${type}`,
+			depth: headingLevel,
+			children: /* @__PURE__ */ jsx(I18nLabel, { label: `${type}Parameters` })
+		}), /* @__PURE__ */ jsx(AnchorSection, {
+			segments: ["parameters", type],
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col",
+				children: params.map((param) => param.schema != null && /* @__PURE__ */ jsx(Schema, {
+					client: {
+						name: param.name,
+						required: param.required
+					},
+					root: typeof param.schema === "object" ? {
+						...param.schema,
+						description: param.description ?? param.schema?.description,
+						deprecated: (param.deprecated ?? false) || (param.schema?.deprecated ?? false)
+					} : param.schema,
+					readOnly: method.method === "get",
+					writeOnly: method.method !== "get",
+					ctx
+				}, param.name))
+			})
 		})] }, type);
 	});
 	const securities = (method.security ?? dereferenced.security ?? []).filter((v) => Object.keys(v).length > 0);
@@ -153,9 +174,11 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 			defaultValue: items[0].value,
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-start justify-between gap-2 mt-10",
-				children: [ctx.renderHeading(headingLevel, /* @__PURE__ */ jsx(I18nLabel, { label: "authorization" }), {
+				children: [/* @__PURE__ */ jsx(Heading, {
 					id: "authorization",
-					className: "my-0!"
+					depth: headingLevel,
+					className: "my-0!",
+					children: /* @__PURE__ */ jsx(I18nLabel, { label: "authorization" })
 				}), items.length > 1 ? /* @__PURE__ */ jsx(SelectTabTrigger, { items }) : /* @__PURE__ */ jsx("div", {
 					className: "not-prose",
 					children: items[0].label
@@ -174,39 +197,55 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 			}, i))]
 		});
 	}
-	const callbacks = method.callbacks ? Object.entries(method.callbacks) : null;
-	if (callbacks && callbacks.length > 0) {
-		const items = callbacks.map(([key]) => ({
-			label: /* @__PURE__ */ jsx("code", {
-				className: "text-xs",
-				children: key
-			}),
-			value: key
-		}));
-		callbacksNode = /* @__PURE__ */ jsxs(SelectTabs, {
-			defaultValue: items[0].value,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between gap-2 items-end mt-10",
-				children: [ctx.renderHeading(headingLevel, /* @__PURE__ */ jsx(I18nLabel, { label: "titleCallbacks" }), {
-					id: "callbacks",
-					className: "my-0!"
-				}), callbacks.length > 1 ? /* @__PURE__ */ jsx(SelectTabTrigger, {
-					items,
-					className: "font-medium"
-				}) : /* @__PURE__ */ jsx("p", {
-					className: "text-fd-muted-foreground not-prose",
-					children: items[0].label
-				})]
-			}), callbacks.map(([name, callback]) => /* @__PURE__ */ jsx(SelectTab, {
-				value: name,
-				children: /* @__PURE__ */ jsx(WebhookCallback, {
-					callback,
-					ctx,
-					headingLevel
-				})
-			}, name))]
+	const webhookCallbacks = [];
+	for (const [name, callbacks] of Object.entries(method.callbacks ?? {})) for (const [path, callback] of Object.entries(callbacks)) for (const method of methodKeys) {
+		if (!callback[method]) continue;
+		webhookCallbacks.push({
+			name,
+			path,
+			method,
+			callback,
+			operation: callback[method]
 		});
 	}
+	if (webhookCallbacks.length > 0) callbacksNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Heading, {
+		id: "callbacks",
+		depth: headingLevel,
+		children: /* @__PURE__ */ jsx(I18nLabel, { label: "titleCallbacks" })
+	}), /* @__PURE__ */ jsx(Accordions, {
+		type: "multiple",
+		children: webhookCallbacks.map((item, i) => /* @__PURE__ */ jsxs(AccordionItem, {
+			value: `${item.name}\0${item.path}\0${item.method}`,
+			anchorSegments: [
+				"callbacks",
+				item.name,
+				item.path,
+				item.method
+			],
+			children: [/* @__PURE__ */ jsxs(AccordionHeader, {
+				className: "flex-col gap-3",
+				children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+					className: "font-mono",
+					children: item.name
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-xs ps-4.5",
+					children: [/* @__PURE__ */ jsx(MethodLabel, { children: item.method }), /* @__PURE__ */ jsx("code", {
+						className: "text-fd-muted-foreground",
+						children: item.path
+					})]
+				})]
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", {
+				className: "border p-3 ps-4.5 mb-2 @container prose-no-margin rounded-xl",
+				children: /* @__PURE__ */ jsx(Operation, {
+					type: "webhook",
+					path,
+					headingLevel: headingLevel + 1,
+					method: createMethod(item.method, item.callback, item.operation),
+					ctx
+				})
+			}) })]
+		}, i))
+	})] });
 	let { renderOperationLayout, renderWebhookLayout } = ctx.content ?? {};
 	if (type === "operation") {
 		renderOperationLayout ??= (slots) => {
@@ -273,7 +312,7 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 		renderWebhookLayout ??= (slots) => /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col-reverse gap-x-6 gap-y-4 @4xl:flex-row @4xl:items-start",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1",
+				className: "min-w-0 flex-1 prose-no-margin",
 				children: [
 					slots.header,
 					slots.description,
@@ -323,7 +362,7 @@ function RequestBodyContentItem({ content, method, ctx }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [ts && /* @__PURE__ */ jsx(CopyTypeScriptPanel, {
 		name: "request body",
 		code: ts,
-		className: "mt-4"
+		className: "my-4 last:mb-0"
 	}), content.schema && /* @__PURE__ */ jsx(Schema, {
 		client: {
 			name: "body",
@@ -339,48 +378,44 @@ function RequestBodyContentItem({ content, method, ctx }) {
 function ResponseAccordion({ status, operation, ctx }) {
 	const response = operation.responses[status];
 	const contentTypes = response.content ? Object.entries(response.content) : [];
-	let wrapper = (children) => children;
-	let selectorNode = null;
-	if (contentTypes.length > 0) {
-		const items = contentTypes.map(([key]) => ({
-			label: /* @__PURE__ */ jsx("code", {
-				className: "text-xs",
-				children: key
-			}),
-			value: key
-		}));
-		selectorNode = items.length === 1 ? /* @__PURE__ */ jsx("p", {
-			className: "text-fd-muted-foreground not-prose",
-			children: items[0].label
-		}) : /* @__PURE__ */ jsx(SelectTabTrigger, { items });
-		wrapper = (children) => /* @__PURE__ */ jsx(SelectTabs, {
-			defaultValue: items[0].value,
-			children
-		});
-	}
-	return wrapper(/* @__PURE__ */ jsxs(AccordionItem, {
-		value: status,
-		children: [/* @__PURE__ */ jsxs(AccordionHeader, { children: [/* @__PURE__ */ jsx(AccordionTrigger, {
-			className: "font-mono",
-			children: status
-		}), selectorNode] }), /* @__PURE__ */ jsxs(AccordionContent, {
-			className: "ps-4.5",
-			children: [response.description && /* @__PURE__ */ jsx("div", {
-				className: "prose-no-margin mb-2",
-				children: ctx.renderMarkdown(response.description)
-			}), contentTypes.map(([type, item]) => /* @__PURE__ */ jsx(SelectTab, {
-				value: type,
-				className: "mb-2",
-				children: /* @__PURE__ */ jsx(RepsonseAccordionItem, {
-					type,
-					status,
-					item,
-					operation,
-					ctx
-				})
-			}, type))]
-		})]
+	const items = contentTypes.map(([key]) => ({
+		label: /* @__PURE__ */ jsx("code", {
+			className: "text-xs",
+			children: key
+		}),
+		value: key
 	}));
+	return /* @__PURE__ */ jsx(AccordionItem, {
+		value: status,
+		anchorSegments: ["response", status],
+		className: "data-[state=open]:border-b-0",
+		children: /* @__PURE__ */ jsxs(SelectTabs, {
+			defaultValue: items[0]?.value,
+			children: [/* @__PURE__ */ jsxs(AccordionHeader, { children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "font-mono",
+				children: status
+			}), items.length === 1 ? /* @__PURE__ */ jsx("p", {
+				className: "text-fd-muted-foreground not-prose",
+				children: items[0].label
+			}) : items.length > 0 && /* @__PURE__ */ jsx(SelectTabTrigger, { items })] }), /* @__PURE__ */ jsxs(AccordionContent, {
+				className: "ps-4.5 pe-3 border rounded-xl",
+				children: [response.description && /* @__PURE__ */ jsx("div", {
+					className: "prose-no-margin mt-3 mb-2",
+					children: ctx.renderMarkdown(response.description)
+				}), contentTypes.map(([type, item]) => /* @__PURE__ */ jsx(SelectTab, {
+					value: type,
+					anchorSegments: [type],
+					children: /* @__PURE__ */ jsx(RepsonseAccordionItem, {
+						type,
+						status,
+						item,
+						operation,
+						ctx
+					})
+				}, type))]
+			})]
+		})
+	});
 }
 function RepsonseAccordionItem({ type, status, operation, item: { schema }, ctx }) {
 	let ts = useMemo(() => {
@@ -405,49 +440,18 @@ function RepsonseAccordionItem({ type, status, operation, item: { schema }, ctx
 	if (ts instanceof Promise) ts = use(ts);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [ts && /* @__PURE__ */ jsx(CopyTypeScriptPanel, {
 		name: "response body",
-		code: ts
-	}), schema && /* @__PURE__ */ jsx("div", {
-		className: "border px-3 py-2 rounded-lg",
-		children: /* @__PURE__ */ jsx(Schema, {
-			client: {
-				name: "response",
-				as: "body"
-			},
-			root: schema,
-			readOnly: true,
-			ctx
-		})
+		code: ts,
+		className: "mb-2"
+	}), schema && /* @__PURE__ */ jsx(Schema, {
+		client: {
+			name: "response",
+			as: "body"
+		},
+		root: schema,
+		readOnly: true,
+		ctx
 	})] });
 }
-function WebhookCallback({ callback, ctx, headingLevel }) {
-	return /* @__PURE__ */ jsx(Accordions, {
-		type: "single",
-		collapsible: true,
-		children: Object.entries(callback).map(([path, pathItem]) => {
-			const pathNodes = methodKeys.map((method) => {
-				const operation = pathItem[method];
-				if (!operation) return null;
-				return /* @__PURE__ */ jsx("div", {
-					className: "border p-3 my-2 @container prose-no-margin rounded-lg",
-					children: /* @__PURE__ */ jsx(Operation, {
-						type: "webhook",
-						path,
-						headingLevel: headingLevel + 1,
-						method: createMethod(method, pathItem, operation),
-						ctx
-					})
-				}, method);
-			});
-			return /* @__PURE__ */ jsxs(AccordionItem, {
-				value: path,
-				children: [/* @__PURE__ */ jsx(AccordionHeader, { children: /* @__PURE__ */ jsx(AccordionTrigger, {
-					className: "font-mono",
-					children: path
-				}) }), /* @__PURE__ */ jsx(AccordionContent, { children: pathNodes })]
-			}, path);
-		})
-	});
-}
 function AuthScheme({ scheme, scopes, ctx }) {
 	if (scheme.type === "http" || scheme.type === "oauth2") return /* @__PURE__ */ jsxs(AuthProperty, {
 		name: /* @__PURE__ */ jsx(I18nLabel, { label: "authorization" }),