fumadocs-openapi 5.11.8 → 5.12.0

package/dist/ui/{index-client-DPqAL2w9.js → index-client-XPLtFTfD.js}

@@ -1,93 +1,18 @@
 'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { forwardRef, useId, createContext, useContext, useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import { FormProvider, Controller, useFormContext, useFieldArray, useForm, useWatch } from 'react-hook-form';
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
+import { forwardRef, useState, useMemo, useRef, useEffect, Fragment as Fragment$1 } from 'react';
+import { useFormContext, Controller, useFieldArray, useForm, FormProvider } from 'react-hook-form';
 import { cn, buttonVariants } from 'fumadocs-ui/components/api';
-import { C as ChevronDown, a as Check, b as ChevronUp, u as useSchemaContext, T as Trash2, P as Plus, c as CircleCheck, d as CircleX, e as useApiContext, S as SchemaContext, g as getUrl } from './client-client-B06fJG48.js';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+import { C as ChevronDown, a as ChevronUp, b as Check, u as useSchemaContext, T as Trash2, P as Plus, c as CircleCheck, d as CircleX, e as useApiContext, S as SchemaContext, g as getUrl } from './client-client-Die8irpf.js';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import { cva } from 'class-variance-authority';
 import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-
-const Form = FormProvider;
-const FormFieldContext = /*#__PURE__*/ createContext({
-    name: ''
-});
-const FormItemContext = /*#__PURE__*/ createContext({
-    id: ''
-});
-function FormField({ ...props }) {
-    return /*#__PURE__*/ jsx(FormFieldContext.Provider, {
-        value: {
-            name: props.name
-        },
-        children: /*#__PURE__*/ jsx(Controller, {
-            ...props
-        })
-    });
-}
-function useFormField() {
-    const fieldContext = useContext(FormFieldContext);
-    const { id } = useContext(FormItemContext);
-    const { getFieldState, formState } = useFormContext();
-    const fieldState = getFieldState(fieldContext.name, formState);
-    return {
-        id,
-        name: fieldContext.name,
-        formItemId: `${id}-form-item`,
-        formDescriptionId: `${id}-form-item-description`,
-        isError: Boolean(fieldState.error)
-    };
-}
-const FormItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
-    const id = useId();
-    return /*#__PURE__*/ jsx(FormItemContext.Provider, {
-        value: {
-            id
-        },
-        children: /*#__PURE__*/ jsx("div", {
-            ref: ref,
-            className: cn('flex flex-col gap-1', className),
-            ...props
-        })
-    });
-});
-FormItem.displayName = 'FormItem';
-const labelVariants = cva('font-mono text-xs text-fd-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
-const FormLabel = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
-    const { isError, formItemId } = useFormField();
-    return /*#__PURE__*/ jsx("label", {
-        ref: ref,
-        className: cn(labelVariants(), isError && 'text-red-500', className),
-        htmlFor: formItemId,
-        ...props
-    });
-});
-FormLabel.displayName = 'FormLabel';
-const FormControl = /*#__PURE__*/ forwardRef(({ ...props }, ref)=>{
-    const { isError, formItemId, formDescriptionId } = useFormField();
-    return /*#__PURE__*/ jsx(Slot, {
-        ref: ref,
-        id: formItemId,
-        "aria-describedby": formDescriptionId,
-        "aria-invalid": isError,
-        ...props
-    });
-});
-FormControl.displayName = 'FormControl';
-const FormDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
-    const { formDescriptionId } = useFormField();
-    return /*#__PURE__*/ jsx("p", {
-        ref: ref,
-        id: formDescriptionId,
-        className: cn('text-xs text-fd-muted-foreground', className),
-        ...props
-    });
-});
-FormDescription.displayName = 'FormDescription';
+import { S as ServerSelect } from './server-select-client-D4GEjFgD.js';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
+import { buttonVariants as buttonVariants$1 } from 'fumadocs-ui/components/ui/button';
+import { ApiClientModalProvider, useApiClientModal } from '@scalar/api-client-react';
+import { useTheme } from 'next-themes';
 
 /**
  * Resolve reference
@@ -127,7 +52,7 @@ const Select = SelectPrimitive.Root;
 const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(SelectPrimitive.Trigger, {
         ref: ref,
-        className: cn('flex h-10 items-center rounded-md border px-3 py-2 text-start text-sm text-fd-foreground hover:bg-fd-accent focus:outline-none focus:ring-2 focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className),
+        className: cn('flex h-10 items-center w-full rounded-md border px-3 py-2 text-start text-[13px] text-fd-foreground hover:bg-fd-accent focus:outline-none focus:ring-2 focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className),
         ...props,
         children: [
             children,
@@ -158,16 +83,16 @@ const SelectScrollDownButton = /*#__PURE__*/ forwardRef(({ className, ...props }
         })
     }));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = /*#__PURE__*/ forwardRef(({ className, children, position = 'popper', ...props }, ref)=>/*#__PURE__*/ jsx(SelectPrimitive.Portal, {
+const SelectContent = /*#__PURE__*/ forwardRef(({ className, children, position, ...props }, ref)=>/*#__PURE__*/ jsx(SelectPrimitive.Portal, {
         children: /*#__PURE__*/ jsxs(SelectPrimitive.Content, {
             ref: ref,
-            className: cn('z-50 overflow-hidden rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-md data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in', className),
+            className: cn('z-50 overflow-hidden rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-md', className),
             position: position,
             ...props,
             children: [
                 /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
                 /*#__PURE__*/ jsx(SelectPrimitive.Viewport, {
-                    className: cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'),
+                    className: "p-1",
                     children: children
                 }),
                 /*#__PURE__*/ jsx(SelectScrollDownButton, {})
@@ -183,7 +108,7 @@ const SelectLabel = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 const SelectItem = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(SelectPrimitive.Item, {
         ref: ref,
-        className: cn('flex select-none flex-row items-center rounded-md py-1.5 pe-2 ps-6 text-sm outline-none focus:bg-fd-accent focus:text-fd-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className),
+        className: cn('flex select-none flex-row items-center rounded-md py-1.5 pe-2 ps-6 text-[13px] outline-none focus:bg-fd-accent focus:text-fd-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className),
         ...props,
         children: [
             /*#__PURE__*/ jsx(SelectPrimitive.ItemIndicator, {
@@ -205,64 +130,36 @@ const SelectSeparator = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=
     }));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
+const labelVariants = cva('text-[13px] font-mono text-fd-card-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 const Input = /*#__PURE__*/ React.forwardRef(({ className, type, ...props }, ref)=>{
     return /*#__PURE__*/ jsx("input", {
         type: type,
-        className: cn('flex h-9 w-full rounded-md border bg-transparent px-2 py-1.5 text-sm text-fd-foreground transition-colors placeholder:text-fd-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className),
+        className: cn('flex h-9 w-full rounded-md border bg-transparent px-2 py-1.5 text-[13px] text-fd-foreground transition-colors placeholder:text-fd-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className),
         ref: ref,
         ...props
     });
 });
 Input.displayName = 'Input';
 
-function renderInner({ field, ...props }) {
-    if (field.type === 'object') return /*#__PURE__*/ jsx(ObjectInput, {
-        field: field,
-        ...props,
-        className: cn('rounded-lg border bg-fd-accent/20 p-3', props.className)
-    });
-    if (field.type === 'switcher') return /*#__PURE__*/ jsx(Switcher, {
-        inline: true,
-        field: field,
-        ...props
-    });
-    if (field.type === 'array') return /*#__PURE__*/ jsx(ArrayInput, {
-        field: field,
-        ...props,
-        className: cn('rounded-lg border bg-fd-background p-3', props.className)
-    });
-    if (field.type === 'null') return null;
-    return /*#__PURE__*/ jsx(NormalInput, {
-        field: field,
-        ...props
-    });
-}
-function InputContainer({ toolbar, name, required, type, description, inline = false, ...props }) {
-    return /*#__PURE__*/ jsxs("div", {
+function FieldHeader({ name, required = false, type, ...props }) {
+    return /*#__PURE__*/ jsxs("label", {
         ...props,
-        className: cn('flex flex-col gap-1', props.className),
+        className: cn('w-full inline-flex items-center gap-1', props.className),
         children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: cn(labelVariants(), 'inline-flex items-center gap-1'),
-                children: [
-                    name,
-                    required ? /*#__PURE__*/ jsx("span", {
-                        className: "text-red-500",
-                        children: "*"
-                    }) : null,
-                    /*#__PURE__*/ jsx("div", {
-                        className: "flex-1"
-                    }),
-                    type ? /*#__PURE__*/ jsx("code", {
-                        className: "text-xs text-fd-muted-foreground",
-                        children: type
-                    }) : null,
-                    toolbar
-                ]
+            /*#__PURE__*/ jsx("span", {
+                className: cn(labelVariants()),
+                children: name
             }),
-            !inline ? /*#__PURE__*/ jsx("p", {
-                className: "text-xs",
-                children: description
+            required ? /*#__PURE__*/ jsx("span", {
+                className: "text-red-500",
+                children: "*"
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                className: "flex-1"
+            }),
+            type ? /*#__PURE__*/ jsx("code", {
+                className: "text-xs text-fd-muted-foreground",
+                children: type
             }) : null,
             props.children
         ]
@@ -272,9 +169,9 @@ function ObjectInput({ field, fieldName, ...props }) {
     const { references } = useSchemaContext();
     return /*#__PURE__*/ jsxs("div", {
         ...props,
-        className: cn('flex flex-col gap-4', props.className),
+        className: cn('flex flex-col gap-6', props.className),
         children: [
-            Object.entries(field.properties).map(([key, child])=>/*#__PURE__*/ jsx(InputField, {
+            Object.entries(field.properties).map(([key, child])=>/*#__PURE__*/ jsx(FieldSet, {
                     name: key,
                     field: resolve(child, references),
                     fieldName: `${fieldName}.${key}`
@@ -295,13 +192,11 @@ function AdditionalProperties({ fieldName, type }) {
         if (d?.type === 'object') return d.properties;
         return [];
     });
-    useOnChange(properties, ()=>{
-        dynamic.current.set(`additional_${fieldName}`, {
-            type: 'object',
-            properties
-        });
+    dynamic.current.set(`additional_${fieldName}`, {
+        type: 'object',
+        properties
     });
-    const onAppend = useCallback(()=>{
+    const onAppend = ()=>{
         const name = nextName.trim();
         if (name.length === 0) return;
         setProperties((p)=>{
@@ -313,15 +208,11 @@ function AdditionalProperties({ fieldName, type }) {
                 name
             ];
         });
-    }, [
-        nextName,
-        setValue,
-        fieldName
-    ]);
+    };
     const types = typeof type === 'string' ? resolveDynamicTypes(references[type], references) : undefined;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            properties.map((item)=>/*#__PURE__*/ jsx(Switcher, {
+            properties.map((item)=>/*#__PURE__*/ jsx(FieldSet, {
                     name: item,
                     field: {
                         type: 'switcher',
@@ -351,17 +242,15 @@ function AdditionalProperties({ fieldName, type }) {
                     /*#__PURE__*/ jsx(Input, {
                         value: nextName,
                         placeholder: "Enter Property Name",
-                        onChange: useCallback((e)=>{
+                        onChange: (e)=>{
                             setNextName(e.target.value);
-                        }, []),
-                        onKeyDown: useCallback((e)=>{
+                        },
+                        onKeyDown: (e)=>{
                             if (e.key === 'Enter') {
                                 onAppend();
                                 e.preventDefault();
                             }
-                        }, [
-                            onAppend
-                        ])
+                        }
                     }),
                     /*#__PURE__*/ jsx("button", {
                         type: "button",
@@ -417,11 +306,84 @@ anyFields.array = {
         items: anyFields
     }
 };
-function Switcher({ field, fieldName, ...props }) {
+function FieldInput({ field, fieldName, ...props }) {
+    const { control, register } = useFormContext();
+    if (field.type === 'null') return null;
+    if (field.type === 'object') {
+        return /*#__PURE__*/ 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 /*#__PURE__*/ 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 /*#__PURE__*/ jsx(Controller, {
+            control: control,
+            name: fieldName,
+            render: ({ field: { value, onChange, ...restField } })=>field.type === 'file' ? /*#__PURE__*/ jsx("input", {
+                    id: fieldName,
+                    type: "file",
+                    multiple: false,
+                    onChange: (e)=>{
+                        if (!e.target.files) return;
+                        onChange(e.target.files.item(0));
+                    },
+                    ...props,
+                    ...restField
+                }) : /*#__PURE__*/ jsxs(Select, {
+                    value: value,
+                    onValueChange: onChange,
+                    disabled: restField.disabled,
+                    children: [
+                        /*#__PURE__*/ jsx(SelectTrigger, {
+                            id: fieldName,
+                            className: props.className,
+                            ...restField,
+                            children: /*#__PURE__*/ jsx(SelectValue, {})
+                        }),
+                        /*#__PURE__*/ jsxs(SelectContent, {
+                            children: [
+                                /*#__PURE__*/ jsx(SelectItem, {
+                                    value: "true",
+                                    children: "True"
+                                }),
+                                /*#__PURE__*/ jsx(SelectItem, {
+                                    value: "false",
+                                    children: "False"
+                                }),
+                                field.isRequired ? null : /*#__PURE__*/ jsx(SelectItem, {
+                                    value: "null",
+                                    children: "Null"
+                                })
+                            ]
+                        })
+                    ]
+                })
+        });
+    }
+    return /*#__PURE__*/ jsx(Input, {
+        id: fieldName,
+        placeholder: "Enter value",
+        type: field.type === 'string' ? 'text' : 'number',
+        ...register(fieldName),
+        ...props
+    });
+}
+function FieldSet({ field, fieldName, toolbar, name, ...props }) {
     const { references, dynamic } = useSchemaContext();
-    const items = Object.keys(field.items);
     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]);
@@ -429,193 +391,66 @@ function Switcher({ field, fieldName, ...props }) {
         }
         return items[0];
     });
-    useOnChange(value, ()=>{
-        if (!value) return;
+    if (field.type === 'null') return null;
+    if (value && field.type === 'switcher') {
         dynamic.current.set(fieldName, {
             type: 'field',
             schema: field.items[value]
         });
-    });
-    return /*#__PURE__*/ jsx(InputContainer, {
-        required: field.isRequired,
-        description: field.description,
-        ...props,
-        toolbar: /*#__PURE__*/ jsxs(Fragment, {
+    }
+    if (field.type === 'switcher') {
+        const child = resolve(field.items[value], references);
+        return /*#__PURE__*/ jsxs("fieldset", {
+            ...props,
+            className: cn('flex flex-col gap-1.5', props.className),
             children: [
-                /*#__PURE__*/ jsxs(Select, {
-                    value: value,
-                    onValueChange: setValue,
+                /*#__PURE__*/ jsxs(FieldHeader, {
+                    name: name,
+                    htmlFor: fieldName,
+                    required: field.isRequired,
                     children: [
-                        /*#__PURE__*/ jsx(SelectTrigger, {
-                            className: "h-auto p-1 text-xs",
-                            children: /*#__PURE__*/ jsx(SelectValue, {})
-                        }),
-                        /*#__PURE__*/ jsx(SelectContent, {
-                            children: items.map((item)=>/*#__PURE__*/ jsx(SelectItem, {
+                        /*#__PURE__*/ jsx("select", {
+                            value: value,
+                            onChange: (e)=>setValue(e.target.value),
+                            className: "text-xs",
+                            children: Object.keys(field.items).map((item)=>/*#__PURE__*/ jsx("option", {
                                     value: item,
                                     children: item
                                 }, item))
-                        })
-                    ]
-                }),
-                props.toolbar
-            ]
-        }),
-        children: renderInner({
-            field: resolve(field.items[value], references),
-            fieldName
-        })
-    });
-}
-function InputField({ field, fieldName, ...props }) {
-    const { references } = useSchemaContext();
-    if (field.type === 'null') return null;
-    if (field.type === 'object') {
-        return /*#__PURE__*/ jsx(InputContainer, {
-            required: field.isRequired,
-            type: field.type,
-            description: field.description,
-            ...props,
-            children: /*#__PURE__*/ jsx(ObjectInput, {
-                field: field,
-                fieldName: fieldName,
-                className: "rounded-lg border bg-fd-accent/20 p-3"
-            })
-        });
-    }
-    if (field.type === 'array') {
-        return /*#__PURE__*/ jsx(InputContainer, {
-            required: field.isRequired,
-            description: field.description ?? resolve(field.items, references).description,
-            type: "array",
-            ...props,
-            children: /*#__PURE__*/ jsx(ArrayInput, {
-                fieldName: fieldName,
-                field: field,
-                className: "rounded-lg border bg-fd-background p-3"
-            })
-        });
-    }
-    if (field.type === 'switcher') {
-        return /*#__PURE__*/ jsx(Switcher, {
-            field: field,
-            fieldName: fieldName,
-            ...props
-        });
-    }
-    const { toolbar, inline = false, name, ...rest } = props;
-    return /*#__PURE__*/ jsx(NormalInput, {
-        field: field,
-        fieldName: fieldName,
-        header: /*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                /*#__PURE__*/ jsxs(FormLabel, {
-                    className: "inline-flex items-center gap-1",
-                    children: [
-                        name,
-                        field.isRequired ? /*#__PURE__*/ jsx("span", {
-                            className: "text-red-500",
-                            children: "*"
-                        }) : null,
-                        /*#__PURE__*/ jsx("code", {
-                            className: "ms-auto text-xs text-fd-muted-foreground",
-                            children: field.type
                         }),
                         toolbar
                     ]
                 }),
-                !inline ? /*#__PURE__*/ jsx(FormDescription, {
-                    className: "text-xs",
+                /*#__PURE__*/ jsx("p", {
+                    className: "text-xs text-fd-muted-foreground",
                     children: field.description
-                }) : null
-            ]
-        }),
-        ...rest
-    });
-}
-function NormalInput({ fieldName, header, field, ...props }) {
-    const { control } = useFormContext();
-    if (field.type === 'file') {
-        return /*#__PURE__*/ jsx(FormField, {
-            control: control,
-            name: fieldName,
-            render: ({ field: { value: _value, onChange, ...restField } })=>/*#__PURE__*/ jsxs(FormItem, {
-                    ...props,
-                    children: [
-                        header,
-                        /*#__PURE__*/ jsx(FormControl, {
-                            children: /*#__PURE__*/ jsx("input", {
-                                type: "file",
-                                multiple: false,
-                                onChange: (e)=>{
-                                    if (!e.target.files) return;
-                                    onChange(e.target.files.item(0));
-                                },
-                                ...restField
-                            })
-                        })
-                    ]
-                })
-        });
-    }
-    if (field.type === 'boolean') {
-        return /*#__PURE__*/ jsx(FormField, {
-            control: control,
-            name: fieldName,
-            render: ({ field: { value, onChange, ...restField } })=>/*#__PURE__*/ jsxs(FormItem, {
-                    ...props,
-                    children: [
-                        header,
-                        /*#__PURE__*/ jsxs(Select, {
-                            value: value,
-                            onValueChange: onChange,
-                            disabled: restField.disabled,
-                            children: [
-                                /*#__PURE__*/ jsx(FormControl, {
-                                    children: /*#__PURE__*/ jsx(SelectTrigger, {
-                                        ...restField,
-                                        children: /*#__PURE__*/ jsx(SelectValue, {})
-                                    })
-                                }),
-                                /*#__PURE__*/ jsxs(SelectContent, {
-                                    children: [
-                                        /*#__PURE__*/ jsx(SelectItem, {
-                                            value: "true",
-                                            children: "True"
-                                        }),
-                                        /*#__PURE__*/ jsx(SelectItem, {
-                                            value: "false",
-                                            children: "False"
-                                        }),
-                                        field.isRequired ? null : /*#__PURE__*/ jsx(SelectItem, {
-                                            value: "null",
-                                            children: "Null"
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
+                }),
+                child.type === 'switcher' ? /*#__PURE__*/ jsx(FieldSet, {
+                    field: child,
+                    fieldName: fieldName
+                }) : /*#__PURE__*/ jsx(FieldInput, {
+                    field: child,
+                    fieldName: fieldName
                 })
+            ]
         });
     }
-    return /*#__PURE__*/ jsx(FormField, {
-        control: control,
-        name: fieldName,
-        render: ({ field: { value, ...restField } })=>/*#__PURE__*/ jsxs(FormItem, {
-                ...props,
-                children: [
-                    header,
-                    /*#__PURE__*/ jsx(FormControl, {
-                        children: /*#__PURE__*/ jsx(Input, {
-                            placeholder: "Enter value",
-                            type: field.type === 'string' ? 'text' : 'number',
-                            value: value,
-                            ...restField
-                        })
-                    })
-                ]
+    return /*#__PURE__*/ jsxs("fieldset", {
+        ...props,
+        className: cn('flex flex-col gap-1.5', props.className),
+        children: [
+            /*#__PURE__*/ jsx(FieldHeader, {
+                htmlFor: fieldName,
+                name: name,
+                required: field.isRequired,
+                type: field.type,
+                children: toolbar
+            }),
+            /*#__PURE__*/ jsx(FieldInput, {
+                field: field,
+                fieldName: fieldName
             })
+        ]
     });
 }
 function ArrayInput({ fieldName, field, ...props }) {
@@ -624,23 +459,14 @@ function ArrayInput({ fieldName, field, ...props }) {
     const { fields, append, remove } = useFieldArray({
         name: fieldName
     });
-    const handleAppend = useCallback(()=>{
-        append(getDefaultValue(items, references));
-    }, [
-        append,
-        references,
-        items
-    ]);
     return /*#__PURE__*/ jsxs("div", {
         ...props,
-        className: cn('flex flex-col gap-4', props.className),
+        className: cn('flex flex-col gap-2', props.className),
         children: [
-            fields.map((item, index)=>/*#__PURE__*/ jsx(InputField, {
-                    inline: true,
-                    name: `Item ${String(index + 1)}`,
+            fields.map((item, index)=>/*#__PURE__*/ jsx(FieldSet, {
+                    name: `${fieldName.split('.').at(-1)}[${index}]`,
                     field: items,
-                    fieldName: `${fieldName}.${String(index)}`,
-                    className: "flex-1",
+                    fieldName: `${fieldName}.${index}`,
                     toolbar: /*#__PURE__*/ jsx("button", {
                         type: "button",
                         "aria-label": "Remove Item",
@@ -659,10 +485,13 @@ function ArrayInput({ fieldName, field, ...props }) {
             /*#__PURE__*/ jsxs("button", {
                 type: "button",
                 className: cn(buttonVariants({
-                    color: 'secondary',
-                    className: 'gap-1.5'
+                    color: 'outline',
+                    className: 'gap-1.5 py-2',
+                    size: 'sm'
                 })),
-                onClick: handleAppend,
+                onClick: ()=>{
+                    append(getDefaultValue(items, references));
+                },
                 children: [
                     /*#__PURE__*/ jsx(Plus, {
                         className: "size-4"
@@ -726,6 +555,64 @@ function getStatusInfo(status) {
     };
 }
 
+const variants = cva('font-mono font-medium', {
+    variants: {
+        color: {
+            green: 'text-green-600 dark:text-green-400',
+            yellow: 'text-yellow-600 dark:text-yellow-400',
+            red: 'text-red-600 dark:text-red-400',
+            blue: 'text-blue-600 dark:text-blue-400',
+            orange: 'text-orange-600 dark:text-orange-400'
+        }
+    }
+});
+function getBadgeColor(method) {
+    switch(method.toUpperCase()){
+        case 'PUT':
+            return 'yellow';
+        case 'PATCH':
+            return 'orange';
+        case 'POST':
+            return 'blue';
+        case 'DELETE':
+            return 'red';
+        default:
+            return 'green';
+    }
+}
+function MethodLabel({ children, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        className: cn(variants({
+            color: getBadgeColor(children)
+        }), props.className),
+        children: children.toUpperCase()
+    });
+}
+
+function useQuery(fn) {
+    const [loading, setLoading] = useState(false);
+    const [data, setData] = useState();
+    return useMemo(()=>({
+            isLoading: loading,
+            data,
+            start (input) {
+                setLoading(true);
+                void fn(input).then((res)=>{
+                    setData(res);
+                }).catch(()=>{
+                    setData(undefined);
+                }).finally(()=>{
+                    setLoading(false);
+                });
+            }
+        }), [
+        data,
+        fn,
+        loading
+    ]);
+}
+
 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());
@@ -739,7 +626,7 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
         }
     });
     const testQuery = useQuery(async (input)=>{
-        const fetcher = await import('./fetcher-Cc3BieIx.js').then((mod)=>mod.createBrowserFetcher(body, schemas));
+        const fetcher = await import('./fetcher-BHk80ZFu.js').then((mod)=>mod.createBrowserFetcher(body, schemas));
         const serverUrl = serverRef.current ? getUrl(serverRef.current.url, serverRef.current.variables) : window.location.origin;
         let url = `${serverUrl}${createPathnameFromInput(route, input.path, input.query)}`;
         if (proxyUrl) {
@@ -792,13 +679,13 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
                 name: fieldName
             }, key);
         }
-        return /*#__PURE__*/ jsx(InputField, {
+        return /*#__PURE__*/ jsx(FieldSet, {
             name: info.name,
             fieldName: fieldName,
             field: info
         }, key);
     }
-    return /*#__PURE__*/ jsx(Form, {
+    return /*#__PURE__*/ jsx(FormProvider, {
         ...form,
         children: /*#__PURE__*/ jsx(SchemaContext.Provider, {
             value: useMemo(()=>({
@@ -809,26 +696,22 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
             ]),
             children: /*#__PURE__*/ jsxs("form", {
                 ...props,
-                className: cn('not-prose flex flex-col gap-5 rounded-xl border bg-fd-card p-3', props.className),
+                className: cn('not-prose flex flex-col gap-2 rounded-xl border p-3 shadow-md', props.className),
                 onSubmit: onSubmit,
                 children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex flex-row gap-2",
-                        children: [
-                            /*#__PURE__*/ jsx(RouteDisplay, {
-                                route: route
-                            }),
-                            /*#__PURE__*/ jsx("button", {
-                                type: "submit",
-                                className: cn(buttonVariants({
-                                    color: 'secondary'
-                                })),
-                                disabled: testQuery.isLoading,
-                                children: "Send"
-                            })
-                        ]
+                    /*#__PURE__*/ jsx(FormHeader, {
+                        method: method,
+                        route: route,
+                        isLoading: testQuery.isLoading
+                    }),
+                    /*#__PURE__*/ jsx(CollapsiblePanel, {
+                        title: "Server URL",
+                        children: /*#__PURE__*/ jsx(ServerSelect, {})
                     }),
-                    authorization ? renderCustomField('authorization', authorization, fields.auth) : null,
+                    authorization ? /*#__PURE__*/ jsx(CollapsiblePanel, {
+                        title: "Headers",
+                        children: renderCustomField('authorization', authorization, fields.auth)
+                    }) : null,
                     path.length > 0 ? /*#__PURE__*/ jsx(CollapsiblePanel, {
                         title: "Path",
                         children: path.map((field)=>renderCustomField(`path.${field.name}`, field, fields.path, field.name))
@@ -856,28 +739,6 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
         })
     });
 }
-function CollapsiblePanel({ title, children }) {
-    return /*#__PURE__*/ jsxs(Collapsible, {
-        className: "-m-2",
-        children: [
-            /*#__PURE__*/ jsxs(CollapsibleTrigger, {
-                className: "group flex w-full flex-row items-center justify-between p-2 font-medium",
-                children: [
-                    title,
-                    /*#__PURE__*/ jsx(ChevronDown, {
-                        className: "size-4 group-data-[state=open]:rotate-180"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(CollapsibleContent, {
-                children: /*#__PURE__*/ jsx("div", {
-                    className: "flex flex-col gap-4 p-2",
-                    children: children
-                })
-            })
-        ]
-    });
-}
 function createPathnameFromInput(route, path, query) {
     let pathname = route;
     for (const key of Object.keys(path)){
@@ -891,21 +752,49 @@ function createPathnameFromInput(route, path, query) {
     }
     return searchParams.size > 0 ? `${pathname}?${searchParams.toString()}` : pathname;
 }
-function RouteDisplay({ route }) {
-    const [path, query] = useWatch({
-        name: [
-            'path',
-            'query'
-        ]
+function Route({ route, ...props }) {
+    const segments = route.split('/').filter((part)=>part.length > 0);
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: cn('flex flex-row items-center gap-0.5 overflow-auto text-nowrap', props.className),
+        children: segments.map((part, index)=>/*#__PURE__*/ jsxs(Fragment$1, {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text-fd-muted-foreground",
+                        children: "/"
+                    }),
+                    part.startsWith('{') && part.endsWith('}') ? /*#__PURE__*/ jsx("code", {
+                        className: "bg-fd-primary/10 text-fd-primary",
+                        children: part
+                    }) : /*#__PURE__*/ jsx("code", {
+                        className: "text-fd-foreground",
+                        children: part
+                    })
+                ]
+            }, index))
     });
-    const pathname = useMemo(()=>createPathnameFromInput(route, path, query), [
-        route,
-        path,
-        query
-    ]);
-    return /*#__PURE__*/ jsx("code", {
-        className: "flex-1 overflow-auto text-nowrap rounded-lg border bg-fd-secondary px-2 py-1.5 text-sm text-fd-secondary-foreground",
-        children: pathname
+}
+function FormHeader({ route, method, isLoading }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-row items-center gap-2 text-sm",
+        children: [
+            /*#__PURE__*/ jsx(MethodLabel, {
+                children: method
+            }),
+            /*#__PURE__*/ jsx(Route, {
+                route: route,
+                className: "flex-1"
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "submit",
+                className: cn(buttonVariants({
+                    color: 'primary',
+                    size: 'sm'
+                }), 'px-3 py-1.5'),
+                disabled: isLoading,
+                children: "Send"
+            })
+        ]
     });
 }
 function DefaultResultDisplay({ data }) {
@@ -937,32 +826,87 @@ function DefaultResultDisplay({ data }) {
         ]
     });
 }
-function useQuery(fn) {
-    const [loading, setLoading] = useState(false);
-    const [data, setData] = useState();
-    return useMemo(()=>({
-            isLoading: loading,
-            data,
-            start (input) {
-                setLoading(true);
-                void fn(input).then((res)=>{
-                    setData(res);
-                }).catch(()=>{
-                    setData(undefined);
-                }).finally(()=>{
-                    setLoading(false);
-                });
-            }
-        }), [
-        data,
-        fn,
-        loading
-    ]);
+function CollapsiblePanel({ title, children, ...props }) {
+    return /*#__PURE__*/ jsxs(Collapsible, {
+        ...props,
+        className: "border rounded-xl bg-fd-card text-fd-card-foreground overflow-hidden",
+        children: [
+            /*#__PURE__*/ 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,
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        className: "size-4 group-data-[state=open]:rotate-180"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(CollapsibleContent, {
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "flex flex-col gap-4 p-3",
+                    children: children
+                })
+            })
+        ]
+    });
+}
+
+var index$1 = {
+  __proto__: null,
+  APIPlayground: APIPlayground,
+  CollapsiblePanel: CollapsiblePanel
+};
+
+function ScalarPlayground({ path, method, spec }) {
+    const { resolvedTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+    useEffect(()=>{
+        setMounted(true);
+    }, []);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex flex-row items-center gap-2.5 p-3 rounded-xl border bg-fd-card text-fd-card-foreground not-prose', mounted ? `${resolvedTheme}-mode` : null),
+        children: [
+            /*#__PURE__*/ jsx(MethodLabel, {
+                className: "text-xs",
+                children: method
+            }),
+            /*#__PURE__*/ jsx("code", {
+                className: "flex-1 overflow-auto text-nowrap text-[13px] text-fd-muted-foreground",
+                children: path
+            }),
+            /*#__PURE__*/ jsx(ApiClientModalProvider, {
+                configuration: {
+                    themeId: 'moon',
+                    spec: {
+                        content: spec
+                    }
+                },
+                children: /*#__PURE__*/ jsx(Trigger, {
+                    path: path,
+                    method: method
+                })
+            })
+        ]
+    });
+}
+function Trigger({ path, method }) {
+    const client = useApiClientModal();
+    return /*#__PURE__*/ jsx("button", {
+        type: "submit",
+        className: cn(buttonVariants$1({
+            color: 'primary',
+            size: 'sm'
+        }), 'px-3 py-1.5'),
+        onClick: ()=>client?.open({
+                path,
+                method
+            }),
+        children: "Test"
+    });
 }
 
 var index = {
   __proto__: null,
-  APIPlayground: APIPlayground
+  default: ScalarPlayground
 };
 
-export { Input as I, Select as S, SelectTrigger as a, SelectValue as b, SelectContent as c, SelectItem as d, index as i, resolve as r };
+export { Input as I, Select as S, SelectTrigger as a, SelectValue as b, SelectContent as c, SelectItem as d, index as e, index$1 as i, labelVariants as l, resolve as r };