fumadocs-openapi 10.3.10 → 10.3.12

package/css/generated/shared.css

@@ -1,4 +1,6 @@
 @source inline("!isDefined");
+@source inline("!last");
+@source inline("*:data-[collapsible=true]:order-last");
 @source inline("*:min-w-0");
 @source inline("--fd-docs-row-1");
 @source inline("--initial-height");
@@ -25,7 +27,6 @@
 @source inline("@scalar/api-client-react");
 @source inline("@see");
 @source inline("@typescript-eslint/no-explicit-any");
-@source inline("[&_svg]:size-3.5");
 @source inline("a");
 @source inline("absolute");
 @source inline("access");
@@ -99,6 +100,7 @@
 @source inline("border-fd-primary/20");
 @source inline("border-t");
 @source inline("border-x");
+@source inline("border-y");
 @source inline("both");
 @source inline("but");
 @source inline("button");
@@ -123,6 +125,7 @@
 @source inline("client");
 @source inline("client-side");
 @source inline("clientCredentials");
+@source inline("clientHeight");
 @source inline("clientId");
 @source inline("clientSecret");
 @source inline("client_credentials");
@@ -158,6 +161,7 @@
 @source inline("ctx");
 @source inline("current");
 @source inline("currentId");
+@source inline("currentRef");
 @source inline("currentValue");
 @source inline("customisation");
 @source inline("cva");
@@ -177,6 +181,8 @@
 @source inline("data-[state=open]:animate-fd-fade-in");
 @source inline("data-[state=open]:rounded-b-none");
 @source inline("data-[state=open]:text-fd-accent-foreground");
+@source inline("data-collapsible");
+@source inline("data-placeholder:text-fd-muted-foreground");
 @source inline("dataEngine");
 @source inline("declare");
 @source inline("default");
@@ -187,6 +193,7 @@
 @source inline("defaultSamples");
 @source inline("defaultValue");
 @source inline("defaultValues");
+@source inline("deferredValue");
 @source inline("definitions");
 @source inline("deprecated");
 @source inline("depth");
@@ -252,6 +259,7 @@
 @source inline("file");
 @source inline("filePath");
 @source inline("files");
+@source inline("filtered");
 @source inline("find");
 @source inline("fine");
 @source inline("first");
@@ -268,6 +276,8 @@
 @source inline("focus-visible:outline-none");
 @source inline("focus-visible:ring-1");
 @source inline("focus-visible:ring-fd-ring");
+@source inline("focus-within:ring-2");
+@source inline("focus-within:ring-fd-ring");
 @source inline("focus:bg-fd-accent");
 @source inline("focus:outline-none");
 @source inline("focus:ring");
@@ -306,12 +316,12 @@
 @source inline("gap-x-6");
 @source inline("gap-y-4");
 @source inline("generate");
+@source inline("generateDefault");
 @source inline("generated");
 @source inline("generated/defined");
 @source inline("generator");
 @source inline("generators");
 @source inline("getAPIPageProps");
-@source inline("getDefaultValue");
 @source inline("getSchema");
 @source inline("getStatusInfo");
 @source inline("getTypescriptSchema");
@@ -339,6 +349,7 @@
 @source inline("headers");
 @source inline("headingLevel");
 @source inline("hidden");
+@source inline("hiddenProperties");
 @source inline("hook");
 @source inline("hover:bg-fd-accent");
 @source inline("hover:text-fd-accent-foreground");
@@ -381,6 +392,7 @@
 @source inline("isDefined");
 @source inline("isDuplicated");
 @source inline("isDynamic");
+@source inline("isLazy");
 @source inline("isLoading");
 @source inline("isMediaTypeSupported");
 @source inline("isNumber");
@@ -426,7 +438,6 @@
 @source inline("lucide-react");
 @source inline("map");
 @source inline("mapInputs");
-@source inline("match");
 @source inline("max");
 @source inline("max-age");
 @source inline("max-h-[460px]");
@@ -453,6 +464,7 @@
 @source inline("module");
 @source inline("moon");
 @source inline("mounted");
+@source inline("ms-2");
 @source inline("ms-auto");
 @source inline("mt-10");
 @source inline("mt-2");
@@ -467,6 +479,7 @@
 @source inline("my-4");
 @source inline("name");
 @source inline("name!");
+@source inline("namespace");
 @source inline("necessary");
 @source inline("need");
 @source inline("nested");
@@ -492,7 +505,6 @@
 @source inline("onChange");
 @source inline("onClick");
 @source inline("onCopy");
-@source inline("onDelete");
 @source inline("onKeyDown");
 @source inline("onOpenChange");
 @source inline("onSubmit");
@@ -512,6 +524,7 @@
 @source inline("options");
 @source inline("or");
 @source inline("orange");
+@source inline("order-last");
 @source inline("origin");
 @source inline("original");
 @source inline("other");
@@ -567,12 +580,14 @@
 @source inline("placeholder");
 @source inline("placeholder:text-fd-muted-foreground");
 @source inline("playground");
+@source inline("playground/index.tsx");
 @source inline("playgroundEnabled");
 @source inline("playgrounds");
 @source inline("plugins");
 @source inline("position");
 @source inline("pre");
 @source inline("prefix");
+@source inline("preprocessed");
 @source inline("prev");
 @source inline("prevent");
 @source inline("primary");
@@ -586,6 +601,7 @@
 @source inline("props");
 @source inline("prose-no-margin");
 @source inline("proxyUrl");
+@source inline("ps-2");
 @source inline("ps-4.5");
 @source inline("ps-6");
 @source inline("pt-1");
@@ -603,6 +619,7 @@
 @source inline("py-2");
 @source inline("py-4");
 @source inline("query");
+@source inline("quiet");
 @source inline("race");
 @source inline("range");
 @source inline("raw");
@@ -612,6 +629,7 @@
 @source inline("react/jsx-runtime");
 @source inline("read");
 @source inline("readOnly");
+@source inline("recover");
 @source inline("red");
 @source inline("redirect_uri");
 @source inline("ref");
@@ -653,6 +671,7 @@
 @source inline("resType");
 @source inline("reset");
 @source inline("resize-none");
+@source inline("resolution");
 @source inline("resolveMediaAdapter");
 @source inline("resolveRequestData");
 @source inline("resolvedTheme");
@@ -679,6 +698,7 @@
 @source inline("samples");
 @source inline("satisfies");
 @source inline("schema");
+@source inline("schemaPropKeys");
 @source inline("schemaToString");
 @source inline("schemaUI");
 @source inline("schemas");
@@ -724,6 +744,7 @@
 @source inline("setNextName");
 @source inline("setOpen");
 @source inline("setPath");
+@source inline("setSearch");
 @source inline("setSecurityId");
 @source inline("setServer");
 @source inline("setServerVariables");
@@ -790,6 +811,7 @@
 @source inline("such");
 @source inline("summary");
 @source inline("supported");
+@source inline("swallow");
 @source inline("switch");
 @source inline("tab");
 @source inline("tabs");
@@ -882,11 +904,12 @@
 @source inline("useFieldValue");
 @source inline("useForm");
 @source inline("useMemo");
+@source inline("useNamespace");
 @source inline("useObject");
 @source inline("useQuery");
 @source inline("useRef");
-@source inline("useResolvedSchema");
 @source inline("useSchemaScope");
+@source inline("useSchemaUtils");
 @source inline("useServerContext");
 @source inline("useServerSelectContext");
 @source inline("useState");
@@ -933,6 +956,7 @@
 @source inline("writeOnly");
 @source inline("x-codeSamples");
 @source inline("x-exclusiveCodeSample");
+@source inline("x-playground-lazy");
 @source inline("x-selectedCodeSample");
 @source inline("yellow");
 @source inline("you");

package/dist/playground/client.js

@@ -8,7 +8,7 @@ import { cn } from "../utils/cn.js";
 import { MethodLabel } from "../ui/components/method-label.js";
 import { useQuery } from "../utils/use-query.js";
 import { encodeRequestData } from "../requests/media/encode.js";
-import { SchemaProvider, useResolvedSchema } from "./schema.js";
+import { SchemaProvider, useSchemaUtils } from "./schema.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/components/select.js";
 import { labelVariants } from "../ui/components/input.js";
 import ServerSelect from "./components/server-select.js";
@@ -16,7 +16,7 @@ import { useExampleRequests } from "../ui/operation/usage-tabs/client.js";
 import { FieldInput, FieldSet, JsonInput, ObjectInput } from "./components/inputs.js";
 import { Fragment, lazy, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, LoaderCircle, X } from "lucide-react";
+import { ChevronDown, LoaderCircle } from "lucide-react";
 import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock.core";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "fumadocs-ui/components/ui/collapsible";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
@@ -121,6 +121,10 @@ function PlaygroundClient({ route, method = "GET", securities, parameters = [],
 							})
 						]
 					}),
+					testQuery.data ? /* @__PURE__ */ jsx(ResultDisplay, {
+						data: testQuery.data,
+						reset: testQuery.reset
+					}) : null,
 					securities.length > 0 && /* @__PURE__ */ jsx(SecurityTabs, {
 						securities,
 						securityId,
@@ -130,11 +134,7 @@ function PlaygroundClient({ route, method = "GET", securities, parameters = [],
 					/* @__PURE__ */ jsx(FormBody, {
 						body,
 						parameters
-					}),
-					testQuery.data ? /* @__PURE__ */ jsx(ResultDisplay, {
-						data: testQuery.data,
-						reset: testQuery.reset
-					}) : null
+					})
 				]
 			})
 		})
@@ -206,7 +206,8 @@ function FormBody({ parameters = [], body }) {
 					return /* @__PURE__ */ jsx(FieldSet, {
 						name: field.name,
 						fieldName,
-						field: schema
+						field: schema,
+						isRequired: field.required
 					}, stringifyFieldKey(fieldName));
 				})
 			}, type);
@@ -217,11 +218,12 @@ function FormBody({ parameters = [], body }) {
 	})] });
 }
 function BodyInput({ field: _field }) {
-	const field = useResolvedSchema(_field);
+	const field = useSchemaUtils().resolve(_field);
 	const [isJson, setIsJson] = useState(false);
 	if (field.format === "binary") return /* @__PURE__ */ jsx(FieldSet, {
 		field,
-		fieldName: ["body"]
+		fieldName: ["body"],
+		isRequired: true
 	});
 	if (isJson) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
 		className: cn(buttonVariants({
@@ -237,6 +239,7 @@ function BodyInput({ field: _field }) {
 		field,
 		fieldName: ["body"],
 		collapsible: false,
+		isRequired: true,
 		name: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: cn(buttonVariants({
@@ -405,19 +408,21 @@ function DefaultResultDisplay({ data, reset }) {
 	const statusInfo = useMemo(() => getStatusInfo(data.status), [data.status]);
 	const { shikiOptions } = useApiContext();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-3 p-3",
+		className: "flex flex-col gap-3 mt-2 px-3 py-2 border-y bg-fd-secondary text-fd-secondary-foreground",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex justify-between items-center",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "inline-flex items-center gap-1.5 text-sm font-medium text-fd-foreground",
+					className: "inline-flex items-center gap-1.5 text-sm font-medium",
 					children: [/* @__PURE__ */ jsx(statusInfo.icon, { className: cn("size-4", statusInfo.color) }), statusInfo.description]
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: cn(buttonVariants({ size: "icon-xs" }), "p-0 text-fd-muted-foreground hover:text-fd-accent-foreground [&_svg]:size-3.5"),
+					className: cn(buttonVariants({
+						size: "sm",
+						variant: "outline"
+					})),
 					onClick: () => reset(),
-					"aria-label": "Dismiss response",
-					children: /* @__PURE__ */ jsx(X, {})
+					children: "Close"
 				})]
 			}),
 			/* @__PURE__ */ jsx("p", {

package/dist/playground/components/inputs.js

@@ -1,11 +1,10 @@
 'use client';
 
 import { cn } from "../../utils/cn.js";
-import { getDefaultValue } from "../get-default-values.js";
-import { anyFields, useFieldInfo, useResolvedSchema, useSchemaScope } from "../schema.js";
+import { FormatFlags } from "../../utils/schema-to-string.js";
+import { anyFields, useFieldInfo, useSchemaScope, useSchemaUtils } from "../schema.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/components/select.js";
 import { Input, labelVariants } from "../../ui/components/input.js";
-import { FormatFlags, schemaToString } from "../../utils/schema-to-string.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, Plus, Trash2, X } from "lucide-react";
@@ -24,65 +23,84 @@ function FieldLabelType(props) {
 	});
 }
 function ObjectInput({ field: _field, fieldName, ...props }) {
-	const field = useResolvedSchema(_field);
+	const { resolve, generateDefault } = useSchemaUtils();
+	const field = resolve(_field);
+	const schemaPropKeys = field.properties ? Object.keys(field.properties) : [];
+	const { patternProperties = {}, additionalProperties, "x-playground-lazy": isLazy = schemaPropKeys.length > 100 } = field;
+	const isDynamic = Object.keys(patternProperties).length > 0 || additionalProperties;
 	const [nextName, setNextName] = useState("");
-	const { properties, onAppend, onDelete } = useObject(fieldName, {
-		defaultValue: () => getDefaultValue(field),
+	const { properties, onAppend, onDelete, _objectKeys } = useObject(fieldName, {
+		lazy: isLazy,
+		defaultValue: () => generateDefault(field),
 		properties: field.properties ?? {},
-		fallback: field.additionalProperties,
-		patternProperties: field.patternProperties
+		fallback: additionalProperties,
+		patternProperties
 	});
-	const isDynamic = field.patternProperties ?? field.additionalProperties;
+	const hiddenProperties = isLazy ? schemaPropKeys.filter((key) => !_objectKeys.includes(key)) : [];
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
-		className: cn("grid grid-cols-1 gap-4 @md:grid-cols-2", props.className),
-		children: [properties.map((child) => {
-			let toolbar = null;
-			if (child.kind === "pattern" || child.kind === "fallback") toolbar = /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-label": "Remove Item",
-				className: cn(buttonVariants({
-					color: "outline",
-					size: "icon-xs"
-				})),
-				onClick: () => {
-					onDelete(child.key);
-				},
-				children: /* @__PURE__ */ jsx(Trash2, {})
-			});
-			return /* @__PURE__ */ jsx(FieldSet, {
-				name: child.key,
-				field: child.info,
-				fieldName: child.field,
-				isRequired: field.required?.includes(child.key),
-				toolbar
-			}, child.key);
-		}), isDynamic && /* @__PURE__ */ jsxs("div", {
-			className: "flex gap-2 col-span-full",
-			children: [/* @__PURE__ */ jsx(Input, {
-				value: nextName,
-				placeholder: "Enter Property Name",
-				onChange: (e) => setNextName(e.target.value),
-				onKeyDown: (e) => {
-					if (e.key === "Enter") {
-						setNextName("");
-						onAppend(nextName);
-						e.preventDefault();
+		className: cn("grid grid-cols-1 gap-4 @md:grid-cols-2 *:data-[collapsible=true]:order-last", props.className),
+		children: [
+			isLazy && hiddenProperties.length > 0 && /* @__PURE__ */ jsxs(Select, {
+				value: "",
+				onValueChange: onAppend,
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					className: "col-span-full",
+					children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Show Property" })
+				}), /* @__PURE__ */ jsx(SelectContent, { children: hiddenProperties.map((key) => /* @__PURE__ */ jsx(SelectItem, {
+					value: key,
+					children: key
+				}, key)) })]
+			}),
+			properties.map((child) => {
+				let toolbar = null;
+				if (child.kind === "pattern" || child.kind === "fallback") toolbar = /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Remove Item",
+					className: cn(buttonVariants({
+						color: "outline",
+						size: "icon-xs"
+					})),
+					onClick: () => {
+						onDelete(child.key);
+					},
+					children: /* @__PURE__ */ jsx(Trash2, {})
+				});
+				return /* @__PURE__ */ jsx(FieldSet, {
+					name: child.key,
+					field: child.info,
+					fieldName: child.field,
+					isRequired: field.required?.includes(child.key),
+					toolbar
+				}, child.key);
+			}),
+			isDynamic && /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2 order-last col-span-full",
+				children: [/* @__PURE__ */ jsx(Input, {
+					value: nextName,
+					placeholder: "Enter Property Name",
+					onChange: (e) => setNextName(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key === "Enter") {
+							setNextName("");
+							onAppend(nextName);
+							e.preventDefault();
+						}
 					}
-				}
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: cn(buttonVariants({
-					color: "secondary",
-					size: "sm"
-				}), "px-4"),
-				onClick: () => {
-					onAppend(nextName);
-					setNextName("");
-				},
-				children: "New"
-			})]
-		})]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cn(buttonVariants({
+						color: "secondary",
+						size: "sm"
+					}), "px-4"),
+					onClick: () => {
+						onAppend(nextName);
+						setNextName("");
+					},
+					children: "New"
+				})]
+			})
+		]
 	});
 }
 function JsonInput({ fieldName }) {
@@ -142,12 +160,12 @@ function FieldInput({ field, fieldName, isRequired, ...props }) {
 	if (field.enum && field.enum.length > 0) {
 		const idx = field.enum.indexOf(value);
 		return /* @__PURE__ */ jsxs(Select, {
-			value: String(idx),
+			value: idx === -1 && isRequired ? "" : String(idx),
 			onValueChange: (v) => setValue(field.enum[Number(v)]),
 			children: [/* @__PURE__ */ jsx(SelectTrigger, {
 				id,
 				...props,
-				children: /* @__PURE__ */ jsx(SelectValue, {})
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select" })
 			}), /* @__PURE__ */ jsxs(SelectContent, { children: [field.enum.map((item, i) => /* @__PURE__ */ jsx(SelectItem, {
 				value: String(i),
 				children: typeof item === "string" ? item : JSON.stringify(item, null, 2)
@@ -194,9 +212,10 @@ function FieldInput({ field, fieldName, isRequired, ...props }) {
 }
 function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth = 0, slotType, collapsible = true, ...props }) {
 	const { readOnly, writeOnly } = useSchemaScope();
-	const field = useResolvedSchema(_field);
+	const { resolve, generateDefault, schemaToString } = useSchemaUtils();
+	const field = resolve(_field);
 	const [show, setShow] = useState(!collapsible);
-	const { info, updateInfo } = useFieldInfo(fieldName, field);
+	const { info, updateInfo } = useFieldInfo(fieldName, field, depth);
 	const id = stringifyFieldKey(fieldName);
 	const dataEngine = useDataEngine();
 	const [isDefined] = useFieldValue(fieldName, { compute(currentValue) {
@@ -212,7 +231,7 @@ function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth =
 			type: "button",
 			className: cn(labelVariants(), "inline-flex items-center gap-1 font-mono me-auto"),
 			onClick: () => {
-				dataEngine.init(fieldName, getDefaultValue(schema));
+				dataEngine.init(fieldName, generateDefault(schema));
 				setShow((prev) => !prev);
 			},
 			children: [
@@ -253,6 +272,7 @@ function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth =
 			field: union[info.oneOf],
 			depth: depth + 1,
 			slotType: showSelect ? false : slotType,
+			collapsible,
 			toolbar: /* @__PURE__ */ jsxs(Fragment$1, { children: [showSelect && /* @__PURE__ */ jsx("select", {
 				className: "text-xs font-mono",
 				value: info.oneOf,
@@ -262,7 +282,7 @@ function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth =
 				children: union.map((item, i) => /* @__PURE__ */ jsx("option", {
 					value: i,
 					className: "bg-fd-popover text-fd-popover-foreground",
-					children: schemaToString(item, void 0, FormatFlags.UseAlias)
+					children: schemaToString(item, FormatFlags.UseAlias)
 				}, i))
 			}), toolbar] })
 		});
@@ -278,6 +298,7 @@ function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth =
 				...field,
 				type: info.selectedType
 			},
+			collapsible,
 			depth: depth + 1,
 			slotType: showSelect ? false : slotType,
 			toolbar: /* @__PURE__ */ jsxs(Fragment$1, { children: [showSelect && /* @__PURE__ */ jsx("select", {
@@ -298,6 +319,7 @@ function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth =
 		const schema = info.intersection?.merged ?? field;
 		return /* @__PURE__ */ jsxs("fieldset", {
 			...props,
+			"data-collapsible": collapsible,
 			className: cn("flex flex-col gap-1.5 col-span-full @container", props.className),
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: fieldLabelVariants(),
@@ -316,6 +338,7 @@ function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth =
 	}
 	if (field.type === "array") return /* @__PURE__ */ jsxs("fieldset", {
 		...props,
+		"data-collapsible": collapsible,
 		className: cn("flex flex-col gap-1.5 col-span-full", props.className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: fieldLabelVariants(),
@@ -352,7 +375,8 @@ function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth =
 }
 function ArrayInput({ fieldName, items: itemSchema, ...props }) {
 	const name = fieldName.at(-1) ?? "";
-	const { items, insertItem, removeItem } = useArray(fieldName, { defaultValue: [] });
+	const { generateDefault } = useSchemaUtils();
+	const { items, insertItem, removeItem } = useArray(fieldName);
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		className: cn("flex flex-col gap-2", props.className),
@@ -387,7 +411,7 @@ function ArrayInput({ fieldName, items: itemSchema, ...props }) {
 				size: "sm"
 			})),
 			onClick: () => {
-				insertItem(getDefaultValue(itemSchema));
+				insertItem(generateDefault(itemSchema));
 			},
 			children: [/* @__PURE__ */ jsx(Plus, { className: "size-4" }), "New Item"]
 		})]

package/dist/playground/index.d.ts

@@ -21,6 +21,6 @@ declare function APIPlayground({
   path,
   method,
   ctx
-}: APIPlaygroundProps): Promise<string | number | bigint | boolean | Iterable<react.ReactNode> | react_jsx_runtime0.JSX.Element | null | undefined>;
+}: APIPlaygroundProps): Promise<string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<react.ReactNode> | null | undefined>;
 //#endregion
 export { APIPlayground, APIPlaygroundProps, ParameterField, SecurityEntry };

package/dist/playground/index.js

@@ -40,7 +40,7 @@ function writeReferences(schema, ctx, stack = /* @__PURE__ */ new WeakMap()) {
 		const out = stack.get(schema);
 		const id = ctx.nextId();
 		ctx.references[id] = out;
-		return { $ref: id };
+		return { $ref: `#/${id}` };
 	}
 	const output = { ...schema };
 	stack.set(schema, output);

package/dist/playground/schema.d.ts

@@ -1,4 +1,5 @@
 import "../utils/schema.js";
+import "../utils/schema-to-string.js";
 import { ReactNode } from "react";
 import "react/jsx-runtime";
 import { Ajv2020 } from "ajv/dist/2020";

package/dist/playground/schema.js

@@ -1,10 +1,11 @@
-import { getDefaultValue } from "./get-default-values.js";
 import { mergeAllOf } from "../utils/merge-schema.js";
+import { schemaToString } from "../utils/schema-to-string.js";
 import { createContext, use, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Ajv2020 } from "ajv/dist/2020";
-import { useDataEngine, useFieldValue } from "@fumari/stf";
+import { useDataEngine, useFieldValue, useNamespace } from "@fumari/stf";
 import { stringifyFieldKey } from "@fumari/stf/lib/utils";
+import { sample } from "openapi-sampler";
 
 //#region src/playground/schema.tsx
 const SchemaContext = createContext(void 0);
@@ -51,33 +52,37 @@ function useSchemaScope() {
 * @param schema - The JSON Schema to generate initial values.
 * @param depth - The depth to avoid duplicated field name with same schema (e.g. nested `oneOf`).
 */
-function useFieldInfo(fieldName, schema) {
+function useFieldInfo(fieldName, schema, depth = 0) {
 	const { ajv } = use(SchemaContext);
 	const engine = useDataEngine();
-	const [info, setInfo] = useFieldValue([], { stf: engine.namespace(`field-info:${stringifyFieldKey(fieldName)}`, () => {
-		const value = engine.get(fieldName);
-		const out = { oneOf: -1 };
-		const union = getUnion(schema);
-		if (union) {
-			const [members, field] = union;
-			out.oneOf = members.findIndex((item) => ajv.validate(item, value));
-			if (out.oneOf === -1) out.oneOf = 0;
-			out.unionField = field;
+	const { generateDefault } = useSchemaUtils();
+	const [info, setInfo] = useFieldValue([], { stf: useNamespace({
+		namespace: `field-info:${depth}:${stringifyFieldKey(fieldName)}`,
+		initial() {
+			const value = engine.get(fieldName);
+			const out = { oneOf: -1 };
+			const union = getUnion(schema);
+			if (union) {
+				const [members, field] = union;
+				out.oneOf = members.findIndex((item) => ajv.validate(item, value));
+				if (out.oneOf === -1) out.oneOf = 0;
+				out.unionField = field;
+			}
+			if (Array.isArray(schema.type)) {
+				const types = schema.type;
+				out.selectedType = types.find((type) => {
+					return ajv.validate({
+						...schema,
+						type
+					}, value);
+				}) ?? types[0];
+			}
+			if (schema.allOf) {
+				const merged = mergeAllOf(schema);
+				if (typeof merged !== "boolean") out.intersection = { merged };
+			}
+			return out;
 		}
-		if (Array.isArray(schema.type)) {
-			const types = schema.type;
-			out.selectedType = types.find((type) => {
-				schema.type = type;
-				const match = ajv.validate(schema, value);
-				schema.type = types;
-				return match;
-			}) ?? types.at(0);
-		}
-		if (schema.allOf) {
-			const merged = mergeAllOf(schema);
-			if (typeof merged !== "boolean") out.intersection = { merged };
-		}
-		return out;
 	}) });
 	return {
 		info,
@@ -94,20 +99,37 @@ function useFieldInfo(fieldName, schema) {
 				...schema,
 				type: updated.selectedType
 			};
-			engine.update(fieldName, getDefaultValue(valueSchema));
+			engine.update(fieldName, generateDefault(valueSchema));
 		}
 	};
 }
-/**
-* Resolve `$ref` in the schema, **not recursive**.
-*/
-function useResolvedSchema(schema) {
+function useSchemaUtils() {
 	const { references } = use(SchemaContext);
-	return useMemo(() => {
+	function resolve(schema) {
 		if (typeof schema === "boolean") return anyFields;
-		if (schema.$ref) return fallbackAny(references[schema.$ref]);
+		let ref = schema.$ref;
+		if (ref) {
+			if (ref.startsWith("#/")) ref = ref.slice(2);
+			if (ref in references) return fallbackAny(references[ref]);
+		}
 		return schema;
-	}, [references, schema]);
+	}
+	return {
+		generateDefault(schema) {
+			return sample(schema, {
+				skipNonRequired: true,
+				skipReadOnly: true,
+				quiet: true
+			}, references);
+		},
+		resolve,
+		schemaToString(value, flags) {
+			return schemaToString(value, (s) => ({
+				dereferenced: resolve(s),
+				raw: s
+			}), flags);
+		}
+	};
 }
 function fallbackAny(schema) {
 	return typeof schema === "boolean" ? anyFields : schema;
@@ -118,4 +140,4 @@ function getUnion(schema) {
 }
 
 //#endregion
-export { SchemaProvider, anyFields, useFieldInfo, useResolvedSchema, useSchemaScope };
+export { SchemaProvider, anyFields, useFieldInfo, useSchemaScope, useSchemaUtils };

package/dist/ui/components/select.js

@@ -10,7 +10,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 	ref,
-	className: cn("flex items-center w-full rounded-md border p-2 gap-2 text-start text-sm text-fd-secondary-foreground bg-fd-secondary hover:bg-fd-accent focus:outline-none focus:ring focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50", className),
+	className: cn("flex items-center w-full rounded-md border p-2 gap-2 text-start text-sm text-fd-secondary-foreground bg-fd-secondary hover:bg-fd-accent focus:outline-none focus:ring focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-fd-muted-foreground", className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,

package/dist/ui/full.js

@@ -10,8 +10,8 @@ function createAPIPage(server, options = {}) {
 		...options,
 		shiki: configDefault,
 		generateTypeScriptSchema(method, statusCode, contentType, ctx) {
-			const schema = method.responses?.[statusCode]?.content?.[contentType];
-			if (!schema) return;
+			const schema = method.responses?.[statusCode]?.content?.[contentType].schema;
+			if (!schema || typeof schema !== "object") return;
 			return getTypescriptSchema(schema, ctx);
 		}
 	});

package/dist/ui/operation/request-tabs.js

@@ -4,8 +4,8 @@ import { MethodLabel } from "../components/method-label.js";
 import { encodeRequestData } from "../../requests/media/encode.js";
 import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "../components/accordion.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "fumadocs-ui/components/tabs";
 import { sample } from "openapi-sampler";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "fumadocs-ui/components/tabs";
 
 //#region src/ui/operation/request-tabs.tsx
 function getExampleRequests(path, operation, ctx) {

package/dist/ui/operation/response-tabs.js

@@ -1,8 +1,8 @@
 import { getPreferredType } from "../../utils/schema.js";
 import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "../components/accordion.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import { sample } from "openapi-sampler";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 //#region src/ui/operation/response-tabs.tsx
 function ResponseTabs({ operation, ctx }) {

package/dist/ui/schema/client.js

@@ -2,9 +2,9 @@
 
 import { cn } from "../../utils/cn.js";
 import { Badge } from "../components/method-label.js";
-import { Fragment, createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, Suspense, createContext, use, useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, FilterIcon } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "fumadocs-ui/components/ui/collapsible";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
@@ -58,11 +58,7 @@ function SchemaUIProperty({ name, $type, variant = "default", overrides }) {
 			$ref: $type
 		});
 	} else if (schema.type === "object" && schema.props.length > 0) {
-		if (variant === "expand") return schema.props.map((prop) => /* @__PURE__ */ jsx(SchemaUIProperty, {
-			name: prop.name,
-			$type: prop.$type,
-			overrides: { required: prop.required }
-		}, prop.name));
+		if (variant === "expand") return /* @__PURE__ */ jsx(SearchProps, { props: schema.props });
 		type = renderRef({
 			pathName: name,
 			$ref: $type
@@ -103,6 +99,30 @@ function SchemaUIProperty({ name, $type, variant = "default", overrides }) {
 		children: child
 	});
 }
+function SearchProps({ props }) {
+	const [search, setSearch] = useState("");
+	const deferredValue = useDeferredValue(search);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center border my-2 rounded-md bg-fd-secondary text-fd-secondary-foreground transition-colors shadow-sm focus-within:ring-2 focus-within:ring-fd-ring",
+		children: [/* @__PURE__ */ jsx(FilterIcon, { className: "text-fd-muted-foreground ms-2 size-3.5" }), /* @__PURE__ */ jsx("input", {
+			value: search,
+			onChange: (e) => setSearch(e.target.value),
+			placeholder: "Filter Properties",
+			className: "text-sm ps-2 py-2 flex-1 outline-none placeholder:text-fd-muted-foreground"
+		})]
+	}), /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(SearchPropsContent, {
+		search: deferredValue,
+		props
+	}) })] });
+}
+function SearchPropsContent({ search, props }) {
+	search = search.trim().toLowerCase();
+	return (search.length > 0 ? props.filter((prop) => prop.name.toLowerCase().includes(search)) : props).map((prop) => /* @__PURE__ */ jsx(SchemaUIProperty, {
+		name: prop.name,
+		$type: prop.$type,
+		overrides: { required: prop.required }
+	}, prop.name));
+}
 function InfoTag({ tag }) {
 	const ref = useRef(null);
 	const [isTruncated, setTruncated] = useState(false);
@@ -138,12 +158,15 @@ function InfoTag({ tag }) {
 function SchemaUIPopover({ initialPath }) {
 	const [path, setPath] = useState(initialPath);
 	const ref = useRef(null);
-	const last = path.findLast((item) => item.$ref !== void 0);
-	useEffect(() => {
+	useLayoutEffect(() => {
+		const last = path[0];
 		const element = ref.current;
-		if (!element || !element.parentElement) return;
-		element.parentElement.scrollTop = 0;
-	}, [last?.$ref]);
+		if (!element || !last || !element.parentElement) return;
+		element.parentElement.scrollTop = last?.scrollTop ?? 0;
+		return () => {
+			last.scrollTop = element.parentElement.scrollTop;
+		};
+	}, [path]);
 	const context = useMemo(() => ({ renderTrigger: ({ $ref, pathName, children }) => /* @__PURE__ */ jsx("button", {
 		className: cn(typeVariants({ variant: "trigger" })),
 		onClick: () => setPath((path) => [...path, {
@@ -152,9 +175,9 @@ function SchemaUIPopover({ initialPath }) {
 		}]),
 		children
 	}) }), []);
-	if (!last) return;
+	const currentRef = path.findLast((item) => item.$ref !== void 0);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		className: "sticky top-0 flex flex-row flex-wrap items-center text-sm font-medium font-mono bg-fd-muted p-2",
+		className: "sticky top-0 flex flex-row flex-wrap items-center text-sm font-medium font-mono bg-fd-popover px-2 py-1.5 border-b",
 		children: path.map((item, i) => {
 			const className = cn(path.some((other, j) => j < i && other.$ref === item.$ref) && "text-orange-400", item.$ref && "hover:underline hover:text-fd-accent-foreground");
 			const node = item.$ref ? /* @__PURE__ */ jsx("button", {
@@ -169,12 +192,12 @@ function SchemaUIPopover({ initialPath }) {
 		})
 	}), /* @__PURE__ */ jsx(PopoverContext, {
 		value: context,
-		children: /* @__PURE__ */ jsx("div", {
+		children: currentRef?.$ref && /* @__PURE__ */ jsx("div", {
 			ref,
 			className: "px-2",
 			children: /* @__PURE__ */ jsx(SchemaUIProperty, {
 				name: "",
-				$type: last.$ref,
+				$type: currentRef.$ref,
 				variant: "expand"
 			})
 		})
@@ -217,7 +240,7 @@ function useRenderRef() {
 function RootPopoverTrigger({ $ref, pathName, children }) {
 	const ref = useCallback((element) => {
 		if (!element || element.style.getPropertyValue("--initial-height")) return;
-		element.style.setProperty("--initial-height", `${element.clientHeight}px`);
+		element.style.setProperty("--initial-height", `${element.clientHeight + 2}px`);
 	}, []);
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		className: cn(typeVariants({ variant: "trigger" })),

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

@@ -16,15 +16,16 @@ interface InfoTag {
   label: string;
   value: string;
 }
+interface SchemaDataObjectProperty {
+  name: string;
+  $type: string;
+  required: boolean;
+}
 type SchemaData = FieldBase & ({
   type: 'primitive';
 } | {
   type: 'object';
-  props: {
-    name: string;
-    $type: string;
-    required: boolean;
-  }[];
+  props: SchemaDataObjectProperty[];
 } | {
   type: 'array';
   item: {

package/dist/ui/schema/index.js

@@ -198,7 +198,7 @@ function generateSchemaUI({ root, readOnly, writeOnly }, ctx) {
 					required: schema.required?.includes(key) ?? false
 				});
 			}
-			if (additionalProperties !== void 0 && isVisible(additionalProperties)) {
+			if (additionalProperties && isVisible(additionalProperties)) {
 				const $type = getSchemaId(additionalProperties);
 				scanRefs($type, additionalProperties);
 				out.props.push({

package/dist/utils/schema-to-string.d.ts

@@ -0,0 +1,2 @@
+import "./schema.js";
+import "./process-document.js";

package/dist/utils/schema-to-string.js

@@ -4,7 +4,14 @@ let FormatFlags = /* @__PURE__ */ function(FormatFlags) {
 	FormatFlags[FormatFlags["UseAlias"] = 1] = "UseAlias";
 	return FormatFlags;
 }({});
-function schemaToString(value, ctx, flags = FormatFlags.None) {
+function schemaToString(value, _resolver, flags = FormatFlags.None) {
+	const resolver = typeof _resolver === "function" ? _resolver : (schema) => {
+		const ref = _resolver?.getRawRef(schema);
+		return {
+			dereferenced: schema,
+			raw: ref ? { $ref: ref } : void 0
+		};
+	};
 	function union(union, sep, flags) {
 		const members = /* @__PURE__ */ new Set();
 		let nullable = false;
@@ -17,11 +24,13 @@ function schemaToString(value, ctx, flags = FormatFlags.None) {
 		return nullable ? `${result} | null` : result;
 	}
 	function run(schema, flags) {
+		const resolved = resolver(schema);
+		schema = resolved.dereferenced;
 		if (schema === true) return "any";
 		else if (schema === false) return "never";
 		if ((flags & FormatFlags.UseAlias) === FormatFlags.UseAlias) {
 			if (schema.title) return schema.title;
-			const ref = ctx?.getRawRef(schema)?.split("/");
+			const ref = resolved.raw?.$ref?.split("/");
 			if (ref && ref.length > 0) return ref[ref.length - 1];
 		}
 		if (Array.isArray(schema.type)) return union(schema.type.map((type) => ({

package/dist/utils/schema.d.ts

@@ -6,7 +6,9 @@ type NoReference<T> = T extends (infer I)[] ? NoReference<I>[] : T extends Refer
 type NoReferenceJSONSchema<T> = T extends (infer I)[] ? NoReference<I>[] : T extends {
   $ref?: string;
 } ? Omit<T, '$ref'> : T;
-type ParsedSchema = JSONSchema;
+type ParsedSchema = JSONSchema & {
+  'x-playground-lazy'?: boolean;
+};
 type ResolvedSchema = NoReferenceJSONSchema<ParsedSchema>;
 //#endregion
 export { NoReference, ParsedSchema, ResolvedSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "10.3.10",
+  "version": "10.3.12",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "Docs",
@@ -77,7 +77,7 @@
     "remark-rehype": "^11.1.2",
     "tailwind-merge": "^3.4.1",
     "xml-js": "^1.6.11",
-    "@fumari/stf": "1.0.0"
+    "@fumari/stf": "1.0.2"
   },
   "devDependencies": {
     "@scalar/api-client-react": "^1.3.96",
@@ -90,8 +90,8 @@
     "tsdown": "^0.20.3",
     "@fumadocs/tailwind": "0.0.2",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.6.5",
-    "fumadocs-ui": "16.6.5",
+    "fumadocs-core": "16.6.6",
+    "fumadocs-ui": "16.6.6",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {

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

@@ -1,23 +0,0 @@
-//#region src/playground/get-default-values.ts
-function getDefaultValue(schema) {
-	if (typeof schema === "boolean") return null;
-	const type = schema.type;
-	if (Array.isArray(type)) return getDefaultValue({
-		...schema,
-		type: type[0]
-	});
-	if (type === "object" && typeof schema === "object") return Object.fromEntries(Object.entries(schema.properties ?? {}).map(([key, prop]) => {
-		return [key, getDefaultValue(prop)];
-	}));
-	if (type === "array") return [];
-	if (type === "null") return null;
-	if (type === "string") {
-		if (typeof schema === "object" && schema.format === "binary") return void 0;
-		return "";
-	}
-	if (type === "number" || type === "integer") return 0;
-	if (type === "boolean") return false;
-}
-
-//#endregion
-export { getDefaultValue };