fumadocs-openapi 9.0.4 → 9.0.5

package/dist/playground/auth/oauth-dialog.d.ts

@@ -1,10 +1,12 @@
 import type { OpenAPIV3_1 } from 'openapi-types';
 export interface AuthDialogProps {
-    flow: keyof OpenAPIV3_1.OAuth2SecurityScheme['flows'];
     scheme: OpenAPIV3_1.OAuth2SecurityScheme;
+    scopes: string[];
+    open: boolean;
+    setOpen: (v: boolean) => void;
     setToken: (token: string) => void;
     children: React.ReactNode;
 }
-export declare function OauthDialog({ flow, scheme, setToken, children, }: AuthDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function OauthDialog({ scheme, scopes, setToken, children, open, setOpen, }: AuthDialogProps): import("react/jsx-runtime").JSX.Element;
 export declare const OauthDialogTrigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=oauth-dialog.d.ts.map

package/dist/playground/auth/oauth-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oauth-dialog.d.ts","sourceRoot":"","sources":["../../../src/playground/auth/oauth-dialog.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAQjD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,WAAW,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACtD,MAAM,EAAE,WAAW,CAAC,oBAAoB,CAAC;IAEzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAaD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,2CAkKjB;AAED,eAAO,MAAM,kBAAkB,mJAAgB,CAAC"}
+{"version":3,"file":"oauth-dialog.d.ts","sourceRoot":"","sources":["../../../src/playground/auth/oauth-dialog.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAiBjD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,WAAW,CAAC,oBAAoB,CAAC;IACzC,MAAM,EAAE,MAAM,EAAE,CAAC;IAEjB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAuCD,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,OAAO,GACR,EAAE,eAAe,2CAwSjB;AAED,eAAO,MAAM,kBAAkB,mJAAgB,CAAC"}

package/dist/playground/auth/oauth-dialog.js

@@ -6,15 +6,38 @@ import { useQuery } from '../../utils/use-query.js';
 import { useEffect, useState } from 'react';
 import { cn } from 'fumadocs-ui/utils/cn';
 import { buttonVariants } from 'fumadocs-ui/components/ui/button';
-export function OauthDialog({ flow, scheme, setToken, children, }) {
-    const [open, setOpen] = useState(false);
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/components/select.js';
+const FlowTypes = {
+    password: {
+        name: 'Resource Owner Password Flow',
+        description: 'Authenticate using username and password.',
+    },
+    clientCredentials: {
+        name: 'Client Credentials',
+        description: 'Intended for the server-to-server authentication.',
+    },
+    authorizationCode: {
+        name: 'Authorization code',
+        description: 'Authenticate with 3rd party services',
+    },
+    implicit: {
+        name: 'Implicit',
+        description: 'Retrieve the access token directly.',
+    },
+};
+export function OauthDialog({ scheme, scopes, setToken, children, open, setOpen, }) {
+    const [type, setType] = useState(() => {
+        return Object.keys(scheme.flows)[0];
+    });
     const form = useForm({
         defaultValues: {
             clientId: '',
             clientSecret: '',
+            username: '',
+            password: '',
         },
     });
-    const tokenQuery = useQuery(async (code, state) => {
+    const authCodeCallback = useQuery(async (code, state) => {
         const value = scheme.flows.authorizationCode;
         const res = await fetch(value.tokenUrl, {
             method: 'POST',
@@ -32,59 +55,123 @@ export function OauthDialog({ flow, scheme, setToken, children, }) {
         });
         if (!res.ok)
             throw new Error(await res.text());
-        const { access_token } = (await res.json());
-        setToken(access_token);
+        const { access_token, token_type = 'Bearer' } = (await res.json());
+        setToken(`${token_type} ${access_token}`);
         setOpen(false);
     });
     useEffect(() => {
-        const params = new URLSearchParams(window.location.search);
-        const code = params.get('code');
-        const state = params.get('state');
-        if (!code || !state || flow !== 'authorizationCode')
-            return;
-        const parsedState = JSON.parse(state);
-        setOpen(true);
-        form.setValue('clientId', parsedState.client_id);
-        form.setValue('clientSecret', parsedState.client_secret);
-        tokenQuery.start(code, parsedState);
-        window.history.replaceState(null, '', window.location.pathname);
+        if (scheme.flows.authorizationCode) {
+            const params = new URLSearchParams(window.location.search);
+            const state = params.get('state');
+            const code = params.get('code');
+            if (state && code) {
+                const parsedState = JSON.parse(state);
+                setOpen(true);
+                form.setValue('clientId', parsedState.client_id);
+                form.setValue('clientSecret', parsedState.client_secret);
+                authCodeCallback.start(code, parsedState);
+                window.history.replaceState(null, '', window.location.pathname);
+                return;
+            }
+        }
+        if (scheme.flows.implicit && window.location.hash.length > 1) {
+            const params = new URLSearchParams(window.location.hash.slice(1));
+            const state = params.get('state');
+            const token = params.get('access_token');
+            const type = params.get('token_type') ?? 'Bearer';
+            if (state && token) {
+                const parsedState = JSON.parse(state);
+                form.setValue('clientId', parsedState.client_id);
+                setToken(`${type} ${token}`);
+                window.history.replaceState(null, '', window.location.pathname);
+            }
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- first page load only
     }, []);
     const authorize = useQuery(async (values) => {
-        if (flow === 'authorizationCode') {
-            const value = scheme.flows[flow];
+        if (type === 'implicit') {
+            const value = scheme.flows[type];
+            const params = new URLSearchParams();
+            params.set('response_type', 'token');
+            params.set('client_id', values.clientId);
+            params.set('redirect_uri', window.location.href);
+            params.set('scope', scopes.join('+'));
+            params.set('state', JSON.stringify({
+                client_id: values.clientId,
+                redirect_uri: window.location.href,
+            }));
+            window.location.replace(`${value.authorizationUrl}?${params.toString()}`);
+            return;
+        }
+        if (type === 'authorizationCode') {
+            const value = scheme.flows[type];
             const params = new URLSearchParams();
             params.set('response_type', 'code');
             params.set('client_id', values.clientId);
             params.set('redirect_uri', window.location.href);
-            params.set('scope', Object.keys(value.scopes).join('+'));
+            params.set('scope', scopes.join('+'));
             params.set('state', JSON.stringify({
                 client_id: values.clientId,
                 client_secret: values.clientSecret,
                 redirect_uri: window.location.href,
             }));
             window.location.replace(`${value.authorizationUrl}?${params.toString()}`);
+            return;
+        }
+        let res;
+        if (type === 'password') {
+            const value = scheme.flows[type];
+            res = await fetch(value.tokenUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: new URLSearchParams({
+                    grant_type: 'password',
+                    username: values.username,
+                    password: values.password,
+                    scope: scopes.join('+'),
+                }),
+            });
         }
-        if (flow === 'clientCredentials') {
-            const value = scheme.flows[flow];
-            await fetch(value.tokenUrl, {
+        if (type === 'clientCredentials') {
+            const value = scheme.flows[type];
+            res = await fetch(value.tokenUrl, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/x-www-form-urlencoded',
                 },
                 body: new URLSearchParams({
                     grant_type: 'client_credentials',
-                    scope: Object.keys(value.scopes).join('+'),
+                    client_id: values.clientId,
+                    client_secret: values.clientSecret,
+                    scope: scopes.join('+'),
                 }),
             });
         }
+        if (res) {
+            if (!res.ok)
+                throw new Error(await res.text());
+            const { access_token, token_type = 'Bearer' } = (await res.json());
+            setToken(`${token_type} ${access_token}`);
+            setOpen(false);
+        }
     });
     const onSubmit = form.handleSubmit((values) => {
         return authorize.start(values);
     });
-    const isLoading = authorize.isLoading || tokenQuery.isLoading;
-    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [children, _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Authorization" }), _jsx(DialogDescription, { children: "Obtain the access token for API." })] }), _jsxs("form", { className: "flex flex-col gap-6", onSubmit: onSubmit, children: [(flow === 'authorizationCode' || flow === 'clientCredentials') && (_jsxs(_Fragment, { children: [_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "client_id", className: cn(labelVariants()), children: "Client ID" }), _jsx("p", { className: "text-fd-muted-foreground text-sm", children: "The client ID of your OAuth application." }), _jsx(Input, { id: "client_id", placeholder: "Enter value", type: "text", disabled: isLoading, ...form.register('clientId', { required: true }) })] }), _jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "client_secret", className: cn(labelVariants()), children: "Client Secret" }), _jsx("p", { className: "text-fd-muted-foreground text-sm", children: "The client secret of your OAuth application." }), _jsx(Input, { id: "client_secret", placeholder: "Enter value", type: "password", disabled: isLoading, ...form.register('clientSecret', { required: true }) })] })] })), tokenQuery.error ? (_jsx("p", { className: "text-red-400 font-medium text-sm", children: String(tokenQuery.error) })) : null, _jsx("button", { disabled: isLoading, className: cn(buttonVariants({
+    const isLoading = authorize.isLoading || authCodeCallback.isLoading;
+    const error = authCodeCallback.error ?? authorize.error;
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [children, _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Authorization" }), _jsx(DialogDescription, { children: "Obtain the access token for API." })] }), _jsxs("form", { className: "flex flex-col gap-6", onSubmit: (e) => {
+                            void onSubmit(e);
+                            e.stopPropagation();
+                        }, children: [_jsxs(Select, { value: type, onValueChange: setType, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: Object.keys(scheme.flows).map((key) => {
+                                            const { name, description } = FlowTypes[key];
+                                            return (_jsxs(SelectItem, { value: key, children: [_jsx("p", { className: "font-medium", children: name }), _jsx("p", { className: "text-fd-muted-foreground", children: description })] }, key));
+                                        }) })] }), (type === 'authorizationCode' ||
+                                type === 'clientCredentials' ||
+                                type === 'implicit') && (_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "client_id", className: cn(labelVariants()), children: "Client ID" }), _jsx("p", { className: "text-fd-muted-foreground text-sm", children: "The client ID of your OAuth application." }), _jsx(Input, { id: "client_id", placeholder: "Enter value", type: "text", autoComplete: "off", disabled: isLoading, ...form.register('clientId', { required: true }) })] })), (type === 'authorizationCode' || type === 'clientCredentials') && (_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "client_secret", className: cn(labelVariants()), children: "Client Secret" }), _jsx("p", { className: "text-fd-muted-foreground text-sm", children: "The client secret of your OAuth application." }), _jsx(Input, { id: "client_secret", placeholder: "Enter value", type: "password", autoComplete: "off", disabled: isLoading, ...form.register('clientSecret', { required: true }) })] })), type === 'password' && (_jsxs(_Fragment, { children: [_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "username", className: cn(labelVariants()), children: "Username" }), _jsx(Input, { id: "username", placeholder: "Enter value", type: "text", disabled: isLoading, autoComplete: "off", ...form.register('username', { required: true }) })] }), _jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "password", className: cn(labelVariants()), children: "Client Secret" }), _jsx(Input, { id: "password", placeholder: "Enter value", type: "password", autoComplete: "off", disabled: isLoading, ...form.register('password', { required: true }) })] })] })), error ? (_jsx("p", { className: "text-red-400 font-medium text-sm", children: String(error) })) : null, _jsx("button", { type: "submit", disabled: isLoading, className: cn(buttonVariants({
                                     color: 'primary',
-                                })), children: tokenQuery.isLoading ? 'Fetching token...' : 'Submit' })] })] })] }));
+                                })), children: authCodeCallback.isLoading ? 'Fetching token...' : 'Submit' })] })] })] }));
 }
 export const OauthDialogTrigger = DialogTrigger;

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,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"}
+{"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;AAmC5B,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;AAgCD,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,2CAqKb"}

package/dist/playground/client.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Fragment, lazy, useEffect, useMemo, useState, } from 'react';
 import { Controller, FormProvider, useForm, useFormContext, } from 'react-hook-form';
 import { useApiContext, useServerSelectContext } from '../ui/contexts/api.js';
-import { FieldSet, JsonInput } from './inputs.js';
+import { FieldInput, FieldSet, JsonInput, ObjectInput } from './inputs.js';
 import { getStatusInfo } from './status-info.js';
 import { getUrl } from '../utils/server-url.js';
 import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
@@ -17,6 +17,8 @@ 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';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/components/select.js';
+import { labelVariants } from '../ui/components/input.js';
 const AuthPrefix = '__fumadocs_auth';
 function toRequestData(method, mediaType, value) {
     return {
@@ -30,6 +32,12 @@ function toRequestData(method, mediaType, value) {
     };
 }
 const ServerSelect = lazy(() => import('../ui/server-select.js'));
+const OauthDialog = lazy(() => import('./auth/oauth-dialog.js').then((mod) => ({
+    default: mod.OauthDialog,
+})));
+const OauthDialogTrigger = lazy(() => import('./auth/oauth-dialog.js').then((mod) => ({
+    default: mod.OauthDialogTrigger,
+})));
 export default function Client({ route, method = 'GET', securities, parameters, body, fields, references, proxyUrl, components: { ResultDisplay = DefaultResultDisplay } = {}, ...rest }) {
     const { server } = useServerSelectContext();
     const requestData = useRequestInitialData();
@@ -58,29 +66,45 @@ export default function Client({ route, method = 'GET', securities, parameters,
             ...toRequestData(method, body?.mediaType, input),
         });
     });
-    function initAuthValues() {
+    function initAuthValues(values, inputs) {
         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);
+            manipulateValues(values, item.fieldName, () => {
+                const stored = localStorage.getItem(AuthPrefix + item.original.id);
+                if (stored) {
+                    const parsed = JSON.parse(stored);
+                    if (typeof parsed === typeof item.defaultValue)
+                        return parsed;
+                }
+                return item.defaultValue;
+            });
         }
+        return values;
     }
     useOnChange(defaultValues, () => {
         fieldInfoMap.clear();
-        form.reset(defaultValues);
-        initAuthValues();
+        form.reset(initAuthValues(defaultValues, inputs));
+    });
+    useOnChange(inputs, (current, previous) => {
+        form.reset((values) => {
+            for (const item of previous) {
+                if (current.some(({ original }) => original.id === item.original.id)) {
+                    continue;
+                }
+                manipulateValues(values, item.fieldName, () => undefined);
+            }
+            return initAuthValues(values, current);
+        });
     });
-    useOnChange(inputs, (_, previous) => {
-        for (const item of previous) {
-            form.reset((values) => manipulateValues(values, item.fieldName, () => undefined));
+    const onUpdateDebounced = useEffectEvent((values) => {
+        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));
+            }
         }
-        initAuthValues();
+        updater.setData(toRequestData(method, body?.mediaType, mapInputs(values)));
     });
     useEffect(() => {
         let timer = null;
@@ -91,27 +115,36 @@ export default function Client({ route, method = 'GET', securities, parameters,
             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);
+                timer = window.setTimeout(() => onUpdateDebounced(values), timer ? 400 : 0);
             },
         });
-        initAuthValues();
+        form.reset((values) => initAuthValues(values, inputs));
         return () => subscription();
         // eslint-disable-next-line react-hooks/exhaustive-deps -- mounted once only
     }, []);
     const onSubmit = form.handleSubmit((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') })] }), 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] }) }) }));
+    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 && (_jsx(SecurityTabs, { securities: securities, securityId: securityId, setSecurityId: setSecurityId, 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] }) }) }));
+}
+function SecurityTabs({ securities, setSecurityId, securityId, children, }) {
+    const [open, setOpen] = useState(false);
+    const form = useFormContext();
+    const result = (_jsxs(CollapsiblePanel, { title: "Authorization", children: [_jsxs(Select, { value: securityId.toString(), onValueChange: (v) => setSecurityId(Number(v)), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: securities.map((security, i) => (_jsx(SelectItem, { value: i.toString(), children: security.map((item) => item.id).join(' & ') }, i))) })] }), children] }));
+    for (let i = 0; i < securities.length; i++) {
+        const security = securities[i];
+        for (const item of security) {
+            if (item.type === 'oauth2') {
+                return (_jsx(OauthDialog, { scheme: item, scopes: item.scopes, open: open, setOpen: (v) => {
+                        setOpen(v);
+                        if (v) {
+                            setSecurityId(i);
+                        }
+                    }, setToken: (token) => form.setValue('header.Authorization', token), children: result }));
+            }
+        }
+    }
+    return result;
 }
 const paramNames = ['Headers', 'Cookies', 'Query', 'Path'];
 const paramTypes = ['header', 'cookie', 'query', 'path'];
@@ -142,7 +175,7 @@ function BodyInput({ field: _field }) {
                     color: 'ghost',
                     size: 'sm',
                     className: 'p-2',
-                })), onClick: () => setIsJson(false), type: "button", children: "Close JSON Editor" }) })) : (_jsx(FieldSet, { field: field, fieldName: "body", name: _jsx("button", { className: cn(buttonVariants({
+                })), onClick: () => setIsJson(false), type: "button", children: "Close JSON Editor" }) })) : (_jsx(FieldSet, { field: field, fieldName: "body", collapsible: false, name: _jsx("button", { className: cn(buttonVariants({
                     color: 'secondary',
                     size: 'sm',
                     className: 'p-2',
@@ -153,15 +186,16 @@ function BodyInput({ field: _field }) {
  *
  * @returns a new manipulated object
  */
-function manipulateValues(values, fieldName, update) {
-    const root = { ...values };
+function manipulateValues(values, fieldName, update, clone = false) {
+    const root = clone ? { ...values } : 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 };
+            if (clone)
+                v = { ...v };
             current[segment] = v;
             current = v;
             continue;
@@ -197,10 +231,8 @@ function useAuthInputs(securities) {
                         }
                         return out;
                     },
-                    children: (_jsx(FieldSet, { name: "Authorization (header)", field: {
+                    children: (_jsx(ObjectInput, { field: {
                             type: 'object',
-                            required: ['username', 'password'],
-                            description: security.description,
                             properties: {
                                 username: {
                                     type: 'string',
@@ -212,16 +244,29 @@ function useAuthInputs(securities) {
                         }, fieldName: fieldName })),
                 });
             }
-            else if (security.type === 'http' || security.type === 'oauth2') {
+            else if (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 })] })),
+                    children: (_jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("label", { htmlFor: fieldName, className: cn(labelVariants()), children: "Access Token" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(FieldInput, { fieldName: fieldName, isRequired: true, field: {
+                                            type: 'string',
+                                        }, className: "flex-1" }), _jsx(OauthDialogTrigger, { type: "button", className: cn(buttonVariants({
+                                            size: 'sm',
+                                            color: 'secondary',
+                                        })), children: "Authorize" })] })] })),
+                });
+            }
+            else if (security.type === 'http') {
+                const fieldName = 'header.Authorization';
+                result.push({
+                    fieldName: fieldName,
+                    original: security,
+                    defaultValue: 'Bearer ',
+                    children: (_jsx(FieldSet, { name: "Authorization (header)", fieldName: fieldName, isRequired: true, field: {
+                            type: 'string',
+                        } })),
                 });
             }
             else if (security.type === 'apiKey') {
@@ -230,13 +275,22 @@ function useAuthInputs(securities) {
                     fieldName,
                     defaultValue: '',
                     original: security,
-                    children: (_jsx(FieldSet, { fieldName: fieldName, name: security.name, field: {
+                    children: (_jsx(FieldSet, { fieldName: fieldName, name: `${security.name} (${security.in})`, isRequired: true, field: {
                             type: 'string',
-                            description: security.description ?? `The API key in ${security.in}.`,
                         } })),
                 });
             }
-            // TODO: handle OpenID connect
+            else {
+                const fieldName = 'header.Authorization';
+                result.push({
+                    fieldName,
+                    defaultValue: '',
+                    original: security,
+                    children: (_jsxs(_Fragment, { children: [_jsx(FieldSet, { name: "Authorization (header)", isRequired: true, fieldName: fieldName, field: {
+                                    type: 'string',
+                                } }), _jsx("p", { className: "text-fd-muted-foreground text-xs", children: "OpenID Connect is not supported at the moment, you can still set an access token here." })] })),
+                });
+            }
         }
         return result;
     }, [securities]);
@@ -244,7 +298,7 @@ function useAuthInputs(securities) {
         for (const item of inputs) {
             if (!item.mapOutput)
                 continue;
-            values = manipulateValues(values, item.fieldName, item.mapOutput);
+            values = manipulateValues(values, item.fieldName, item.mapOutput, true);
         }
         return values;
     });
@@ -255,22 +309,6 @@ function renderCustomField(fieldName, info, field, key) {
         // @ts-expect-error we use string here
         render: (props) => field.render({ ...props, info }), name: fieldName }, key));
 }
-const OauthDialog = lazy(() => import('./auth/oauth-dialog.js').then((mod) => ({
-    default: mod.OauthDialog,
-})));
-const OauthDialogTrigger = lazy(() => import('./auth/oauth-dialog.js').then((mod) => ({
-    default: mod.OauthDialogTrigger,
-})));
-function OAuth({ authorization }) {
-    const form = useFormContext();
-    if (authorization.type !== 'oauth2')
-        return;
-    // only the first one, so it looks simpler :)
-    const flow = Object.keys(authorization.flows)[0];
-    return (_jsx(OauthDialog, { flow: flow, scheme: authorization, setToken: (token) => form.setValue('authorization', `Bearer ${token}`), children: _jsx(OauthDialogTrigger, { type: "button", className: cn(buttonVariants({
-                color: 'secondary',
-            })), children: "Auth Settings" }) }));
-}
 function Route({ route, ...props }) {
     const segments = route.split('/').filter((part) => part.length > 0);
     return (_jsx("div", { ...props, className: cn('flex flex-row items-center gap-0.5 overflow-auto text-nowrap', props.className), children: segments.map((part, index) => (_jsxs(Fragment, { children: [_jsx("span", { className: "text-fd-muted-foreground", children: "/" }), part.startsWith('{') && part.endsWith('}') ? (_jsx("code", { className: "bg-fd-primary/10 text-fd-primary", children: part })) : (_jsx("code", { className: "text-fd-foreground", children: part }))] }, index))) }));
@@ -278,7 +316,7 @@ function Route({ route, ...props }) {
 function DefaultResultDisplay({ data }) {
     const statusInfo = useMemo(() => getStatusInfo(data.status), [data.status]);
     const { shikiOptions } = useApiContext();
-    return (_jsxs("div", { className: "flex flex-col gap-3 border-t p-3", children: [_jsxs("div", { className: "inline-flex items-center gap-1.5 text-sm font-medium text-fd-foreground", children: [_jsx(statusInfo.icon, { className: cn('size-4', statusInfo.color) }), statusInfo.description] }), _jsx("p", { className: "text-sm text-fd-muted-foreground", children: data.status }), data.data ? (_jsx(DynamicCodeBlock, { lang: typeof data.data === 'string' && data.data.length > 50000
+    return (_jsxs("div", { className: "flex flex-col gap-3 p-3", children: [_jsxs("div", { className: "inline-flex items-center gap-1.5 text-sm font-medium text-fd-foreground", children: [_jsx(statusInfo.icon, { className: cn('size-4', statusInfo.color) }), statusInfo.description] }), _jsx("p", { className: "text-sm text-fd-muted-foreground", children: data.status }), data.data ? (_jsx(DynamicCodeBlock, { lang: typeof data.data === 'string' && data.data.length > 50000
                     ? 'text'
                     : data.type, code: typeof data.data === 'string'
                     ? data.data

package/dist/playground/index.js

@@ -47,22 +47,32 @@ function writeReferences(schema, ctx, stack = new WeakMap()) {
     }
     const output = { ...schema };
     stack.set(schema, output);
-    for (const name of ['items', 'additionalProperties']) {
+    for (const _n in output) {
+        const name = _n;
         if (!output[name])
             continue;
-        output[name] = writeReferences(output[name], ctx, stack);
-    }
-    for (const name of ['oneOf', 'allOf', 'anyOf']) {
-        if (!output[name])
-            continue;
-        output[name] = output[name].map((item) => writeReferences(item, ctx, stack));
-    }
-    for (const name of ['properties', 'patternProperties']) {
-        if (!output[name])
-            continue;
-        output[name] = { ...output[name] };
-        for (const key in output[name]) {
-            output[name][key] = writeReferences(output[name][key], ctx, stack);
+        switch (name) {
+            case 'oneOf':
+            case 'allOf':
+            case 'anyOf':
+                output[name] = output[name].map((item) => writeReferences(item, ctx, stack));
+                continue;
+            case 'items':
+            case 'additionalProperties':
+            case 'not':
+                output[name] = writeReferences(output[name], ctx, stack);
+                continue;
+            case 'properties':
+            case 'patternProperties':
+                output[name] = { ...output[name] };
+                for (const key in output[name]) {
+                    output[name][key] = writeReferences(output[name][key], ctx, stack);
+                }
+                continue;
+            default:
+                if (typeof output[name] === 'object' && !Array.isArray(output[name])) {
+                    output[name] = { ...output[name] };
+                }
         }
     }
     return output;
@@ -84,7 +94,8 @@ function parseSecurities(method, { schema: { document } }) {
                 id: key,
             });
         }
-        result.push(list);
+        if (list.length > 0)
+            result.push(list);
     }
     return result;
 }

package/dist/playground/inputs.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
 import type { RequestSchema } from '../playground/index.js';
 export declare function ObjectInput({ field: _field, fieldName, ...props }: {
     field: Exclude<RequestSchema, boolean>;
@@ -8,7 +8,12 @@ export declare function JsonInput({ fieldName, children, }: {
     fieldName: string;
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth, slotType, ...props }: HTMLAttributes<HTMLElement> & {
+export declare function FieldInput({ field, fieldName, isRequired, ...props }: HTMLAttributes<HTMLElement> & {
+    field: Exclude<RequestSchema, boolean>;
+    isRequired?: boolean;
+    fieldName: string;
+}): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth, slotType, collapsible, ...props }: HTMLAttributes<HTMLElement> & {
     isRequired?: boolean;
     name?: ReactNode;
     field: RequestSchema;
@@ -16,5 +21,6 @@ export declare function FieldSet({ field: _field, fieldName, toolbar, name, isRe
     depth?: number;
     slotType?: ReactNode;
     toolbar?: ReactNode;
+    collapsible?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=inputs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../src/playground/inputs.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,KAAK,cAAc,EAEnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAgDxD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,MAAM,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,cAAc,CAAC,KAAK,CAAC,uDAqCxB;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CA0BA;AAkLD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EAAE,MAAM,EACb,SAAS,EACT,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,kDA6KA"}
+{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../src/playground/inputs.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAkDxD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,MAAM,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,cAAc,CAAC,KAAK,CAAC,uDAwCxB;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CA0BA;AA6FD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB,uDAmFA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EAAE,MAAM,EACb,SAAS,EACT,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAS,EACT,QAAQ,EACR,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,kDA2KA"}