fumadocs-openapi 5.4.13 → 5.5.0

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { OpenAPIV3 } from 'openapi-types';
 import Slugger from 'github-slugger';
 import { ComponentType, ReactNode } from 'react';
+import { CodeToHastOptionsCommon, CodeOptionsThemes, BuiltinTheme } from 'shiki';
 
 interface BaseRequestField {
     name: string;
@@ -189,6 +190,7 @@ interface RenderContext {
      * Generate code samples for endpoint.
      */
     generateCodeSamples?: (endpoint: EndpointSample) => Awaitable<CodeSample[]>;
+    shikiOptions?: Omit<CodeToHastOptionsCommon, 'lang'> & CodeOptionsThemes<BuiltinTheme>;
 }
 
 type DocumentContext = {

package/dist/index.js

@@ -228,6 +228,7 @@ async function generateTags(pathOrDocument, options = {}) {
                 });
             }
         }
+        const displayName = info && 'x-displayName' in info && typeof info['x-displayName'] === 'string' ? info['x-displayName'] : idToTitle(tag);
         return {
             tag,
             content: generateDocument({
@@ -238,7 +239,7 @@ async function generateTags(pathOrDocument, options = {}) {
                     hasHead: true
                 },
                 dereferenced: document,
-                title: idToTitle(tag),
+                title: displayName,
                 description: info?.description,
                 context: {
                     type: 'tag',

package/dist/server/index.d.ts

@@ -1,6 +1,7 @@
 import { OpenAPIV3 } from 'openapi-types';
 import { ComponentType, ReactNode, FC } from 'react';
 import Slugger from 'github-slugger';
+import { CodeToHastOptionsCommon, CodeOptionsThemes, BuiltinTheme } from 'shiki';
 import { BuildPageTreeOptions } from 'fumadocs-core/source';
 
 interface BaseRequestField {
@@ -180,9 +181,10 @@ interface RenderContext {
      * Generate code samples for endpoint.
      */
     generateCodeSamples?: (endpoint: EndpointSample) => Awaitable<CodeSample[]>;
+    shikiOptions?: Omit<CodeToHastOptionsCommon, 'lang'> & CodeOptionsThemes<BuiltinTheme>;
 }
 
-interface ApiPageProps extends Pick<RenderContext, 'generateCodeSamples' | 'generateTypeScriptSchema'> {
+interface ApiPageProps extends Pick<RenderContext, 'generateCodeSamples' | 'generateTypeScriptSchema' | 'shikiOptions'> {
     document: string | OpenAPIV3.Document;
     /**
      * An array of operations
@@ -190,6 +192,7 @@ interface ApiPageProps extends Pick<RenderContext, 'generateCodeSamples' | 'gene
     operations: Operation[];
     hasHead: boolean;
     renderer?: Partial<Renderer>;
+    disableCache?: boolean;
 }
 interface Operation {
     path: string;

package/dist/server/index.js

@@ -79,7 +79,7 @@ function generateSample(path, method, { baseUrl, document }) {
         for (const security of getSecurities(requirements[0], document)){
             const prefix = getSecurityPrefix(security);
             params.push({
-                name: 'Authorization',
+                name: security.type === 'apiKey' ? security.name : 'Authorization',
                 schema: {
                     type: 'string'
                 },
@@ -274,7 +274,11 @@ print(response.text)`;
 
 async function getTypescriptSchema(endpoint, code) {
     if (code in endpoint.responses) {
-        return compile(endpoint.responses[code].schema, 'Response', {
+        return compile(// re-running on the same schema results in error
+        // because it uses `defineProperty` to define internal references
+        // we clone the schema to fix this problem
+        structuredClone(endpoint.responses[code].schema), 'Response', {
+            $refOptions: false,
             bannerComment: '',
             additionalProperties: false,
             format: true,
@@ -435,9 +439,28 @@ function idToTitle(id) {
     return result.join('');
 }
 
+const sharedTransformers = [
+    {
+        name: 'fumadocs:pre-process',
+        line (hast) {
+            if (hast.children.length === 0) {
+                // Keep the empty lines when using grid layout
+                hast.children.push({
+                    type: 'text',
+                    value: ' '
+                });
+            }
+        }
+    }
+];
+
 const processor = remark().use(remarkGfm).use(remarkImage, {
     useImport: false
-}).use(remarkRehype).use(rehypeCode);
+}).use(remarkRehype).use(rehypeCode, {
+    langs: [],
+    lazy: true,
+    transformers: sharedTransformers
+});
 async function Markdown({ text }) {
     const nodes = processor.parse({
         value: text
@@ -992,22 +1015,7 @@ async function ResponseTabs({ endpoint, operation, ctx: { renderer, generateType
     };
 }
 
-const sharedTransformers = [
-    {
-        name: 'fumadocs:pre-process',
-        line (hast) {
-            if (hast.children.length === 0) {
-                // Keep the empty lines when using grid layout
-                hast.children.push({
-                    type: 'text',
-                    value: ' '
-                });
-            }
-        }
-    }
-];
-
-async function CodeBlock({ code, lang, ...options }) {
+async function CodeBlock({ code, lang, options, ...rest }) {
     const html = await codeToHast(code, {
         lang,
         defaultColor: false,
@@ -1015,22 +1023,20 @@ async function CodeBlock({ code, lang, ...options }) {
             light: 'github-light',
             dark: 'github-dark'
         },
-        transformers: sharedTransformers
+        transformers: sharedTransformers,
+        ...options
     });
     const codeblock = toJsxRuntime(html, {
         development: false,
-        // @ts-expect-error -- untyped
-        jsx,
-        // @ts-expect-error -- untyped
-        jsxs,
+        jsx: jsx,
+        jsxs: jsxs,
+        Fragment: Fragment$1,
         components: {
-            // eslint-disable-next-line react/no-unstable-nested-components -- server component
             pre: (props)=>/*#__PURE__*/ jsx(Base.Pre, {
                     ...props,
-                    ...options
+                    ...rest
                 })
-        },
-        Fragment: Fragment$1
+        }
     });
     return /*#__PURE__*/ jsx(Base.CodeBlock, {
         className: "my-0",
@@ -1038,47 +1044,55 @@ async function CodeBlock({ code, lang, ...options }) {
     });
 }
 
-const defaultRenderer = {
-    Root,
-    API,
-    APIInfo,
-    APIExample: APIExample$1,
-    Responses: Tabs,
-    Response: Tab,
-    ResponseTypes: (props)=>/*#__PURE__*/ jsx(Accordions, {
-            type: "single",
-            className: "!-m-4 border-none pt-2",
-            defaultValue: "Response",
-            children: props.children
-        }),
-    ResponseType: (props)=>/*#__PURE__*/ jsx(Accordion, {
-            title: props.label,
-            children: /*#__PURE__*/ jsx(CodeBlock, {
-                code: props.code,
-                lang: props.lang
-            })
-        }),
-    Property,
-    ObjectCollapsible,
-    Requests: (props)=>/*#__PURE__*/ jsx(Tabs, {
-            groupId: "fumadocs_openapi_requests",
-            ...props
-        }),
-    Request: (props)=>/*#__PURE__*/ jsx(Tab, {
-            value: props.name,
-            children: /*#__PURE__*/ jsx(CodeBlock, {
-                lang: props.language,
-                code: props.code
-            })
-        }),
-    APIPlayground
-};
+function createRenders(shikiOptions) {
+    return {
+        Root: (props)=>/*#__PURE__*/ jsx(Root, {
+                shikiOptions: shikiOptions,
+                ...props,
+                children: props.children
+            }),
+        API,
+        APIInfo,
+        APIExample: APIExample$1,
+        Responses: Tabs,
+        Response: Tab,
+        ResponseTypes: (props)=>/*#__PURE__*/ jsx(Accordions, {
+                type: "single",
+                className: "!-m-4 border-none pt-2",
+                defaultValue: "Response",
+                children: props.children
+            }),
+        ResponseType: (props)=>/*#__PURE__*/ jsx(Accordion, {
+                title: props.label,
+                children: /*#__PURE__*/ jsx(CodeBlock, {
+                    code: props.code,
+                    lang: props.lang,
+                    options: shikiOptions
+                })
+            }),
+        Property,
+        ObjectCollapsible,
+        Requests: (props)=>/*#__PURE__*/ jsx(Tabs, {
+                groupId: "fumadocs_openapi_requests",
+                ...props
+            }),
+        Request: (props)=>/*#__PURE__*/ jsx(Tab, {
+                value: props.name,
+                children: /*#__PURE__*/ jsx(CodeBlock, {
+                    lang: props.language,
+                    code: props.code,
+                    options: shikiOptions
+                })
+            }),
+        APIPlayground
+    };
+}
 
 const cache = new Map();
 async function APIPage(props) {
     const { operations, hasHead = true } = props;
     let document;
-    if (typeof props.document === 'string') {
+    if (typeof props.document === 'string' && !props.disableCache) {
         const cached = cache.get(props.document);
         document = cached ?? await Parser.dereference(props.document);
         cache.set(props.document, document);
@@ -1107,9 +1121,10 @@ function getContext(document, options) {
     return {
         document,
         renderer: {
-            ...defaultRenderer,
+            ...createRenders(options.shikiOptions),
             ...options.renderer
         },
+        shikiOptions: options.shikiOptions,
         generateTypeScriptSchema: options.generateTypeScriptSchema,
         generateCodeSamples: options.generateCodeSamples,
         baseUrl: document.servers?.[0].url ?? 'https://example.com',

package/dist/ui/client-client-ByT1LZmz.js

@@ -0,0 +1,317 @@
+'use client';
+import { forwardRef, createElement, useContext, createContext, useState, useEffect, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { cn, useCopyButton, buttonVariants } from 'fumadocs-ui/components/api';
+import dynamic from 'next/dynamic';
+import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+
+/**
+ * @license lucide-react v0.453.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */ const toKebabCase = (string)=>string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const mergeClasses = (...classes)=>classes.filter((className, index, array)=>{
+        return Boolean(className) && array.indexOf(className) === index;
+    }).join(" ");
+
+/**
+ * @license lucide-react v0.453.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */ var defaultAttributes = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+};
+
+const Icon = /*#__PURE__*/ forwardRef(({ color = "currentColor", size = 24, strokeWidth = 2, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref)=>{
+    return /*#__PURE__*/ createElement("svg", {
+        ref,
+        ...defaultAttributes,
+        width: size,
+        height: size,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        className: mergeClasses("lucide", className),
+        ...rest
+    }, [
+        ...iconNode.map(([tag, attrs])=>/*#__PURE__*/ createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [
+            children
+        ]
+    ]);
+});
+
+const createLucideIcon = (iconName, iconNode)=>{
+    const Component = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ createElement(Icon, {
+            ref,
+            iconNode,
+            className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+            ...props
+        }));
+    Component.displayName = `${iconName}`;
+    return Component;
+};
+
+const Check = createLucideIcon("Check", [
+    [
+        "path",
+        {
+            d: "M20 6 9 17l-5-5",
+            key: "1gmf2c"
+        }
+    ]
+]);
+
+const ChevronDown = createLucideIcon("ChevronDown", [
+    [
+        "path",
+        {
+            d: "m6 9 6 6 6-6",
+            key: "qrunsl"
+        }
+    ]
+]);
+
+const ChevronUp = createLucideIcon("ChevronUp", [
+    [
+        "path",
+        {
+            d: "m18 15-6-6-6 6",
+            key: "153udz"
+        }
+    ]
+]);
+
+const CircleCheck = createLucideIcon("CircleCheck", [
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            key: "1mglay"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m9 12 2 2 4-4",
+            key: "dzmm74"
+        }
+    ]
+]);
+
+const CircleX = createLucideIcon("CircleX", [
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            key: "1mglay"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m15 9-6 6",
+            key: "1uzhvr"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m9 9 6 6",
+            key: "z0biqf"
+        }
+    ]
+]);
+
+const Copy = createLucideIcon("Copy", [
+    [
+        "rect",
+        {
+            width: "14",
+            height: "14",
+            x: "8",
+            y: "8",
+            rx: "2",
+            ry: "2",
+            key: "17jyea"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
+            key: "zix9uf"
+        }
+    ]
+]);
+
+const Plus = createLucideIcon("Plus", [
+    [
+        "path",
+        {
+            d: "M5 12h14",
+            key: "1ays0h"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M12 5v14",
+            key: "s699le"
+        }
+    ]
+]);
+
+const Trash2 = createLucideIcon("Trash2", [
+    [
+        "path",
+        {
+            d: "M3 6h18",
+            key: "d0wm0j"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6",
+            key: "4alrt4"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2",
+            key: "v07s0e"
+        }
+    ],
+    [
+        "line",
+        {
+            x1: "10",
+            x2: "10",
+            y1: "11",
+            y2: "17",
+            key: "1uufr5"
+        }
+    ],
+    [
+        "line",
+        {
+            x1: "14",
+            x2: "14",
+            y1: "11",
+            y2: "17",
+            key: "xtxkd"
+        }
+    ]
+]);
+
+const sharedTransformers = [
+    {
+        name: 'fumadocs:pre-process',
+        line (hast) {
+            if (hast.children.length === 0) {
+                // Keep the empty lines when using grid layout
+                hast.children.push({
+                    type: 'text',
+                    value: ' '
+                });
+            }
+        }
+    }
+];
+
+const ApiContext = /*#__PURE__*/ createContext(undefined);
+function useApiContext() {
+    const ctx = useContext(ApiContext);
+    if (!ctx) throw new Error('Component must be used under <ApiProvider />');
+    return ctx;
+}
+function ApiProvider({ defaultBaseUrl, shikiOptions, children }) {
+    const [baseUrl, setBaseUrl] = useState(defaultBaseUrl);
+    useEffect(()=>{
+        setBaseUrl((prev)=>localStorage.getItem('apiBaseUrl') ?? prev);
+    }, []);
+    useOnChange(baseUrl, ()=>{
+        if (baseUrl) localStorage.setItem('apiBaseUrl', baseUrl);
+    });
+    return /*#__PURE__*/ jsx(ApiContext.Provider, {
+        value: useMemo(()=>({
+                baseUrl,
+                setBaseUrl,
+                highlight: async (lang, code)=>{
+                    const { codeToHast } = await import('shiki/bundle/web');
+                    return codeToHast(code, {
+                        lang,
+                        themes: {
+                            light: 'github-light',
+                            dark: 'github-dark'
+                        },
+                        transformers: sharedTransformers,
+                        defaultColor: false,
+                        ...shikiOptions
+                    });
+                }
+            }), [
+            baseUrl,
+            shikiOptions
+        ]),
+        children: children
+    });
+}
+
+const SchemaContext = /*#__PURE__*/ createContext(undefined);
+function useSchemaContext() {
+    const ctx = useContext(SchemaContext);
+    if (!ctx) throw new Error('Missing provider');
+    return ctx;
+}
+
+const APIPlayground = dynamic(()=>import('./playground-client-CcBhYwDS.js').then((mod)=>mod.APIPlayground));
+function Root({ children, baseUrl, className, shikiOptions, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('flex flex-col gap-24 text-sm text-fd-muted-foreground', className),
+        ...props,
+        children: /*#__PURE__*/ jsx(ApiProvider, {
+            shikiOptions: shikiOptions,
+            defaultBaseUrl: baseUrl,
+            children: children
+        })
+    });
+}
+function CopyRouteButton({ className, route, ...props }) {
+    const { baseUrl } = useApiContext();
+    const [checked, onCopy] = useCopyButton(()=>{
+        void navigator.clipboard.writeText(`${baseUrl ?? ''}${route}`);
+    });
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: cn(buttonVariants({
+            color: 'ghost',
+            className
+        })),
+        onClick: onCopy,
+        "aria-label": "Copy route path",
+        ...props,
+        children: checked ? /*#__PURE__*/ jsx(Check, {
+            className: "size-3"
+        }) : /*#__PURE__*/ jsx(Copy, {
+            className: "size-3"
+        })
+    });
+}
+
+export { APIPlayground as A, CircleCheck as C, Plus as P, Root as R, SchemaContext as S, Trash2 as T, CircleX as a, ChevronDown as b, ChevronUp as c, Check as d, useApiContext as e, CopyRouteButton as f, useSchemaContext as u };

package/dist/ui/index.d.ts

@@ -1,6 +1,66 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, MutableRefObject, HTMLAttributes } from 'react';
+import { ReactNode, ComponentType, ReactElement, MutableRefObject, HTMLAttributes } from 'react';
 import { FieldPath, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
+import { OpenAPIV3 } from 'openapi-types';
+import Slugger from 'github-slugger';
+import { CodeToHastOptionsCommon, CodeOptionsThemes, BuiltinTheme } from 'shiki';
+
+/**
+ * Sample info of endpoint
+ */
+interface EndpointSample {
+    /**
+     * Request URL, including path and query parameters
+     */
+    url: string;
+    method: string;
+    body?: {
+        schema: OpenAPIV3.SchemaObject;
+        mediaType: string;
+        sample: unknown;
+    };
+    responses: Record<string, ResponseSample>;
+    parameters: ParameterSample[];
+}
+interface ResponseSample {
+    mediaType: string;
+    sample: unknown;
+    schema: OpenAPIV3.SchemaObject;
+}
+interface ParameterSample {
+    name: string;
+    in: string;
+    schema: OpenAPIV3.SchemaObject;
+    sample: unknown;
+}
+
+interface CodeSample {
+    lang: string;
+    label: string;
+    source: string | ((endpoint: EndpointSample) => string | undefined) | false;
+}
+
+type Awaitable<T> = T | Promise<T>;
+interface RenderContext {
+    renderer: Renderer;
+    document: OpenAPIV3.Document;
+    baseUrl: string;
+    slugger: Slugger;
+    /**
+     * Generate TypeScript definitions from response schema.
+     *
+     * Pass `false` to disable it.
+     *
+     * @param endpoint - the API endpoint
+     * @param code - status code
+     */
+    generateTypeScriptSchema?: ((endpoint: EndpointSample, code: string) => Awaitable<string>) | false;
+    /**
+     * Generate code samples for endpoint.
+     */
+    generateCodeSamples?: (endpoint: EndpointSample) => Awaitable<CodeSample[]>;
+    shikiOptions?: Omit<CodeToHastOptionsCommon, 'lang'> & CodeOptionsThemes<BuiltinTheme>;
+}
 
 interface BaseRequestField {
     name: string;
@@ -59,6 +119,14 @@ interface APIPlaygroundProps {
     schemas: Record<string, RequestSchema>;
 }
 
+interface ResponsesProps {
+    items: string[];
+    children: ReactNode;
+}
+interface ResponseProps {
+    value: string;
+    children: ReactNode;
+}
 interface APIInfoProps {
     method: string;
     route: string;
@@ -71,10 +139,51 @@ interface PropertyProps {
     deprecated?: boolean;
     children?: ReactNode;
 }
+interface ObjectCollapsibleProps {
+    name: string;
+    children: ReactNode;
+}
+interface RequestProps {
+    language: string;
+    name: string;
+    code: string;
+}
+interface ResponseTypeProps {
+    lang: string;
+    code: string;
+    label: string;
+}
 interface RootProps {
     baseUrl?: string;
     children: ReactNode;
 }
+interface Renderer {
+    Root: ComponentType<RootProps>;
+    API: ComponentType<{
+        children: ReactNode;
+    }>;
+    APIInfo: ComponentType<APIInfoProps>;
+    APIExample: ComponentType<{
+        children: ReactNode;
+    }>;
+    Responses: ComponentType<ResponsesProps>;
+    Response: ComponentType<ResponseProps>;
+    Requests: ComponentType<{
+        items: string[];
+        children: ReactNode;
+    }>;
+    Request: ComponentType<RequestProps>;
+    ResponseTypes: ComponentType<{
+        children: ReactNode;
+    }>;
+    ResponseType: ComponentType<ResponseTypeProps>;
+    /**
+     * Collapsible to show object schemas
+     */
+    ObjectCollapsible: ComponentType<ObjectCollapsibleProps>;
+    Property: ComponentType<PropertyProps>;
+    APIPlayground: ComponentType<APIPlaygroundProps>;
+}
 
 interface FormValues {
     authorization: string;
@@ -117,14 +226,16 @@ declare const APIPlayground: react.ComponentType<APIPlaygroundProps & {
         body?: CustomField<"body", RequestSchema>;
     };
 } & HTMLAttributes<HTMLFormElement>>;
-declare function Root({ children, baseUrl, className, ...props }: RootProps & HTMLAttributes<HTMLDivElement>): React.ReactElement;
+declare function Root({ children, baseUrl, className, shikiOptions, ...props }: RootProps & {
+    shikiOptions: RenderContext['shikiOptions'];
+} & HTMLAttributes<HTMLDivElement>): ReactNode;
 
 declare function APIInfo({ children, className, route, badgeClassname, method, ...props }: APIInfoProps & HTMLAttributes<HTMLDivElement> & {
     badgeClassname?: string;
 }): React.ReactElement;
 declare function API({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement;
 declare function Property({ name, type, required, deprecated, children, }: PropertyProps): React.ReactElement;
-declare function APIExample({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement;
+declare function APIExample(props: HTMLAttributes<HTMLDivElement>): React.ReactElement;
 declare function ObjectCollapsible(props: {
     name: string;
     children: ReactNode;

package/dist/ui/index.js

@@ -3,8 +3,8 @@ import { cn } from 'fumadocs-ui/components/api';
 import { Fragment } from 'react';
 import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
 import { cva } from 'class-variance-authority';
-import { C as CopyRouteButton } from './client-client-CUW5FVMv.js';
-export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-CUW5FVMv.js';
+import { f as CopyRouteButton } from './client-client-ByT1LZmz.js';
+export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-ByT1LZmz.js';
 
 const badgeVariants = cva('rounded border px-1.5 py-1 text-xs font-medium leading-[12px]', {
     variants: {
@@ -59,7 +59,10 @@ function APIInfo({ children, className, route, badgeClassname, method = 'GET', .
         ...props,
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: cn('sticky top-24 z-20 mb-4 flex flex-row items-center gap-2 rounded-lg border bg-fd-card px-3 py-2 md:top-12 lg:top-1'),
+                className: cn('sticky top-[calc(var(--fd-api-info-top)+36px)] z-20 mb-4 flex flex-row items-center gap-2 rounded-lg border bg-fd-card px-3 py-2 md:top-[var(--fd-api-info-top)]'),
+                style: {
+                    '--fd-api-info-top': 'calc(var(--fd-nav-height) + var(--fd-banner-height) + 4px)'
+                },
                 children: [
                     /*#__PURE__*/ jsx("span", {
                         className: cn(badgeVariants({
@@ -122,11 +125,15 @@ function Property({ name, type, required, deprecated, children }) {
         ]
     });
 }
-function APIExample({ children, className, ...props }) {
+function APIExample(props) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('prose-no-margin md:sticky md:top-12 lg:top-1 xl:w-[400px]', className),
         ...props,
-        children: children
+        className: cn('prose-no-margin md:sticky md:top-[var(--fd-api-info-top)] xl:w-[400px]', props.className),
+        style: {
+            '--fd-api-info-top': 'calc(var(--fd-nav-height) + var(--fd-banner-height) + 40px)',
+            ...props.style
+        },
+        children: props.children
     });
 }
 function ObjectCollapsible(props) {

package/dist/ui/{playground-client-CbOYGXy9.js → playground-client-CcBhYwDS.js}

@@ -1,18 +1,17 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { forwardRef, useId, createContext, useContext, useState, useCallback, useLayoutEffect, useRef, useEffect, useMemo } from 'react';
+import { forwardRef, useId, createContext, useContext, useState, useCallback, useEffect, Fragment as Fragment$1, useRef, useMemo } from 'react';
 import { FormProvider, Controller, useFormContext, useFieldArray, useForm, useWatch } from 'react-hook-form';
-import useSWRImmutable from 'swr/immutable';
 import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
 import { cn, buttonVariants } from 'fumadocs-ui/components/api';
-import { u as useSchemaContext, a as useApiContext, S as SchemaContext } from './client-client-CUW5FVMv.js';
+import { C as CircleCheck, a as CircleX, b as ChevronDown, c as ChevronUp, d as Check, u as useSchemaContext, T as Trash2, P as Plus, e as useApiContext, S as SchemaContext } from './client-client-ByT1LZmz.js';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { CircleCheckIcon, CircleXIcon, ChevronDown, ChevronUp, Check, Trash2, Plus } from 'lucide-react';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as Base from 'fumadocs-ui/components/codeblock';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
 
 const Form = FormProvider;
 const FormFieldContext = /*#__PURE__*/ createContext({
@@ -124,7 +123,9 @@ FormDescription.displayName = 'FormDescription';
                 formData.append(key, item);
             }
         }
-        formData.set(key, JSON.stringify(prop));
+        if (prop && !(prop instanceof File)) {
+            formData.set(key, JSON.stringify(prop));
+        }
     }
     return formData;
 }
@@ -192,27 +193,27 @@ const statusMap = {
     400: {
         description: 'Bad Request',
         color: 'text-red-500',
-        icon: CircleXIcon
+        icon: CircleX
     },
     401: {
         description: 'Unauthorized',
         color: 'text-red-500',
-        icon: CircleXIcon
+        icon: CircleX
     },
     403: {
         description: 'Forbidden',
         color: 'text-red-500',
-        icon: CircleXIcon
+        icon: CircleX
     },
     404: {
         description: 'Not Found',
         color: 'text-fd-muted-foreground',
-        icon: CircleXIcon
+        icon: CircleX
     },
     500: {
         description: 'Internal Server Error',
         color: 'text-red-500',
-        icon: CircleXIcon
+        icon: CircleX
     }
 };
 function getStatusInfo(status) {
@@ -223,20 +224,20 @@ function getStatusInfo(status) {
         return {
             description: 'Successful',
             color: 'text-green-500',
-            icon: CircleCheckIcon
+            icon: CircleCheck
         };
     }
     if (status >= 400) {
         return {
             description: 'Error',
             color: 'text-red-500',
-            icon: CircleXIcon
+            icon: CircleX
         };
     }
     return {
         description: 'No Description',
         color: 'text-fd-muted-foreground',
-        icon: CircleXIcon
+        icon: CircleX
     };
 }
 
@@ -809,56 +810,43 @@ function ArrayInput({ fieldName, field, ...props }) {
     });
 }
 
-const sharedTransformers = [
-    {
-        name: 'fumadocs:pre-process',
-        line (hast) {
-            if (hast.children.length === 0) {
-                // Keep the empty lines when using grid layout
-                hast.children.push({
-                    type: 'text',
-                    value: ' '
-                });
-            }
-        }
-    }
-];
-
-function CodeBlock({ code, lang = 'json', ...props }) {
-    const { highlighter } = useApiContext();
-    const [html, setHtml] = useState('');
-    useLayoutEffect(()=>{
-        if (!highlighter) return;
-        const themedHtml = highlighter.codeToHtml(code, {
-            lang,
-            defaultColor: false,
-            themes: {
-                light: 'github-light',
-                dark: 'github-dark'
-            },
-            transformers: sharedTransformers
+function CodeBlock({ code, lang = 'json' }) {
+    const { highlight } = useApiContext();
+    const [rendered, setRendered] = useState(/*#__PURE__*/ jsx(Base.Pre, {
+        className: "max-h-[288px]",
+        children: code
+    }));
+    useEffect(()=>{
+        void highlight(lang, code).then((res)=>{
+            const output = toJsxRuntime(res, {
+                jsx,
+                jsxs,
+                development: false,
+                Fragment: Fragment$1,
+                components: {
+                    pre: (props)=>/*#__PURE__*/ jsx(Base.Pre, {
+                            className: "max-h-[288px]",
+                            ...props,
+                            children: props.children
+                        })
+                }
+            });
+            setRendered(output);
         });
-        setHtml(themedHtml);
     }, [
         code,
-        lang,
-        highlighter
+        highlight,
+        lang
     ]);
     return /*#__PURE__*/ jsx(Base.CodeBlock, {
         className: "my-0",
-        children: /*#__PURE__*/ jsx(Base.Pre, {
-            ...props,
-            dangerouslySetInnerHTML: {
-                __html: html
-            }
-        })
+        children: rendered
     });
 }
 
 function APIPlayground({ route, method = 'GET', bodyType, authorization, path = [], header = [], query = [], body, fields = {}, schemas }) {
     const { baseUrl } = useApiContext();
     const dynamicRef = useRef(new Map());
-    const [input, setInput] = useState();
     const form = useForm({
         defaultValues: {
             authorization: authorization?.defaultValue,
@@ -868,18 +856,10 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
             body: body ? getDefaultValue(body, schemas) : undefined
         }
     });
-    const testQuery = useSWRImmutable(input ? [
-        baseUrl,
-        route,
-        method,
-        input,
-        bodyType
-    ] : null, async ()=>{
-        if (!input) return;
+    const testQuery = useQuery(async (input)=>{
         const url = new URL(`${baseUrl ?? window.location.origin}${createUrlFromInput(route, input.path, input.query)}`);
-        const headers = new Headers({
-            'Content-Type': 'application/json'
-        });
+        const headers = new Headers();
+        if (bodyType !== 'form-data') headers.append('Content-Type', 'application/json');
         if (input.authorization) {
             headers.append('Authorization', input.authorization);
         }
@@ -898,8 +878,6 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
             status: response.status,
             data
         };
-    }, {
-        shouldRetryOnError: false
     });
     useEffect(()=>{
         if (!authorization) return;
@@ -916,7 +894,7 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
     // eslint-disable-next-line react-hooks/exhaustive-deps -- mounted only once
     }, []);
     const onSubmit = form.handleSubmit((value)=>{
-        setInput(value);
+        testQuery.start(value);
     });
     function renderCustomField(fieldName, info, field, key) {
         if (field) {
@@ -1058,11 +1036,32 @@ function ResultDisplay({ data }) {
                 children: data.status
             }),
             data.data ? /*#__PURE__*/ jsx(CodeBlock, {
-                code: JSON.stringify(data.data, null, 2),
-                className: "max-h-[288px]"
+                code: JSON.stringify(data.data, null, 2)
             }) : null
         ]
     });
 }
+function useQuery(fn) {
+    const [loading, setLoading] = useState(false);
+    const [data, setData] = useState();
+    return useMemo(()=>({
+            isLoading: loading,
+            data,
+            start (input) {
+                setLoading(true);
+                void fn(input).then((res)=>{
+                    setData(res);
+                }).catch(()=>{
+                    setData(undefined);
+                }).finally(()=>{
+                    setLoading(false);
+                });
+            }
+        }), [
+        data,
+        fn,
+        loading
+    ]);
+}
 
 export { APIPlayground };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "5.4.13",
+  "version": "5.5.0",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",
@@ -27,55 +27,41 @@
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      ".": [
-        "./dist/index.d.ts"
-      ],
-      "ui": [
-        "./dist/ui/index.d.ts"
-      ],
-      "server": [
-        "./dist/server/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@apidevtools/json-schema-ref-parser": "^11.7.0",
-    "@fumari/json-schema-to-typescript": "^1.1.0",
-    "@radix-ui/react-select": "^2.1.1",
+    "@apidevtools/json-schema-ref-parser": "^11.7.2",
+    "@fumari/json-schema-to-typescript": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "fast-glob": "^3.3.1",
     "github-slugger": "^2.0.0",
-    "hast-util-to-jsx-runtime": "^2.3.0",
+    "hast-util-to-jsx-runtime": "^2.3.2",
     "js-yaml": "^4.1.0",
-    "lucide-react": "^0.438.0",
     "openapi-sampler": "^1.5.1",
-    "react-hook-form": "^7.53.0",
+    "react-hook-form": "^7.53.1",
     "remark": "^15.0.1",
-    "remark-rehype": "^11.1.0",
-    "shiki": "^1.16.2",
-    "swr": "^2.2.5",
-    "fumadocs-core": "13.4.9",
-    "fumadocs-ui": "13.4.9"
+    "remark-rehype": "^11.1.1",
+    "shiki": "^1.22.0",
+    "fumadocs-core": "14.0.0",
+    "fumadocs-ui": "14.0.0"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "22.5.4",
+    "@types/node": "22.7.7",
     "@types/openapi-sampler": "^1.0.3",
-    "@types/react": "^18.3.5",
-    "bunchee": "^5.4.0",
-    "next": "^14.2.8",
+    "@types/react": "^18.3.11",
+    "bunchee": "^5.5.1",
+    "lucide-react": "^0.453.0",
+    "next": "15.0.0",
     "openapi-types": "^12.1.3",
     "eslint-config-custom": "0.0.0",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
-    "next": ">= 14.1.0",
+    "next": "14.x.x || 15.x.x",
     "react": ">= 18",
     "react-dom": ">= 18"
   },

package/dist/ui/client-client-CUW5FVMv.js

@@ -1,100 +0,0 @@
-'use client';
-import { useContext, createContext, useState, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
-import { Check, Copy } from 'lucide-react';
-import { cn, useCopyButton, buttonVariants } from 'fumadocs-ui/components/api';
-import dynamic from 'next/dynamic';
-
-const ApiContext = /*#__PURE__*/ createContext({
-    baseUrl: undefined,
-    setBaseUrl: ()=>undefined,
-    highlighter: null
-});
-function useApiContext() {
-    return useContext(ApiContext);
-}
-async function initHighlighter() {
-    const { createHighlighterCore } = await import('shiki/core');
-    const getWasm = await import('shiki/wasm');
-    return createHighlighterCore({
-        themes: [
-            import('shiki/themes/github-light.mjs'),
-            import('shiki/themes/github-dark.mjs')
-        ],
-        langs: [
-            import('shiki/langs/json.mjs')
-        ],
-        loadWasm: getWasm
-    });
-}
-let highlighterInstance;
-function ApiProvider({ defaultBaseUrl, children }) {
-    const [highlighter, setHighlighter] = useState(null);
-    const [baseUrl, setBaseUrl] = useState(defaultBaseUrl);
-    useEffect(()=>{
-        setBaseUrl((prev)=>localStorage.getItem('apiBaseUrl') ?? prev);
-        if (highlighterInstance) {
-            setHighlighter(highlighterInstance);
-        } else {
-            void initHighlighter().then((res)=>{
-                highlighterInstance = res;
-                setHighlighter(res);
-            });
-        }
-    }, []);
-    useEffect(()=>{
-        if (baseUrl) localStorage.setItem('apiBaseUrl', baseUrl);
-    }, [
-        baseUrl
-    ]);
-    return /*#__PURE__*/ jsx(ApiContext.Provider, {
-        value: {
-            baseUrl,
-            setBaseUrl,
-            highlighter
-        },
-        children: children
-    });
-}
-
-const SchemaContext = /*#__PURE__*/ createContext(undefined);
-function useSchemaContext() {
-    const ctx = useContext(SchemaContext);
-    if (!ctx) throw new Error('Missing provider');
-    return ctx;
-}
-
-const APIPlayground = dynamic(()=>import('./playground-client-CbOYGXy9.js').then((mod)=>mod.APIPlayground));
-function Root({ children, baseUrl, className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        className: cn('flex flex-col gap-24 text-sm text-fd-muted-foreground', className),
-        ...props,
-        children: /*#__PURE__*/ jsx(ApiProvider, {
-            defaultBaseUrl: baseUrl,
-            children: children
-        })
-    });
-}
-function CopyRouteButton({ className, route, ...props }) {
-    const { baseUrl } = useApiContext();
-    const [checked, onCopy] = useCopyButton(()=>{
-        void navigator.clipboard.writeText(`${baseUrl ?? ''}${route}`);
-    });
-    return /*#__PURE__*/ jsx("button", {
-        type: "button",
-        className: cn(buttonVariants({
-            color: 'ghost',
-            className
-        })),
-        onClick: onCopy,
-        "aria-label": "Copy route path",
-        ...props,
-        children: checked ? /*#__PURE__*/ jsx(Check, {
-            className: "size-3"
-        }) : /*#__PURE__*/ jsx(Copy, {
-            className: "size-3"
-        })
-    });
-}
-
-export { APIPlayground as A, CopyRouteButton as C, Root as R, SchemaContext as S, useApiContext as a, useSchemaContext as u };