fumadocs-openapi 8.1.3 → 8.1.4

package/dist/playground/schema.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Ajv2020 } from 'ajv/dist/2020';
+import { createContext, useContext, useMemo, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
+import { getDefaultValue } from '../playground/get-default-values.js';
+const SchemaContext = createContext(undefined);
+export const anyFields = {
+    type: ['string', 'number', 'boolean', 'array', 'object'],
+    items: true,
+    additionalProperties: true,
+};
+export function SchemaProvider({ references, fieldInfoMap, 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 }));
+}
+/**
+ * A hook to store dynamic info of a field, such as selected schema of `oneOf`.
+ *
+ * @param fieldName - field name of form.
+ * @param schema - The JSON Schema to generate initial values.
+ * @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 [_, trigger] = useState(0);
+    const form = useFormContext();
+    const keyName = `${fieldName}:${depth}`;
+    const value = form.getValues(fieldName);
+    const info = fieldInfoMap.get(keyName) ?? {
+        oneOf: -1,
+    };
+    // update info if needed
+    if (!info.selectedType && Array.isArray(schema.type)) {
+        info.selectedType =
+            schema.type.find((type) => ajv.validate({
+                ...schema,
+                type,
+            }, value)) ?? schema.type[0];
+    }
+    if (info.oneOf === -1 && schema.oneOf) {
+        info.oneOf = schema.oneOf.findIndex((item) => {
+            return ajv.validate(item, value);
+        });
+        if (info.oneOf === -1)
+            info.oneOf = 0;
+    }
+    fieldInfoMap.set(keyName, info);
+    return {
+        info,
+        updateInfo: useEffectEvent((value) => {
+            const prev = fieldInfoMap.get(keyName);
+            if (!prev)
+                return;
+            const updated = {
+                ...prev,
+                ...value,
+            };
+            if (updated.oneOf === prev.oneOf &&
+                updated.selectedType === prev.selectedType)
+                return;
+            fieldInfoMap.set(keyName, updated);
+            form.setValue(fieldName, getDefaultValue(schema.oneOf && updated.oneOf !== -1
+                ? schema.oneOf[updated.oneOf]
+                : {
+                    ...schema,
+                    type: value.selectedType ?? schema.type,
+                }));
+            trigger((prev) => prev + 1);
+        }),
+    };
+}
+/**
+ * Resolve `$ref` in the schema, **not recursive**.
+ */
+export function useResolvedSchema(schema) {
+    const { references } = useContext(SchemaContext);
+    return useMemo(() => {
+        if (typeof schema === 'boolean')
+            return anyFields;
+        if (schema.$ref)
+            return fallbackAny(references[schema.$ref]);
+        return schema;
+    }, [references, schema]);
+}
+export function fallbackAny(schema) {
+    return typeof schema === 'boolean' ? anyFields : schema;
+}

package/dist/render/operation/get-request-data.d.ts

@@ -1,5 +1,4 @@
 import type { MethodInformation, RenderContext } from '../../types.js';
-import type { NoReference } from '../../utils/schema.js';
 import type { RequestData } from '../../requests/_shared.js';
-export declare function getRequestData(path: string, method: NoReference<MethodInformation>, sampleKey: string | null, { schema: { document } }: RenderContext): RequestData;
+export declare function getRequestData(path: string, method: MethodInformation, sampleKey: string | null, { schema: { document } }: RenderContext): RequestData;
 //# sourceMappingURL=get-request-data.d.ts.map

package/dist/render/operation/get-request-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-request-data.d.ts","sourceRoot":"","sources":["../../../src/render/operation/get-request-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,WAAW,CAAC,iBAAiB,CAAC,EACtC,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAa,GACtC,WAAW,CAqEb"}
+{"version":3,"file":"get-request-data.d.ts","sourceRoot":"","sources":["../../../src/render/operation/get-request-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAKhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,iBAAiB,EACzB,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAa,GACtC,WAAW,CAwEb"}

package/dist/render/operation/get-request-data.js

@@ -1,5 +1,5 @@
-import { sample } from 'openapi-sampler';
 import { getPreferredType } from '../../utils/schema.js';
+import { sample } from 'openapi-sampler';
 import { getSecurities, getSecurityPrefix } from '../../utils/get-security.js';
 export function getRequestData(path, method, sampleKey, { schema: { document } }) {
     const result = {
@@ -58,7 +58,7 @@ export function getRequestData(path, method, sampleKey, { schema: { document } }
             result.body = bodyOfType.example;
         }
         else {
-            result.body = generateBody(method.method, bodyOfType?.schema ?? {});
+            result.body = generateBody(method.method, (bodyOfType?.schema ?? {}));
         }
     }
     return result;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/render/operation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAEV,iBAAiB,EAEjB,aAAa,EAEd,MAAM,SAAS,CAAC;AAejB,OAAO,EAAE,KAAK,WAAW,EAAuB,MAAM,oBAAoB,CAAC;AAK3E,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EACH,MAAM,GACN,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,MAAM,GAAG,SAAS,CAAC,GACxD,KAAK,CAAC;CACX;AASD,wBAAgB,SAAS,CAAC,EACxB,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,GAAG,YAAY,CAgLf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/render/operation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAEV,iBAAiB,EAEjB,aAAa,EAEd,MAAM,SAAS,CAAC;AAmBjB,OAAO,EAAE,KAAK,WAAW,EAAuB,MAAM,oBAAoB,CAAC;AAK3E,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EACH,MAAM,GACN,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,MAAM,GAAG,SAAS,CAAC,GACxD,KAAK,CAAC;CACX;AASD,wBAAgB,SAAS,CAAC,EACxB,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,GAAG,YAAY,CAoLf"}

package/dist/render/operation/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { getPreferredType } from '../../utils/schema.js';
+import { getPreferredType, } from '../../utils/schema.js';
 import { getSecurities, getSecurityPrefix } from '../../utils/get-security.js';
 import { idToTitle } from '../../utils/id-to-title.js';
 import { Markdown } from '../markdown.js';
@@ -12,8 +12,8 @@ import { APIExample, APIExampleProvider, getAPIExamples, } from '../../render/op
 import { MethodLabel } from '../../ui/components/method-label.js';
 import { supportedMediaTypes } from '../../requests/_shared.js';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
-import { CodeBlock } from '../../render/codeblock.js';
 import { getTypescriptSchema } from '../../utils/get-typescript-schema.js';
+import { CopyResponseTypeScript } from '../../ui/client.js';
 const ParamTypes = {
     path: 'Path Parameters',
     query: 'Query Parameters',
@@ -37,7 +37,7 @@ export function Operation({ type = 'operation', path, method, ctx, hasHead, head
         if (!type ||
             !supportedMediaTypes.includes(String(type)))
             throw new Error(`No supported media type for body content: ${path}, received: ${type}`);
-        bodyNode = (_jsxs(_Fragment, { children: [heading(headingLevel, 'Request Body', ctx), _jsxs("div", { className: "mb-8 flex flex-row items-center justify-between gap-2", children: [_jsx("code", { children: type }), _jsx("span", { children: body.required ? 'Required' : 'Optional' })] }), body.description ? _jsx(Markdown, { text: body.description }) : null, _jsx(Schema, { name: "body", schema: body.content[type].schema ?? {}, required: body.required, ctx: {
+        bodyNode = (_jsxs(_Fragment, { children: [heading(headingLevel, 'Request Body', ctx), _jsxs("div", { className: "mb-4 p-3 bg-fd-card rounded-xl border flex flex-row items-center justify-between gap-2", children: [_jsx("code", { children: type }), _jsx("span", { className: "text-xs", children: body.required ? 'Required' : 'Optional' })] }), body.description ? _jsx(Markdown, { text: body.description }) : null, _jsx(Schema, { name: "body", schema: (body.content[type].schema ?? {}), required: body.required, ctx: {
                         readOnly: method.method === 'GET',
                         writeOnly: method.method !== 'GET',
                         render: ctx,
@@ -92,11 +92,11 @@ async function ResponseTab({ status, operation, ctx, }) {
     else if (generateTypeScriptSchema === undefined && responseOfType?.schema) {
         ts = await getTypescriptSchema(responseOfType?.schema, schema.dereferenceMap);
     }
-    return (_jsxs(Tab, { value: status, children: [_jsx(Markdown, { text: description }), responseOfType?.schema && (_jsx(Schema, { name: "response", schema: responseOfType.schema, required: true, ctx: {
+    return (_jsxs(Tab, { value: status, children: [_jsx(Markdown, { text: description }), ts && _jsx(CopyResponseTypeScript, { code: ts }), responseOfType?.schema && (_jsx(Schema, { name: "response", schema: responseOfType.schema, required: true, ctx: {
                     render: ctx,
                     writeOnly: false,
                     readOnly: true,
-                } })), ts && _jsx(CodeBlock, { lang: "ts", code: ts, ctx: ctx, className: "mt-4" })] }));
+                } }))] }));
 }
 function WebhookCallback({ callback, ctx, headingLevel, }) {
     return Object.entries(callback).map(([path, pathItem]) => {

package/dist/render/schema.d.ts

@@ -1,16 +1,16 @@
 import { type ReactNode } from 'react';
-import { NoReference, type ParsedSchema } from '../utils/schema.js';
+import type { ResolvedSchema } from '../utils/schema.js';
 import type { RenderContext } from '../types.js';
 interface Context {
     readOnly: boolean;
     writeOnly: boolean;
-    stack?: ParsedSchema[];
+    stack?: ResolvedSchema[];
     render: RenderContext;
 }
 export declare function Schema({ name, schema, required, parseObject, ctx, }: {
     name: string;
     required?: boolean;
-    schema: NoReference<ParsedSchema>;
+    schema: ResolvedSchema;
     /**
      * Render the full object
      *

package/dist/render/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/render/schema.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAgB7C,UAAU,OAAO;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IAEvB,MAAM,EAAE,aAAa,CAAC;CACvB;AAUD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,WAAkB,EAClB,GAAG,GACJ,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IAElC;;;;SAIK;IACL,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,GAAG,EAAE,OAAO,CAAC;CACd,GAAG,SAAS,CAmKZ"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/render/schema.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAgB,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiB7C,UAAU,OAAO;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IAEzB,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,WAAkB,EAClB,GAAG,GACJ,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;IAEvB;;;;SAIK;IACL,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,GAAG,EAAE,OAAO,CAAC;CACd,GAAG,SAAS,CA+MZ"}

package/dist/render/schema.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isNullable } from '../utils/schema.js';
 import { combineSchema } from '../utils/combine-schema.js';
 import { Markdown } from './markdown.js';
+import { schemaToString } from '../utils/schema-to-string.js';
 const keys = {
     default: 'Default',
     minimum: 'Minimum',
@@ -11,48 +11,55 @@ const keys = {
     pattern: 'Pattern',
     format: 'Format',
 };
-function isObject(schema) {
-    return (schema.type === 'object' ||
-        schema.properties !== undefined ||
-        schema.additionalProperties !== undefined);
-}
 export function Schema({ name, schema, required = false, parseObject = true, ctx, }) {
+    const { render: { renderer }, stack = [], } = ctx;
+    if (schema === true) {
+        return _jsx(renderer.Property, { name: name, type: "any" });
+    }
+    else if (schema === false) {
+        return _jsx(renderer.Property, { name: name, type: "never" });
+    }
     if ((schema.readOnly === true && !ctx.readOnly) ||
         (schema.writeOnly === true && !ctx.writeOnly))
         return null;
-    const { render: { renderer }, stack = [], } = ctx;
-    // object type
-    if (isObject(schema) &&
-        parseObject &&
-        (schema.additionalProperties || schema.properties)) {
-        let body = null;
-        let footer = null;
-        const { additionalProperties, properties } = schema;
-        if (additionalProperties === true) {
-            footer = _jsx(renderer.Property, { name: "[key: string]", type: "any" });
-        }
-        else if (additionalProperties) {
-            footer = (_jsx(Schema, { name: "[key: string]", schema: additionalProperties, parseObject: false, ctx: {
-                    ...ctx,
-                    stack: [schema, ...stack],
-                } }));
-        }
-        if (properties) {
-            body = Object.entries(properties).map(([key, value]) => {
-                return (_jsx(Schema, { name: key, schema: value, parseObject: false, required: schema.required?.includes(key) ?? false, ctx: {
-                        ...ctx,
-                        stack: [schema, ...stack],
-                    } }, key));
-            });
-        }
-        return (_jsxs("div", { className: "flex flex-col gap-4", children: [body, footer] }));
+    if (Array.isArray(schema.type) && schema.type.length === 1) {
+        return (_jsx(Schema, { name: name, required: required, parseObject: parseObject, schema: {
+                ...schema,
+                type: schema.type[0],
+            }, ctx: {
+                ...ctx,
+                stack: [schema, ...stack],
+            } }));
     }
-    if (schema.allOf && parseObject) {
-        return (_jsx(Schema, { name: name, schema: combineSchema(schema.allOf), ctx: {
+    if (schema.allOf || schema.anyOf) {
+        return (_jsx(Schema, { name: name, parseObject: parseObject, required: required, schema: combineSchema([
+                ...(schema.allOf ?? []),
+                ...(schema.anyOf ?? []),
+            ]), ctx: {
                 ...ctx,
                 stack: [schema, ...stack],
             } }));
     }
+    // object type
+    if (schema.type === 'object' && parseObject) {
+        const { additionalProperties, patternProperties, properties } = schema;
+        return (_jsxs("div", { className: "flex flex-col gap-4", children: [properties &&
+                    Object.entries(properties).map(([key, value]) => {
+                        return (_jsx(Schema, { name: key, schema: value, parseObject: false, required: schema.required?.includes(key) ?? false, ctx: {
+                                ...ctx,
+                                stack: [schema, ...stack],
+                            } }, key));
+                    }), patternProperties &&
+                    Object.entries(patternProperties).map(([key, value]) => {
+                        return (_jsx(Schema, { name: key, schema: value, parseObject: false, ctx: {
+                                ...ctx,
+                                stack: [schema, ...stack],
+                            } }, key));
+                    }), additionalProperties && (_jsx(Schema, { name: "[key: string]", schema: additionalProperties, parseObject: false, ctx: {
+                        ...ctx,
+                        stack: [schema, ...stack],
+                    } }))] }));
+    }
     let footer;
     const fields = [];
     for (const [key, value] of Object.entries(keys)) {
@@ -69,84 +76,47 @@ export function Schema({ name, schema, required = false, parseObject = true, ctx
             value: schema.enum.map((value) => JSON.stringify(value)).join(' | '),
         });
     }
-    if (isObject(schema) && !parseObject && !stack.includes(schema)) {
+    if (schema.type === 'object' && !parseObject && !stack.includes(schema)) {
         footer = (_jsx(renderer.ObjectCollapsible, { name: "Show Attributes", children: _jsx(Schema, { name: name, schema: schema, ctx: {
                     ...ctx,
                     stack: [schema, ...stack],
                 } }) }));
     }
     else {
-        const mentionedObjectTypes = [
-            ...(schema.anyOf ?? schema.oneOf ?? []),
-            ...(schema.not ? [schema.not] : []),
-            ...(schema.type === 'array' && schema.items ? [schema.items] : []),
-        ].filter((s) => isComplexType(s) && !stack.includes(s));
-        footer = mentionedObjectTypes.map((s, idx) => {
-            return (_jsx(renderer.ObjectCollapsible, { name: s.title ??
-                    (mentionedObjectTypes.length === 1
-                        ? 'Show Attributes'
-                        : `Object ${idx + 1}`), children: _jsx(Schema, { name: "element", schema: s, ctx: {
-                        ...ctx,
-                        stack: [schema, ...stack],
-                    } }) }, idx));
-        });
+        let mentionedObjectTypes = [];
+        if (Array.isArray(schema.type)) {
+            mentionedObjectTypes.push(...schema.type.map((type) => ({
+                ...schema,
+                type,
+            })));
+        }
+        if (schema.oneOf)
+            mentionedObjectTypes.push(...schema.oneOf);
+        if (schema.not)
+            mentionedObjectTypes.push(schema.not);
+        if (schema.type === 'array' && schema.items)
+            mentionedObjectTypes.push(schema.items);
+        mentionedObjectTypes = mentionedObjectTypes.filter((s) => isComplexType(s) && !stack.includes(s));
+        footer = (_jsx("div", { className: "flex flex-col gap-2", children: mentionedObjectTypes.map((s, idx) => {
+                let title = typeof s === 'object' ? s.title : null;
+                title ?? (title = mentionedObjectTypes.length === 1
+                    ? 'Show Attributes'
+                    : `Object ${idx + 1}`);
+                return (_jsx(renderer.ObjectCollapsible, { name: title, children: _jsx(Schema, { name: "element", schema: s, ctx: {
+                            ...ctx,
+                            stack: [schema, ...stack],
+                        } }) }, idx));
+            }) }));
     }
-    return (_jsxs(renderer.Property, { name: name, type: getSchemaType(schema, ctx), required: required, deprecated: schema.deprecated, children: [schema.description ? _jsx(Markdown, { text: schema.description }) : null, fields.length > 0 ? (_jsx("div", { className: "flex flex-col gap-2", children: fields.map((field) => (_jsxs("span", { children: [field.key, ": ", _jsx("code", { children: field.value })] }, field.key))) })) : null, footer] }));
+    return (_jsxs(renderer.Property, { name: name, type: schemaToString(schema), required: required, deprecated: schema.deprecated, children: [schema.description ? _jsx(Markdown, { text: schema.description }) : null, fields.length > 0 ? (_jsx("div", { className: "flex flex-col gap-2", children: fields.map((field) => (_jsxs("span", { children: [field.key, ": ", _jsx("code", { children: field.value })] }, field.key))) })) : null, footer] }));
 }
 /**
  * Check if the schema needs another collapsible to explain
  */
 function isComplexType(schema) {
+    if (typeof schema === 'boolean')
+        return false;
     if (schema.anyOf ?? schema.oneOf ?? schema.allOf)
         return true;
-    return isObject(schema) || schema.type === 'array';
-}
-function getSchemaType(schema, ctx, isRoot = true) {
-    if (isNullable(schema) && isRoot) {
-        const type = getSchemaType(schema, ctx, false);
-        // null if schema only contains `nullable`
-        return type === 'unknown' ? 'null' : `${type} | null`;
-    }
-    if (schema.title)
-        return schema.title;
-    if (schema.type === 'array')
-        return `array<${schema.items ? getSchemaType(schema.items, ctx) : 'unknown'}>`;
-    if (schema.oneOf)
-        return schema.oneOf
-            .map((one) => getSchemaType(one, ctx, false))
-            .filter((v) => v !== 'unknown')
-            .join(' | ');
-    if (schema.allOf) {
-        return schema.allOf
-            .map((one) => getSchemaType(one, ctx, false))
-            .filter((v) => v !== 'unknown')
-            .join(' & ');
-    }
-    if (schema.not)
-        return `not ${getSchemaType(schema.not, ctx, false)}`;
-    if (schema.anyOf) {
-        const properties = schema.anyOf
-            .map((one) => getSchemaType(one, ctx, false))
-            .filter((v) => v !== 'unknown');
-        if (properties.length > 1) {
-            return `Any properties in ${properties.join(',')}`;
-        }
-        else if (properties.length === 1) {
-            return properties[0];
-        }
-        // otherwise unknown
-    }
-    if (schema.type === 'string' && schema.format === 'binary')
-        return 'file';
-    if (schema.type && Array.isArray(schema.type)) {
-        const nonNullTypes = schema.type.filter((v) => v !== 'null');
-        if (nonNullTypes.length > 0)
-            return nonNullTypes.join(' | ');
-    }
-    else if (schema.type && schema.type !== 'null') {
-        return schema.type;
-    }
-    if (isObject(schema))
-        return 'object';
-    return 'unknown';
+    return schema.type === 'object' || schema.type === 'array';
 }

package/dist/ui/client.d.ts

@@ -1,2 +1,5 @@
 export { ClientLazy as APIPlayground } from '../playground/client.lazy.js';
+export declare function CopyResponseTypeScript({ code }: {
+    code: string;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/ui/client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/ui/client.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEvE,wBAAgB,sBAAsB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,2CAgChE"}

package/dist/ui/client.js

@@ -1,2 +1,17 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';
+import { buttonVariants } from 'fumadocs-ui/components/ui/button';
+import { cn } from 'fumadocs-ui/utils/cn';
+import { Check, Copy } from '../icons.js';
 export { ClientLazy as APIPlayground } from '../playground/client.lazy.js';
+export function CopyResponseTypeScript({ code }) {
+    const [isChecked, onCopy] = useCopyButton(() => {
+        void navigator.clipboard.writeText(code);
+    });
+    return (_jsxs("div", { className: "flex items-start justify-between gap-2 bg-fd-card border rounded-xl p-3 not-prose mb-4 last:mb-0", children: [_jsxs("div", { children: [_jsx("p", { className: "font-medium text-fd-foreground mb-2", children: "TypeScript Definitions" }), _jsx("p", { className: "text-xs", children: "Use the response body type in TypeScript." })] }), _jsxs("button", { onClick: onCopy, className: cn(buttonVariants({
+                    color: 'secondary',
+                    className: 'p-2 gap-2',
+                    size: 'sm',
+                })), children: [isChecked ? (_jsx(Check, { className: "size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })), "Copy"] })] }));
+}

package/dist/ui/components/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/ui/components/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,8JAYjB,CAAC;AAGH,QAAA,MAAM,aAAa,8JAqBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAC;AAGF,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAC;AAGF,QAAA,MAAM,WAAW,oKAYf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/ui/components/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,8JAYjB,CAAC;AAGH,QAAA,MAAM,aAAa,8JA0BjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKtC,CAAC;AAGF,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAC;AAGF,QAAA,MAAM,WAAW,oKAYf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}

package/dist/ui/components/dialog.js

@@ -4,15 +4,16 @@ import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from '../../icons.js';
 import { cn } from 'fumadocs-ui/utils/cn';
+import { buttonVariants } from 'fumadocs-ui/components/ui/button';
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out', className), ...props })));
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out', className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-fd-popover p-6 shadow-lg duration-200 data-[state=open]:animate-fd-dialog-in data-[state=closed]:animate-fd-dialog-out sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-fd-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-fd-accent data-[state=open]:text-fd-muted-foreground", children: [_jsx(X, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('fixed left-1/2 top-1/2 z-50 flex flex-col gap-4 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-fd-popover p-4 shadow-lg rounded-xl duration-200 data-[state=open]:animate-fd-dialog-in data-[state=closed]:animate-fd-dialog-out focus-visible:outline-none', className), ...props, children: [children, _jsx(DialogPrimitive.Close, { "aria-label": "Close", className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }), 'absolute end-2 top-2 text-fd-muted-foreground/70'), children: _jsx(X, {}) })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-start', className), ...props }));
+const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col gap-1.5 text-center sm:text-start', className), ...props }));
 DialogHeader.displayName = 'DialogHeader';
 const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className), ...props }));
 DialogFooter.displayName = 'DialogFooter';

package/dist/ui/components/select.js

@@ -6,7 +6,7 @@ import { cn } from 'fumadocs-ui/utils/cn';
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex min-h-10 items-center w-full rounded-md border px-3 py-2 text-start text-[13px] text-fd-secondary-foreground bg-fd-secondary hover:bg-fd-accent focus:outline-none focus:ring focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "ms-auto size-4 text-fd-muted-foreground" }) })] })));
+const SelectTrigger = forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex min-h-10 items-center w-full rounded-md border px-3 py-2 text-start text-[13px] text-fd-secondary-foreground bg-fd-secondary hover:bg-fd-accent focus:outline-none focus:ring focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "ms-auto size-3.5 text-fd-muted-foreground" }) })] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('flex items-center justify-center py-1', className), ...props, children: _jsx(ChevronUp, { className: "size-4" }) })));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;

package/dist/ui/index.js

@@ -13,7 +13,7 @@ export function APIInfo({ className, ...props }) {
 }
 export function API({ children, ...props }) {
     return (_jsx("div", { ...props, className: cn('flex flex-col gap-x-6 gap-y-4 xl:flex-row xl:items-start', props.className), style: {
-            '--fd-api-info-top': 'calc(var(--fd-nav-height) + var(--fd-banner-height) + var(--fd-tocnav-height, 0px))',
+            '--fd-api-info-top': 'calc(12px + var(--fd-nav-height) + var(--fd-banner-height) + var(--fd-tocnav-height, 0px))',
             ...props.style,
         }, children: children }));
 }

package/dist/ui/server-select.d.ts

@@ -1,8 +1,3 @@
-import { type SelectedServer } from '../ui/contexts/api.js';
-import type { HTMLAttributes } from 'react';
-export default function ServerSelect({ server, onServerChanged, onVariablesChanged, ...props }: HTMLAttributes<HTMLDivElement> & {
-    server: SelectedServer | null;
-    onServerChanged: (value: string) => void;
-    onVariablesChanged: (value: Record<string, string>) => void;
-}): import("react/jsx-runtime").JSX.Element | null;
+import { type HTMLAttributes } from 'react';
+export default function ServerSelect(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element | undefined;
 //# sourceMappingURL=server-select.d.ts.map

package/dist/ui/server-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server-select.d.ts","sourceRoot":"","sources":["../../src/ui/server-select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAiB,MAAM,mBAAmB,CAAC;AASvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,MAAM,EACN,eAAe,EACf,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CAC7D,kDA4EA"}
+{"version":3,"file":"server-select.d.ts","sourceRoot":"","sources":["../../src/ui/server-select.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAejE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,uDAqDzE"}

package/dist/ui/server-select.js

@@ -1,26 +1,59 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useApiContext } from '../ui/contexts/api.js';
+import { useApiContext, useServerSelectContext, } from '../ui/contexts/api.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/components/select.js';
 import { Input, labelVariants } from '../ui/components/input.js';
+import { useEffect, useState } from 'react';
 import { cn } from 'fumadocs-ui/utils/cn';
-export default function ServerSelect({ server, onServerChanged, onVariablesChanged, ...props }) {
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '../ui/components/dialog.js';
+import { getUrl } from '../utils/server-url.js';
+import { FormProvider, useController, useForm } from 'react-hook-form';
+import { buttonVariants } from 'fumadocs-ui/components/ui/button';
+export default function ServerSelect(props) {
     const { servers } = useApiContext();
-    if (servers.length <= 1)
-        return null;
-    const schema = server
-        ? servers.find((item) => item.url === server.url)
-        : null;
-    return (_jsxs("div", { ...props, className: cn('flex flex-col gap-4', props.className), children: [_jsxs(Select, { value: server?.url, onValueChange: onServerChanged, children: [_jsx(SelectTrigger, { className: "break-all", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: servers.map((item) => (_jsxs(SelectItem, { value: item.url, children: [item.url, _jsx("p", { className: "text-start text-fd-muted-foreground", children: item.description })] }, item.url))) })] }), Object.entries(schema?.variables ?? {}).map(([key, variable]) => {
-                if (!server)
-                    return;
-                const id = `fd_server_select_${key}`;
-                return (_jsxs("fieldset", { className: "flex flex-col gap-1", children: [_jsx("label", { className: cn(labelVariants()), htmlFor: id, children: key }), _jsx("p", { className: "text-xs text-fd-muted-foreground empty:hidden", children: variable.description }), variable.enum ? (_jsxs(Select, { value: server.variables[key], onValueChange: (v) => onVariablesChanged({
-                                ...server?.variables,
-                                [key]: v,
-                            }), children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: variable.enum.map((value) => (_jsx(SelectItem, { value: value, children: value }, value))) })] })) : (_jsx(Input, { id: id, value: server.variables[key], onChange: (e) => onVariablesChanged({
-                                ...server?.variables,
-                                [key]: e.target.value,
-                            }) }))] }, key));
-            })] }));
+    const { server, setServer } = useServerSelectContext();
+    const [open, setOpen] = useState(false);
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    if (servers.length <= 0)
+        return;
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { className: "text-xs p-3 py-2 bg-fd-muted text-fd-muted-foreground transition-colors truncate hover:bg-fd-accent hover:text-fd-accent-foreground focus-visible:outline-none", children: isMounted
+                    ? server
+                        ? getUrl(server.url, server.variables)
+                        : window.location.origin
+                    : 'loading...' }), _jsxs(DialogContent, { ...props, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Server URL" }), _jsx(DialogDescription, { children: "The base URL of your API endpoint." })] }), _jsxs(Select, { value: server?.url, onValueChange: setServer, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: servers.map((item) => (_jsxs(SelectItem, { value: item.url, children: [item.url, _jsx("p", { className: "text-start text-fd-muted-foreground", children: item.description })] }, item.url))) })] }), server && (_jsx(ServerSelectContent, { server: server, onClose: () => setOpen(false) }, server.url))] })] }));
+}
+function ServerSelectContent({ server, onClose, }) {
+    const { servers } = useApiContext();
+    const { setServerVariables } = useServerSelectContext();
+    const schema = servers.find((item) => item.url === server.url);
+    const form = useForm({
+        defaultValues: server.variables,
+    });
+    const onSubmit = form.handleSubmit((data) => {
+        setServerVariables(data);
+        onClose();
+    });
+    if (!schema?.variables)
+        return;
+    return (_jsx(FormProvider, { ...form, children: _jsxs("form", { className: "flex flex-col gap-4", onSubmit: (e) => {
+                void onSubmit(e);
+                e.stopPropagation();
+            }, children: [Object.entries(schema.variables).map(([key, variable]) => {
+                    return (_jsxs("fieldset", { className: "flex flex-col gap-1", children: [_jsx("label", { className: cn(labelVariants()), htmlFor: key, children: key }), _jsx("p", { className: "text-xs text-fd-muted-foreground empty:hidden", children: variable.description }), _jsx(Field, { fieldName: key, variable: variable })] }, key));
+                }), _jsx("button", { type: "submit", className: cn(buttonVariants({
+                        color: 'primary',
+                        className: 'mt-2',
+                    })), children: "Save" })] }) }));
+}
+function Field({ fieldName, variable, }) {
+    const { field } = useController({
+        name: fieldName,
+    });
+    if (variable.enum) {
+        return (_jsxs(Select, { value: field.value, onValueChange: field.onChange, children: [_jsx(SelectTrigger, { id: fieldName, ref: field.ref, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: variable.enum.map((value) => (_jsx(SelectItem, { value: value, children: value }, value))) })] }));
+    }
+    return _jsx(Input, { id: fieldName, ...field });
 }

package/dist/utils/combine-schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combine-schema.d.ts","sourceRoot":"","sources":["../../src/utils/combine-schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAoDlE"}
+{"version":3,"file":"combine-schema.d.ts","sourceRoot":"","sources":["../../src/utils/combine-schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CA+DlE"}