fumadocs-openapi 9.0.2 → 9.0.3

package/dist/playground/client.d.ts

@@ -1,13 +1,8 @@
 import { type FC, type HTMLAttributes, type ReactElement } from 'react';
 import type { ControllerFieldState, ControllerRenderProps, FieldPath, UseFormStateReturn } from 'react-hook-form';
 import type { FetchResult } from '../playground/fetcher.js';
-import type { ParameterField, RequestSchema } from '../playground/index.js';
-import type { Security } from '../utils/get-security.js';
+import type { ParameterField, RequestSchema, SecurityEntry } from '../playground/index.js';
 interface FormValues {
-    authorization: string | {
-        username: string;
-        password: string;
-    };
     path: Record<string, string>;
     query: Record<string, string>;
     header: Record<string, string>;
@@ -25,13 +20,11 @@ export interface CustomField<TName extends FieldPath<FormValues>, Info> {
         formState: UseFormStateReturn<FormValues>;
     }) => ReactElement;
 }
-export type ClientProps = HTMLAttributes<HTMLFormElement> & {
+export interface ClientProps extends HTMLAttributes<HTMLFormElement> {
     route: string;
     method: string;
-    authorization?: Security & {
-        persistentId: string;
-    };
     parameters?: ParameterField[];
+    securities: SecurityEntry[][];
     body?: {
         schema: RequestSchema;
         mediaType: string;
@@ -43,7 +36,7 @@ export type ClientProps = HTMLAttributes<HTMLFormElement> & {
     proxyUrl?: string;
     fields?: {
         parameter?: CustomField<`${ParameterField['in']}.${string}`, ParameterField>;
-        auth?: CustomField<'authorization', RequestSchema>;
+        auth?: CustomField<FieldPath<FormValues>, RequestSchema>;
         body?: CustomField<'body', RequestSchema>;
     };
     components?: Partial<{
@@ -51,7 +44,7 @@ export type ClientProps = HTMLAttributes<HTMLFormElement> & {
             data: FetchResult;
         }>;
     }>;
-};
-export default function Client({ route, method, authorization, parameters, body, fields, references, proxyUrl, components: { ResultDisplay }, ...rest }: ClientProps): import("react/jsx-runtime").JSX.Element;
+}
+export default function Client({ route, method, securities, parameters, body, fields, references, proxyUrl, components: { ResultDisplay }, ...rest }: ClientProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/playground/client.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,EAAE,EAEP,KAAK,cAAc,EAEnB,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,oBAAoB,EACpB,qBAAqB,EACrB,SAAS,EACT,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAYxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAYrD,UAAU,UAAU;IAClB,aAAa,EACT,MAAM,GACN;QACE,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACN,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,WAAW,CAAC,KAAK,SAAS,SAAS,CAAC,UAAU,CAAC,EAAE,IAAI;IACpE,MAAM,EAAE,CAAC,KAAK,EAAE;QACd;;WAEG;QACH,IAAI,EAAE,IAAI,CAAC;QACX,KAAK,EAAE,qBAAqB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QAChD,UAAU,EAAE,oBAAoB,CAAC;QACjC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;KAC3C,KAAK,YAAY,CAAC;CACpB;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,eAAe,CAAC,GAAG;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,QAAQ,GAAG;QACzB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE;QACL,MAAM,EAAE,aAAa,CAAC;QACtB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,WAAW,CACrB,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,MAAM,EAAE,EACnC,cAAc,CACf,CAAC;QACF,IAAI,CAAC,EAAE,WAAW,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;QACnD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;KAC3C,CAAC;IAEF,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,aAAa,EAAE,EAAE,CAAC;YAAE,IAAI,EAAE,WAAW,CAAA;SAAE,CAAC,CAAC;KAC1C,CAAC,CAAC;CACJ,CAAC;AAoBF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,KAAK,EACL,MAAc,EACd,aAAa,EACb,UAAU,EACV,IAAI,EACJ,MAAM,EACN,UAAU,EACV,QAAQ,EACR,UAAU,EAAE,EAAE,aAAoC,EAAO,EACzD,GAAG,IAAI,EACR,EAAE,WAAW,2CAkHb"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/playground/client.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,EAAE,EAEP,KAAK,cAAc,EAEnB,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,oBAAoB,EACpB,qBAAqB,EACrB,SAAS,EACT,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,aAAa,EACd,MAAM,oBAAoB,CAAC;AA2B5B,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,WAAW,CAAC,KAAK,SAAS,SAAS,CAAC,UAAU,CAAC,EAAE,IAAI;IACpE,MAAM,EAAE,CAAC,KAAK,EAAE;QACd;;WAEG;QACH,IAAI,EAAE,IAAI,CAAC;QACX,KAAK,EAAE,qBAAqB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QAChD,UAAU,EAAE,oBAAoB,CAAC;QACjC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;KAC3C,KAAK,YAAY,CAAC;CACpB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,UAAU,EAAE,aAAa,EAAE,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE;QACL,MAAM,EAAE,aAAa,CAAC;QACtB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,WAAW,CACrB,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,MAAM,EAAE,EACnC,cAAc,CACf,CAAC;QACF,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC,CAAC;QACzD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;KAC3C,CAAC;IAEF,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,aAAa,EAAE,EAAE,CAAC;YAAE,IAAI,EAAE,WAAW,CAAA;SAAE,CAAC,CAAC;KAC1C,CAAC,CAAC;CACJ;AAsBD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,KAAK,EACL,MAAc,EACd,UAAU,EACV,UAAU,EACV,IAAI,EACJ,MAAM,EACN,UAAU,EACV,QAAQ,EACR,UAAU,EAAE,EAAE,aAAoC,EAAO,EACzD,GAAG,IAAI,EACR,EAAE,WAAW,2CAgLb"}

package/dist/playground/client.js

@@ -11,11 +11,13 @@ import { MethodLabel } from '../ui/components/method-label.js';
 import { useQuery } from '../utils/use-query.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from 'fumadocs-ui/components/ui/collapsible';
 import { ChevronDown, LoaderCircle } from '../icons.js';
-import { useRequestData } from '../ui/contexts/code-example.js';
-import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
 import { buttonVariants } from 'fumadocs-ui/components/ui/button';
 import { cn } from 'fumadocs-ui/utils/cn';
 import { SchemaProvider, useResolvedSchema, } from '../playground/schema.js';
+import { useRequestDataUpdater, useRequestInitialData, } from '../ui/contexts/code-example.js';
+import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
+import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+const AuthPrefix = '__fumadocs_auth';
 function toRequestData(method, mediaType, value) {
     return {
         path: value.path,
@@ -28,20 +30,21 @@ function toRequestData(method, mediaType, value) {
     };
 }
 const ServerSelect = lazy(() => import('../ui/server-select.js'));
-export default function Client({ route, method = 'GET', authorization, parameters, body, fields, references, proxyUrl, components: { ResultDisplay = DefaultResultDisplay } = {}, ...rest }) {
+export default function Client({ route, method = 'GET', securities, parameters, body, fields, references, proxyUrl, components: { ResultDisplay = DefaultResultDisplay } = {}, ...rest }) {
     const { server } = useServerSelectContext();
-    const requestData = useRequestData();
+    const requestData = useRequestInitialData();
+    const updater = useRequestDataUpdater();
     const fieldInfoMap = useMemo(() => new Map(), []);
-    const authInfo = usePersistentAuthInfo(authorization);
     const { mediaAdapters } = useApiContext();
+    const [securityId, setSecurityId] = useState(0);
+    const { inputs, mapInputs } = useAuthInputs(securities[securityId]);
     const defaultValues = useMemo(() => ({
-        authorization: authInfo.info,
-        path: requestData.data.path,
-        query: requestData.data.query,
-        header: requestData.data.header,
-        body: requestData.data.body,
-        cookie: requestData.data.cookie,
-    }), [authInfo.info, requestData.data]);
+        path: requestData.path,
+        query: requestData.query,
+        header: requestData.header,
+        body: requestData.body,
+        cookie: requestData.cookie,
+    }), [requestData]);
     const form = useForm({
         defaultValues,
     });
@@ -55,97 +58,79 @@ export default function Client({ route, method = 'GET', authorization, parameter
             ...toRequestData(method, body?.mediaType, input),
         });
     });
-    useEffect(() => {
+    function initAuthValues() {
+        for (const item of inputs) {
+            let value = item.defaultValue;
+            const stored = localStorage.getItem(AuthPrefix + item.original.id);
+            if (stored) {
+                const parsed = JSON.parse(stored);
+                if (typeof parsed === typeof item.defaultValue)
+                    value = parsed;
+            }
+            // @ts-expect-error -- safe
+            form.setValue(item.fieldName, value);
+        }
+    }
+    useOnChange(defaultValues, () => {
         fieldInfoMap.clear();
         form.reset(defaultValues);
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- update default value
-    }, [defaultValues]);
+        initAuthValues();
+    });
+    useOnChange(inputs, (_, previous) => {
+        for (const item of previous) {
+            form.reset((values) => manipulateValues(values, item.fieldName, () => undefined));
+        }
+        initAuthValues();
+    });
     useEffect(() => {
-        const subscription = form.watch((_value) => {
-            const value = _value;
-            if (authorization && value.authorization) {
-                authInfo.saveInfo(value.authorization);
-                writeAuthInfo(authorization, value.authorization, value.header, value.query, value.cookie);
-            }
-            requestData.saveData(toRequestData(method, body?.mediaType, value));
+        let timer = null;
+        const subscription = form.subscribe({
+            formState: {
+                values: true,
+            },
+            callback({ values }) {
+                if (timer)
+                    window.clearTimeout(timer);
+                timer = window.setTimeout(() => {
+                    for (const item of inputs) {
+                        const value = item.fieldName
+                            .split('.')
+                            .reduce((v, seg) => v[seg], values);
+                        if (value) {
+                            localStorage.setItem(AuthPrefix + item.original.id, JSON.stringify(value));
+                        }
+                    }
+                    updater.setData(toRequestData(method, body?.mediaType, mapInputs(values)));
+                }, timer ? 400 : 0);
+            },
         });
-        return () => {
-            subscription.unsubscribe();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- mounted only once
+        initAuthValues();
+        return () => subscription();
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- mounted once only
     }, []);
     const onSubmit = form.handleSubmit((value) => {
-        testQuery.start(value);
+        testQuery.start(mapInputs(value));
     });
-    return (_jsx(FormProvider, { ...form, children: _jsx(SchemaProvider, { fieldInfoMap: fieldInfoMap, references: references, children: _jsxs("form", { ...rest, className: cn('not-prose flex flex-col rounded-xl border shadow-md overflow-hidden bg-fd-card text-fd-card-foreground', rest.className), onSubmit: onSubmit, children: [_jsx(ServerSelect, {}), _jsxs("div", { className: "flex flex-row items-center gap-2 text-sm p-3 pb-0", children: [_jsx(MethodLabel, { children: method }), _jsx(Route, { route: route, className: "flex-1" }), _jsx("button", { type: "submit", className: cn(buttonVariants({ color: 'primary', size: 'sm' }), 'px-3 py-1.5'), disabled: testQuery.isLoading, children: testQuery.isLoading ? (_jsx(LoaderCircle, { className: "size-4 animate-spin" })) : ('Send') })] }), _jsx(FormBody, { body: body, fields: fields, parameters: parameters, authorization: authorization }), testQuery.data ? _jsx(ResultDisplay, { data: testQuery.data }) : null, authorization && _jsx(AuthFooter, { authorization: authorization })] }) }) }));
+    return (_jsx(FormProvider, { ...form, children: _jsx(SchemaProvider, { fieldInfoMap: fieldInfoMap, references: references, children: _jsxs("form", { ...rest, className: cn('not-prose flex flex-col rounded-xl border shadow-md overflow-hidden bg-fd-card text-fd-card-foreground', rest.className), onSubmit: onSubmit, children: [_jsx(ServerSelect, {}), _jsxs("div", { className: "flex flex-row items-center gap-2 text-sm p-3 pb-0", children: [_jsx(MethodLabel, { children: method }), _jsx(Route, { route: route, className: "flex-1" }), _jsx("button", { type: "submit", className: cn(buttonVariants({ color: 'primary', size: 'sm' }), 'px-3 py-1.5'), disabled: testQuery.isLoading, children: testQuery.isLoading ? (_jsx(LoaderCircle, { className: "size-4 animate-spin" })) : ('Send') })] }), securities.length > 0 && (_jsxs("div", { className: "m-3 p-3 border bg-fd-muted rounded-lg", children: [_jsxs("div", { className: "flex gap-4 items-center justify-between mb-4", children: [_jsx("p", { className: "text-sm font-medium", children: "Authorization" }), _jsx("select", { value: securityId.toString(), onChange: (e) => setSecurityId(Number(e.target.value)), className: "text-xs font-mono px-2 py-1.5 outline-none", children: securities.map((security, i) => (_jsx("option", { value: i, children: security.map((item) => item.id).join(' & ') }, i))) })] }), _jsx("div", { className: "flex flex-col gap-4", children: inputs.map((input) => (_jsx(Fragment, { children: input.children }, input.fieldName))) })] })), _jsx(FormBody, { body: body, fields: fields, parameters: parameters }), testQuery.data ? _jsx(ResultDisplay, { data: testQuery.data }) : null] }) }) }));
 }
 const paramNames = ['Headers', 'Cookies', 'Query', 'Path'];
 const paramTypes = ['header', 'cookie', 'query', 'path'];
-function FormBody({ authorization, parameters = [], fields = {}, body, }) {
+function FormBody({ parameters = [], fields = {}, body, }) {
     const params = useMemo(() => {
         return paramTypes.map((param) => parameters.filter((v) => v.in === param));
     }, [parameters]);
-    const auth = useMemo(() => {
-        if (!authorization)
-            return;
-        if (authorization.type === 'http' && authorization.scheme === 'basic') {
-            return {
-                in: 'header',
-                field: {
-                    type: 'object',
-                    required: ['username', 'password'],
-                    description: authorization.description,
-                    properties: {
-                        username: {
-                            type: 'string',
-                        },
-                        password: {
-                            type: 'string',
-                        },
-                    },
-                },
-            };
-        }
-        else if (authorization.type === 'http' ||
-            authorization.type === 'oauth2') {
-            return {
-                in: 'header',
-                field: {
-                    type: 'string',
-                    description: authorization.description ?? `The Authorization access token.`,
-                },
-            };
-        }
-        else if (authorization.type === 'apiKey') {
-            return {
-                in: authorization.in,
-                field: {
-                    type: 'string',
-                    description: authorization.description ?? 'The API key.',
-                },
-            };
-        }
-        // TODO: handle OpenID connect
-    }, [authorization]);
-    function renderAuth() {
-        if (!auth)
-            return null;
-        if (fields?.auth)
-            return renderCustomField('authorization', auth.field, fields.auth);
-        return (_jsx(FieldSet, { fieldName: "authorization", name: "Authorization", field: auth.field, isRequired: true }));
-    }
     return (_jsxs(_Fragment, { children: [params.map((param, i) => {
+                if (param.length === 0)
+                    return;
                 const name = paramNames[i];
                 const type = paramTypes[i];
-                if ((!auth || type !== auth.in) && param.length === 0)
-                    return;
-                return (_jsxs(CollapsiblePanel, { title: name, children: [auth && type === auth.in ? renderAuth() : null, param.map((field) => {
-                            const fieldName = `${type}.${field.name}`;
-                            if (fields?.parameter) {
-                                return renderCustomField(fieldName, field.schema, fields.parameter, field.name);
-                            }
-                            return (_jsx(FieldSet, { name: field.name, fieldName: fieldName, field: field.schema }, fieldName));
-                        })] }, name));
+                return (_jsx(CollapsiblePanel, { title: name, children: param.map((field) => {
+                        const fieldName = `${type}.${field.name}`;
+                        if (fields?.parameter) {
+                            return renderCustomField(fieldName, field.schema, fields.parameter, field.name);
+                        }
+                        return (_jsx(FieldSet, { name: field.name, fieldName: fieldName, field: field.schema }, fieldName));
+                    }) }, name));
             }), body && (_jsx(CollapsiblePanel, { title: "Body", children: fields.body ? (renderCustomField('body', body.schema, fields.body)) : (_jsx(BodyInput, { field: body.schema })) }))] }));
 }
 function BodyInput({ field: _field }) {
@@ -163,6 +148,108 @@ function BodyInput({ field: _field }) {
                     className: 'p-2',
                 })), onClick: () => setIsJson(true), type: "button", children: "Open JSON Editor" }) })) }));
 }
+/**
+ * manipulate values without mutating the original object
+ *
+ * @returns a new manipulated object
+ */
+function manipulateValues(values, fieldName, update) {
+    const root = { ...values };
+    let current = root;
+    const segments = fieldName.split('.');
+    for (let i = 0; i < segments.length; i++) {
+        const segment = segments[i];
+        if (i !== segments.length - 1) {
+            let v = current[segment];
+            v = { ...v };
+            current[segment] = v;
+            current = v;
+            continue;
+        }
+        const updated = update(current[segment]);
+        if (updated === undefined) {
+            delete current[segment];
+        }
+        else {
+            current[segment] = updated;
+        }
+    }
+    return root;
+}
+function useAuthInputs(securities) {
+    const inputs = useMemo(() => {
+        const result = [];
+        if (!securities)
+            return result;
+        for (const security of securities) {
+            if (security.type === 'http' && security.scheme === 'basic') {
+                const fieldName = `header.Authorization`;
+                result.push({
+                    fieldName,
+                    original: security,
+                    defaultValue: {
+                        username: '',
+                        password: '',
+                    },
+                    mapOutput(out) {
+                        if (out && typeof out === 'object') {
+                            return `Basic ${btoa(`${'username' in out ? out.username : ''}:${'password' in out ? out.password : ''}`)}`;
+                        }
+                        return out;
+                    },
+                    children: (_jsx(FieldSet, { name: "Authorization (header)", field: {
+                            type: 'object',
+                            required: ['username', 'password'],
+                            description: security.description,
+                            properties: {
+                                username: {
+                                    type: 'string',
+                                },
+                                password: {
+                                    type: 'string',
+                                },
+                            },
+                        }, fieldName: fieldName })),
+                });
+            }
+            else if (security.type === 'http' || security.type === 'oauth2') {
+                const fieldName = 'header.Authorization';
+                result.push({
+                    fieldName: fieldName,
+                    original: security,
+                    defaultValue: 'Bearer ',
+                    children: (_jsxs(_Fragment, { children: [_jsx(FieldSet, { name: "Authorization (header)", fieldName: fieldName, field: {
+                                    type: 'string',
+                                    description: security.description ?? `The Authorization access token.`,
+                                } }), _jsx(OAuth, { authorization: security })] })),
+                });
+            }
+            else if (security.type === 'apiKey') {
+                const fieldName = `${security.in}.${security.name}`;
+                result.push({
+                    fieldName,
+                    defaultValue: '',
+                    original: security,
+                    children: (_jsx(FieldSet, { fieldName: fieldName, name: security.name, field: {
+                            type: 'string',
+                            description: security.description ?? `The API key in ${security.in}.`,
+                        } })),
+                });
+            }
+            // TODO: handle OpenID connect
+        }
+        return result;
+    }, [securities]);
+    const mapInputs = useEffectEvent((values) => {
+        for (const item of inputs) {
+            if (!item.mapOutput)
+                continue;
+            values = manipulateValues(values, item.fieldName, item.mapOutput);
+        }
+        return values;
+    });
+    return { inputs, mapInputs };
+}
 function renderCustomField(fieldName, info, field, key) {
     return (_jsx(Controller, { 
         // @ts-expect-error we use string here
@@ -174,7 +261,7 @@ const OauthDialog = lazy(() => import('./auth/oauth-dialog.js').then((mod) => ({
 const OauthDialogTrigger = lazy(() => import('./auth/oauth-dialog.js').then((mod) => ({
     default: mod.OauthDialogTrigger,
 })));
-function AuthFooter({ authorization }) {
+function OAuth({ authorization }) {
     const form = useFormContext();
     if (authorization.type !== 'oauth2')
         return;
@@ -197,61 +284,6 @@ function DefaultResultDisplay({ data }) {
                     ? data.data
                     : JSON.stringify(data.data, null, 2), options: shikiOptions })) : null] }));
 }
-function usePersistentAuthInfo(authorization) {
-    const key = authorization
-        ? `__fumadocs_auth_${authorization.persistentId}`
-        : null;
-    const [info, setInfo] = useState(() => {
-        if (!authorization || authorization.type === 'apiKey')
-            return '';
-        if (authorization.type === 'http' && authorization.scheme === 'basic') {
-            return {
-                username: '',
-                password: '',
-            };
-        }
-        return 'Bearer';
-    });
-    useEffect(() => {
-        if (!key)
-            return;
-        const item = localStorage.getItem(key);
-        if (item) {
-            setInfo(JSON.parse(item));
-        }
-    }, [key]);
-    return {
-        info,
-        saveInfo: useEffectEvent((value) => {
-            if (!key)
-                return;
-            localStorage.setItem(key, JSON.stringify(value));
-        }),
-    };
-}
 function CollapsiblePanel({ title, children, ...props }) {
     return (_jsxs(Collapsible, { ...props, className: "border-b last:border-b-0", children: [_jsxs(CollapsibleTrigger, { className: "group w-full flex items-center gap-2 p-3 text-sm font-medium", children: [title, _jsx(ChevronDown, { className: "ms-auto size-3.5 text-fd-muted-foreground group-data-[state=open]:rotate-180" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col gap-3 p-3 pt-1", children: children }) })] }));
 }
-function writeAuthInfo(authorization, input, header, query, cookie) {
-    if (authorization.type === 'apiKey') {
-        if (authorization.in === 'header') {
-            header[authorization.name] = input;
-        }
-        if (authorization.in === 'query') {
-            query[authorization.name] = input;
-        }
-        if (authorization.in === 'cookie') {
-            cookie[authorization.name] = input;
-        }
-        return;
-    }
-    if (authorization.type === 'http' &&
-        authorization.scheme === 'basic' &&
-        typeof input === 'object') {
-        header.Authorization = `Basic ${btoa(`${input.username}:${input.password}`)}`;
-        return;
-    }
-    if (typeof input === 'string') {
-        header.Authorization = input;
-    }
-}

package/dist/playground/index.d.ts

@@ -1,4 +1,4 @@
-import type { MethodInformation, RenderContext } from '../types.js';
+import type { MethodInformation, RenderContext, SecuritySchemeObject } from '../types.js';
 import { type ParsedSchema } from '../utils/schema.js';
 import { type ClientProps } from './client.js';
 export type ParameterField = {
@@ -15,5 +15,9 @@ export interface APIPlaygroundProps {
     client?: Partial<ClientProps>;
 }
 export type { ClientProps, CustomField } from './client.js';
+export type SecurityEntry = SecuritySchemeObject & {
+    scopes: string[];
+    id: string;
+};
 export declare function APIPlayground({ path, method, ctx, client, }: APIPlaygroundProps): Promise<import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/dist/playground/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/playground/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EAAoB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAErE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;IACrB,EAAE,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC;AAQzC,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,iBAAiB,CAAC;IAC1B,GAAG,EAAE,aAAa,CAAC;IAEnB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC/B;AAED,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEzD,wBAAsB,aAAa,CAAC,EAClC,IAAI,EACJ,MAAM,EACN,GAAG,EACH,MAAM,GACP,EAAE,kBAAkB,oDAuCpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/playground/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACrB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAoB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;IACrB,EAAE,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC;AAQzC,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,iBAAiB,CAAC;IAC1B,GAAG,EAAE,aAAa,CAAC;IAEnB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC/B;AAED,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEzD,MAAM,MAAM,aAAa,GAAG,oBAAoB,GAAG;IACjD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,wBAAsB,aAAa,CAAC,EAClC,IAAI,EACJ,MAAM,EACN,GAAG,EACH,MAAM,GACP,EAAE,kBAAkB,oDAuCpB"}

package/dist/playground/index.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getPreferredType } from '../utils/schema.js';
-import { getSecurities } from '../utils/get-security.js';
 import { ClientLazy } from '../ui/lazy.js';
 export async function APIPlayground({ path, method, ctx, client, }) {
     let currentId = 0;
@@ -14,7 +13,7 @@ export async function APIPlayground({ path, method, ctx, client, }) {
         registered: new WeakMap(),
     };
     const props = {
-        authorization: getAuthorizationField(method, ctx),
+        securities: parseSecurities(method, ctx),
         method: method.method,
         route: path,
         parameters: method.parameters?.map((v) => ({
@@ -68,32 +67,24 @@ function writeReferences(schema, ctx, stack = new WeakMap()) {
     }
     return output;
 }
-function getAuthorizationField(method, { schema: { document } }) {
+function parseSecurities(method, { schema: { document } }) {
+    const result = [];
     const security = method.security ?? document.security ?? [];
     if (security.length === 0)
-        return;
-    let item;
-    for (const requirements of security) {
-        const keys = Object.keys(requirements).length;
-        if (keys === 0)
-            return;
-        else if (keys === 1)
-            item = requirements;
-    }
-    if (!item) {
-        console.warn(`Cannot find suitable security scheme for API Playground from ${JSON.stringify(security, null, 2)}. Only schemes with one requirement are allowed at the moment.`);
-        return;
-    }
-    const scheme = getSecurities(item, document)[0];
-    if (scheme.type === 'oauth2') {
-        const flow = Object.keys(scheme.flows).at(0);
-        if (!flow)
-            throw new Error("security scheme's `flows` must not be empty");
-        if (flow === 'implicit' || flow === 'password')
-            throw new Error(`OAuth 2.0 flow type: ${flow} is not supported, consider other types like \`authorizationCode\` instead.`);
+        return result;
+    for (const map of security) {
+        const list = [];
+        for (const [key, scopes] of Object.entries(map)) {
+            const scheme = document.components?.securitySchemes?.[key];
+            if (!scheme)
+                continue;
+            list.push({
+                ...scheme,
+                scopes,
+                id: key,
+            });
+        }
+        result.push(list);
     }
-    return {
-        persistentId: Object.keys(item)[0],
-        ...scheme,
-    };
+    return result;
 }

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

@@ -1,4 +1,4 @@
 import type { MethodInformation, RenderContext } from '../../types.js';
 import type { RequestData } from '../../requests/_shared.js';
-export declare function getRequestData(path: string, method: MethodInformation, sampleKey: string | null, { schema: { document } }: RenderContext): RequestData;
+export declare function getRequestData(path: string, method: MethodInformation, sampleKey: string | null, _ctx: 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;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"}
+{"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;AAIhE,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,IAAI,EAAE,aAAa,GAClB,WAAW,CA8Db"}

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

@@ -1,7 +1,6 @@
 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 } }) {
+export function getRequestData(path, method, sampleKey, _ctx) {
     const result = {
         path: {},
         cookie: {},
@@ -36,14 +35,6 @@ export function getRequestData(path, method, sampleKey, { schema: { document } }
             result.path[param.name] = value;
         }
     }
-    const requirements = method.security ?? document.security;
-    if (requirements && requirements.length > 0) {
-        for (const security of getSecurities(requirements[0], document)) {
-            const prefix = getSecurityPrefix(security);
-            const name = security.type === 'apiKey' ? security.name : 'Authorization';
-            result.header[name] = prefix ? `${prefix} <token>` : '<token>';
-        }
-    }
     if (method.requestBody) {
         const body = method.requestBody.content;
         const type = getPreferredType(body);
@@ -67,5 +58,6 @@ function generateBody(method, schema) {
     return sample(schema, {
         skipReadOnly: method !== 'GET',
         skipWriteOnly: method === 'GET',
+        skipNonRequired: true,
     });
 }

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;AAmBjB,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAK1D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,eAAe,GAAG,KAAK,CAAC;CAC3C;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,CA6Kf"}
+{"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;AAkBjB,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAW1D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,eAAe,GAAG,KAAK,CAAC;CAC3C;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,CA6Kf"}

package/dist/render/operation/index.js

@@ -1,7 +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 { getSecurities, getSecurityPrefix } from '../../utils/get-security.js';
 import { idToTitle } from '../../utils/id-to-title.js';
 import { Markdown } from '../markdown.js';
 import { heading } from '../heading.js';
@@ -10,7 +9,7 @@ import { createMethod } from '../../server/create-method.js';
 import { methodKeys } from '../../build-routes.js';
 import { APIExample, APIExampleProvider, getAPIExamples, } from '../../render/operation/api-example.js';
 import { Badge, MethodLabel } from '../../ui/components/method-label.js';
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Tab, Tabs, TabsContent, TabsList, TabsTrigger, } from 'fumadocs-ui/components/tabs';
 import { getTypescriptSchema } from '../../utils/get-typescript-schema.js';
 import { CopyResponseTypeScript } from '../../ui/client.js';
 const ParamTypes = {
@@ -96,22 +95,23 @@ function WebhookCallback({ callback, ctx, headingLevel, }) {
     });
 }
 function AuthSection({ ctx: { schema: { document }, renderer, }, requirements, }) {
-    let id = 0;
-    const info = [];
-    for (const requirement of requirements) {
-        for (const schema of getSecurities(requirement, document)) {
-            const prefix = getSecurityPrefix(schema);
-            const scopeElement = schema.scopes.length > 0 ? (_jsxs("p", { children: ["Scope: ", _jsx("code", { children: schema.scopes.join(', ') })] })) : null;
-            if (schema.type === 'http' || schema.type === 'oauth2') {
-                info.push(_jsxs(renderer.Property, { name: "Authorization", type: prefix ? `${prefix} <token>` : '<token>', required: true, children: [schema.description ? _jsx(Markdown, { text: schema.description }) : null, _jsxs("p", { children: ["In: ", _jsx("code", { children: "header" })] }), scopeElement] }, id++));
-            }
-            if (schema.type === 'apiKey') {
-                info.push(_jsxs(renderer.Property, { name: schema.name, type: "<token>", children: [schema.description ? _jsx(Markdown, { text: schema.description }) : null, _jsxs("p", { children: ["In: ", _jsx("code", { children: schema.in }), scopeElement] })] }, id++));
-            }
-            if (schema.type === 'openIdConnect') {
-                info.push(_jsxs(renderer.Property, { name: "OpenID Connect", type: "<token>", required: true, children: [schema.description ? _jsx(Markdown, { text: schema.description }) : null, scopeElement] }, id++));
-            }
-        }
-    }
-    return info;
+    return (_jsxs(Tabs, { defaultValue: "0", children: [_jsx(TabsList, { children: requirements.map((securities, i) => (_jsx(TabsTrigger, { value: i.toString(), children: Object.keys(securities).join(' & ') }, i))) }), requirements.map((securities, i) => {
+                return (_jsx(TabsContent, { value: i.toString(), className: "flex flex-col gap-4", children: Object.entries(securities).map(([key, scopes]) => {
+                        const schema = document.components?.securitySchemes?.[key];
+                        if (!schema)
+                            return;
+                        const scopeElement = scopes.length > 0 ? (_jsxs("p", { children: ["Scope: ", _jsx("code", { children: scopes.join(', ') })] })) : null;
+                        if (schema.type === 'http' || schema.type === 'oauth2') {
+                            return (_jsxs(renderer.Property, { name: "Authorization", type: schema.type === 'http' && schema.scheme === 'basic'
+                                    ? `Basic <token>`
+                                    : 'Bearer <token>', required: true, children: [schema.description && (_jsx(Markdown, { text: schema.description })), _jsxs("p", { children: ["In: ", _jsx("code", { children: "header" })] }), scopeElement] }, key));
+                        }
+                        if (schema.type === 'apiKey') {
+                            return (_jsxs(renderer.Property, { name: schema.name, type: "<token>", children: [schema.description && (_jsx(Markdown, { text: schema.description })), _jsxs("p", { children: ["In: ", _jsx("code", { children: schema.in }), scopeElement] })] }, key));
+                        }
+                        if (schema.type === 'openIdConnect') {
+                            return (_jsxs(renderer.Property, { name: "OpenID Connect", type: "<token>", required: true, children: [schema.description && (_jsx(Markdown, { text: schema.description })), scopeElement] }, key));
+                        }
+                    }) }, i));
+            })] }));
 }

package/dist/ui/contexts/code-example.d.ts

@@ -12,14 +12,8 @@ export declare function CodeExampleProvider({ route, examples, initialKey, child
 }): import("react/jsx-runtime").JSX.Element;
 export declare function CodeExample(props: CodeSample): import("react/jsx-runtime").JSX.Element | null;
 export declare function CodeExampleSelector({ items }: SamplesProps): import("react/jsx-runtime").JSX.Element;
-export declare function useRequestData(): {
-    /**
-     * initial request data
-     */
-    data: RequestData;
-    /**
-     * Save changes to request data, it won't trigger re-render on the component itself, which makes it safe to call in an effect with `data` as dep
-     */
-    saveData: (data: RequestData) => void;
+export declare function useRequestInitialData(): RequestData;
+export declare function useRequestDataUpdater(): {
+    setData: (data: RequestData) => void;
 };
 //# sourceMappingURL=code-example.d.ts.map

package/dist/ui/contexts/code-example.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-example.d.ts","sourceRoot":"","sources":["../../../src/ui/contexts/code-example.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAUtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAqBtD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,WAAW,CAAC;KACnB,EAAE,CAAC;IACJ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAqDA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,kDAwC5C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,2CAoB1D;AAgBD,wBAAgB,cAAc;IAUxB;;OAEG;;IAEH;;OAEG;qBAxKS,WAAW,KAAK,IAAI;EA6KrC"}
+{"version":3,"file":"code-example.d.ts","sourceRoot":"","sources":["../../../src/ui/contexts/code-example.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAUtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAqBtD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,WAAW,CAAC;KACnB,EAAE,CAAC;IACJ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAwDA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,kDAwC5C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,2CAoB1D;AAgBD,wBAAgB,qBAAqB,gBAOpC;AAED,wBAAgB,qBAAqB;oBApKnB,WAAW,KAAK,IAAI;EAuKrC"}

package/dist/ui/contexts/code-example.js

@@ -32,6 +32,9 @@ export function CodeExampleProvider({ route, examples, initialKey, children, })
         }
     });
     const addListener = useEffectEvent((listener) => {
+        // initial call to listeners to ensure their data is the latest
+        // this is necessary to avoid race conditions between `useEffect()`
+        listener(examples.find((example) => example.key === key).data);
         listeners.current.push(listener);
     });
     const removeListener = useEffectEvent((listener) => {
@@ -85,17 +88,11 @@ export function CodeExampleSelector({ items }) {
 function SelectDisplay({ item, ...props }) {
     return (_jsxs("div", { ...props, children: [_jsx("span", { className: "font-medium text-sm", children: item.title }), _jsx("span", { className: "text-fd-muted-foreground", children: item.description })] }));
 }
-export function useRequestData() {
-    const { examples, key, setData } = useContext(CodeExampleContext);
-    const data = useMemo(() => examples.find((example) => example.key === key).data, [examples, key]);
-    return useMemo(() => ({
-        /**
-         * initial request data
-         */
-        data,
-        /**
-         * Save changes to request data, it won't trigger re-render on the component itself, which makes it safe to call in an effect with `data` as dep
-         */
-        saveData: setData,
-    }), [data, setData]);
+export function useRequestInitialData() {
+    const { examples, key } = useContext(CodeExampleContext);
+    return useMemo(() => examples.find((example) => example.key === key).data, [examples, key]);
+}
+export function useRequestDataUpdater() {
+    const { setData } = useContext(CodeExampleContext);
+    return { setData };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "9.0.2",
+  "version": "9.0.3",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",
@@ -61,10 +61,10 @@
     "remark": "^15.0.1",
     "remark-rehype": "^11.1.2",
     "shiki": "^3.4.2",
-    "tinyglobby": "^0.2.13",
+    "tinyglobby": "^0.2.14",
     "xml-js": "^1.6.11",
-    "fumadocs-core": "15.4.1",
-    "fumadocs-ui": "15.4.1"
+    "fumadocs-core": "15.4.2",
+    "fumadocs-ui": "15.4.2"
   },
   "devDependencies": {
     "@scalar/api-client-react": "^1.3.3",

package/dist/utils/get-security.d.ts

@@ -1,8 +0,0 @@
-import type { Document, SecurityRequirementObject, SecuritySchemeObject } from '../types.js';
-import { type NoReference } from '../utils/schema.js';
-export type Security = SecuritySchemeObject & {
-    scopes: string[];
-};
-export declare function getSecurities(requirement: NoReference<SecurityRequirementObject>, document: NoReference<Document>): Security[];
-export declare function getSecurityPrefix(security: Security): string | undefined;
-//# sourceMappingURL=get-security.d.ts.map

package/dist/utils/get-security.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-security.d.ts","sourceRoot":"","sources":["../../src/utils/get-security.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,QAAQ,EACR,yBAAyB,EACzB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG,oBAAoB,GAAG;IAC5C,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,wBAAgB,aAAa,CAC3B,WAAW,EAAE,WAAW,CAAC,yBAAyB,CAAC,EACnD,QAAQ,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC9B,QAAQ,EAAE,CAkBZ;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAQxE"}

package/dist/utils/get-security.js

@@ -1,23 +0,0 @@
-export function getSecurities(requirement, document) {
-    const results = [];
-    const schemas = document.components?.securitySchemes ?? {};
-    for (const [key, scopes] of Object.entries(requirement)) {
-        if (!(key in schemas))
-            throw new Error(`Security scheme with name ${key} is not found, make sure to define referenced schemes.`);
-        const schema = schemas[key];
-        results.push({
-            ...schema,
-            scopes,
-        });
-    }
-    return results;
-}
-export function getSecurityPrefix(security) {
-    if (security.type === 'http')
-        return {
-            basic: 'Basic',
-            bearer: 'Bearer',
-        }[security.scheme];
-    if (security.type === 'oauth2')
-        return 'Bearer';
-}