fumadocs-openapi 11.4.2 → 12.0.0

package/dist/ui/operation/index.js

@@ -1,62 +1,48 @@
 "use client";
-import { methodKeys } from "../../utils/schema.js";
-import { ServerProvider, useRenderContext } from "../contexts/api.js";
-import { cn } from "../../utils/cn.js";
-import { Badge, MethodLabel } from "../components/method-label.js";
-import { isMediaTypeSupported } from "../../requests/media/resolve-adapter.js";
-import { OperationProvider } from "./context.js";
-import PlaygroundClient from "../../playground/client.js";
-import "../../requests/media/adapter.js";
+import { useOpenAPI, useRenderContext, useTypeScriptDefinitions } from "../../utils/create-page.js";
+import { OperationProvider, useOperation } from "../../operation.js";
+import { AnchorSection } from "../../packages/shared-api/dist/auto-anchor/client.js";
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "../../packages/shared-api/dist/components/accordion.js";
 import { Markdown } from "../components/markdown.js";
 import { UsageTabs } from "./usage-tabs.js";
+import { Badge } from "../../packages/shared-api/dist/components/badge.js";
+import { MethodLabel } from "../components/method-label.js";
+import { SchemaUI } from "../components/schema.js";
 import { RequestTabs } from "./request-tabs.js";
-import { getExampleRequests } from "../../utils/get-example-requests.js";
+import { cn } from "../../utils/cn.js";
+import { SelectTab, SelectTabTrigger, SelectTabs } from "../../packages/shared-api/dist/components/select-tab.js";
 import { Heading } from "../components/heading.js";
-import { idToTitle } from "@fumadocs/api-docs/utils/id-to-title";
-import { Fragment, use, useMemo } from "react";
+import PlaygroundClient from "../playground/client.js";
+import { Fragment } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Check, Copy } from "lucide-react";
 import { useTranslations } from "@fuma-translate/react";
+import { Check, Copy } from "lucide-react";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "@fumadocs/api-docs/components/accordion";
-import { SelectTab, SelectTabTrigger, SelectTabs } from "@fumadocs/api-docs/components/select-tab";
-import { Callout } from "fumadocs-ui/components/callout";
-import { AnchorSection } from "@fumadocs/api-docs/auto-anchor/client";
 import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
+import { Callout } from "fumadocs-ui/components/callout";
 //#region src/ui/operation/index.tsx
-const paramTypeKeys = [
-	"path",
-	"query",
-	"header",
-	"cookie"
-];
-function Operation({ type = "operation", path, operation, pathItem, method, showTitle, showDescription, headingLevel = 2 }) {
+function Operation({ type, path, method, operation, pathItem, ...props }) {
+	return /* @__PURE__ */ jsx(OperationProvider, {
+		type,
+		path,
+		method,
+		operation,
+		pathItem,
+		children: /* @__PURE__ */ jsx(OperationContent, { ...props })
+	});
+}
+function OperationContent({ showTitle, showDescription, headingLevel = 2 }) {
 	const t = useTranslations({ note: "operation page" });
+	const { resolve } = useOpenAPI().doc;
 	const ctx = useRenderContext();
-	const { schema: { dereferenced, resolve } } = ctx;
-	const body = resolve(operation.requestBody);
+	const { type, path, method, operation, pathItem, title, description, requestBody, parameters, security, responses, callbacks } = useOperation();
 	let headNode = null;
-	const operationDescription = operation.description ?? pathItem.description;
-	const descriptionNode = showDescription && operationDescription && /* @__PURE__ */ jsx(Markdown, { md: operationDescription });
+	const descriptionNode = showDescription && description && /* @__PURE__ */ jsx(Markdown, { md: description });
 	let bodyNode = null;
 	let authNode = null;
 	let responseNode = null;
 	let callbacksNode = null;
-	const exampleRequests = useMemo(() => getExampleRequests({
-		path,
-		operation,
-		method,
-		pathItem,
-		ctx
-	}), [
-		ctx,
-		operation,
-		method,
-		pathItem,
-		path
-	]);
 	if (showTitle) {
-		const title = operation.summary || pathItem.summary || (operation.operationId ? idToTitle(operation.operationId) : path);
 		headNode = /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-2 items-center justify-between",
 			children: [/* @__PURE__ */ jsx(Heading, {
@@ -76,14 +62,14 @@ function Operation({ type = "operation", path, operation, pathItem, method, show
 		title: t("Deprecated"),
 		className: "mt-0!"
 	});
-	const contentTypes = body?.content ? Object.entries(body.content) : null;
-	if (contentTypes && contentTypes.length > 0) {
-		const items = contentTypes.map(([type]) => ({
+	if (requestBody) {
+		const contentTypes = Object.entries(requestBody.content);
+		const items = contentTypes.map(([mediaType]) => ({
 			label: /* @__PURE__ */ jsx("code", {
 				className: "text-xs",
-				children: type
+				children: mediaType
 			}),
-			value: type
+			value: mediaType
 		}));
 		bodyNode = /* @__PURE__ */ jsxs(SelectTabs, {
 			defaultValue: items[0].value,
@@ -103,53 +89,41 @@ function Operation({ type = "operation", path, operation, pathItem, method, show
 						children: items[0].label
 					})]
 				}),
-				body?.description && /* @__PURE__ */ jsx(Markdown, { md: body.description }),
-				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: resolve(content),
-							operation,
-							method
-						})
-					}, type);
-				})
+				requestBody.description && /* @__PURE__ */ jsx(Markdown, { md: requestBody.description }),
+				contentTypes.map(([mediaType, content]) => /* @__PURE__ */ jsx(SelectTab, {
+					anchorSegments: ["request-body", mediaType],
+					value: mediaType,
+					children: /* @__PURE__ */ jsx(RequestBodyContentItem, {
+						content,
+						required: requestBody.required,
+						method
+					})
+				}, mediaType))
 			]
 		});
 	}
-	if (operation.responses && ctx.showResponseSchema !== false) {
-		const statuses = Object.keys(operation.responses);
-		responseNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Heading, {
-			id: "response-body",
-			depth: headingLevel,
-			children: t("Response Body")
-		}), /* @__PURE__ */ jsx(Accordions, {
-			type: "multiple",
-			children: statuses.map((status) => /* @__PURE__ */ jsx(ResponseAccordion, {
-				status,
-				operation
-			}, status))
-		})] });
-	}
-	const parameters = [...operation.parameters ?? [], ...pathItem.parameters ?? []].map((param) => resolve(param));
-	const parameterNode = paramTypeKeys.map((type) => {
-		const params = parameters.filter((param) => param.in === type);
-		if (!params || params.length === 0) return;
-		const parameterLabel = type === "path" ? t("Path Parameters") : type === "query" ? t("Query Parameters") : type === "header" ? t("Header Parameters") : t("Cookie Parameters");
+	if (responses.length > 0 && ctx.showResponseSchema !== false) responseNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Heading, {
+		id: "response-body",
+		depth: headingLevel,
+		children: t("Response Body")
+	}), /* @__PURE__ */ jsx(Accordions, {
+		type: "multiple",
+		children: responses.map((item) => /* @__PURE__ */ jsx(ResponseAccordion, { item }, item.status))
+	})] });
+	const parameterNode = parameters.map(({ in: location, items }) => {
+		const parameterLabel = location === "path" ? t("Path Parameters") : location === "query" ? t("Query Parameters") : location === "header" ? t("Header Parameters") : t("Cookie Parameters");
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, {
-			id: `parameters-${type}`,
+			id: `parameters-${location}`,
 			depth: headingLevel,
 			children: parameterLabel
 		}), /* @__PURE__ */ jsx(AnchorSection, {
-			segments: ["parameters", type],
+			segments: ["parameters", location],
 			children: /* @__PURE__ */ jsx("div", {
 				className: "flex flex-col",
-				children: params.map((param) => {
+				children: items.map((param) => {
 					if (param.schema == null) return;
 					const schema = resolve(param.schema);
-					return /* @__PURE__ */ jsx(ctx.SchemaUI, {
+					return /* @__PURE__ */ jsx(SchemaUI, {
 						client: {
 							name: param.name,
 							required: param.required
@@ -164,17 +138,15 @@ function Operation({ type = "operation", path, operation, pathItem, method, show
 					}, param.name);
 				})
 			})
-		})] }, type);
+		})] }, location);
 	});
-	const securities = (operation.security ?? dereferenced.security ?? []).filter((v) => Object.keys(v).length > 0);
-	if (type === "operation" && securities.length > 0) {
-		const securitySchemes = dereferenced.components?.securitySchemes;
-		const items = securities.map((security, i) => {
+	if (security.length > 0) {
+		const items = security.map((requirement, i) => {
 			return {
 				value: String(i),
 				label: /* @__PURE__ */ jsx("div", {
 					className: "flex flex-col text-xs min-w-0",
-					children: Object.entries(security).map(([key, scopes]) => /* @__PURE__ */ jsxs("code", {
+					children: requirement.map(({ key, scopes }) => /* @__PURE__ */ jsxs("code", {
 						className: "truncate",
 						children: [
 							/* @__PURE__ */ jsx("span", {
@@ -204,43 +176,22 @@ function Operation({ type = "operation", path, operation, pathItem, method, show
 					className: "not-prose",
 					children: items[0].label
 				})]
-			}), securities.map((security, i) => /* @__PURE__ */ jsx(SelectTab, {
+			}), security.map((requirement, i) => /* @__PURE__ */ jsx(SelectTab, {
 				value: items[i].value,
-				children: Object.entries(security).map(([key, scopes]) => {
-					const scheme = resolve(securitySchemes?.[key]);
-					if (!scheme) return;
-					return /* @__PURE__ */ jsx(AuthScheme, {
-						scheme,
-						scopes
-					}, key);
-				})
+				children: requirement.map(({ key, scopes, scheme }) => scheme && /* @__PURE__ */ jsx(AuthScheme, {
+					scheme,
+					scopes
+				}, key))
 			}, i))]
 		});
 	}
-	const webhookCallbacks = [];
-	for (const [name, item] of Object.entries(operation.callbacks ?? {})) {
-		const callbacks = resolve(item);
-		for (const [path, pathItem] of Object.entries(callbacks)) {
-			const callback = resolve(pathItem);
-			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, {
+	if (callbacks.length > 0) callbacksNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Heading, {
 		id: "callbacks",
 		depth: headingLevel,
 		children: t("Callbacks")
 	}), /* @__PURE__ */ jsx(Accordions, {
 		type: "multiple",
-		children: webhookCallbacks.map((item, i) => /* @__PURE__ */ jsxs(AccordionItem, {
+		children: callbacks.map((item, i) => /* @__PURE__ */ jsxs(AccordionItem, {
 			value: `${item.name}\0${item.path}\0${item.method}`,
 			anchorSegments: [
 				"callbacks",
@@ -267,51 +218,28 @@ function Operation({ type = "operation", path, operation, pathItem, method, show
 					path,
 					headingLevel: headingLevel + 1,
 					method: item.method,
-					pathItem: item.callback,
+					pathItem: item.pathItem,
 					operation: item.operation
 				})
 			}) })]
 		}, i))
 	})] });
-	let { renderOperationLayout, renderWebhookLayout } = ctx.content ?? {};
 	if (type === "operation") {
-		renderOperationLayout ??= (slots) => {
-			return /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-x-6 gap-y-4 @4xl:flex-row @4xl:items-start",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "min-w-0 flex-1",
-					children: [
-						slots.header,
-						slots.apiPlayground,
-						slots.description,
-						slots.authSchemes,
-						slots.parameters,
-						slots.body,
-						slots.responses,
-						slots.callbacks
-					]
-				}), /* @__PURE__ */ jsx("div", {
-					className: "@4xl:sticky @4xl:top-[calc(var(--fd-docs-row-1,2rem)+1rem)] @4xl:w-[400px]",
-					children: slots.apiExample
-				})]
-			});
-		};
+		const playground = ctx.playground;
 		let apiPlayground;
-		if (ctx.playground?.enabled ?? true) apiPlayground = ctx.playground?.render ? ctx.playground.render({
-			path,
-			method,
-			operation,
-			pathItem,
-			ctx
-		}) : /* @__PURE__ */ jsx(PlaygroundClient, {
-			operation,
-			pathItem,
-			route: path,
-			method,
-			writeOnly: true,
-			readOnly: false
-		});
-		else apiPlayground = /* @__PURE__ */ jsxs("div", {
+		if (playground?.enabled ?? true) {
+			const { enabled: _, render, ...options } = playground ?? {};
+			apiPlayground = render ? render({
+				path,
+				method,
+				operation,
+				pathItem
+			}) : /* @__PURE__ */ jsx(PlaygroundClient, {
+				...options,
+				writeOnly: true,
+				readOnly: false
+			});
+		} else apiPlayground = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-row items-center gap-2.5 p-3 rounded-xl border bg-fd-card text-fd-card-foreground not-prose",
 			children: [/* @__PURE__ */ jsx(MethodLabel, {
 				className: "text-xs",
@@ -321,7 +249,7 @@ function Operation({ type = "operation", path, operation, pathItem, method, show
 				children: path
 			})]
 		});
-		let content = renderOperationLayout({
+		const slots = {
 			header: headNode,
 			description: descriptionNode,
 			authSchemes: authNode,
@@ -330,37 +258,22 @@ function Operation({ type = "operation", path, operation, pathItem, method, show
 			parameters: parameterNode,
 			responses: responseNode,
 			apiPlayground,
-			apiExample: /* @__PURE__ */ jsx(UsageTabs, {
-				path,
-				method,
-				operation,
-				pathItem
-			})
-		}, {
+			apiExample: /* @__PURE__ */ jsx(UsageTabs, {})
+		};
+		if (ctx.content?.renderOperationLayout) return ctx.content.renderOperationLayout(slots, {
 			path,
 			operation,
 			method,
 			pathItem,
 			ctx
 		});
-		content = /* @__PURE__ */ jsx(OperationProvider, {
-			defaultExampleId: operation["x-exclusiveCodeSample"] ?? operation["x-selectedCodeSample"],
-			route: path,
-			examples: exampleRequests,
-			children: content
-		});
-		if (operation.servers || pathItem.servers) content = /* @__PURE__ */ jsx(ServerProvider, {
-			servers: operation.servers ?? pathItem.servers,
-			children: content
-		});
-		return content;
-	} else {
-		renderWebhookLayout ??= (slots) => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col-reverse gap-x-6 gap-y-4 @4xl:flex-row @4xl:items-start",
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-x-6 gap-y-4 @4xl:flex-row @4xl:items-start",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1 prose-no-margin",
+				className: "min-w-0 flex-1",
 				children: [
 					slots.header,
+					slots.apiPlayground,
 					slots.description,
 					slots.authSchemes,
 					slots.parameters,
@@ -370,58 +283,63 @@ function Operation({ type = "operation", path, operation, pathItem, method, show
 				]
 			}), /* @__PURE__ */ jsx("div", {
 				className: "@4xl:sticky @4xl:top-[calc(var(--fd-docs-row-1,2rem)+1rem)] @4xl:w-[400px]",
-				children: slots.requests
+				children: slots.apiExample
 			})]
 		});
-		return renderWebhookLayout({
-			header: headNode,
-			description: descriptionNode,
-			authSchemes: authNode,
-			body: bodyNode,
-			callbacks: callbacksNode,
-			parameters: parameterNode,
-			responses: responseNode,
-			requests: /* @__PURE__ */ jsx(RequestTabs, {
-				examples: exampleRequests,
-				path,
-				method,
-				pathItem,
-				operation
-			})
-		});
 	}
+	const slots = {
+		header: headNode,
+		description: descriptionNode,
+		authSchemes: authNode,
+		body: bodyNode,
+		callbacks: callbacksNode,
+		parameters: parameterNode,
+		responses: responseNode,
+		requests: /* @__PURE__ */ jsx(RequestTabs, {})
+	};
+	if (ctx.content?.renderWebhookLayout) return ctx.content.renderWebhookLayout(slots);
+	return /* @__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 prose-no-margin",
+			children: [
+				slots.header,
+				slots.description,
+				slots.authSchemes,
+				slots.parameters,
+				slots.body,
+				slots.responses,
+				slots.callbacks
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "@4xl:sticky @4xl:top-[calc(var(--fd-docs-row-1,2rem)+1rem)] @4xl:w-[400px]",
+			children: slots.requests
+		})]
+	});
 }
-function RequestBodyContentItem({ content, method, operation }) {
-	const ctx = useRenderContext();
-	let ts = useMemo(() => {
-		if (!content.schema || !ctx.generateTypeScriptDefinitions) return;
-		return ctx.generateTypeScriptDefinitions(content.schema, {
-			name: "RequestBody",
-			readOnly: false,
-			writeOnly: true,
-			ctx
-		});
-	}, [content.schema, ctx]);
-	if (ts instanceof Promise) ts = use(ts);
+function RequestBodyContentItem({ content, required, method }) {
+	const ts = useTypeScriptDefinitions(content.schema, {
+		name: "RequestBody",
+		readOnly: false,
+		writeOnly: true
+	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [ts && /* @__PURE__ */ jsx(CopyTypeScriptPanel, {
 		name: "request body",
 		code: ts,
 		className: "my-4 last:mb-0"
-	}), content.schema && /* @__PURE__ */ jsx(ctx.SchemaUI, {
+	}), content.schema && /* @__PURE__ */ jsx(SchemaUI, {
 		client: {
 			name: "body",
 			as: "body",
-			required: ctx.schema.resolve(operation.requestBody)?.required
+			required
 		},
 		root: content.schema,
 		readOnly: method === "get",
 		writeOnly: method !== "get"
 	})] });
 }
-function ResponseAccordion({ status, operation }) {
-	const { schema } = useRenderContext();
-	const response = schema.resolve(operation.responses[status]);
-	const contentTypes = response.content ? Object.entries(response.content) : [];
+function ResponseAccordion({ item: { status, response, content } }) {
+	const contentTypes = Object.entries(content);
 	const items = contentTypes.map(([key]) => ({
 		label: /* @__PURE__ */ jsx("code", {
 			className: "text-xs",
@@ -449,32 +367,26 @@ function ResponseAccordion({ status, operation }) {
 				children: [response.description && /* @__PURE__ */ jsx("div", {
 					className: "prose-no-margin mt-3 mb-2",
 					children: /* @__PURE__ */ jsx(Markdown, { md: response.description })
-				}), contentTypes.map(([type, item]) => /* @__PURE__ */ jsx(SelectTab, {
-					value: type,
-					anchorSegments: [type],
-					children: /* @__PURE__ */ jsx(RepsonseAccordionItem, { item: schema.resolve(item) })
-				}, type))]
+				}), contentTypes.map(([mediaType, media]) => /* @__PURE__ */ jsx(SelectTab, {
+					value: mediaType,
+					anchorSegments: [mediaType],
+					children: /* @__PURE__ */ jsx(ResponseAccordionItem, { item: media })
+				}, mediaType))]
 			})]
 		})
 	});
 }
-function RepsonseAccordionItem({ item: { schema } }) {
-	const ctx = useRenderContext();
-	let ts = useMemo(() => {
-		if (!schema || !ctx.generateTypeScriptDefinitions) return;
-		return ctx.generateTypeScriptDefinitions(schema, {
-			name: "ResponseBody",
-			readOnly: true,
-			writeOnly: false,
-			ctx
-		});
-	}, [ctx, schema]);
-	if (ts instanceof Promise) ts = use(ts);
+function ResponseAccordionItem({ item: { schema } }) {
+	const ts = useTypeScriptDefinitions(schema, {
+		name: "ResponseBody",
+		readOnly: true,
+		writeOnly: false
+	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [ts && /* @__PURE__ */ jsx(CopyTypeScriptPanel, {
 		name: "response body",
 		code: ts,
 		className: "mb-2"
-	}), schema && /* @__PURE__ */ jsx(ctx.SchemaUI, {
+	}), schema && /* @__PURE__ */ jsx(SchemaUI, {
 		client: {
 			name: "response",
 			as: "body"
@@ -562,7 +474,7 @@ function CopyTypeScriptPanel({ name, code, className }) {
 		})] }), /* @__PURE__ */ jsxs("button", {
 			onClick: onCopy,
 			className: cn(buttonVariants({
-				color: "secondary",
+				variant: "secondary",
 				className: "p-2 gap-2",
 				size: "sm"
 			})),

package/dist/ui/operation/request-tabs.js

@@ -1,32 +1,30 @@
 "use client";
-import { useRenderContext } from "../contexts/api.js";
+import { useRenderContext } from "../../utils/create-page.js";
+import { useExampleRequests, useOperation } from "../../operation.js";
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "../../packages/shared-api/dist/components/accordion.js";
+import { Markdown } from "../components/markdown.js";
 import { ClientCodeBlock } from "../components/codeblock.js";
-import { pathnameFromRequest } from "../../requests/generators/index.js";
 import { MethodLabel } from "../components/method-label.js";
-import { Markdown } from "../components/markdown.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslations } from "@fuma-translate/react";
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "@fumadocs/api-docs/components/accordion";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "fumadocs-ui/components/tabs";
 //#region src/ui/operation/request-tabs.tsx
-function RequestTabs({ path, operation, method, pathItem, examples }) {
+function RequestTabs() {
 	const ctx = useRenderContext();
+	const { path, method, operation, pathItem } = useOperation();
+	const { items } = useExampleRequests();
 	if (!operation.requestBody) return null;
-	const { renderRequestTabs = renderRequestTabsDefault } = ctx.content ?? {};
-	return renderRequestTabs({
-		items: examples,
+	if (ctx.content?.renderRequestTabs) return ctx.content.renderRequestTabs({
+		items,
 		route: path,
 		method,
 		pathItem,
 		operation
 	}, ctx);
+	return /* @__PURE__ */ jsx(RequestTabsDefaultContent, { items });
 }
-function renderRequestTabsDefault(options) {
-	return /* @__PURE__ */ jsx(RequestTabsDefaultContent, { options });
-}
-function RequestTabsDefaultContent({ options }) {
+function RequestTabsDefaultContent({ items }) {
 	const t = useTranslations({ note: "operation page" });
-	const { items } = options;
 	let children;
 	if (items.length > 1) children = /* @__PURE__ */ jsxs(Tabs, {
 		defaultValue: items[0].id,
@@ -35,16 +33,10 @@ function RequestTabsDefaultContent({ options }) {
 			children: item.id === "_default" ? t("Default") : item.name
 		}, item.id)) }), items.map((item) => /* @__PURE__ */ jsx(TabsContent, {
 			value: item.id,
-			children: /* @__PURE__ */ jsx(RequestTabsItem, {
-				item,
-				options
-			})
+			children: /* @__PURE__ */ jsx(RequestTabsItem, { item })
 		}, item.id))]
 	});
-	else if (items.length === 1) children = /* @__PURE__ */ jsx(RequestTabsItem, {
-		item: items[0],
-		options
-	});
+	else if (items.length === 1) children = /* @__PURE__ */ jsx(RequestTabsItem, { item: items[0] });
 	else children = /* @__PURE__ */ jsx("p", {
 		className: "text-fd-muted-foreground text-xs",
 		children: t("Empty")
@@ -57,7 +49,7 @@ function RequestTabsDefaultContent({ options }) {
 		}), children]
 	});
 }
-function RequestTabsItem({ item, options }) {
+function RequestTabsItem({ item }) {
 	const t = useTranslations({ note: "operation page" });
 	const requestData = item.data;
 	const displayNames = {
@@ -74,7 +66,7 @@ function RequestTabsItem({ item, options }) {
 		item.description && /* @__PURE__ */ jsx(Markdown, { md: item.description }),
 		/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-row gap-2 items-center justify-between",
-			children: [/* @__PURE__ */ jsx(MethodLabel, { children: requestData.method }), /* @__PURE__ */ jsx("code", { children: pathnameFromRequest(options.route, item.encoded) })]
+			children: [/* @__PURE__ */ jsx(MethodLabel, { children: requestData.method }), /* @__PURE__ */ jsx("code", { children: item.pathname })]
 		}),
 		/* @__PURE__ */ jsx(Accordions, {
 			type: "multiple",