fumadocs-openapi 5.5.3 → 5.5.5

package/dist/index.js

@@ -286,7 +286,7 @@ async function generateFiles(options) {
             const metaFiles = new Set();
             const results = await generateOperations(pathOrUrl, options);
             await Promise.all(results.map(async (result)=>{
-                let outPaths = new Array();
+                const outPaths = new Array();
                 if (!result.method.operationId) return;
                 const id = result.method.operationId.split('.').at(-1) ?? result.method.operationId;
                 if (groupBy === 'tag' && result.method.tags && result.method.tags.length > 0) {
@@ -294,7 +294,7 @@ async function generateFiles(options) {
                         outPaths.push(join(outputDir, getFilename(tag), `${getFilename(id)}.mdx`));
                     }
                 } else if (groupBy === 'route') {
-                    let outPath = join(outputDir, result.route.summary ? getFilename(result.route.summary) : getFilenameFromRoute(result.route.path), `${getFilename(id)}.mdx`);
+                    const outPath = join(outputDir, result.route.summary ? getFilename(result.route.summary) : getFilenameFromRoute(result.route.path), `${getFilename(id)}.mdx`);
                     const metaFile = join(dirname(outPath), 'meta.json');
                     if (result.route.summary && !metaFiles.has(metaFile)) {
                         metaFiles.add(metaFile);

package/dist/server/index.js

@@ -13,7 +13,7 @@ import { Heading } from 'fumadocs-ui/components/heading';
 import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
 import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
 import * as Base from 'fumadocs-ui/components/codeblock';
-import { codeToHast } from 'shiki';
+import { highlight } from 'fumadocs-core/server';
 import { Root, API, APIInfo, APIExample as APIExample$1, Property, ObjectCollapsible, APIPlayground } from '../ui/index.js';
 import { cva } from 'class-variance-authority';
 
@@ -439,27 +439,11 @@ 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, {
     langs: [],
-    lazy: true,
-    transformers: sharedTransformers
+    lazy: true
 });
 async function Markdown({ text }) {
     const nodes = processor.parse({
@@ -1016,21 +1000,9 @@ async function ResponseTabs({ endpoint, operation, ctx: { renderer, generateType
 }
 
 async function CodeBlock({ code, lang, options, ...rest }) {
-    const html = await codeToHast(code, {
+    const rendered = await highlight(code, {
         lang,
-        defaultColor: false,
-        themes: {
-            light: 'github-light',
-            dark: 'github-dark'
-        },
-        transformers: sharedTransformers,
-        ...options
-    });
-    const codeblock = toJsxRuntime(html, {
-        development: false,
-        jsx: jsx,
-        jsxs: jsxs,
-        Fragment: Fragment$1,
+        ...options,
         components: {
             pre: (props)=>/*#__PURE__*/ jsx(Base.Pre, {
                     ...props,
@@ -1040,7 +1012,7 @@ async function CodeBlock({ code, lang, options, ...rest }) {
     });
     return /*#__PURE__*/ jsx(Base.CodeBlock, {
         className: "my-0",
-        children: codeblock
+        children: rendered
     });
 }
 
@@ -1143,14 +1115,14 @@ function createOpenAPI(options = {}) {
     };
 }
 
-cva('rounded border px-1.5 py-1 text-xs font-medium leading-[12px]', {
+cva('rounded-xl border px-1.5 py-1 text-xs font-medium leading-[12px]', {
     variants: {
         color: {
-            green: 'border-green-400/50 bg-green-400/20 text-green-600 dark:text-green-400',
-            yellow: 'border-yellow-400/50 bg-yellow-400/20 text-yellow-600 dark:text-yellow-400',
-            red: 'border-red-400/50 bg-red-400/20 text-red-600 dark:text-red-400',
-            blue: 'border-blue-400/50 bg-blue-400/20 text-blue-600 dark:text-blue-400',
-            orange: 'border-orange-400/50 bg-orange-400/20 text-orange-600 dark:text-orange-400'
+            green: 'bg-green-400/20 text-green-600 dark:text-green-400',
+            yellow: 'bg-yellow-400/20 text-yellow-600 dark:text-yellow-400',
+            red: 'bg-red-400/20 text-red-600 dark:text-red-400',
+            blue: 'bg-blue-400/20 text-blue-600 dark:text-blue-400',
+            orange: 'bg-orange-400/20 text-orange-600 dark:text-orange-400'
         }
     }
 });

package/dist/ui/{client-client-ByT1LZmz.js → client-client-mFPFBgXc.js}

@@ -219,21 +219,6 @@ const Trash2 = createLucideIcon("Trash2", [
     ]
 ]);
 
-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);
@@ -252,19 +237,7 @@ function ApiProvider({ defaultBaseUrl, shikiOptions, children }) {
         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
-                    });
-                }
+                shikiOptions
             }), [
             baseUrl,
             shikiOptions
@@ -280,7 +253,7 @@ function useSchemaContext() {
     return ctx;
 }
 
-const APIPlayground = dynamic(()=>import('./playground-client-CcBhYwDS.js').then((mod)=>mod.APIPlayground));
+const APIPlayground = dynamic(()=>import('./playground-client-jizWhzv7.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),
@@ -307,9 +280,9 @@ function CopyRouteButton({ className, route, ...props }) {
         "aria-label": "Copy route path",
         ...props,
         children: checked ? /*#__PURE__*/ jsx(Check, {
-            className: "size-3"
+            className: "size-full"
         }) : /*#__PURE__*/ jsx(Copy, {
-            className: "size-3"
+            className: "size-full"
         })
     });
 }

package/dist/ui/index.d.ts

@@ -233,7 +233,7 @@ declare function Root({ children, baseUrl, className, shikiOptions, ...props }:
 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 API({ children, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement;
 declare function Property({ name, type, required, deprecated, children, }: PropertyProps): React.ReactElement;
 declare function APIExample(props: HTMLAttributes<HTMLDivElement>): React.ReactElement;
 declare function ObjectCollapsible(props: {

package/dist/ui/index.js

@@ -3,17 +3,17 @@ 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 { f as CopyRouteButton } from './client-client-ByT1LZmz.js';
-export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-ByT1LZmz.js';
+import { f as CopyRouteButton } from './client-client-mFPFBgXc.js';
+export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-mFPFBgXc.js';
 
-const badgeVariants = cva('rounded border px-1.5 py-1 text-xs font-medium leading-[12px]', {
+const badgeVariants = cva('rounded-xl border px-1.5 py-1 text-xs font-medium leading-[12px]', {
     variants: {
         color: {
-            green: 'border-green-400/50 bg-green-400/20 text-green-600 dark:text-green-400',
-            yellow: 'border-yellow-400/50 bg-yellow-400/20 text-yellow-600 dark:text-yellow-400',
-            red: 'border-red-400/50 bg-red-400/20 text-red-600 dark:text-red-400',
-            blue: 'border-blue-400/50 bg-blue-400/20 text-blue-600 dark:text-blue-400',
-            orange: 'border-orange-400/50 bg-orange-400/20 text-orange-600 dark:text-orange-400'
+            green: 'bg-green-400/20 text-green-600 dark:text-green-400',
+            yellow: 'bg-yellow-400/20 text-yellow-600 dark:text-yellow-400',
+            red: 'bg-red-400/20 text-red-600 dark:text-red-400',
+            blue: 'bg-blue-400/20 text-blue-600 dark:text-blue-400',
+            orange: 'bg-orange-400/20 text-orange-600 dark:text-orange-400'
         }
     }
 });
@@ -35,7 +35,7 @@ function getBadgeColor(method) {
 function Route({ route }) {
     const segments = route.split('/').filter((part)=>part.length > 0);
     return /*#__PURE__*/ jsx("div", {
-        className: "flex flex-row flex-wrap items-center gap-1 text-sm",
+        className: "not-prose flex flex-row items-center gap-1 overflow-auto text-xs",
         children: segments.map((part, index)=>/*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsx("span", {
@@ -43,9 +43,9 @@ function Route({ route }) {
                         children: "/"
                     }),
                     part.startsWith('{') && part.endsWith('}') ? /*#__PURE__*/ jsx("code", {
-                        className: "text-fd-primary",
+                        className: "bg-fd-primary/10 text-fd-primary",
                         children: part
-                    }) : /*#__PURE__*/ jsx("span", {
+                    }) : /*#__PURE__*/ jsx("code", {
                         className: "text-fd-foreground",
                         children: part
                     })
@@ -59,10 +59,7 @@ function APIInfo({ children, className, route, badgeClassname, method = 'GET', .
         ...props,
         children: [
             /*#__PURE__*/ jsxs("div", {
-                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)'
-                },
+                className: "sticky top-[var(--fd-api-info-top)] z-[4] mb-4 flex flex-row items-center gap-1.5 border-b border-fd-foreground/10 bg-fd-card/50 px-4 py-1.5 shadow-lg backdrop-blur-lg max-lg:-mx-3 max-md:-mx-4 md:rounded-full md:border md:px-1.5",
                 children: [
                     /*#__PURE__*/ jsx("span", {
                         className: cn(badgeVariants({
@@ -74,7 +71,7 @@ function APIInfo({ children, className, route, badgeClassname, method = 'GET', .
                         route: route
                     }),
                     /*#__PURE__*/ jsx(CopyRouteButton, {
-                        className: "ms-auto size-6 p-1",
+                        className: "ms-auto size-6 p-1.5",
                         route: route
                     })
                 ]
@@ -86,10 +83,14 @@ function APIInfo({ children, className, route, badgeClassname, method = 'GET', .
         ]
     });
 }
-function API({ className, children, ...props }) {
+function API({ children, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex flex-col gap-x-6 gap-y-4 xl:flex-row xl:items-start', className),
         ...props,
+        className: cn('flex flex-col gap-x-6 gap-y-4 max-lg:[--fd-toc-height:46px] max-md:[--fd-toc-height:36px] xl:flex-row xl:items-start', props.className),
+        style: {
+            '--fd-api-info-top': 'calc(var(--fd-nav-height) + var(--fd-banner-height) + var(--fd-toc-height, 0.5rem))',
+            ...props.style
+        },
         children: children
     });
 }
@@ -98,7 +99,7 @@ function Property({ name, type, required, deprecated, children }) {
         className: "mb-4 rounded-lg border bg-fd-card p-3 prose-no-margin",
         children: [
             /*#__PURE__*/ jsxs("h4", {
-                className: "flex flex-row items-center gap-4",
+                className: "flex flex-row flex-wrap items-center gap-4",
                 children: [
                     /*#__PURE__*/ jsx("code", {
                         children: name
@@ -129,10 +130,6 @@ function APIExample(props) {
     return /*#__PURE__*/ jsx("div", {
         ...props,
         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
     });
 }

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

@@ -1,17 +1,17 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { forwardRef, useId, createContext, useContext, useState, useCallback, useEffect, Fragment as Fragment$1, useRef, useMemo } from 'react';
+import { forwardRef, useId, createContext, useContext, useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { FormProvider, Controller, useFormContext, useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
 import { cn, buttonVariants } from 'fumadocs-ui/components/api';
-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 { 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-mFPFBgXc.js';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 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';
+import { useShiki } from 'fumadocs-core/utils/use-shiki';
 
 const Form = FormProvider;
 const FormFieldContext = /*#__PURE__*/ createContext({
@@ -811,33 +811,18 @@ function ArrayInput({ fieldName, field, ...props }) {
 }
 
 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);
-        });
-    }, [
-        code,
-        highlight,
-        lang
-    ]);
+    const { shikiOptions } = useApiContext();
+    const rendered = useShiki(code, {
+        lang,
+        ...shikiOptions,
+        components: {
+            pre: (props)=>/*#__PURE__*/ jsx(Base.Pre, {
+                    className: "max-h-[288px]",
+                    ...props,
+                    children: props.children
+                })
+        }
+    });
     return /*#__PURE__*/ jsx(Base.CodeBlock, {
         className: "my-0",
         children: rendered
@@ -923,7 +908,7 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
                 schemas
             ]),
             children: /*#__PURE__*/ jsxs("form", {
-                className: "not-prose flex flex-col gap-5 rounded-lg border bg-fd-card p-3",
+                className: "not-prose flex flex-col gap-5 rounded-xl border bg-fd-card p-3",
                 onSubmit: onSubmit,
                 children: [
                     /*#__PURE__*/ jsxs("div", {
@@ -935,7 +920,7 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
                             /*#__PURE__*/ jsx("button", {
                                 type: "submit",
                                 className: cn(buttonVariants({
-                                    color: 'secondary'
+                                    color: 'outline'
                                 })),
                                 disabled: testQuery.isLoading,
                                 children: "Send"
@@ -945,7 +930,7 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
                     authorization ? renderCustomField('authorization', authorization, fields.auth) : null,
                     /*#__PURE__*/ jsxs(Accordions, {
                         type: "multiple",
-                        className: cn('-m-3 border-0 text-sm', path.length === 0 && query.length === 0 && header.length === 0 && !body && 'hidden'),
+                        className: cn('-m-3 border-0 bg-transparent text-sm', path.length === 0 && query.length === 0 && header.length === 0 && !body && 'hidden'),
                         children: [
                             path.length > 0 ? /*#__PURE__*/ jsx(Accordion, {
                                 title: "Path",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "5.5.3",
+  "version": "5.5.5",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",
@@ -44,16 +44,16 @@
     "react-hook-form": "^7.53.1",
     "remark": "^15.0.1",
     "remark-rehype": "^11.1.1",
-    "shiki": "^1.22.0",
-    "fumadocs-core": "14.0.2",
-    "fumadocs-ui": "14.0.2"
+    "shiki": "^1.22.2",
+    "fumadocs-core": "14.1.1",
+    "fumadocs-ui": "14.1.1"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "22.7.8",
+    "@types/node": "22.8.1",
     "@types/openapi-sampler": "^1.0.3",
-    "@types/react": "^18.3.11",
-    "bunchee": "^5.5.1",
+    "@types/react": "^18.3.12",
+    "bunchee": "^5.6.0",
     "lucide-react": "^0.453.0",
     "next": "15.0.1",
     "openapi-types": "^12.1.3",