fumadocs-openapi 10.0.11 → 10.1.1

package/dist/ui/operation/index.js

@@ -1,9 +1,9 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { createMethod, methodKeys, } from '../../utils/schema.js';
 import { idToTitle } from '../../utils/id-to-title.js';
 import { Schema } from '../schema/index.js';
-import { APIExample, getAPIExamples } from '../../ui/operation/example-panel/index.js';
+import { UsageTabs } from '../../ui/operation/usage-tabs/index.js';
 import { MethodLabel } from '../../ui/components/method-label.js';
 import { getTypescriptSchema } from '../../utils/get-typescript-schema.js';
 import { CopyResponseTypeScript, SelectTab, SelectTabs, SelectTabTrigger, } from './client.js';
@@ -11,35 +11,48 @@ import { AccordionContent, AccordionHeader, AccordionItem, Accordions, Accordion
 import { isMediaTypeSupported } from '../../requests/media/adapter.js';
 import { cn } from 'fumadocs-ui/utils/cn';
 import { APIPlayground } from '../../playground/index.js';
-import { OperationProviderLazy } from '../contexts/operation.lazy.js';
+import { RequestTabs, getExampleRequests } from './request-tabs.js';
+import { UsageTabsProviderLazy } from './usage-tabs/lazy.js';
 const ParamTypes = {
     path: 'Path Parameters',
     query: 'Query Parameters',
     header: 'Header Parameters',
     cookie: 'Cookie Parameters',
 };
-export async function Operation({ type = 'operation', path, method, ctx, hasHead, headingLevel = 2, }) {
+export async function Operation({ type = 'operation', path, method, ctx, showTitle, showDescription, headingLevel = 2, }) {
     const { schema: { dereferenced }, } = ctx;
     const body = method.requestBody;
     let headNode = null;
+    const descriptionNode = showDescription &&
+        method.description &&
+        ctx.renderMarkdown(method.description);
     let bodyNode = null;
     let authNode = null;
     let responseNode = null;
     let callbacksNode = null;
-    if (hasHead) {
+    if (showTitle) {
         const title = method.summary ??
             (method.operationId ? idToTitle(method.operationId) : path);
-        headNode = (_jsxs(_Fragment, { children: [ctx.renderHeading(headingLevel, title), method.description && ctx.renderMarkdown(method.description)] }));
+        headNode = ctx.renderHeading(headingLevel, title);
         headingLevel++;
     }
     const contentTypes = body ? Object.entries(body.content) : null;
     if (body && contentTypes && contentTypes.length > 0) {
-        const [defaultValue] = contentTypes[0];
-        bodyNode = (_jsxs(SelectTabs, { defaultValue: defaultValue, children: [_jsxs("div", { className: "flex gap-2 items-end justify-between", children: [ctx.renderHeading(headingLevel, 'Request Body'), _jsx(SelectTabTrigger, { items: contentTypes.map(([key]) => key), className: "mb-4" })] }), body.description && ctx.renderMarkdown(body.description), contentTypes.map(([type, content]) => {
+        const items = contentTypes.map(([key]) => ({
+            label: _jsx("code", { className: "text-xs", children: key }),
+            value: key,
+        }));
+        bodyNode = (_jsxs(SelectTabs, { defaultValue: items[0].value, children: [_jsxs("div", { className: "flex gap-2 items-center justify-between", children: [ctx.renderHeading(headingLevel, 'Request Body', {
+                            className: 'my-0!',
+                        }), contentTypes.length > 1 ? (_jsx(SelectTabTrigger, { items: items, className: "font-medium" })) : (_jsx("p", { className: "text-fd-muted-foreground not-prose", children: items[0].label }))] }), body.description && ctx.renderMarkdown(body.description), contentTypes.map(([type, content]) => {
                     if (!isMediaTypeSupported(type, ctx.mediaAdapters)) {
                         throw new Error(`Media type ${type} is not supported (in ${path})`);
                     }
-                    return (_jsx(SelectTab, { value: type, children: _jsx(Schema, { name: "body", as: "body", root: (content.schema ?? {}), required: body.required, readOnly: method.method === 'GET', writeOnly: method.method !== 'GET', ctx: ctx }) }, type));
+                    return (_jsx(SelectTab, { value: type, children: _jsx(Schema, { client: {
+                                name: 'body',
+                                as: 'body',
+                                required: body.required,
+                            }, root: (content.schema ?? {}), readOnly: method.method === 'GET', writeOnly: method.method !== 'GET', ctx: ctx }) }, type));
                 })] }));
     }
     if (method.responses && ctx.showResponseSchema !== false) {
@@ -50,18 +63,28 @@ export async function Operation({ type = 'operation', path, method, ctx, hasHead
         const params = method.parameters?.filter((param) => param.in === type);
         if (!params || params.length === 0)
             return;
-        return (_jsxs(Fragment, { children: [ctx.renderHeading(headingLevel, title), _jsx("div", { className: "flex flex-col", children: params.map((param) => (_jsx(Schema, { name: param.name, root: {
+        return (_jsxs(Fragment, { children: [ctx.renderHeading(headingLevel, title), _jsx("div", { className: "flex flex-col", children: params.map((param) => (_jsx(Schema, { client: {
+                            name: param.name,
+                            required: param.required,
+                        }, root: {
                             ...param.schema,
                             description: param.description ?? param.schema?.description,
                             deprecated: (param.deprecated ?? false) ||
                                 (param.schema?.deprecated ?? false),
-                        }, required: param.required, readOnly: method.method === 'GET', writeOnly: method.method !== 'GET', ctx: ctx }, param.name))) })] }, type));
+                        }, readOnly: method.method === 'GET', writeOnly: method.method !== 'GET', ctx: ctx }, param.name))) })] }, type));
     });
     const securities = (method.security ?? dereferenced.security ?? []).filter((v) => Object.keys(v).length > 0);
     if (type === 'operation' && securities.length > 0) {
         const securitySchemes = dereferenced.components?.securitySchemes;
-        const names = securities.map((security) => Object.keys(security).join(' & '));
-        authNode = (_jsxs(SelectTabs, { defaultValue: names[0], children: [_jsxs("div", { className: "flex items-end justify-between gap-2", children: [ctx.renderHeading(headingLevel, 'Authorization'), _jsx(SelectTabTrigger, { items: names, className: "mb-4" })] }), securities.map((security, i) => (_jsx(SelectTab, { value: names[i], children: Object.entries(security).map(([key, scopes]) => {
+        const items = securities.map((security, i) => {
+            return {
+                value: String(i),
+                label: (_jsx("div", { className: "flex flex-col text-xs min-w-0", children: Object.entries(security).map(([key, scopes]) => (_jsxs("code", { className: "truncate", children: [_jsx("span", { className: "font-medium", children: key }), ' ', scopes.length > 0 && (_jsx("span", { className: "text-fd-muted-foreground", children: scopes.join(', ') }))] }, key))) })),
+            };
+        });
+        authNode = (_jsxs(SelectTabs, { defaultValue: items[0].value, children: [_jsxs("div", { className: "flex items-start justify-between gap-2 mt-10 mb-5", children: [ctx.renderHeading(headingLevel, 'Authorization', {
+                            className: 'my-0!',
+                        }), items.length > 1 ? (_jsx(SelectTabTrigger, { items: items })) : (_jsx("p", { className: "not-prose", children: items[0].label }))] }), securities.map((security, i) => (_jsx(SelectTab, { value: items[i].value, children: Object.entries(security).map(([key, scopes]) => {
                         const scheme = securitySchemes?.[key];
                         if (!scheme)
                             return;
@@ -70,38 +93,44 @@ export async function Operation({ type = 'operation', path, method, ctx, hasHead
     }
     const callbacks = method.callbacks ? Object.entries(method.callbacks) : null;
     if (callbacks && callbacks.length > 0) {
-        const [defaultValue] = callbacks[0];
-        callbacksNode = (_jsxs(SelectTabs, { defaultValue: defaultValue, children: [_jsxs("div", { className: "flex justify-between gap-2 items-end", children: [ctx.renderHeading(headingLevel, 'Callbacks'), _jsx(SelectTabTrigger, { items: callbacks.map(([key]) => key), className: "mb-4" })] }), callbacks.map(([name, callback]) => (_jsx(SelectTab, { value: name, children: _jsx(WebhookCallback, { callback: callback, ctx: ctx, headingLevel: headingLevel }) }, name)))] }));
+        const items = callbacks.map(([key]) => ({
+            label: _jsx("code", { className: "text-xs", children: key }),
+            value: key,
+        }));
+        callbacksNode = (_jsxs(SelectTabs, { defaultValue: items[0].value, children: [_jsxs("div", { className: "flex justify-between gap-2 items-end mt-10 mb-5", children: [ctx.renderHeading(headingLevel, 'Callbacks', {
+                            className: 'my-0!',
+                        }), callbacks.length > 1 ? (_jsx(SelectTabTrigger, { items: items, className: "font-medium" })) : (_jsx("p", { className: "text-fd-muted-foreground not-prose", children: items[0].label }))] }), callbacks.map(([name, callback]) => (_jsx(SelectTab, { value: name, children: _jsx(WebhookCallback, { callback: callback, ctx: ctx, headingLevel: headingLevel }) }, name)))] }));
     }
     let { renderOperationLayout, renderWebhookLayout } = ctx.content ?? {};
     if (type === 'operation') {
         renderOperationLayout ?? (renderOperationLayout = (slots) => {
-            return (_jsxs("div", { className: "flex flex-col gap-x-6 gap-y-4 xl:flex-row xl:items-start", style: {
-                    '--fd-api-info-top': 'calc(12px + var(--fd-nav-height) + var(--fd-banner-height) + var(--fd-tocnav-height, 0px))',
-                }, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [slots.header, slots.apiPlayground, slots.authSchemes, slots.paremeters, slots.body, slots.responses, slots.callbacks] }), slots.apiExample] }));
+            return (_jsxs("div", { className: "flex flex-col gap-x-6 gap-y-4 @4xl:flex-row @4xl:items-start", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [slots.header, slots.apiPlayground, slots.description, slots.authSchemes, slots.paremeters, slots.body, slots.responses, slots.callbacks] }), _jsx("div", { className: "@4xl:sticky @4xl:top-[calc(var(--fd-docs-row-1,2rem)+1rem)] @4xl:w-[400px]", children: slots.apiExample })] }));
         });
         const playgroundEnabled = ctx.playground?.enabled ?? true;
         const content = await renderOperationLayout({
             header: headNode,
+            description: descriptionNode,
             authSchemes: authNode,
             body: bodyNode,
             callbacks: callbacksNode,
             paremeters: parameterNode,
             responses: responseNode,
             apiPlayground: playgroundEnabled ? (_jsx(APIPlayground, { path: path, method: method, ctx: ctx })) : (_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: [_jsx(MethodLabel, { className: "text-xs", children: method.method }), _jsx("code", { className: "flex-1 overflow-auto text-nowrap text-[0.8125rem] text-fd-muted-foreground", children: path })] })),
-            apiExample: _jsx(APIExample, { method: method, ctx: ctx }),
+            apiExample: _jsx(UsageTabs, { method: method, ctx: ctx }),
         }, ctx, method);
-        return (_jsx(OperationProviderLazy, { defaultExampleId: method['x-exclusiveCodeSample'] ?? method['x-selectedCodeSample'], route: path, examples: getAPIExamples(path, method, ctx), children: content }));
+        return (_jsx(UsageTabsProviderLazy, { defaultExampleId: method['x-exclusiveCodeSample'] ?? method['x-selectedCodeSample'], route: path, examples: getExampleRequests(path, method, ctx), children: content }));
     }
     else {
-        renderWebhookLayout ?? (renderWebhookLayout = (slots) => (_jsxs("div", { children: [slots.header, slots.authSchemes, slots.paremeters, slots.body, slots.responses, slots.callbacks] })));
+        renderWebhookLayout ?? (renderWebhookLayout = (slots) => (_jsxs("div", { className: "flex flex-col-reverse gap-x-6 gap-y-4 @4xl:flex-row @4xl:items-start", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [slots.header, slots.description, slots.authSchemes, slots.paremeters, slots.body, slots.responses, slots.callbacks] }), _jsx("div", { className: "@4xl:sticky @4xl:top-[calc(var(--fd-docs-row-1,2rem)+1rem)] @4xl:w-[400px]", children: slots.requests })] })));
         return renderWebhookLayout({
             header: headNode,
+            description: descriptionNode,
             authSchemes: authNode,
             body: bodyNode,
             callbacks: callbacksNode,
             paremeters: parameterNode,
             responses: responseNode,
+            requests: _jsx(RequestTabs, { path: path, operation: method, ctx: ctx }),
         });
     }
 }
@@ -112,12 +141,15 @@ async function ResponseAccordion({ status, operation, ctx, }) {
     let wrapper = (children) => children;
     let selectorNode = null;
     if (contentTypes.length > 0) {
-        const [defaultValue] = contentTypes[0];
+        const items = contentTypes.map(([key]) => ({
+            label: _jsx("code", { className: "text-xs", children: key }),
+            value: key,
+        }));
         selectorNode =
-            contentTypes.length === 1 ? (_jsx("p", { className: "text-sm text-fd-muted-foreground", children: defaultValue })) : (_jsx(SelectTabTrigger, { items: contentTypes.map(([key]) => key) }));
-        wrapper = (children) => (_jsx(SelectTabs, { defaultValue: defaultValue, children: children }));
+            items.length === 1 ? (_jsx("p", { className: "text-fd-muted-foreground not-prose", children: items[0].label })) : (_jsx(SelectTabTrigger, { items: items }));
+        wrapper = (children) => (_jsx(SelectTabs, { defaultValue: items[0].value, children: children }));
     }
-    return wrapper(_jsxs(AccordionItem, { value: status, children: [_jsxs(AccordionHeader, { children: [_jsx(AccordionTrigger, { className: "font-mono", children: status }), selectorNode] }), _jsxs(AccordionContent, { className: "ps-4.5", children: [response.description && (_jsx("div", { className: "prose-no-margin", children: ctx.renderMarkdown(response.description) })), contentTypes.map(async ([type, resType]) => {
+    return wrapper(_jsxs(AccordionItem, { value: status, children: [_jsxs(AccordionHeader, { children: [_jsx(AccordionTrigger, { className: "font-mono", children: status }), selectorNode] }), _jsxs(AccordionContent, { className: "ps-4.5", children: [response.description && (_jsx("div", { className: "prose-no-margin mb-2", children: ctx.renderMarkdown(response.description) })), contentTypes.map(async ([type, resType]) => {
                         const schema = resType.schema;
                         let ts;
                         if (generateTypeScriptSchema) {
@@ -126,7 +158,10 @@ async function ResponseAccordion({ status, operation, ctx, }) {
                         else if (generateTypeScriptSchema === undefined && schema) {
                             ts = await getTypescriptSchema(schema, ctx);
                         }
-                        return (_jsxs(SelectTab, { value: type, className: "my-2", children: [ts && _jsx(CopyResponseTypeScript, { code: ts }), schema && (_jsx("div", { className: "border px-3 py-2 rounded-lg", children: _jsx(Schema, { name: "response", root: schema, as: "body", readOnly: true, ctx: ctx }) }))] }, type));
+                        return (_jsxs(SelectTab, { value: type, className: "mb-2", children: [ts && _jsx(CopyResponseTypeScript, { code: ts }), schema && (_jsx("div", { className: "border px-3 py-2 rounded-lg", children: _jsx(Schema, { client: {
+                                            name: 'response',
+                                            as: 'body',
+                                        }, root: schema, readOnly: true, ctx: ctx }) }))] }, type));
                     })] })] }));
 }
 function WebhookCallback({ callback, ctx, headingLevel, }) {
@@ -136,25 +171,24 @@ function WebhookCallback({ callback, ctx, headingLevel, }) {
                 const operation = pathItem[method];
                 if (!operation)
                     return null;
-                return (_jsx("div", { className: "border p-3 my-2 prose-no-margin rounded-lg", children: _jsx(Operation, { type: "webhook", path: path, headingLevel: headingLevel + 1, method: createMethod(method, pathItem, operation), ctx: ctx }) }, method));
+                return (_jsx("div", { className: "border p-3 my-2 @container prose-no-margin rounded-lg", children: _jsx(Operation, { type: "webhook", path: path, headingLevel: headingLevel + 1, method: createMethod(method, pathItem, operation), ctx: ctx }) }, method));
             });
             return (_jsxs(AccordionItem, { value: path, children: [_jsx(AccordionHeader, { children: _jsx(AccordionTrigger, { className: "font-mono", children: path }) }), _jsx(AccordionContent, { children: pathNodes })] }, path));
         }) }));
 }
 function AuthScheme({ scheme: schema, scopes, ctx, }) {
-    const scopeElement = scopes.length > 0 ? (_jsxs("p", { children: ["Scope: ", _jsx("code", { children: scopes.join(', ') })] })) : null;
     if (schema.type === 'http' || schema.type === 'oauth2') {
         return (_jsxs(AuthProperty, { name: "Authorization", type: schema.type === 'http' && schema.scheme === 'basic'
                 ? `Basic <token>`
-                : 'Bearer <token>', children: [schema.description && ctx.renderMarkdown(schema.description), _jsxs("p", { children: ["In: ", _jsx("code", { children: "header" })] }), scopeElement] }));
+                : 'Bearer <token>', scopes: scopes, children: [schema.description && ctx.renderMarkdown(schema.description), _jsxs("p", { children: ["In: ", _jsx("code", { children: "header" })] })] }));
     }
     if (schema.type === 'apiKey') {
-        return (_jsxs(AuthProperty, { name: schema.name, type: "<token>", children: [schema.description && ctx.renderMarkdown(schema.description), _jsxs("p", { children: ["In: ", _jsx("code", { children: schema.in }), scopeElement] })] }));
+        return (_jsxs(AuthProperty, { name: schema.name, type: "<token>", scopes: scopes, children: [schema.description && ctx.renderMarkdown(schema.description), _jsxs("p", { children: ["In: ", _jsx("code", { children: schema.in })] })] }));
     }
     if (schema.type === 'openIdConnect') {
-        return (_jsxs(AuthProperty, { name: "OpenID Connect", type: "<token>", children: [schema.description && ctx.renderMarkdown(schema.description), scopeElement] }));
+        return (_jsx(AuthProperty, { name: "OpenID Connect", type: "<token>", scopes: scopes, children: schema.description && ctx.renderMarkdown(schema.description) }));
     }
 }
-function AuthProperty({ name, type, ...props }) {
-    return (_jsxs("div", { className: cn('text-sm border-t py-4 first:border-t-0', props.className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 not-prose", children: [_jsx("span", { className: "font-medium font-mono text-fd-primary", children: name }), _jsx("span", { className: "text-sm font-mono text-fd-muted-foreground", children: type })] }), _jsx("div", { className: "prose-no-margin pt-2.5 empty:hidden", children: props.children })] }));
+function AuthProperty({ name, type, scopes = [], className, ...props }) {
+    return (_jsxs("div", { className: cn('text-sm border-t py-4 first:border-t-0', className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 not-prose", children: [_jsx("span", { className: "font-medium font-mono text-fd-primary", children: name }), _jsx("span", { className: "text-sm font-mono text-fd-muted-foreground", children: type })] }), _jsxs("div", { className: "prose-no-margin pt-2.5 empty:hidden", children: [props.children, scopes.length > 0 && (_jsxs("p", { children: ["Scope: ", _jsx("code", { children: scopes.join(', ') })] }))] })] }));
 }

package/dist/ui/operation/request-tabs.d.ts

@@ -0,0 +1,18 @@
+import type { MethodInformation, RenderContext } from '../../types.js';
+import { type NoReference } from '../../utils/schema.js';
+import type { ReactNode } from 'react';
+import type { RawRequestData, RequestData } from '../../requests/types.js';
+export interface ExampleRequestItem {
+    id: string;
+    name: string;
+    description?: string;
+    data: RawRequestData;
+    encoded: RequestData;
+}
+export declare function getExampleRequests(path: string, operation: NoReference<MethodInformation>, ctx: RenderContext): ExampleRequestItem[];
+export declare function RequestTabs({ path, operation, ctx, }: {
+    path: string;
+    operation: NoReference<MethodInformation>;
+    ctx: RenderContext;
+}): Promise<string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined>;
+//# sourceMappingURL=request-tabs.d.ts.map

package/dist/ui/operation/request-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"request-tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/operation/request-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EAAE,KAAK,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AASpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAWpE,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,EACzC,GAAG,EAAE,aAAa,GACjB,kBAAkB,EAAE,CA0CtB;AAkFD,wBAAsB,WAAW,CAAC,EAChC,IAAI,EACJ,SAAS,EACT,GAAG,GACJ,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC1C,GAAG,EAAE,aAAa,CAAC;CACpB,kIASA"}

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

@@ -0,0 +1,143 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getPreferredType } from '../../utils/schema.js';
+import { Accordions, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, } from '../../ui/components/accordion.js';
+import { sample } from 'openapi-sampler';
+import { encodeRequestData } from '../../requests/media/encode.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger, } from 'fumadocs-ui/components/tabs';
+import { resolveRequestData } from '../../utils/url.js';
+import { MethodLabel } from '../components/method-label.js';
+export function getExampleRequests(path, operation, ctx) {
+    const media = operation.requestBody
+        ? getPreferredType(operation.requestBody.content)
+        : null;
+    const bodyOfType = media ? operation.requestBody?.content[media] : null;
+    if (bodyOfType?.examples) {
+        const result = [];
+        for (const [key, value] of Object.entries(bodyOfType.examples)) {
+            const data = getRequestData(path, operation, key, ctx);
+            result.push({
+                id: key,
+                name: value.summary ?? key,
+                description: value.description,
+                data,
+                encoded: encodeRequestData(data, ctx.mediaAdapters, operation.parameters ?? []),
+            });
+        }
+        if (result.length > 0)
+            return result;
+    }
+    const data = getRequestData(path, operation, null, ctx);
+    return [
+        {
+            id: '_default',
+            name: 'Default',
+            description: bodyOfType?.schema?.description,
+            data,
+            encoded: encodeRequestData(data, ctx.mediaAdapters, operation.parameters ?? []),
+        },
+    ];
+}
+function getRequestData(path, method, sampleKey, _ctx) {
+    const result = {
+        path: {},
+        cookie: {},
+        header: {},
+        query: {},
+        method: method.method,
+    };
+    for (const param of method.parameters ?? []) {
+        let schema = param.schema;
+        let value;
+        if (!schema && param.content) {
+            const type = getPreferredType(param.content);
+            const content = type ? param.content[type] : undefined;
+            if (!content || !content.schema)
+                throw new Error(`Cannot find parameter schema for ${param.name} in ${path} ${method.method}`);
+            schema = content.schema;
+            value = content.example ?? param.example;
+        }
+        else {
+            value = param.example;
+        }
+        if (param.required) {
+            value ?? (value = sample(schema));
+        }
+        else if (value === undefined) {
+            continue;
+        }
+        switch (param.in) {
+            case 'cookie':
+                result.cookie[param.name] = value;
+                break;
+            case 'header':
+                result.header[param.name] = value;
+                break;
+            case 'query':
+                result.query[param.name] = value;
+                break;
+            default:
+                result.path[param.name] = value;
+        }
+    }
+    if (method.requestBody) {
+        const body = method.requestBody.content;
+        const type = getPreferredType(body);
+        if (!type)
+            throw new Error(`Cannot find body schema for ${path} ${method.method}: missing media type`);
+        result.bodyMediaType = type;
+        const bodyOfType = body[type];
+        if (bodyOfType.examples && sampleKey) {
+            result.body = bodyOfType.examples[sampleKey].value;
+        }
+        else if (bodyOfType.example) {
+            result.body = bodyOfType.example;
+        }
+        else {
+            result.body = sample((bodyOfType?.schema ?? {}), {
+                skipReadOnly: method.method !== 'GET',
+                skipWriteOnly: method.method === 'GET',
+                skipNonRequired: true,
+            });
+        }
+    }
+    return result;
+}
+export async function RequestTabs({ path, operation, ctx, }) {
+    if (!operation.requestBody)
+        return null;
+    const { renderRequestTabs = renderRequestTabsDefault } = ctx.content ?? {};
+    return renderRequestTabs(getExampleRequests(path, operation, ctx), {
+        ...ctx,
+        route: path,
+        operation,
+    });
+}
+function renderRequestTabsDefault(items, ctx) {
+    function renderItem(item) {
+        const requestData = item.data;
+        const displayNames = {
+            body: (_jsxs(_Fragment, { children: ["Body", _jsx("code", { className: "text-xs text-fd-muted-foreground ms-auto", children: requestData.bodyMediaType })] })),
+            cookie: 'Cookie',
+            header: 'Header',
+            query: 'Query Parameters',
+            path: 'Path Parameters',
+        };
+        return (_jsxs(_Fragment, { children: [item.description && ctx.renderMarkdown(item.description), _jsxs("div", { className: "flex flex-row gap-2 items-center justify-between", children: [_jsx(MethodLabel, { children: requestData.method }), _jsx("code", { children: resolveRequestData(ctx.route, item.encoded) })] }), _jsx(Accordions, { type: "multiple", className: "mt-2", children: Object.entries(displayNames).map(([k, v]) => {
+                        const data = requestData[k];
+                        if (!data || Object.keys(data).length === 0)
+                            return;
+                        return (_jsxs(AccordionItem, { value: k, children: [_jsx(AccordionHeader, { children: _jsx(AccordionTrigger, { children: v }) }), _jsx(AccordionContent, { className: "prose-no-margin", children: ctx.renderCodeBlock('json', JSON.stringify(data, null, 2)) })] }, k));
+                    }) })] }));
+    }
+    let children;
+    if (items.length > 1) {
+        children = (_jsxs(Tabs, { defaultValue: items[0].id, children: [_jsx(TabsList, { children: items.map((item) => (_jsx(TabsTrigger, { value: item.id, children: item.name }, item.id))) }), items.map((item) => (_jsx(TabsContent, { value: item.id, children: renderItem(item) }, item.id)))] }));
+    }
+    else if (items.length === 1) {
+        children = renderItem(items[0]);
+    }
+    else {
+        children = _jsx("p", { className: "text-fd-muted-foreground text-xs", children: "Empty" });
+    }
+    return (_jsxs("div", { className: "p-3 rounded-xl border prose-no-margin bg-fd-card text-fd-card-foreground shadow-md", children: [_jsx("p", { className: "font-semibold border-b pb-2", children: "Example Requests" }), children] }));
+}

package/dist/ui/operation/response-tabs.d.ts

@@ -0,0 +1,32 @@
+import type { MethodInformation, RenderContext, ResponseObject } from '../../types.js';
+import { type NoReference } from '../../utils/schema.js';
+import type { ReactNode } from 'react';
+export interface ResponseTab {
+    /**
+     * HTTP response code
+     */
+    code: string;
+    response: NoReference<ResponseObject>;
+    /**
+     * media type of response
+     */
+    mediaType: string | null;
+    examples?: ResponseExample[];
+}
+interface ResponseExample {
+    /**
+     * generated/defined example data
+     */
+    sample: unknown;
+    label: string;
+    /**
+     * description (in Markdown)
+     */
+    description?: string;
+}
+export declare function ResponseTabs({ operation, ctx, }: {
+    operation: NoReference<MethodInformation>;
+    ctx: RenderContext;
+}): ReactNode | Promise<ReactNode>;
+export {};
+//# sourceMappingURL=response-tabs.d.ts.map

package/dist/ui/operation/response-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"response-tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/operation/response-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,EAAE,KAAK,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAUpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb,QAAQ,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IACtC;;OAEG;IACH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAC9B;AAED,UAAU,eAAe;IACvB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,GACJ,EAAE;IACD,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC1C,GAAG,EAAE,aAAa,CAAC;CACpB,kCAwCA"}

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

@@ -0,0 +1,59 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { getPreferredType } from '../../utils/schema.js';
+import { Accordions, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, } from '../../ui/components/accordion.js';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { sample } from 'openapi-sampler';
+export function ResponseTabs({ operation, ctx, }) {
+    if (!operation.responses)
+        return null;
+    const tabs = [];
+    for (const [code, response] of Object.entries(operation.responses)) {
+        const media = response.content ? getPreferredType(response.content) : null;
+        const responseOfType = media ? response.content?.[media] : null;
+        const tab = {
+            code,
+            response,
+            mediaType: media,
+        };
+        if (responseOfType?.examples) {
+            tab.examples ?? (tab.examples = []);
+            for (const [key, sample] of Object.entries(responseOfType.examples)) {
+                const title = sample?.summary ?? `Example ${key}`;
+                tab.examples.push({
+                    label: title,
+                    sample: sample.value,
+                    description: sample?.description,
+                });
+            }
+        }
+        else if (responseOfType?.example || responseOfType?.schema) {
+            tab.examples ?? (tab.examples = []);
+            tab.examples.push({
+                label: 'Example',
+                sample: responseOfType.example ?? sample(responseOfType.schema),
+            });
+        }
+        tabs.push(tab);
+    }
+    const { renderResponseTabs = renderResponseTabsDefault } = ctx.content ?? {};
+    return renderResponseTabs(tabs, ctx);
+}
+function renderResponseTabsDefault(tabs, ctx) {
+    function renderExampleContent(example) {
+        return (_jsxs(_Fragment, { children: [example.description && ctx.renderMarkdown(example.description), ctx.renderCodeBlock('json', JSON.stringify(example.sample, null, 2))] }));
+    }
+    async function renderResponse(tab) {
+        const { examples = [] } = tab;
+        let slot = 'Empty';
+        if (examples.length > 1) {
+            slot = (_jsx(Accordions, { type: "single", className: "pt-2", defaultValue: examples[0].label, children: examples.map((example, i) => (_jsxs(AccordionItem, { value: example.label, children: [_jsx(AccordionHeader, { children: _jsx(AccordionTrigger, { children: example.label }) }), _jsx(AccordionContent, { className: "prose-no-margin", children: renderExampleContent(example) })] }, i))) }));
+        }
+        else if (examples.length === 1) {
+            slot = renderExampleContent(examples[0]);
+        }
+        return _jsx(Tab, { value: tab.code, children: slot });
+    }
+    if (tabs.length === 0)
+        return null;
+    return (_jsx(Tabs, { groupId: "fumadocs_openapi_responses", items: tabs.map((tab) => tab.code), children: tabs.map(renderResponse) }));
+}

package/dist/ui/operation/usage-tabs/client.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import type { CodeUsageGenerator } from './index.js';
+import type { ExampleRequestItem } from '../request-tabs.js';
+import type { RawRequestData, RequestData } from '../../../requests/types.js';
+export type ExampleUpdateListener = (data: RawRequestData, encoded: RequestData) => void;
+export declare function UsageTabsProvider({ route, examples, defaultExampleId, children, }: {
+    route: string;
+    examples: ExampleRequestItem[];
+    defaultExampleId?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useExampleRequests(): {
+    route: string;
+    examples: ExampleRequestItem[];
+    example: string | undefined;
+    setExample: (id: string) => void;
+    setExampleData: (data: RawRequestData, encoded: RequestData) => void;
+    addListener: (listener: ExampleUpdateListener) => void;
+    removeListener: (listener: ExampleUpdateListener) => void;
+};
+export declare function UsageTabsSelector(): import("react/jsx-runtime").JSX.Element | null;
+export declare function UsageTab(sample: CodeUsageGenerator): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=client.d.ts.map

package/dist/ui/operation/usage-tabs/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../../src/ui/operation/usage-tabs/client.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKL,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,GAAG,CAAC;AAC5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpE,MAAM,MAAM,qBAAqB,GAAG,CAClC,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,WAAW,KACjB,IAAI,CAAC;AAaV,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAwDA;AAED,wBAAgB,kBAAkB;WA9EzB,MAAM;cACH,kBAAkB,EAAE;aACrB,MAAM,GAAG,SAAS;gBACf,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;oBAChB,CAAC,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI;iBAEvD,CAAC,QAAQ,EAAE,qBAAqB,KAAK,IAAI;oBACtC,CAAC,QAAQ,EAAE,qBAAqB,KAAK,IAAI;EAyE1D;AAED,wBAAgB,iBAAiB,mDAkChC;AAED,wBAAgB,QAAQ,CAAC,MAAM,EAAE,kBAAkB,kDAkDlD"}

package/dist/ui/operation/{example-panel → usage-tabs}/client.js

@@ -1,13 +1,57 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useApiContext, useServerSelectContext } from '../../../ui/contexts/api.js';
-import { useOperationContext, } from '../../../ui/contexts/operation.js';
 import { joinURL, withBase, resolveServerUrl, resolveRequestData, } from '../../../utils/url.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from '../../../ui/components/select.js';
 import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import { useState, useEffect, useMemo } from 'react';
-export function APIExampleSelector() {
-    const { example: key, setExample: setKey, examples } = useOperationContext();
+import { useState, useEffect, useMemo, createContext, useRef, use, } from 'react';
+const Context = createContext(null);
+export function UsageTabsProvider({ route, examples, defaultExampleId, children, }) {
+    const [example, setExample] = useState(() => defaultExampleId ?? examples.at(0)?.id);
+    const listeners = useRef([]);
+    return (_jsx(Context, { value: useMemo(() => ({
+            example,
+            route,
+            setExample: (newKey) => {
+                const example = examples.find((example) => example.id === newKey);
+                if (!example)
+                    return;
+                setExample(newKey);
+                for (const listener of listeners.current) {
+                    listener(example.data, example.encoded);
+                }
+            },
+            examples,
+            setExampleData(data, encoded) {
+                for (const item of examples) {
+                    if (item.id === example) {
+                        // persistent changes
+                        item.data = data;
+                        item.encoded = encoded;
+                        break;
+                    }
+                }
+                for (const listener of listeners.current) {
+                    listener(data, encoded);
+                }
+            },
+            removeListener(listener) {
+                listeners.current = listeners.current.filter((item) => item !== listener);
+            },
+            addListener(listener) {
+                // initial call to listeners to ensure their data is the latest
+                // this is necessary to avoid race conditions between `useEffect()`
+                const active = examples.find((item) => item.id === example);
+                listener(active.data, active.encoded);
+                listeners.current.push(listener);
+            },
+        }), [example, route, examples]), children: children }));
+}
+export function useExampleRequests() {
+    return use(Context);
+}
+export function UsageTabsSelector() {
+    const { example: key, setExample: setKey, examples } = useExampleRequests();
     const { APIExampleSelector: Override } = useApiContext().client.operation ?? {};
     if (Override) {
         return _jsx(Override, { items: examples, value: key, onValueChange: setKey });
@@ -20,9 +64,9 @@ export function APIExampleSelector() {
     const selected = examples.find((item) => item.id === key);
     return (_jsxs(Select, { value: key, onValueChange: setKey, children: [_jsx(SelectTrigger, { className: "not-prose mb-2", children: selected && _jsx(SelectValue, { asChild: true, children: renderItem(selected) }) }), _jsx(SelectContent, { children: examples.map((item) => (_jsx(SelectItem, { value: item.id, children: renderItem(item) }, item.id))) })] }));
 }
-export function APIExampleUsageTab(sample) {
+export function UsageTab(sample) {
     const { shikiOptions, mediaAdapters } = useApiContext();
-    const { examples, example: selectedExampleId, route, addListener, removeListener, } = useOperationContext();
+    const { examples, example: selectedExampleId, route, addListener, removeListener, } = useExampleRequests();
     const { server } = useServerSelectContext();
     const [data, setData] = useState(() => examples.find((example) => example.id === selectedExampleId)?.encoded);
     useEffect(() => {

package/dist/ui/operation/usage-tabs/index.d.ts

@@ -0,0 +1,26 @@
+import type { MethodInformation, RenderContext } from '../../../types.js';
+import type { SampleGenerator } from '../../../requests/types.js';
+/**
+ * Generate code example for given programming language
+ */
+export interface CodeUsageGenerator<T = unknown> {
+    id: string;
+    lang: string;
+    label?: string;
+    /**
+     * either:
+     * - code
+     * - a function imported from a file with "use client" directive
+     * - false (disabled)
+     */
+    source?: string | SampleGenerator<T> | false;
+    /**
+     * Pass extra context to client-side source generator
+     */
+    serverContext?: T;
+}
+export declare function UsageTabs({ method, ctx, }: {
+    method: MethodInformation;
+    ctx: RenderContext;
+}): Promise<import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | (string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined)>;
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/operation/usage-tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/operation/usage-tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAWxD;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,OAAO;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;IAE7C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC;CACnB;AAED,wBAAsB,SAAS,CAAC,EAC9B,MAAM,EACN,GAAG,GACJ,EAAE;IACD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,GAAG,EAAE,aAAa,CAAC;CACpB,wWAmEA"}