fumadocs-openapi 10.0.11 → 10.1.0

package/dist/playground/schema.js

@@ -1,22 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Ajv2020 } from 'ajv/dist/2020';
-import { createContext, useContext, useMemo, useState } from 'react';
+import { createContext, use, useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { getDefaultValue } from '../playground/get-default-values.js';
+import { mergeAllOf } from '../utils/merge-schema.js';
 const SchemaContext = createContext(undefined);
 export const anyFields = {
     type: ['string', 'number', 'boolean', 'array', 'object'],
     items: true,
     additionalProperties: true,
 };
-export function SchemaProvider({ references, fieldInfoMap, children, }) {
+export function SchemaProvider({ references, fieldInfoMap, readOnly, writeOnly, children, }) {
     const ajv = useMemo(() => new Ajv2020({
         strict: false,
         validateSchema: false,
         validateFormats: false,
         schemas: references,
     }), [references]);
-    return (_jsx(SchemaContext.Provider, { value: useMemo(() => ({ references, fieldInfoMap, ajv }), [fieldInfoMap, references, ajv]), children: children }));
+    return (_jsx(SchemaContext.Provider, { value: useMemo(() => ({ references, fieldInfoMap, ajv, readOnly, writeOnly }), [references, fieldInfoMap, ajv, readOnly, writeOnly]), children: children }));
+}
+export function useSchemaScope() {
+    return use(SchemaContext);
 }
 /**
  * A hook to store dynamic info of a field, such as selected schema of `oneOf`.
@@ -26,38 +30,43 @@ export function SchemaProvider({ references, fieldInfoMap, children, }) {
  * @param depth - The depth to avoid duplicated field name with same schema (e.g. nested `oneOf`).
  */
 export function useFieldInfo(fieldName, schema, depth) {
-    const { fieldInfoMap, ajv } = useContext(SchemaContext);
+    const { fieldInfoMap, ajv } = use(SchemaContext);
     const form = useFormContext();
     const keyName = `${fieldName}:${depth}`;
-    const value = form.getValues(fieldName);
     const [info, setInfo] = useState(() => {
+        const value = form.getValues(fieldName);
         const initialInfo = fieldInfoMap.get(keyName);
         if (initialInfo)
             return initialInfo;
+        const out = {
+            oneOf: -1,
+        };
         const union = getUnion(schema);
         if (union) {
             const [members, field] = union;
-            let oneOf = members.findIndex((item) => ajv.validate(item, value));
-            if (oneOf === -1)
-                oneOf = 0;
-            return {
-                oneOf,
-                unionField: field,
-            };
+            out.oneOf = members.findIndex((item) => ajv.validate(item, value));
+            if (out.oneOf === -1)
+                out.oneOf = 0;
+            out.unionField = field;
         }
         if (Array.isArray(schema.type)) {
             const types = schema.type;
-            return {
-                selectedType: types.find((type) => {
+            out.selectedType =
+                types.find((type) => {
                     schema.type = type;
                     const match = ajv.validate(schema, value);
                     schema.type = types;
                     return match;
-                }) ?? types.at(0),
-                oneOf: -1,
-            };
+                }) ?? types.at(0);
         }
-        return { oneOf: -1 };
+        if (schema.allOf) {
+            const merged = mergeAllOf(schema);
+            if (typeof merged !== 'boolean')
+                out.intersection = {
+                    merged,
+                };
+        }
+        return out;
     });
     fieldInfoMap.set(keyName, info);
     return {
@@ -86,7 +95,7 @@ export function useFieldInfo(fieldName, schema, depth) {
  * Resolve `$ref` in the schema, **not recursive**.
  */
 export function useResolvedSchema(schema) {
-    const { references } = useContext(SchemaContext);
+    const { references } = use(SchemaContext);
     return useMemo(() => {
         if (typeof schema === 'boolean')
             return anyFields;
@@ -98,24 +107,10 @@ export function useResolvedSchema(schema) {
 export function fallbackAny(schema) {
     return typeof schema === 'boolean' ? anyFields : schema;
 }
-/**
- * We automatically merge `allOf` | `anyOf` if all members are objects, but it's also possible for them to behave same as a union (`oneOf`).
- */
-function isUnion(anyOrAllOf) {
-    return anyOrAllOf.every((item) => {
-        if (typeof item === 'boolean')
-            return true;
-        const u = item.anyOf || item.allOf;
-        return item.type !== 'object' && (!u || isUnion(u));
-    });
-}
 function getUnion(schema) {
-    if (schema.anyOf && isUnion(schema.anyOf)) {
+    if (schema.anyOf) {
         return [schema.anyOf, 'anyOf'];
     }
-    if (schema.allOf && isUnion(schema.allOf)) {
-        return [schema.allOf, 'allOf'];
-    }
     if (schema.oneOf)
         return [schema.oneOf, 'oneOf'];
 }

package/dist/requests/generators/index.d.ts

@@ -1,3 +1,3 @@
-import type { CodeUsageGenerator } from '../../ui/operation/example-panel/index.js';
+import type { CodeUsageGenerator } from '../../ui/operation/usage-tabs/index.js';
 export declare const defaultSamples: CodeUsageGenerator[];
 //# sourceMappingURL=index.d.ts.map

package/dist/requests/generators/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/requests/generators/index.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,eAAO,MAAM,cAAc,EAAE,kBAAkB,EAqC9C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/requests/generators/index.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,eAAO,MAAM,cAAc,EAAE,kBAAkB,EAqC9C,CAAC"}

package/dist/server/create.d.ts

@@ -1,7 +1,7 @@
 import { createProxy } from '../server/proxy.js';
 import type { OpenAPIV3, OpenAPIV3_1 } from 'openapi-types';
 import { type ProcessedDocument } from '../utils/process-document.js';
-import type { CodeUsageGenerator } from '../ui/operation/example-panel/index.js';
+import type { CodeUsageGenerator } from '../ui/operation/usage-tabs/index.js';
 /**
  * schema id -> file path, URL, or downloaded schema object
  */

package/dist/server/create.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/server/create.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAEvE;;GAEG;AACH,KAAK,SAAS,GAAG,MAAM,CACrB,MAAM,EACN,MAAM,GAAG,WAAW,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CACnD,CAAC;AACF,KAAK,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAE1D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,OAAO,WAAW,CAAC;IAChC,UAAU,EAAE,MAAM,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC9C,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;CAClC;AAED,wBAAgB,aAAa,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAiCzE;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,GACtC,kBAAkB,CAQpB"}
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/server/create.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE;;GAEG;AACH,KAAK,SAAS,GAAG,MAAM,CACrB,MAAM,EACN,MAAM,GAAG,WAAW,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CACnD,CAAC;AACF,KAAK,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAE1D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,OAAO,WAAW,CAAC;IAChC,UAAU,EAAE,MAAM,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC9C,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;CAClC;AAED,wBAAgB,aAAa,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAiCzE;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,GACtC,kBAAkB,CAQpB"}

package/dist/server/source-api.d.ts

@@ -7,11 +7,13 @@ declare module 'fumadocs-core/source' {
         /**
          * Added by Fumadocs OpenAPI
          */
-        _openapi?: {
-            method?: string;
-        };
+        _openapi?: InternalOpenAPIMeta;
     }
 }
+export interface InternalOpenAPIMeta {
+    method?: string;
+    webhook?: boolean;
+}
 /**
  * Fumadocs Source API integration, pass this to `plugins` array in `loader()`.
  */

package/dist/server/source-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"source-api.d.ts","sourceRoot":"","sources":["../../src/server/source-api.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,mBAAmB,EACnB,MAAM,EAEP,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAiB,QAAQ;QACvB;;WAEG;QACH,QAAQ,CAAC,EAAE;YACT,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;KACH;CACF;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,YAAY,CAgC5C;AAED,UAAU,eAAgB,SAAQ,QAAQ;IACxC,eAAe,EAAE,MAAM,YAAY,CAAC;CACrC;AAED;;GAEG;AACH,wBAAsB,aAAa,CACjC,IAAI,EAAE,aAAa,EACnB,OAAO,GAAE,oBAAoB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CACb,GACL,OAAO,CACR,MAAM,CAAC;IACL,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAAC,CACH,CA+BA;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,mBAAmB,CAExD"}
+{"version":3,"file":"source-api.d.ts","sourceRoot":"","sources":["../../src/server/source-api.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,mBAAmB,EACnB,MAAM,EAEP,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAiB,QAAQ;QACvB;;WAEG;QACH,QAAQ,CAAC,EAAE,mBAAmB,CAAC;KAChC;CACF;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,YAAY,CAqC5C;AAED,UAAU,eAAgB,SAAQ,QAAQ;IACxC,eAAe,EAAE,MAAM,YAAY,CAAC;CACrC;AAED;;GAEG;AACH,wBAAsB,aAAa,CACjC,IAAI,EAAE,aAAa,EACnB,OAAO,GAAE,oBAAoB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CACb,GACL,OAAO,CACR,MAAM,CAAC;IACL,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAAC,CACH,CAoCA;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,mBAAmB,CAExD"}

package/dist/server/source-api.js

@@ -14,13 +14,14 @@ export function openapiPlugin() {
                 const file = this.storage.read(filePath);
                 if (!file || file.format !== 'page')
                     return node;
-                const data = file.data;
-                let method;
-                if ('_openapi' in data && typeof data._openapi === 'object') {
-                    method = data._openapi.method;
+                const openApiData = file.data._openapi;
+                if (!openApiData || typeof openApiData !== 'object')
+                    return node;
+                if (openApiData.webhook) {
+                    node.name = (_jsxs(_Fragment, { children: [node.name, ' ', _jsx("span", { className: "ms-auto border border-current px-1 rounded-lg text-xs text-nowrap font-mono", children: "Webhook" })] }));
                 }
-                if (method) {
-                    node.name = (_jsxs(_Fragment, { children: [node.name, ' ', _jsx(MethodLabel, { className: "ms-auto text-xs text-nowrap", children: method })] }));
+                else if (openApiData.method) {
+                    node.name = (_jsxs(_Fragment, { children: [node.name, ' ', _jsx(MethodLabel, { className: "ms-auto text-xs text-nowrap", children: openApiData.method })] }));
                 }
                 return node;
             },
@@ -43,11 +44,16 @@ export async function openapiSource(from, options = {}) {
             path: `${baseDir}/${entry.path}`,
             data: {
                 ...entry.info,
-                getAPIPageProps: () => toBody(entry),
+                getAPIPageProps() {
+                    const props = toBody(entry);
+                    props.showDescription ?? (props.showDescription = true);
+                    return props;
+                },
                 _openapi: {
                     method: entry.type === 'operation' || entry.type === 'webhook'
                         ? entry.item.method
                         : undefined,
+                    webhook: entry.type === 'webhook',
                 },
             },
         });

package/dist/types.d.ts

@@ -5,8 +5,8 @@ import type { ProcessedDocument } from './utils/process-document.js';
 import type { MediaAdapter } from './requests/media/adapter.js';
 import type { OpenAPIOptions } from './server/index.js';
 import type { CreateAPIPageOptions } from './ui/api-page.js';
-import type { CodeUsageGenerator } from './ui/operation/example-panel/index.js';
-import type { ReactNode } from 'react';
+import type { CodeUsageGenerator } from './ui/operation/usage-tabs/index.js';
+import type { HTMLAttributes, ReactNode } from 'react';
 export type Document = V3_1.Document;
 export type OperationObject = V3_1.OperationObject;
 export type ParameterObject = V3_1.ParameterObject;
@@ -32,7 +32,7 @@ export interface RenderContext extends Pick<OpenAPIOptions, 'proxyUrl'>, CreateA
      */
     schema: ProcessedDocument;
     mediaAdapters: Record<string, MediaAdapter>;
-    renderHeading: (depth: number, text: string) => ReactNode;
+    renderHeading: (depth: number, text: string, props?: HTMLAttributes<HTMLHeadingElement>) => ReactNode;
     renderMarkdown: (text: string) => ReactNode;
     renderCodeBlock: (lang: string, code: string) => ReactNode;
 }

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;AACrC,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;AACnD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;AACnD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC;AAC7D,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;AACvC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;AAC7C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;AACjD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC;AAC7D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,eAAe,CAAC,GAAG;IAC7D,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,EAAE,CAAC;IACnD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC;AAEF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,EACtC,oBAAoB;IACtB,OAAO,EAAE,WAAW,CAAC,YAAY,CAAC,EAAE,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,iBAAiB,CAAC;IAE1B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAE5C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IAC1D,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IAC5C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;CAC5D"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;AACrC,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;AACnD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;AACnD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC;AAC7D,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;AACvC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;AAC7C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;AACjD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC;AAC7D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,eAAe,CAAC,GAAG;IAC7D,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,EAAE,CAAC;IACnD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC;AAEF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,EACtC,oBAAoB;IACtB,OAAO,EAAE,WAAW,CAAC,YAAY,CAAC,EAAE,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,iBAAiB,CAAC;IAE1B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAE5C,aAAa,EAAE,CACb,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,KAAK,CAAC,EAAE,cAAc,CAAC,kBAAkB,CAAC,KACvC,SAAS,CAAC;IACf,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IAC5C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;CAC5D"}

package/dist/ui/api-page.d.ts

@@ -1,5 +1,5 @@
 import type { MethodInformation, RenderContext } from '../types.js';
-import { type NoReference, type ResolvedSchema } from '../utils/schema.js';
+import { type NoReference } from '../utils/schema.js';
 import type { OpenAPIV3_1 } from 'openapi-types';
 import type { ProcessedDocument } from '../utils/process-document.js';
 import { MediaAdapter } from '../requests/media/adapter.js';
@@ -7,8 +7,10 @@ import type { FC, ReactNode } from 'react';
 import { type HighlightOptionsCommon, type HighlightOptionsThemes } from 'fumadocs-core/highlight';
 import type { OpenAPIServer } from '../server/index.js';
 import type { APIPageClientOptions } from './client/index.js';
-import type { CodeUsageGenerator, ResponseTab } from './operation/example-panel/index.js';
-import type { SchemaUIProps } from './schema/client.js';
+import type { CodeUsageGenerator } from './operation/usage-tabs/index.js';
+import type { SchemaUIOptions } from './schema/index.js';
+import type { ResponseTab } from './operation/response-tabs.js';
+import type { ExampleRequestItem } from './operation/request-tabs.js';
 type Awaitable<T> = T | Promise<T>;
 export interface CreateAPIPageOptions {
     /**
@@ -40,6 +42,10 @@ export interface CreateAPIPageOptions {
      */
     content?: {
         renderResponseTabs?: (tabs: ResponseTab[], ctx: RenderContext) => Awaitable<ReactNode>;
+        renderRequestTabs: (items: ExampleRequestItem[], ctx: RenderContext & {
+            route: string;
+            operation: NoReference<MethodInformation>;
+        }) => Awaitable<ReactNode>;
         renderAPIExampleLayout?: (slots: {
             selector: ReactNode;
             usageTabs: ReactNode;
@@ -64,6 +70,7 @@ export interface CreateAPIPageOptions {
         }, ctx: RenderContext) => Awaitable<ReactNode>;
         renderOperationLayout?: (slots: {
             header: ReactNode;
+            description: ReactNode;
             apiExample: ReactNode;
             apiPlayground: ReactNode;
             authSchemes: ReactNode;
@@ -71,12 +78,14 @@ export interface CreateAPIPageOptions {
             body: ReactNode;
             responses: ReactNode;
             callbacks: ReactNode;
-        }, ctx: RenderContext, method: MethodInformation) => Awaitable<ReactNode>;
+        }, ctx: RenderContext, method: NoReference<MethodInformation>) => Awaitable<ReactNode>;
         renderWebhookLayout?: (slots: {
             header: ReactNode;
+            description: ReactNode;
             authSchemes: ReactNode;
             paremeters: ReactNode;
             body: ReactNode;
+            requests: ReactNode;
             responses: ReactNode;
             callbacks: ReactNode;
         }) => Awaitable<ReactNode>;
@@ -85,9 +94,7 @@ export interface CreateAPIPageOptions {
      * Info UI for JSON schemas
      */
     schemaUI?: {
-        render?: (options: Omit<SchemaUIProps, 'generated'> & {
-            root: ResolvedSchema;
-        }, ctx: RenderContext) => Awaitable<ReactNode>;
+        render?: (options: SchemaUIOptions, ctx: RenderContext) => Awaitable<ReactNode>;
         /**
          * Show examples under the generated content of JSON schemas.
          *
@@ -116,7 +123,8 @@ export interface CreateAPIPageOptions {
 }
 export interface ApiPageProps {
     document: Promise<ProcessedDocument> | string | ProcessedDocument;
-    hasHead?: boolean;
+    showTitle?: boolean;
+    showDescription?: boolean;
     /**
      * An array of operations
      */

package/dist/ui/api-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api-page.d.ts","sourceRoot":"","sources":["../../src/ui/api-page.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"api-page.d.ts","sourceRoot":"","sources":["../../src/ui/api-page.tsx"],"names":[],"mappings":"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"}

package/dist/ui/api-page.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any -- rehype-react without types */
 import Slugger from 'github-slugger';
 import { Operation } from '../ui/operation/index.js';
-import { createMethod, } from '../utils/schema.js';
+import { createMethod } from '../utils/schema.js';
 import { defaultAdapters } from '../requests/media/adapter.js';
 import { highlight, } from 'fumadocs-core/highlight';
 import { ApiProviderLazy } from './contexts/api.lazy.js';
@@ -60,9 +60,9 @@ export function createAPIPage(server, options = {}) {
                 ...options.mediaAdapters,
             },
             slugger,
-            renderHeading(depth, text) {
+            renderHeading(depth, text, props) {
                 const id = slugger.slug(text);
-                return (_jsx(Heading, { id: id, as: `h${depth}`, children: text }, id));
+                return (_jsx(Heading, { id: id, as: `h${depth}`, ...props, children: text }, id));
             },
             async renderMarkdown(text) {
                 processor ?? (processor = createMarkdownProcessor());
@@ -85,10 +85,10 @@ export function createAPIPage(server, options = {}) {
         return _jsx(APIPage, { ...props, ctx: ctx });
     };
 }
-async function APIPage({ hasHead = false, operations, webhooks, ctx, }) {
+async function APIPage({ showTitle: hasHead = false, showDescription, operations, webhooks, ctx, }) {
     const { dereferenced } = ctx.schema;
     let { renderPageLayout } = ctx.content ?? {};
-    renderPageLayout ?? (renderPageLayout = (slots) => (_jsxs("div", { className: "flex flex-col gap-24 text-sm", children: [slots.operations?.map((op) => op.children), slots.webhooks?.map((op) => op.children)] })));
+    renderPageLayout ?? (renderPageLayout = (slots) => (_jsxs("div", { className: "flex flex-col gap-24 text-sm @container", children: [slots.operations?.map((op) => op.children), slots.webhooks?.map((op) => op.children)] })));
     const content = await renderPageLayout({
         operations: operations?.map((item) => {
             const pathItem = dereferenced.paths?.[item.path];
@@ -100,7 +100,7 @@ async function APIPage({ hasHead = false, operations, webhooks, ctx, }) {
             const method = createMethod(item.method, pathItem, operation);
             return {
                 item,
-                children: (_jsx(Operation, { method: method, path: item.path, ctx: ctx, hasHead: hasHead }, `${item.path}:${item.method}`)),
+                children: (_jsx(Operation, { method: method, path: item.path, ctx: ctx, showTitle: hasHead, showDescription: showDescription }, `${item.path}:${item.method}`)),
             };
         }),
         webhooks: webhooks?.map((item) => {
@@ -112,7 +112,7 @@ async function APIPage({ hasHead = false, operations, webhooks, ctx, }) {
                 throw new Error(`[Fumadocs OpenAPI] Method ${item.method} not found in webhook: ${item.name}`);
             return {
                 item,
-                children: (_jsx(Operation, { type: "webhook", method: createMethod(item.method, webhook, hook), ctx: ctx, path: `/${item.name}`, hasHead: hasHead }, `${item.name}:${item.method}`)),
+                children: (_jsx(Operation, { type: "webhook", method: createMethod(item.method, webhook, hook), ctx: ctx, path: `/${item.name}`, showTitle: hasHead, showDescription: showDescription }, `${item.name}:${item.method}`)),
             };
         }),
     }, ctx);

package/dist/ui/client/index.d.ts

@@ -1,7 +1,7 @@
 import type { PlaygroundClientOptions } from '../../playground/client.js';
 import type { MediaAdapter } from '../../requests/media/adapter.js';
-import type { APIExampleItem } from '../operation/example-panel/index.js';
 import type { FC } from 'react';
+import type { ExampleRequestItem } from '../operation/request-tabs.js';
 export interface APIPageClientOptions {
     playground?: PlaygroundClientOptions;
     operation?: OperationClientOptions;
@@ -20,7 +20,7 @@ export interface APIPageClientOptions {
 }
 export interface OperationClientOptions {
     APIExampleSelector?: FC<{
-        items: APIExampleItem[];
+        items: ExampleRequestItem[];
         value: string | undefined;
         onValueChange: (id: string) => void;
     }>;

package/dist/ui/client/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/client/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,SAAS,CAAC,EAAE,sBAAsB,CAAC;IAEnC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,sBAAsB;IACrC,kBAAkB,CAAC,EAAE,EAAE,CAAC;QACtB,KAAK,EAAE,cAAc,EAAE,CAAC;QAExB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAC1B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;KACrC,CAAC,CAAC;CACJ;AAED,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,oBAAyB,GACjC,oBAAoB,CAEtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/client/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,SAAS,CAAC,EAAE,sBAAsB,CAAC;IAEnC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,sBAAsB;IACrC,kBAAkB,CAAC,EAAE,EAAE,CAAC;QACtB,KAAK,EAAE,kBAAkB,EAAE,CAAC;QAE5B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAC1B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;KACrC,CAAC,CAAC;CACJ;AAED,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,oBAAyB,GACjC,oBAAoB,CAEtB"}

package/dist/ui/operation/index.d.ts

@@ -1,11 +1,12 @@
 import { type ReactNode } from 'react';
 import type { MethodInformation, RenderContext } from '../../types.js';
-export declare function Operation({ type, path, method, ctx, hasHead, headingLevel, }: {
+export declare function Operation({ type, path, method, ctx, showTitle, showDescription, headingLevel, }: {
     type?: 'webhook' | 'operation';
     path: string;
     method: MethodInformation;
     ctx: RenderContext;
-    hasHead?: boolean;
+    showTitle?: boolean;
+    showDescription?: boolean;
     headingLevel?: number;
-}): Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined>;
+}): Promise<string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined>;
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/operation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/operation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAEV,iBAAiB,EACjB,aAAa,EAEd,MAAM,SAAS,CAAC;AAqCjB,wBAAsB,SAAS,CAAC,EAC9B,IAAkB,EAClB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,OAAO,EACP,YAAgB,GACjB,EAAE;IACD,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,iBAAiB,CAAC;IAC1B,GAAG,EAAE,aAAa,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,kIAsQA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/operation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAEV,iBAAiB,EACjB,aAAa,EAEd,MAAM,SAAS,CAAC;AAsCjB,wBAAsB,SAAS,CAAC,EAC9B,IAAkB,EAClB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,SAAS,EACT,eAAe,EACf,YAAgB,GACjB,EAAE;IACD,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,iBAAiB,CAAC;IAC1B,GAAG,EAAE,aAAa,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,kIA8RA"}

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,45 @@ 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]) => {
+        bodyNode = (_jsxs(SelectTabs, { defaultValue: defaultValue, children: [_jsxs("div", { className: "flex gap-2 items-end justify-between", children: [ctx.renderHeading(headingLevel, 'Request Body', {
+                            className: 'my-0!',
+                        }), contentTypes.length > 1 ? (_jsx(SelectTabTrigger, { items: contentTypes.map(([key]) => key) })) : (_jsx("p", { className: "text-sm text-fd-muted-foreground font-medium not-prose", children: defaultValue }))] }), 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 +60,21 @@ 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]) => {
+        authNode = (_jsxs(SelectTabs, { defaultValue: names[0], children: [_jsxs("div", { className: "flex items-end justify-between gap-2", children: [ctx.renderHeading(headingLevel, 'Authorization'), names.length > 1 ? (_jsx(SelectTabTrigger, { items: names, className: "mb-4" })) : (_jsx("p", { className: "text-sm text-fd-muted-foreground font-medium not-prose mb-7", children: names[0] }))] }), securities.map((security, i) => (_jsx(SelectTab, { value: names[i], children: Object.entries(security).map(([key, scopes]) => {
                         const scheme = securitySchemes?.[key];
                         if (!scheme)
                             return;
@@ -71,37 +84,38 @@ 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)))] }));
+        callbacksNode = (_jsxs(SelectTabs, { defaultValue: defaultValue, children: [_jsxs("div", { className: "flex justify-between gap-2 items-end", children: [ctx.renderHeading(headingLevel, 'Callbacks'), callbacks.length > 1 ? (_jsx(SelectTabTrigger, { items: callbacks.map(([key]) => key), className: "mb-4" })) : (_jsx("p", { className: "text-sm text-fd-muted-foreground font-medium not-prose mb-7", children: defaultValue }))] }), 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 }),
         });
     }
 }
@@ -117,7 +131,7 @@ async function ResponseAccordion({ status, operation, ctx, }) {
             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 }));
     }
-    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 +140,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, }) {