fumadocs-openapi 6.0.1 → 6.0.2

package/dist/ui/playground/get-default-values.js

@@ -0,0 +1,24 @@
+import { resolve } from '../../ui/playground/resolve';
+export function getDefaultValue(item, references) {
+    if (item.type === 'object')
+        return Object.fromEntries(Object.entries(item.properties).map(([key, prop]) => [
+            key,
+            getDefaultValue(prop.type === 'ref' ? references[prop.schema] : prop, references),
+        ]));
+    if (item.type === 'array')
+        return [];
+    if (item.type === 'null')
+        return null;
+    if (item.type === 'switcher') {
+        const first = Object.values(item.items).at(0);
+        if (!first)
+            return '';
+        return getDefaultValue(resolve(first, references), references);
+    }
+    if (item.type === 'file')
+        return undefined;
+    return String(item.defaultValue);
+}
+export function getDefaultValues(field, context) {
+    return Object.fromEntries(field.map((p) => [p.name, getDefaultValue(p, context)]));
+}

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

@@ -0,0 +1,44 @@
+import { type ReactElement, type HTMLAttributes, type FC, type ReactNode } from 'react';
+import type { FieldPath, UseFormStateReturn, ControllerFieldState, ControllerRenderProps } from 'react-hook-form';
+import type { FetchResult } from '../../ui/playground/fetcher';
+import type { APIPlaygroundProps, PrimitiveRequestField, RequestSchema } from '../../render/playground';
+interface FormValues {
+    authorization: string | {
+        username: string;
+        password: string;
+    };
+    path: Record<string, unknown>;
+    query: Record<string, unknown>;
+    header: Record<string, unknown>;
+    body: unknown;
+}
+export interface CustomField<TName extends FieldPath<FormValues>, Info> {
+    render: (props: {
+        /**
+         * Field Info
+         */
+        info: Info;
+        field: ControllerRenderProps<FormValues, TName>;
+        fieldState: ControllerFieldState;
+        formState: UseFormStateReturn<FormValues>;
+    }) => ReactElement;
+}
+export declare function APIPlayground({ route, method, authorization, path, header, query, body, fields, schemas, proxyUrl, components: { ResultDisplay }, ...props }: APIPlaygroundProps & {
+    fields?: {
+        auth?: CustomField<'authorization', RequestSchema>;
+        path?: CustomField<`path.${string}`, PrimitiveRequestField>;
+        query?: CustomField<`query.${string}`, PrimitiveRequestField>;
+        header?: CustomField<`header.${string}`, PrimitiveRequestField>;
+        body?: CustomField<'body', RequestSchema>;
+    };
+    components?: Partial<{
+        ResultDisplay: FC<{
+            data: FetchResult;
+        }>;
+    }>;
+} & HTMLAttributes<HTMLFormElement>): import("react/jsx-runtime").JSX.Element;
+export declare function CollapsiblePanel({ title, children, ...props }: HTMLAttributes<HTMLDivElement> & {
+    title: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/playground/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,cAAc,EAInB,KAAK,EAAE,EAEP,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,SAAS,EACT,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAM3D,OAAO,KAAK,EACV,kBAAkB,EAClB,qBAAqB,EACrB,aAAa,EACd,MAAM,qBAAqB,CAAC;AAe7B,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,OAAO,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,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;AAcD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAc,EACd,aAAa,EACb,IAAS,EACT,MAAW,EACX,KAAU,EACV,IAAI,EACJ,MAAW,EACX,OAAO,EACP,QAAQ,EACR,UAAU,EAAE,EAAE,aAAoC,EAAO,EACzD,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG;IACtB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,WAAW,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;QACnD,IAAI,CAAC,EAAE,WAAW,CAAC,QAAQ,MAAM,EAAE,EAAE,qBAAqB,CAAC,CAAC;QAC5D,KAAK,CAAC,EAAE,WAAW,CAAC,SAAS,MAAM,EAAE,EAAE,qBAAqB,CAAC,CAAC;QAC9D,MAAM,CAAC,EAAE,WAAW,CAAC,UAAU,MAAM,EAAE,EAAE,qBAAqB,CAAC,CAAC;QAChE,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,GAAG,cAAc,CAAC,eAAe,CAAC,2CAyOlC;AAiHD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC,KAAK,EAAE,SAAS,CAAC;CAClB,2CAeA"}

package/dist/ui/playground/index.js

@@ -0,0 +1,187 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useEffect, Fragment, } from 'react';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { cn, buttonVariants } from 'fumadocs-ui/components/api';
+import { useApiContext } from '../../ui/contexts/api';
+import { getDefaultValue, getDefaultValues, } from '../../ui/playground/get-default-values';
+import { FieldSet, ObjectInput } from '../../ui/playground/inputs';
+import { SchemaContext } from '../contexts/schema';
+import { getStatusInfo } from '../../ui/playground/status-info';
+import { getUrl } from '../../utils/server-url';
+import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
+import { MethodLabel } from '../../ui/components/method-label';
+import { useQuery } from '../../utils/use-query';
+import ServerSelect from '../../ui/server-select';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from 'fumadocs-ui/components/ui/collapsible';
+import { ChevronDown } from 'lucide-react';
+function defaultAuthValue(auth) {
+    if (!auth || auth.type === 'apiKey')
+        return '';
+    if (auth.type === 'http' && auth.scheme === 'basic') {
+        return {
+            username: '',
+            password: '',
+        };
+    }
+    return 'Bearer';
+}
+export function APIPlayground({ route, method = 'GET', authorization, path = [], header = [], query = [], body, fields = {}, schemas, proxyUrl, components: { ResultDisplay = DefaultResultDisplay } = {}, ...props }) {
+    const { serverRef } = useApiContext();
+    const dynamicRef = useRef(new Map());
+    const form = useForm({
+        defaultValues: {
+            authorization: defaultAuthValue(authorization),
+            path: getDefaultValues(path, schemas),
+            query: getDefaultValues(query, schemas),
+            header: getDefaultValues(header, schemas),
+            body: body ? getDefaultValue(body, schemas) : undefined,
+        },
+    });
+    const testQuery = useQuery(async (input) => {
+        const fetcher = await import('./fetcher').then((mod) => mod.createBrowserFetcher(body, schemas));
+        const query = { ...input.query };
+        const header = { ...input.header };
+        if (input.authorization && authorization) {
+            if (authorization.type === 'apiKey') {
+                if (authorization.in === 'header') {
+                    header[authorization.name] = input.authorization;
+                }
+                else if (authorization.in === 'query') {
+                    query[authorization.name] = input.authorization;
+                }
+                else {
+                    if ('cookie' in header) {
+                        header.Cookie = header.cookie;
+                        delete header.cookie;
+                    }
+                    header.Cookie = [
+                        header.Cookie,
+                        `${authorization.name}=${input.authorization}`,
+                    ]
+                        .filter((s) => s.length > 0)
+                        .join('; ');
+                }
+            }
+            else if (authorization.type === 'http' &&
+                authorization.scheme === 'basic') {
+                if (typeof input.authorization === 'object')
+                    header.Authorization = `Basic ${btoa(`${input.authorization.username}:${input.authorization.password}`)}`;
+            }
+            else {
+                header.Authorization = input.authorization;
+            }
+        }
+        const serverUrl = serverRef.current
+            ? getUrl(serverRef.current.url, serverRef.current.variables)
+            : window.location.origin;
+        let url = `${serverUrl}${createPathnameFromInput(route, input.path, query)}`;
+        if (proxyUrl) {
+            const updated = new URL(proxyUrl, window.location.origin);
+            updated.searchParams.append('url', url);
+            url = updated.toString();
+        }
+        return fetcher.fetch({
+            url: url.toString(),
+            header,
+            body: body
+                ? {
+                    mediaType: body.mediaType,
+                    value: input.body,
+                }
+                : undefined,
+            dynamicFields: dynamicRef.current,
+            method,
+        });
+    });
+    useEffect(() => {
+        if (!authorization)
+            return;
+        const key = `__fumadocs_auth_${JSON.stringify(authorization)}`;
+        const cached = localStorage.getItem(key);
+        if (cached)
+            form.setValue('authorization', JSON.parse(cached));
+        const subscription = form.watch((value, { name }) => {
+            if (!name || !name.startsWith('authorization') || !value.authorization)
+                return;
+            localStorage.setItem(key, JSON.stringify(value.authorization));
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- mounted only once
+    }, []);
+    const onSubmit = form.handleSubmit((value) => {
+        testQuery.start(value);
+    });
+    function renderCustomField(fieldName, info, field, key) {
+        if (field) {
+            return (_jsx(Controller, { control: form.control, render: (props) => field.render({ ...props, info }), name: fieldName }, key));
+        }
+        return (_jsx(FieldSet, { name: info.name, fieldName: fieldName, field: info }, key));
+    }
+    return (_jsx(FormProvider, { ...form, children: _jsx(SchemaContext.Provider, { value: useMemo(() => ({ references: schemas, dynamic: dynamicRef }), [schemas]), children: _jsxs("form", { ...props, className: cn('not-prose flex flex-col gap-2 rounded-xl border p-3 shadow-md', props.className), onSubmit: onSubmit, children: [_jsx(FormHeader, { method: method, route: route, isLoading: testQuery.isLoading }), _jsx(CollapsiblePanel, { title: "Server URL", children: _jsx(ServerSelect, {}) }), header.length > 0 || authorization ? (_jsxs(CollapsiblePanel, { title: "Headers", children: [authorization?.type === 'http' &&
+                                authorization.scheme === 'basic'
+                                ? renderCustomField('authorization', {
+                                    name: 'Authorization',
+                                    type: 'object',
+                                    isRequired: true,
+                                    properties: {
+                                        username: {
+                                            type: 'string',
+                                            isRequired: true,
+                                            defaultValue: '',
+                                        },
+                                        password: {
+                                            type: 'string',
+                                            isRequired: true,
+                                            defaultValue: '',
+                                        },
+                                    },
+                                }, fields.auth)
+                                : authorization
+                                    ? renderCustomField('authorization', {
+                                        name: 'Authorization',
+                                        type: 'string',
+                                        isRequired: true,
+                                        description: 'The Authorization access token',
+                                        defaultValue: '',
+                                    }, fields.auth)
+                                    : null, header.map((field) => renderCustomField(`header.${field.name}`, field, fields.header, field.name))] })) : null, path.length > 0 ? (_jsx(CollapsiblePanel, { title: "Path", children: path.map((field) => renderCustomField(`path.${field.name}`, field, fields.path, field.name)) })) : null, query.length > 0 ? (_jsx(CollapsiblePanel, { title: "Query", children: query.map((field) => renderCustomField(`query.${field.name}`, field, fields.query, field.name)) })) : null, body ? (_jsx(CollapsiblePanel, { title: "Body", children: body.type === 'object' && !fields.body ? (_jsx(ObjectInput, { field: body, fieldName: "body" })) : (renderCustomField('body', body, fields.body)) })) : null, testQuery.data ? _jsx(ResultDisplay, { data: testQuery.data }) : null] }) }) }));
+}
+function createPathnameFromInput(route, path, query) {
+    let pathname = route;
+    for (const key of Object.keys(path)) {
+        const paramValue = path[key];
+        if (typeof paramValue === 'string' && paramValue.length > 0)
+            pathname = pathname.replace(`{${key}}`, paramValue);
+    }
+    const searchParams = new URLSearchParams();
+    for (const key of Object.keys(query)) {
+        const paramValue = query[key];
+        if (typeof paramValue === 'string' && paramValue.length > 0)
+            searchParams.append(key, paramValue);
+    }
+    return searchParams.size > 0
+        ? `${pathname}?${searchParams.toString()}`
+        : pathname;
+}
+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))) }));
+}
+function FormHeader({ route, method, isLoading, }) {
+    return (_jsxs("div", { className: "flex flex-row items-center gap-2 text-sm", 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: isLoading, children: "Send" })] }));
+}
+function DefaultResultDisplay({ data }) {
+    const statusInfo = useMemo(() => getStatusInfo(data.status), [data.status]);
+    const { shikiOptions } = useApiContext();
+    return (_jsxs("div", { className: "flex flex-col gap-3 rounded-lg border bg-fd-card p-4", 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
+                    : JSON.stringify(data.data, null, 2), ...shikiOptions })) : null] }));
+}
+export function CollapsiblePanel({ title, children, ...props }) {
+    return (_jsxs(Collapsible, { ...props, className: "border rounded-xl bg-fd-card text-fd-card-foreground overflow-hidden", children: [_jsxs(CollapsibleTrigger, { className: "group w-full inline-flex items-center gap-2 justify-between p-3 text-sm font-medium hover:bg-fd-accent", children: [title, _jsx(ChevronDown, { className: "size-4 group-data-[state=open]:rotate-180" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col gap-4 p-3", children: children }) })] }));
+}

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

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { RequestSchema } from '../../render/playground';
+type FieldOfType<Type> = Extract<RequestSchema, {
+    type: Type;
+}>;
+export declare function ObjectInput({ field, fieldName, ...props }: {
+    field: FieldOfType<'object'>;
+    fieldName: string;
+} & HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function FieldInput({ field, fieldName, ...props }: HTMLAttributes<HTMLElement> & {
+    field: Exclude<RequestSchema, {
+        type: 'switcher';
+    }>;
+    fieldName: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function FieldSet({ field, fieldName, toolbar, name, ...props }: HTMLAttributes<HTMLElement> & {
+    name?: string;
+    field: RequestSchema;
+    fieldName: string;
+    toolbar?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=inputs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../../src/ui/playground/inputs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAMzD,KAAK,WAAW,CAAC,IAAI,IAAI,OAAO,CAAC,aAAa,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AA6BhE,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,2CAqBjC;AAoJD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE;QAAE,IAAI,EAAE,UAAU,CAAA;KAAE,CAAC,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;CACnB,kDAuFA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,kDA8EA"}

package/dist/ui/playground/inputs.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { cn, buttonVariants } from 'fumadocs-ui/components/api';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/components/select';
+import { resolve } from '../../ui/playground/resolve';
+import { Input, labelVariants } from '../../ui/components/input';
+import { getDefaultValue } from '../../ui/playground/get-default-values';
+import { useSchemaContext } from '../../ui/contexts/schema';
+function FieldHeader({ name, required = false, type, ...props }) {
+    return (_jsxs("label", { ...props, className: cn('w-full inline-flex items-center gap-1', props.className), children: [_jsx("span", { className: cn(labelVariants()), children: name }), required ? _jsx("span", { className: "text-red-500", children: "*" }) : null, _jsx("div", { className: "flex-1" }), type ? (_jsx("code", { className: "text-xs text-fd-muted-foreground", children: type })) : null, props.children] }));
+}
+export function ObjectInput({ field, fieldName, ...props }) {
+    const { references } = useSchemaContext();
+    return (_jsxs("div", { ...props, className: cn('flex flex-col gap-6', props.className), children: [Object.entries(field.properties).map(([key, child]) => (_jsx(FieldSet, { name: key, field: resolve(child, references), fieldName: `${fieldName}.${key}` }, key))), field.additionalProperties ? (_jsx(AdditionalProperties, { fieldName: fieldName, type: field.additionalProperties })) : null] }));
+}
+function AdditionalProperties({ fieldName, type, }) {
+    const { control, setValue } = useFormContext();
+    const { references, dynamic } = useSchemaContext();
+    const [nextName, setNextName] = useState('');
+    const [properties, setProperties] = useState(() => {
+        const d = dynamic.current.get(`additional_${fieldName}`);
+        if (d?.type === 'object')
+            return d.properties;
+        return [];
+    });
+    dynamic.current.set(`additional_${fieldName}`, {
+        type: 'object',
+        properties,
+    });
+    const onAppend = () => {
+        const name = nextName.trim();
+        if (name.length === 0)
+            return;
+        setProperties((p) => {
+            if (p.includes(name))
+                return p;
+            setValue(`${fieldName}.${name}`, '');
+            setNextName('');
+            return [...p, name];
+        });
+    };
+    const types = typeof type === 'string'
+        ? resolveDynamicTypes(references[type], references)
+        : undefined;
+    return (_jsxs(_Fragment, { children: [properties.map((item) => (_jsx(FieldSet, { name: item, field: {
+                    type: 'switcher',
+                    items: types ?? anyFields,
+                    isRequired: false,
+                }, fieldName: `${fieldName}.${item}`, toolbar: _jsx("button", { type: "button", "aria-label": "Remove Item", className: cn(buttonVariants({
+                        color: 'secondary',
+                        size: 'sm',
+                    })), onClick: () => {
+                        setProperties((p) => p.filter((prop) => prop !== item));
+                        control.unregister(`${fieldName}.${item}`);
+                    }, children: _jsx(Trash2, { className: "size-4" }) }) }, item))), _jsxs("div", { className: "flex flex-row gap-1", children: [_jsx(Input, { value: nextName, placeholder: "Enter Property Name", onChange: (e) => {
+                            setNextName(e.target.value);
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                onAppend();
+                                e.preventDefault();
+                            }
+                        } }), _jsx("button", { type: "button", className: cn(buttonVariants({ color: 'secondary' })), onClick: onAppend, children: "New" })] })] }));
+}
+function resolveDynamicTypes(schema, references) {
+    if (schema.type !== 'switcher')
+        return { [schema.type]: schema };
+    return Object.fromEntries(Object.entries(schema.items).map(([key, value]) => [
+        key,
+        resolve(value, references),
+    ]));
+}
+const anyFields = {
+    string: {
+        type: 'string',
+        isRequired: false,
+        defaultValue: '',
+    },
+    boolean: {
+        type: 'boolean',
+        isRequired: false,
+        defaultValue: '',
+    },
+    number: {
+        type: 'number',
+        isRequired: false,
+        defaultValue: '',
+    },
+    object: {
+        type: 'object',
+        properties: {},
+        additionalProperties: true,
+        isRequired: false,
+    },
+};
+anyFields.array = {
+    type: 'array',
+    isRequired: false,
+    items: {
+        type: 'switcher',
+        isRequired: false,
+        items: anyFields,
+    },
+};
+export function FieldInput({ field, fieldName, ...props }) {
+    const { control, register } = useFormContext();
+    if (field.type === 'null')
+        return null;
+    if (field.type === 'object') {
+        return (_jsx(ObjectInput, { field: field, fieldName: fieldName, ...props, className: cn('rounded-lg border border-fd-primary/20 bg-fd-card p-3 shadow-sm', props.className) }));
+    }
+    if (field.type === 'array') {
+        return (_jsx(ArrayInput, { fieldName: fieldName, field: field, ...props, className: cn('rounded-lg border border-fd-primary/20 bg-fd-background p-3 shadow-sm', props.className) }));
+    }
+    if (field.type === 'file' || field.type === 'boolean') {
+        return (_jsx(Controller, { control: control, name: fieldName, render: ({ field: { value, onChange, ...restField } }) => field.type === 'file' ? (_jsx("input", { id: fieldName, type: "file", multiple: false, onChange: (e) => {
+                    if (!e.target.files)
+                        return;
+                    onChange(e.target.files.item(0));
+                }, ...props, ...restField })) : (_jsxs(Select, { value: value, onValueChange: onChange, disabled: restField.disabled, children: [_jsx(SelectTrigger, { id: fieldName, className: props.className, ...restField, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "true", children: "True" }), _jsx(SelectItem, { value: "false", children: "False" }), field.isRequired ? null : (_jsx(SelectItem, { value: "null", children: "Null" }))] })] })) }));
+    }
+    return (_jsx(Input, { id: fieldName, placeholder: "Enter value", type: field.type === 'string' ? 'text' : 'number', ...register(fieldName), ...props }));
+}
+export function FieldSet({ field, fieldName, toolbar, name, ...props }) {
+    const { references, dynamic } = useSchemaContext();
+    const [value, setValue] = useState(() => {
+        if (field.type !== 'switcher')
+            return '';
+        const d = dynamic.current.get(fieldName);
+        const items = Object.keys(field.items);
+        if (d?.type === 'field') {
+            // schemas are passed from server components, they shouldn't be re-constructed
+            const cached = items.find((item) => d.schema === field.items[item]);
+            if (cached)
+                return cached;
+        }
+        return items[0];
+    });
+    if (field.type === 'null')
+        return null;
+    if (value && field.type === 'switcher') {
+        dynamic.current.set(fieldName, {
+            type: 'field',
+            schema: field.items[value],
+        });
+    }
+    if (field.type === 'switcher') {
+        const child = resolve(field.items[value], references);
+        return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsxs(FieldHeader, { name: name, htmlFor: fieldName, required: field.isRequired, children: [_jsx("select", { value: value, onChange: (e) => setValue(e.target.value), className: "text-xs", children: Object.keys(field.items).map((item) => (_jsx("option", { value: item, children: item }, item))) }), toolbar] }), _jsx("p", { className: "text-xs text-fd-muted-foreground", children: field.description }), child.type === 'switcher' ? (_jsx(FieldSet, { field: child, fieldName: fieldName })) : (_jsx(FieldInput, { field: child, fieldName: fieldName }))] }));
+    }
+    return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsx(FieldHeader, { htmlFor: fieldName, name: name, required: field.isRequired, type: field.type, children: toolbar }), _jsx(FieldInput, { field: field, fieldName: fieldName })] }));
+}
+function ArrayInput({ fieldName, field, ...props }) {
+    const { references } = useSchemaContext();
+    const items = resolve(field.items, references);
+    const { fields, append, remove } = useFieldArray({
+        name: fieldName,
+    });
+    return (_jsxs("div", { ...props, className: cn('flex flex-col gap-2', props.className), children: [fields.map((item, index) => (_jsx(FieldSet, { name: `${fieldName.split('.').at(-1)}[${index}]`, field: items, fieldName: `${fieldName}.${index}`, toolbar: _jsx("button", { type: "button", "aria-label": "Remove Item", className: cn(buttonVariants({
+                        color: 'secondary',
+                        size: 'sm',
+                    })), onClick: () => {
+                        remove(index);
+                    }, children: _jsx(Trash2, { className: "size-4" }) }) }, item.id))), _jsxs("button", { type: "button", className: cn(buttonVariants({
+                    color: 'outline',
+                    className: 'gap-1.5 py-2',
+                    size: 'sm',
+                })), onClick: () => {
+                    append(getDefaultValue(items, references));
+                }, children: [_jsx(Plus, { className: "size-4" }), "New Item"] })] }));
+}

package/dist/ui/playground/resolve.d.ts

@@ -0,0 +1,6 @@
+import { type ReferenceSchema, type RequestSchema } from '../../render/playground';
+/**
+ * Resolve reference
+ */
+export declare function resolve(schema: RequestSchema | ReferenceSchema | string, references: Record<string, RequestSchema>): RequestSchema;
+//# sourceMappingURL=resolve.d.ts.map

package/dist/ui/playground/resolve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../../src/ui/playground/resolve.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE/E;;GAEG;AACH,wBAAgB,OAAO,CACrB,MAAM,EAAE,aAAa,GAAG,eAAe,GAAG,MAAM,EAChD,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GACxC,aAAa,CASf"}

package/dist/ui/playground/resolve.js

@@ -0,0 +1,14 @@
+/**
+ * Resolve reference
+ */
+export function resolve(schema, references) {
+    if (typeof schema === 'string')
+        return references[schema];
+    if (schema.type !== 'ref')
+        return schema;
+    return {
+        ...references[schema.schema],
+        description: schema.description,
+        isRequired: schema.isRequired,
+    };
+}

package/dist/ui/playground/status-info.d.ts

@@ -0,0 +1,8 @@
+interface StatusInfo {
+    description: string;
+    color: string;
+    icon: React.ElementType;
+}
+export declare function getStatusInfo(status: number): StatusInfo;
+export {};
+//# sourceMappingURL=status-info.d.ts.map

package/dist/ui/playground/status-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-info.d.ts","sourceRoot":"","sources":["../../../src/ui/playground/status-info.tsx"],"names":[],"mappings":"AAEA,UAAU,UAAU;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC;CACzB;AAsBD,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAsBxD"}

package/dist/ui/playground/status-info.js

@@ -0,0 +1,40 @@
+import { CircleCheckIcon, CircleXIcon } from 'lucide-react';
+const statusMap = {
+    400: { description: 'Bad Request', color: 'text-red-500', icon: CircleXIcon },
+    401: {
+        description: 'Unauthorized',
+        color: 'text-red-500',
+        icon: CircleXIcon,
+    },
+    403: { description: 'Forbidden', color: 'text-red-500', icon: CircleXIcon },
+    404: {
+        description: 'Not Found',
+        color: 'text-fd-muted-foreground',
+        icon: CircleXIcon,
+    },
+    500: {
+        description: 'Internal Server Error',
+        color: 'text-red-500',
+        icon: CircleXIcon,
+    },
+};
+export function getStatusInfo(status) {
+    if (status in statusMap) {
+        return statusMap[status];
+    }
+    if (status >= 200 && status < 300) {
+        return {
+            description: 'Successful',
+            color: 'text-green-500',
+            icon: CircleCheckIcon,
+        };
+    }
+    if (status >= 400) {
+        return { description: 'Error', color: 'text-red-500', icon: CircleXIcon };
+    }
+    return {
+        description: 'No Description',
+        color: 'text-fd-muted-foreground',
+        icon: CircleXIcon,
+    };
+}

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

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export default function ServerSelect(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=server-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"server-select.d.ts","sourceRoot":"","sources":["../../src/ui/server-select.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,kDA6EzE"}

package/dist/ui/server-select.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApiContext, useServerSelectContext } from '../ui/contexts/api';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/components/select';
+import { Input, labelVariants } from '../ui/components/input';
+import { cn } from 'fumadocs-ui/components/api';
+export default function ServerSelect(props) {
+    const { servers } = useApiContext();
+    const { server, setServer, setServerVariables } = useServerSelectContext();
+    if (servers.length <= 1)
+        return null;
+    const schema = server
+        ? servers.find((item) => item.url === server.url)
+        : undefined;
+    return (_jsxs("div", { ...props, className: cn('flex flex-col gap-4', props.className), children: [_jsxs(Select, { value: server?.url, onValueChange: setServer, children: [_jsx(SelectTrigger, { className: "h-auto 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) => setServerVariables({
+                                ...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) => setServerVariables({
+                                ...server?.variables,
+                                [key]: e.target.value,
+                            }) }))] }, key));
+            })] }));
+}

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

@@ -0,0 +1,6 @@
+import { type ParsedSchema } from '../utils/schema';
+/**
+ * Combine multiple object schemas into one
+ */
+export declare function combineSchema(schema: ParsedSchema[]): ParsedSchema;
+//# sourceMappingURL=combine-schema.d.ts.map

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

@@ -0,0 +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"}

package/dist/utils/combine-schema.js

@@ -0,0 +1,46 @@
+/**
+ * Combine multiple object schemas into one
+ */
+export function combineSchema(schema) {
+    const result = {
+        type: undefined,
+    };
+    function add(s) {
+        if (s.type) {
+            result.type ?? (result.type = []);
+            if (!Array.isArray(result.type)) {
+                result.type = [result.type];
+            }
+            for (const v of Array.isArray(s.type) ? s.type : [s.type]) {
+                if (!result.type.includes(v)) {
+                    result.type.push(v);
+                }
+            }
+        }
+        if (s.properties) {
+            result.properties ?? (result.properties = {});
+            Object.assign(result.properties, s.properties);
+        }
+        if (s.additionalProperties === true) {
+            result.additionalProperties = true;
+        }
+        else if (s.additionalProperties &&
+            typeof result.additionalProperties !== 'boolean') {
+            result.additionalProperties ?? (result.additionalProperties = {});
+            Object.assign(result.additionalProperties, s.additionalProperties);
+        }
+        if (s.required) {
+            result.required ?? (result.required = []);
+            result.required.push(...s.required);
+        }
+        if (s.enum && s.enum.length > 0) {
+            result.enum ?? (result.enum = []);
+            result.enum.push(...s.enum);
+        }
+        if (s.allOf) {
+            s.allOf.forEach(add);
+        }
+    }
+    schema.forEach(add);
+    return result;
+}