fumadocs-openapi 10.2.4 → 10.2.5

package/dist/playground/components/inputs.js

@@ -1,16 +1,17 @@
 'use client';
 
 import { cn } from "../../utils/cn.js";
+import { getDefaultValue } from "../get-default-values.js";
+import { anyFields, useFieldInfo, useResolvedSchema, useSchemaScope } from "../schema.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/components/select.js";
 import { Input, labelVariants } from "../../ui/components/input.js";
-import { getDefaultValue } from "../get-default-values.js";
 import { FormatFlags, schemaToString } from "../../utils/schema-to-string.js";
-import { anyFields, useFieldInfo, useResolvedSchema, useSchemaScope } from "../schema.js";
 import { useState } from "react";
-import { useController, useFieldArray, useFormContext } from "react-hook-form";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, Plus, Trash2, X } from "lucide-react";
+import { ChevronRight, Plus, Trash2, X } from "lucide-react";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
+import { useArray, useDataEngine, useFieldValue, useObject } from "@fumari/stf";
+import { stringifyFieldKey } from "@fumari/stf/lib/utils";
 
 //#region src/playground/components/inputs.tsx
 function FieldLabel(props) {
@@ -39,39 +40,79 @@ function FieldLabelType(props) {
 }
 function ObjectInput({ field: _field, fieldName, ...props }) {
 	const field = useResolvedSchema(_field);
+	const [nextName, setNextName] = useState("");
+	const { properties, onAppend, onDelete } = useObject(fieldName, {
+		defaultValue: () => getDefaultValue(field),
+		properties: field.properties ?? {},
+		fallback: field.additionalProperties,
+		patternProperties: field.patternProperties
+	});
+	const isDynamic = field.patternProperties ?? field.additionalProperties;
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		className: cn("grid grid-cols-1 gap-4 @md:grid-cols-2", props.className),
-		children: [Object.entries(field.properties ?? {}).map(([key, child]) => /* @__PURE__ */ jsx(FieldSet, {
-			name: key,
-			field: child,
-			fieldName: `${fieldName}.${key}`,
-			isRequired: field.required?.includes(key)
-		}, key)), (field.additionalProperties || field.patternProperties) && /* @__PURE__ */ jsx(DynamicProperties, {
-			fieldName,
-			filterKey: (v) => !field.properties || !Object.keys(field.properties).includes(v),
-			getType: (key) => {
-				for (const pattern in field.patternProperties) if (key.match(RegExp(pattern))) return field.patternProperties[pattern];
-				if (field.additionalProperties) return field.additionalProperties;
-				return anyFields;
-			}
+		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();
+					}
+				}
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn(buttonVariants({
+					color: "secondary",
+					size: "sm"
+				}), "px-4"),
+				onClick: () => {
+					onAppend(nextName);
+					setNextName("");
+				},
+				children: "New"
+			})]
 		})]
 	});
 }
 function JsonInput({ fieldName }) {
-	const controller = useController({ name: fieldName });
+	const engine = useDataEngine();
 	const [error, setError] = useState(null);
-	const [value, setValue] = useState(() => JSON.stringify(controller.field.value, null, 2));
+	const [value, setValue] = useState(() => JSON.stringify(engine.init(fieldName, {}), null, 2));
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col bg-fd-secondary text-fd-secondary-foreground overflow-hidden border rounded-lg",
 		children: [/* @__PURE__ */ jsx("textarea", {
-			...controller.field,
 			value,
 			className: "p-2 h-[240px] text-sm font-mono resize-none focus-visible:outline-none",
 			onChange: (v) => {
 				setValue(v.target.value);
 				try {
-					controller.field.onChange(JSON.parse(v.target.value));
+					engine.update(fieldName, JSON.parse(v.target.value));
 					setError(null);
 				} catch (e) {
 					if (e instanceof Error) setError(e.message);
@@ -83,112 +124,73 @@ function JsonInput({ fieldName }) {
 		})]
 	});
 }
-function DynamicProperties({ fieldName, filterKey = () => true, getType = () => anyFields }) {
-	const { control, setValue, getValues } = useFormContext();
-	const [nextName, setNextName] = useState("");
-	const [properties, setProperties] = useState(() => {
-		const value = getValues(fieldName);
-		if (value) return Object.keys(value).filter(filterKey);
-		return [];
-	});
-	const onAppend = () => {
-		const name = nextName.trim();
-		if (name.length === 0) return;
-		setProperties((p) => {
-			if (p.includes(name) || !filterKey(name)) return p;
-			const type = getType(name);
-			setValue(`${fieldName}.${name}`, getDefaultValue(type));
-			setNextName("");
-			return [...p, name];
-		});
-	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [properties.map((item) => {
-		return /* @__PURE__ */ jsx(FieldSet, {
-			name: item,
-			field: getType(item),
-			fieldName: `${fieldName}.${item}`,
-			toolbar: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-label": "Remove Item",
-				className: cn(buttonVariants({
-					color: "outline",
-					size: "icon-xs"
-				})),
-				onClick: () => {
-					setProperties((p) => p.filter((prop) => prop !== item));
-					control.unregister(`${fieldName}.${item}`);
-				},
-				children: /* @__PURE__ */ jsx(Trash2, {})
-			})
-		}, item);
-	}), /* @__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") {
-					onAppend();
-					e.preventDefault();
-				}
-			}
-		}), /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: cn(buttonVariants({
-				color: "secondary",
-				size: "sm"
-			}), "px-4"),
-			onClick: onAppend,
-			children: "New"
-		})]
-	})] });
-}
 function FieldInput({ field, fieldName, isRequired, ...props }) {
-	const form = useFormContext();
-	const { field: { value, onChange, ...restField }, fieldState } = useController({
-		control: form.control,
-		name: fieldName
-	});
+	const engine = useDataEngine();
+	const [value, setValue] = useFieldValue(fieldName);
+	const id = stringifyFieldKey(fieldName);
 	if (field.type === "null") return;
-	if (field.type === "string" && field.format === "binary") return /* @__PURE__ */ jsxs("div", {
-		...props,
-		children: [/* @__PURE__ */ jsx("label", {
-			htmlFor: fieldName,
-			className: cn(buttonVariants({
-				color: "secondary",
-				className: "w-full h-9 gap-2 truncate"
-			})),
-			children: value instanceof File ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-				className: "text-fd-muted-foreground text-xs",
-				children: "Selected"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "truncate w-0 flex-1 text-end",
-				children: value.name
-			})] }) : /* @__PURE__ */ jsx("span", {
+	function renderUnset(children) {
+		return /* @__PURE__ */ jsxs("div", {
+			...props,
+			className: cn("flex flex-row gap-2", props.className),
+			children: [children, value !== void 0 && !isRequired && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => engine.delete(fieldName),
 				className: "text-fd-muted-foreground",
-				children: "Upload"
-			})
-		}), /* @__PURE__ */ jsx("input", {
-			id: fieldName,
-			type: "file",
-			multiple: false,
-			onChange: (e) => {
-				if (!e.target.files) return;
-				onChange(e.target.files.item(0));
-			},
-			hidden: true,
-			...restField
-		})]
-	});
+				children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+			})]
+		});
+	}
+	if (field.type === "string" && field.format === "binary") return renderUnset(/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("label", {
+		htmlFor: id,
+		className: cn(buttonVariants({
+			color: "secondary",
+			className: "w-full h-9 gap-2 truncate"
+		})),
+		children: value instanceof File ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-fd-muted-foreground text-xs",
+			children: "Selected"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate w-0 flex-1 text-end",
+			children: value.name
+		})] }) : /* @__PURE__ */ jsx("span", {
+			className: "text-fd-muted-foreground",
+			children: "Upload"
+		})
+	}), /* @__PURE__ */ jsx("input", {
+		id,
+		type: "file",
+		multiple: false,
+		onChange: (e) => {
+			if (!e.target.files || e.target.files.length === 0) return;
+			setValue(e.target.files.item(0));
+		},
+		hidden: true
+	})] }));
+	if (field.enum && field.enum.length > 0) {
+		const idx = field.enum.indexOf(value);
+		return /* @__PURE__ */ jsxs(Select, {
+			value: String(idx),
+			onValueChange: (v) => setValue(field.enum[Number(v)]),
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				id,
+				...props,
+				children: /* @__PURE__ */ jsx(SelectValue, {})
+			}), /* @__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)
+			}, i)), !isRequired && /* @__PURE__ */ jsx(SelectItem, {
+				value: "-1",
+				children: "Unset"
+			})] })]
+		});
+	}
 	if (field.type === "boolean") return /* @__PURE__ */ jsxs(Select, {
 		value: String(value),
-		onValueChange: (value$1) => onChange(value$1 === "undefined" ? void 0 : value$1 === "true"),
-		disabled: restField.disabled,
+		onValueChange: (value$1) => setValue(value$1 === "undefined" ? void 0 : value$1 === "true"),
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
-			id: fieldName,
-			className: props.className,
-			...restField,
+			id,
+			...props,
 			children: /* @__PURE__ */ jsx(SelectValue, {})
 		}), /* @__PURE__ */ jsxs(SelectContent, { children: [
 			/* @__PURE__ */ jsx(SelectItem, {
@@ -206,37 +208,29 @@ function FieldInput({ field, fieldName, isRequired, ...props }) {
 		] })]
 	});
 	const isNumber = field.type === "integer" || field.type === "number";
-	return /* @__PURE__ */ jsxs("div", {
-		...props,
-		className: cn("flex flex-row gap-2", props.className),
-		children: [/* @__PURE__ */ jsx(Input, {
-			id: fieldName,
-			placeholder: "Enter value",
-			type: isNumber ? "number" : "text",
-			step: field.type === "integer" ? 1 : void 0,
-			value: value ?? "",
-			onChange: (e) => {
-				if (isNumber && !Number.isNaN(e.target.valueAsNumber)) onChange(e.target.valueAsNumber);
-				else if (!isNumber) onChange(e.target.value);
-			},
-			...restField
-		}), fieldState.isDirty && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: () => form.resetField(fieldName),
-			className: "text-fd-muted-foreground",
-			children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-		})]
-	});
+	return renderUnset(/* @__PURE__ */ jsx(Input, {
+		id,
+		placeholder: "Enter value",
+		type: isNumber ? "number" : "text",
+		step: field.type === "integer" ? 1 : void 0,
+		value: String(value ?? ""),
+		onChange: (e) => {
+			if (isNumber) setValue(Number.isNaN(e.target.valueAsNumber) ? void 0 : e.target.valueAsNumber);
+			else if (!isNumber) setValue(e.target.value);
+		}
+	}));
 }
 function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth = 0, slotType, collapsible = true, ...props }) {
 	const { readOnly, writeOnly } = useSchemaScope();
 	const field = useResolvedSchema(_field);
 	const [show, setShow] = useState(!collapsible);
-	const { info, updateInfo } = useFieldInfo(fieldName, field, depth);
+	const { info, updateInfo } = useFieldInfo(fieldName, field);
+	const id = stringifyFieldKey(fieldName);
+	const dataEngine = useDataEngine();
 	if (_field === false) return;
 	if (field.readOnly && !readOnly) return;
 	if (field.writeOnly && !writeOnly) return;
-	if (info.unionField) {
+	if (info.unionField && field[info.unionField]) {
 		const union = field[info.unionField];
 		const showSelect = union.length > 1;
 		return /* @__PURE__ */ jsx(FieldSet, {
@@ -288,44 +282,61 @@ function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth =
 			}), toolbar] })
 		});
 	}
-	const showBn = collapsible && /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick: () => setShow((prev) => !prev),
-		className: cn(buttonVariants({
-			size: "icon-xs",
-			color: "ghost",
-			className: "text-fd-muted-foreground -ms-1"
-		})),
-		children: /* @__PURE__ */ jsx(ChevronDown, { className: cn(show && "rotate-180") })
-	});
-	if (field.type === "object" || info.intersection) return /* @__PURE__ */ jsxs("fieldset", {
-		...props,
-		className: cn("flex flex-col gap-1.5 col-span-full @container", props.className),
-		children: [/* @__PURE__ */ jsxs(FieldLabel, {
-			htmlFor: fieldName,
-			children: [
-				showBn,
-				/* @__PURE__ */ jsx(FieldLabelName, {
-					required: isRequired,
-					children: name
-				}),
-				slotType ?? /* @__PURE__ */ jsx(FieldLabelType, { children: schemaToString(field) }),
-				toolbar
-			]
-		}), show && /* @__PURE__ */ jsx(ObjectInput, {
-			field: info.intersection?.merged ?? field,
-			fieldName,
+	if (field.type === "object" || info.intersection) {
+		const schema = info.intersection?.merged ?? field;
+		return /* @__PURE__ */ jsxs("fieldset", {
 			...props,
-			className: cn("rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm", props.className)
-		})]
-	});
+			className: cn("flex flex-col gap-1.5 col-span-full @container", props.className),
+			children: [/* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: id,
+				children: [
+					collapsible && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							dataEngine.init(fieldName, getDefaultValue(schema));
+							setShow((prev) => !prev);
+						},
+						className: cn(buttonVariants({
+							size: "icon-xs",
+							color: "ghost",
+							className: "text-fd-muted-foreground -ms-1"
+						})),
+						children: /* @__PURE__ */ jsx(ChevronRight, { className: cn(show && "rotate-90") })
+					}),
+					/* @__PURE__ */ jsx(FieldLabelName, {
+						required: isRequired,
+						children: name
+					}),
+					slotType ?? /* @__PURE__ */ jsx(FieldLabelType, { children: schemaToString(field) }),
+					toolbar
+				]
+			}), show && /* @__PURE__ */ jsx(ObjectInput, {
+				field: schema,
+				fieldName,
+				...props,
+				className: cn("rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm", props.className)
+			})]
+		});
+	}
 	if (field.type === "array") return /* @__PURE__ */ jsxs("fieldset", {
 		...props,
 		className: cn("flex flex-col gap-1.5 col-span-full", props.className),
 		children: [/* @__PURE__ */ jsxs(FieldLabel, {
-			htmlFor: fieldName,
+			htmlFor: id,
 			children: [
-				showBn,
+				collapsible && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => {
+						dataEngine.init(fieldName, getDefaultValue(field));
+						setShow((prev) => !prev);
+					},
+					className: cn(buttonVariants({
+						size: "icon-xs",
+						color: "ghost",
+						className: "text-fd-muted-foreground -ms-1"
+					})),
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: cn(show && "rotate-90") })
+				}),
 				/* @__PURE__ */ jsx(FieldLabelName, {
 					required: isRequired,
 					children: name
@@ -344,7 +355,7 @@ function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth =
 		...props,
 		className: cn("flex flex-col gap-1.5", props.className),
 		children: [/* @__PURE__ */ jsxs(FieldLabel, {
-			htmlFor: fieldName,
+			htmlFor: id,
 			children: [
 				/* @__PURE__ */ jsx(FieldLabelName, {
 					required: isRequired,
@@ -360,25 +371,25 @@ function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth =
 		})]
 	});
 }
-function ArrayInput({ fieldName, items, ...props }) {
-	const name = fieldName.split(".").at(-1) ?? "";
-	const { fields, append, remove } = useFieldArray({ name: fieldName });
+function ArrayInput({ fieldName, items: itemSchema, ...props }) {
+	const name = fieldName.at(-1) ?? "";
+	const { items, insertItem, removeItem } = useArray(fieldName, { defaultValue: [] });
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		className: cn("flex flex-col gap-2", props.className),
-		children: [fields.map((item, index) => /* @__PURE__ */ jsx(FieldSet, {
+		children: [items.map((item) => /* @__PURE__ */ jsx(FieldSet, {
 			name: /* @__PURE__ */ jsxs("span", {
 				className: "text-fd-muted-foreground",
 				children: [
 					name,
 					"[",
-					index,
+					item.index,
 					"]"
 				]
 			}),
-			field: items,
+			field: itemSchema,
 			isRequired: true,
-			fieldName: `${fieldName}.${index}`,
+			fieldName: item.field,
 			toolbar: /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": "Remove Item",
@@ -386,10 +397,10 @@ function ArrayInput({ fieldName, items, ...props }) {
 					color: "outline",
 					size: "icon-xs"
 				})),
-				onClick: () => remove(index),
+				onClick: () => removeItem(item.index),
 				children: /* @__PURE__ */ jsx(Trash2, {})
 			})
-		}, item.id)), /* @__PURE__ */ jsxs("button", {
+		}, item.index)), /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: cn(buttonVariants({
 				color: "secondary",
@@ -397,7 +408,7 @@ function ArrayInput({ fieldName, items, ...props }) {
 				size: "sm"
 			})),
 			onClick: () => {
-				append(getDefaultValue(items));
+				insertItem(getDefaultValue(itemSchema));
 			},
 			children: [/* @__PURE__ */ jsx(Plus, { className: "size-4" }), "New Item"]
 		})]

package/dist/playground/components/inputs.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputs.js","names":["value"],"sources":["../../../src/playground/components/inputs.tsx"],"sourcesContent":["'use client';\nimport { type ComponentProps, type HTMLAttributes, type ReactNode, useState } from 'react';\nimport { ChevronDown, Plus, Trash2, X } from 'lucide-react';\nimport { useController, useFieldArray, useFormContext } from 'react-hook-form';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/ui/components/select';\nimport { Input, labelVariants } from '@/ui/components/input';\nimport { getDefaultValue } from '../get-default-values';\nimport { cn } from '@/utils/cn';\nimport { buttonVariants } from 'fumadocs-ui/components/ui/button';\nimport { FormatFlags, schemaToString } from '@/utils/schema-to-string';\nimport { anyFields, useFieldInfo, useResolvedSchema, useSchemaScope } from '@/playground/schema';\nimport type { ParsedSchema } from '@/utils/schema';\n\nfunction FieldLabel(props: ComponentProps<'label'>) {\n  return (\n    <label {...props} className={cn('w-full inline-flex items-center gap-0.5', props.className)}>\n      {props.children}\n    </label>\n  );\n}\n\nfunction FieldLabelName({\n  required = false,\n  ...props\n}: ComponentProps<'span'> & { required?: boolean }) {\n  return (\n    <span {...props} className={cn(labelVariants(), 'font-mono me-auto', props.className)}>\n      {props.children}\n      {required && <span className=\"text-red-400/80 mx-1\">*</span>}\n    </span>\n  );\n}\n\nfunction FieldLabelType(props: ComponentProps<'code'>) {\n  return (\n    <code {...props} className={cn('text-xs text-fd-muted-foreground', props.className)}>\n      {props.children}\n    </code>\n  );\n}\n\nexport function ObjectInput({\n  field: _field,\n  fieldName,\n  ...props\n}: {\n  field: Exclude<ParsedSchema, boolean>;\n  fieldName: string;\n} & ComponentProps<'div'>) {\n  const field = useResolvedSchema(_field);\n\n  return (\n    <div {...props} className={cn('grid grid-cols-1 gap-4 @md:grid-cols-2', props.className)}>\n      {Object.entries(field.properties ?? {}).map(([key, child]) => (\n        <FieldSet\n          key={key}\n          name={key}\n          field={child}\n          fieldName={`${fieldName}.${key}`}\n          isRequired={field.required?.includes(key)}\n        />\n      ))}\n      {(field.additionalProperties || field.patternProperties) && (\n        <DynamicProperties\n          fieldName={fieldName}\n          filterKey={(v) => !field.properties || !Object.keys(field.properties).includes(v)}\n          getType={(key) => {\n            for (const pattern in field.patternProperties) {\n              if (key.match(RegExp(pattern))) {\n                return field.patternProperties[pattern];\n              }\n            }\n\n            if (field.additionalProperties) return field.additionalProperties;\n\n            return anyFields;\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport function JsonInput({ fieldName }: { fieldName: string }) {\n  const controller = useController({\n    name: fieldName,\n  });\n  const [error, setError] = useState<string | null>(null);\n  const [value, setValue] = useState(() => JSON.stringify(controller.field.value, null, 2));\n\n  return (\n    <div className=\"flex flex-col bg-fd-secondary text-fd-secondary-foreground overflow-hidden border rounded-lg\">\n      <textarea\n        {...controller.field}\n        value={value}\n        className=\"p-2 h-[240px] text-sm font-mono resize-none focus-visible:outline-none\"\n        onChange={(v) => {\n          setValue(v.target.value);\n          try {\n            controller.field.onChange(JSON.parse(v.target.value));\n            setError(null);\n          } catch (e) {\n            if (e instanceof Error) setError(e.message);\n          }\n        }}\n      />\n      <p className=\"p-2 text-xs font-mono border-t text-red-400 empty:hidden\">{error}</p>\n    </div>\n  );\n}\n\nfunction DynamicProperties({\n  fieldName,\n  filterKey = () => true,\n  getType = () => anyFields,\n}: {\n  fieldName: string;\n  filterKey?: (key: string) => boolean;\n  getType: (key: string) => ParsedSchema;\n}) {\n  const { control, setValue, getValues } = useFormContext();\n  const [nextName, setNextName] = useState('');\n  const [properties, setProperties] = useState<string[]>(() => {\n    const value = getValues(fieldName);\n    if (value) return Object.keys(value).filter(filterKey);\n\n    return [];\n  });\n\n  const onAppend = () => {\n    const name = nextName.trim();\n    if (name.length === 0) return;\n\n    setProperties((p) => {\n      if (p.includes(name) || !filterKey(name)) return p;\n      const type = getType(name);\n\n      setValue(`${fieldName}.${name}`, getDefaultValue(type));\n      setNextName('');\n      return [...p, name];\n    });\n  };\n\n  return (\n    <>\n      {properties.map((item) => {\n        const type = getType(item);\n\n        return (\n          <FieldSet\n            key={item}\n            name={item}\n            field={type}\n            fieldName={`${fieldName}.${item}`}\n            toolbar={\n              <button\n                type=\"button\"\n                aria-label=\"Remove Item\"\n                className={cn(\n                  buttonVariants({\n                    color: 'outline',\n                    size: 'icon-xs',\n                  }),\n                )}\n                onClick={() => {\n                  setProperties((p) => p.filter((prop) => prop !== item));\n                  control.unregister(`${fieldName}.${item}`);\n                }}\n              >\n                <Trash2 />\n              </button>\n            }\n          />\n        );\n      })}\n      <div className=\"flex gap-2 col-span-full\">\n        <Input\n          value={nextName}\n          placeholder=\"Enter Property Name\"\n          onChange={(e) => setNextName(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              onAppend();\n              e.preventDefault();\n            }\n          }}\n        />\n        <button\n          type=\"button\"\n          className={cn(buttonVariants({ color: 'secondary', size: 'sm' }), 'px-4')}\n          onClick={onAppend}\n        >\n          New\n        </button>\n      </div>\n    </>\n  );\n}\n\nexport function FieldInput({\n  field,\n  fieldName,\n  isRequired,\n  ...props\n}: HTMLAttributes<HTMLElement> & {\n  field: Exclude<ParsedSchema, boolean>;\n  isRequired?: boolean;\n  fieldName: string;\n}) {\n  const form = useFormContext();\n  const {\n    field: { value, onChange, ...restField },\n    fieldState,\n  } = useController({\n    control: form.control,\n    name: fieldName,\n  });\n\n  if (field.type === 'null') return;\n\n  if (field.type === 'string' && field.format === 'binary') {\n    return (\n      <div {...props}>\n        <label\n          htmlFor={fieldName}\n          className={cn(\n            buttonVariants({\n              color: 'secondary',\n              className: 'w-full h-9 gap-2 truncate',\n            }),\n          )}\n        >\n          {value instanceof File ? (\n            <>\n              <span className=\"text-fd-muted-foreground text-xs\">Selected</span>\n              <span className=\"truncate w-0 flex-1 text-end\">{value.name}</span>\n            </>\n          ) : (\n            <span className=\"text-fd-muted-foreground\">Upload</span>\n          )}\n        </label>\n        <input\n          id={fieldName}\n          type=\"file\"\n          multiple={false}\n          onChange={(e) => {\n            if (!e.target.files) return;\n            onChange(e.target.files.item(0));\n          }}\n          hidden\n          {...restField}\n        />\n      </div>\n    );\n  }\n\n  if (field.type === 'boolean') {\n    return (\n      <Select\n        value={String(value)}\n        onValueChange={(value) => onChange(value === 'undefined' ? undefined : value === 'true')}\n        disabled={restField.disabled}\n      >\n        <SelectTrigger id={fieldName} className={props.className} {...restField}>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"true\">True</SelectItem>\n          <SelectItem value=\"false\">False</SelectItem>\n          {!isRequired && <SelectItem value=\"undefined\">Unset</SelectItem>}\n        </SelectContent>\n      </Select>\n    );\n  }\n\n  const isNumber = field.type === 'integer' || field.type === 'number';\n\n  return (\n    <div {...props} className={cn('flex flex-row gap-2', props.className)}>\n      <Input\n        id={fieldName}\n        placeholder=\"Enter value\"\n        type={isNumber ? 'number' : 'text'}\n        step={field.type === 'integer' ? 1 : undefined}\n        value={value ?? ''}\n        onChange={(e) => {\n          if (isNumber && !Number.isNaN(e.target.valueAsNumber)) {\n            onChange(e.target.valueAsNumber);\n          } else if (!isNumber) {\n            onChange(e.target.value);\n          }\n        }}\n        {...restField}\n      />\n      {fieldState.isDirty && (\n        <button\n          type=\"button\"\n          // TODO: `react-hook-form` doesn't support setting a value to `undefined` (aka remove the value), if there's a default value defined.\n          // the default value is kept by `react-hook-form` internally, we cannot manipulate it.\n          // hence, we can only support resetting to the default value.\n          // perhaps when we migrate to Tanstack Form, we can reconsider this.\n          onClick={() => form.resetField(fieldName)}\n          className=\"text-fd-muted-foreground\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function FieldSet({\n  field: _field,\n  fieldName,\n  toolbar,\n  name,\n  isRequired,\n  depth = 0,\n  slotType,\n  collapsible = true,\n  ...props\n}: HTMLAttributes<HTMLElement> & {\n  isRequired?: boolean;\n  name?: ReactNode;\n  field: ParsedSchema;\n  fieldName: string;\n  depth?: number;\n\n  slotType?: ReactNode;\n  toolbar?: ReactNode;\n  collapsible?: boolean;\n}) {\n  const { readOnly, writeOnly } = useSchemaScope();\n  const field = useResolvedSchema(_field);\n  const [show, setShow] = useState(!collapsible);\n  const { info, updateInfo } = useFieldInfo(fieldName, field, depth);\n\n  if (_field === false) return;\n  if (field.readOnly && !readOnly) return;\n  if (field.writeOnly && !writeOnly) return;\n\n  if (info.unionField) {\n    const union = field[info.unionField]!;\n    const showSelect = union.length > 1;\n\n    return (\n      <FieldSet\n        {...props}\n        name={name}\n        fieldName={fieldName}\n        isRequired={isRequired}\n        field={union[info.oneOf]}\n        depth={depth + 1}\n        slotType={showSelect ? false : slotType}\n        toolbar={\n          <>\n            {showSelect && (\n              <select\n                className=\"text-xs font-mono\"\n                value={info.oneOf}\n                onChange={(e) => {\n                  updateInfo({\n                    oneOf: Number(e.target.value),\n                  });\n                }}\n              >\n                {union.map((item, i) => (\n                  <option key={i} value={i} className=\"bg-fd-popover text-fd-popover-foreground\">\n                    {schemaToString(item, undefined, FormatFlags.UseAlias)}\n                  </option>\n                ))}\n              </select>\n            )}\n            {toolbar}\n          </>\n        }\n      />\n    );\n  }\n\n  if (Array.isArray(field.type)) {\n    const showSelect = field.type.length > 1;\n\n    return (\n      <FieldSet\n        {...props}\n        name={name}\n        fieldName={fieldName}\n        isRequired={isRequired}\n        field={{\n          ...field,\n          type: info.selectedType,\n        }}\n        depth={depth + 1}\n        slotType={showSelect ? false : slotType}\n        toolbar={\n          <>\n            {showSelect && (\n              <select\n                className=\"text-xs font-mono\"\n                value={info.selectedType}\n                onChange={(e) => {\n                  updateInfo({\n                    selectedType: e.target.value,\n                  });\n                }}\n              >\n                {field.type.map((item) => (\n                  <option\n                    key={item}\n                    value={item}\n                    className=\"bg-fd-popover text-fd-popover-foreground\"\n                  >\n                    {item}\n                  </option>\n                ))}\n              </select>\n            )}\n            {toolbar}\n          </>\n        }\n      />\n    );\n  }\n\n  const showBn = collapsible && (\n    <button\n      type=\"button\"\n      onClick={() => setShow((prev) => !prev)}\n      className={cn(\n        buttonVariants({\n          size: 'icon-xs',\n          color: 'ghost',\n          className: 'text-fd-muted-foreground -ms-1',\n        }),\n      )}\n    >\n      <ChevronDown className={cn(show && 'rotate-180')} />\n    </button>\n  );\n\n  if (field.type === 'object' || info.intersection) {\n    return (\n      <fieldset\n        {...props}\n        className={cn('flex flex-col gap-1.5 col-span-full @container', props.className)}\n      >\n        <FieldLabel htmlFor={fieldName}>\n          {showBn}\n          <FieldLabelName required={isRequired}>{name}</FieldLabelName>\n          {slotType ?? <FieldLabelType>{schemaToString(field)}</FieldLabelType>}\n          {toolbar}\n        </FieldLabel>\n        {show && (\n          <ObjectInput\n            field={info.intersection?.merged ?? field}\n            fieldName={fieldName}\n            {...props}\n            className={cn(\n              'rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm',\n              props.className,\n            )}\n          />\n        )}\n      </fieldset>\n    );\n  }\n\n  if (field.type === 'array') {\n    return (\n      <fieldset {...props} className={cn('flex flex-col gap-1.5 col-span-full', props.className)}>\n        <FieldLabel htmlFor={fieldName}>\n          {showBn}\n          <FieldLabelName required={isRequired}>{name}</FieldLabelName>\n          {slotType ?? <FieldLabelType>{schemaToString(field)}</FieldLabelType>}\n          {toolbar}\n        </FieldLabel>\n        {show && (\n          <ArrayInput\n            fieldName={fieldName}\n            items={field.items ?? anyFields}\n            {...props}\n            className={cn(\n              'rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm',\n              props.className,\n            )}\n          />\n        )}\n      </fieldset>\n    );\n  }\n  return (\n    <fieldset {...props} className={cn('flex flex-col gap-1.5', props.className)}>\n      <FieldLabel htmlFor={fieldName}>\n        <FieldLabelName required={isRequired}>{name}</FieldLabelName>\n        {slotType ?? <FieldLabelType>{schemaToString(field)}</FieldLabelType>}\n        {toolbar}\n      </FieldLabel>\n      <FieldInput field={field} fieldName={fieldName} isRequired={isRequired} />\n    </fieldset>\n  );\n}\n\nfunction ArrayInput({\n  fieldName,\n  items,\n  ...props\n}: {\n  fieldName: string;\n  items: ParsedSchema;\n} & ComponentProps<'div'>) {\n  const name = fieldName.split('.').at(-1) ?? '';\n  const { fields, append, remove } = useFieldArray({\n    name: fieldName,\n  });\n\n  return (\n    <div {...props} className={cn('flex flex-col gap-2', props.className)}>\n      {fields.map((item, index) => (\n        <FieldSet\n          key={item.id}\n          name={\n            <span className=\"text-fd-muted-foreground\">\n              {name}[{index}]\n            </span>\n          }\n          field={items}\n          isRequired\n          fieldName={`${fieldName}.${index}`}\n          toolbar={\n            <button\n              type=\"button\"\n              aria-label=\"Remove Item\"\n              className={cn(\n                buttonVariants({\n                  color: 'outline',\n                  size: 'icon-xs',\n                }),\n              )}\n              onClick={() => remove(index)}\n            >\n              <Trash2 />\n            </button>\n          }\n        />\n      ))}\n      <button\n        type=\"button\"\n        className={cn(\n          buttonVariants({\n            color: 'secondary',\n            className: 'gap-1.5 py-2',\n            size: 'sm',\n          }),\n        )}\n        onClick={() => {\n          append(getDefaultValue(items));\n        }}\n      >\n        <Plus className=\"size-4\" />\n        New Item\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,SAAS,WAAW,OAAgC;AAClD,QACE,oBAAC;EAAM,GAAI;EAAO,WAAW,GAAG,2CAA2C,MAAM,UAAU;YACxF,MAAM;GACD;;AAIZ,SAAS,eAAe,EACtB,WAAW,OACX,GAAG,SAC+C;AAClD,QACE,qBAAC;EAAK,GAAI;EAAO,WAAW,GAAG,eAAe,EAAE,qBAAqB,MAAM,UAAU;aAClF,MAAM,UACN,YAAY,oBAAC;GAAK,WAAU;aAAuB;IAAQ;GACvD;;AAIX,SAAS,eAAe,OAA+B;AACrD,QACE,oBAAC;EAAK,GAAI;EAAO,WAAW,GAAG,oCAAoC,MAAM,UAAU;YAChF,MAAM;GACF;;AAIX,SAAgB,YAAY,EAC1B,OAAO,QACP,WACA,GAAG,SAIsB;CACzB,MAAM,QAAQ,kBAAkB,OAAO;AAEvC,QACE,qBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,0CAA0C,MAAM,UAAU;aACrF,OAAO,QAAQ,MAAM,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,WACjD,oBAAC;GAEC,MAAM;GACN,OAAO;GACP,WAAW,GAAG,UAAU,GAAG;GAC3B,YAAY,MAAM,UAAU,SAAS,IAAI;KAJpC,IAKL,CACF,GACA,MAAM,wBAAwB,MAAM,sBACpC,oBAAC;GACY;GACX,YAAY,MAAM,CAAC,MAAM,cAAc,CAAC,OAAO,KAAK,MAAM,WAAW,CAAC,SAAS,EAAE;GACjF,UAAU,QAAQ;AAChB,SAAK,MAAM,WAAW,MAAM,kBAC1B,KAAI,IAAI,MAAM,OAAO,QAAQ,CAAC,CAC5B,QAAO,MAAM,kBAAkB;AAInC,QAAI,MAAM,qBAAsB,QAAO,MAAM;AAE7C,WAAO;;IAET;GAEA;;AAIV,SAAgB,UAAU,EAAE,aAAoC;CAC9D,MAAM,aAAa,cAAc,EAC/B,MAAM,WACP,CAAC;CACF,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CACvD,MAAM,CAAC,OAAO,YAAY,eAAe,KAAK,UAAU,WAAW,MAAM,OAAO,MAAM,EAAE,CAAC;AAEzF,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,GAAI,WAAW;GACR;GACP,WAAU;GACV,WAAW,MAAM;AACf,aAAS,EAAE,OAAO,MAAM;AACxB,QAAI;AACF,gBAAW,MAAM,SAAS,KAAK,MAAM,EAAE,OAAO,MAAM,CAAC;AACrD,cAAS,KAAK;aACP,GAAG;AACV,SAAI,aAAa,MAAO,UAAS,EAAE,QAAQ;;;IAG/C,EACF,oBAAC;GAAE,WAAU;aAA4D;IAAU;GAC/E;;AAIV,SAAS,kBAAkB,EACzB,WACA,kBAAkB,MAClB,gBAAgB,aAKf;CACD,MAAM,EAAE,SAAS,UAAU,cAAc,gBAAgB;CACzD,MAAM,CAAC,UAAU,eAAe,SAAS,GAAG;CAC5C,MAAM,CAAC,YAAY,iBAAiB,eAAyB;EAC3D,MAAM,QAAQ,UAAU,UAAU;AAClC,MAAI,MAAO,QAAO,OAAO,KAAK,MAAM,CAAC,OAAO,UAAU;AAEtD,SAAO,EAAE;GACT;CAEF,MAAM,iBAAiB;EACrB,MAAM,OAAO,SAAS,MAAM;AAC5B,MAAI,KAAK,WAAW,EAAG;AAEvB,iBAAe,MAAM;AACnB,OAAI,EAAE,SAAS,KAAK,IAAI,CAAC,UAAU,KAAK,CAAE,QAAO;GACjD,MAAM,OAAO,QAAQ,KAAK;AAE1B,YAAS,GAAG,UAAU,GAAG,QAAQ,gBAAgB,KAAK,CAAC;AACvD,eAAY,GAAG;AACf,UAAO,CAAC,GAAG,GAAG,KAAK;IACnB;;AAGJ,QACE,8CACG,WAAW,KAAK,SAAS;AAGxB,SACE,oBAAC;GAEC,MAAM;GACN,OANS,QAAQ,KAAK;GAOtB,WAAW,GAAG,UAAU,GAAG;GAC3B,SACE,oBAAC;IACC,MAAK;IACL,cAAW;IACX,WAAW,GACT,eAAe;KACb,OAAO;KACP,MAAM;KACP,CAAC,CACH;IACD,eAAe;AACb,oBAAe,MAAM,EAAE,QAAQ,SAAS,SAAS,KAAK,CAAC;AACvD,aAAQ,WAAW,GAAG,UAAU,GAAG,OAAO;;cAG5C,oBAAC,WAAS;KACH;KApBN,KAsBL;GAEJ,EACF,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,OAAO;GACP,aAAY;GACZ,WAAW,MAAM,YAAY,EAAE,OAAO,MAAM;GAC5C,YAAY,MAAM;AAChB,QAAI,EAAE,QAAQ,SAAS;AACrB,eAAU;AACV,OAAE,gBAAgB;;;IAGtB,EACF,oBAAC;GACC,MAAK;GACL,WAAW,GAAG,eAAe;IAAE,OAAO;IAAa,MAAM;IAAM,CAAC,EAAE,OAAO;GACzE,SAAS;aACV;IAEQ;GACL,IACL;;AAIP,SAAgB,WAAW,EACzB,OACA,WACA,YACA,GAAG,SAKF;CACD,MAAM,OAAO,gBAAgB;CAC7B,MAAM,EACJ,OAAO,EAAE,OAAO,UAAU,GAAG,aAC7B,eACE,cAAc;EAChB,SAAS,KAAK;EACd,MAAM;EACP,CAAC;AAEF,KAAI,MAAM,SAAS,OAAQ;AAE3B,KAAI,MAAM,SAAS,YAAY,MAAM,WAAW,SAC9C,QACE,qBAAC;EAAI,GAAI;aACP,oBAAC;GACC,SAAS;GACT,WAAW,GACT,eAAe;IACb,OAAO;IACP,WAAW;IACZ,CAAC,CACH;aAEA,iBAAiB,OAChB,8CACE,oBAAC;IAAK,WAAU;cAAmC;KAAe,EAClE,oBAAC;IAAK,WAAU;cAAgC,MAAM;KAAY,IACjE,GAEH,oBAAC;IAAK,WAAU;cAA2B;KAAa;IAEpD,EACR,oBAAC;GACC,IAAI;GACJ,MAAK;GACL,UAAU;GACV,WAAW,MAAM;AACf,QAAI,CAAC,EAAE,OAAO,MAAO;AACrB,aAAS,EAAE,OAAO,MAAM,KAAK,EAAE,CAAC;;GAElC;GACA,GAAI;IACJ;GACE;AAIV,KAAI,MAAM,SAAS,UACjB,QACE,qBAAC;EACC,OAAO,OAAO,MAAM;EACpB,gBAAgB,YAAU,SAASA,YAAU,cAAc,SAAYA,YAAU,OAAO;EACxF,UAAU,UAAU;aAEpB,oBAAC;GAAc,IAAI;GAAW,WAAW,MAAM;GAAW,GAAI;aAC5D,oBAAC,gBAAc;IACD,EAChB,qBAAC;GACC,oBAAC;IAAW,OAAM;cAAO;KAAiB;GAC1C,oBAAC;IAAW,OAAM;cAAQ;KAAkB;GAC3C,CAAC,cAAc,oBAAC;IAAW,OAAM;cAAY;KAAkB;MAClD;GACT;CAIb,MAAM,WAAW,MAAM,SAAS,aAAa,MAAM,SAAS;AAE5D,QACE,qBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,uBAAuB,MAAM,UAAU;aACnE,oBAAC;GACC,IAAI;GACJ,aAAY;GACZ,MAAM,WAAW,WAAW;GAC5B,MAAM,MAAM,SAAS,YAAY,IAAI;GACrC,OAAO,SAAS;GAChB,WAAW,MAAM;AACf,QAAI,YAAY,CAAC,OAAO,MAAM,EAAE,OAAO,cAAc,CACnD,UAAS,EAAE,OAAO,cAAc;aACvB,CAAC,SACV,UAAS,EAAE,OAAO,MAAM;;GAG5B,GAAI;IACJ,EACD,WAAW,WACV,oBAAC;GACC,MAAK;GAKL,eAAe,KAAK,WAAW,UAAU;GACzC,WAAU;aAEV,oBAAC,KAAE,WAAU,WAAW;IACjB;GAEP;;AAIV,SAAgB,SAAS,EACvB,OAAO,QACP,WACA,SACA,MACA,YACA,QAAQ,GACR,UACA,cAAc,MACd,GAAG,SAWF;CACD,MAAM,EAAE,UAAU,cAAc,gBAAgB;CAChD,MAAM,QAAQ,kBAAkB,OAAO;CACvC,MAAM,CAAC,MAAM,WAAW,SAAS,CAAC,YAAY;CAC9C,MAAM,EAAE,MAAM,eAAe,aAAa,WAAW,OAAO,MAAM;AAElE,KAAI,WAAW,MAAO;AACtB,KAAI,MAAM,YAAY,CAAC,SAAU;AACjC,KAAI,MAAM,aAAa,CAAC,UAAW;AAEnC,KAAI,KAAK,YAAY;EACnB,MAAM,QAAQ,MAAM,KAAK;EACzB,MAAM,aAAa,MAAM,SAAS;AAElC,SACE,oBAAC;GACC,GAAI;GACE;GACK;GACC;GACZ,OAAO,MAAM,KAAK;GAClB,OAAO,QAAQ;GACf,UAAU,aAAa,QAAQ;GAC/B,SACE,8CACG,cACC,oBAAC;IACC,WAAU;IACV,OAAO,KAAK;IACZ,WAAW,MAAM;AACf,gBAAW,EACT,OAAO,OAAO,EAAE,OAAO,MAAM,EAC9B,CAAC;;cAGH,MAAM,KAAK,MAAM,MAChB,oBAAC;KAAe,OAAO;KAAG,WAAU;eACjC,eAAe,MAAM,QAAW,YAAY,SAAS;OAD3C,EAEJ,CACT;KACK,EAEV,WACA;IAEL;;AAIN,KAAI,MAAM,QAAQ,MAAM,KAAK,EAAE;EAC7B,MAAM,aAAa,MAAM,KAAK,SAAS;AAEvC,SACE,oBAAC;GACC,GAAI;GACE;GACK;GACC;GACZ,OAAO;IACL,GAAG;IACH,MAAM,KAAK;IACZ;GACD,OAAO,QAAQ;GACf,UAAU,aAAa,QAAQ;GAC/B,SACE,8CACG,cACC,oBAAC;IACC,WAAU;IACV,OAAO,KAAK;IACZ,WAAW,MAAM;AACf,gBAAW,EACT,cAAc,EAAE,OAAO,OACxB,CAAC;;cAGH,MAAM,KAAK,KAAK,SACf,oBAAC;KAEC,OAAO;KACP,WAAU;eAET;OAJI,KAKE,CACT;KACK,EAEV,WACA;IAEL;;CAIN,MAAM,SAAS,eACb,oBAAC;EACC,MAAK;EACL,eAAe,SAAS,SAAS,CAAC,KAAK;EACvC,WAAW,GACT,eAAe;GACb,MAAM;GACN,OAAO;GACP,WAAW;GACZ,CAAC,CACH;YAED,oBAAC,eAAY,WAAW,GAAG,QAAQ,aAAa,GAAI;GAC7C;AAGX,KAAI,MAAM,SAAS,YAAY,KAAK,aAClC,QACE,qBAAC;EACC,GAAI;EACJ,WAAW,GAAG,kDAAkD,MAAM,UAAU;aAEhF,qBAAC;GAAW,SAAS;;IAClB;IACD,oBAAC;KAAe,UAAU;eAAa;MAAsB;IAC5D,YAAY,oBAAC,4BAAgB,eAAe,MAAM,GAAkB;IACpE;;IACU,EACZ,QACC,oBAAC;GACC,OAAO,KAAK,cAAc,UAAU;GACzB;GACX,GAAI;GACJ,WAAW,GACT,4EACA,MAAM,UACP;IACD;GAEK;AAIf,KAAI,MAAM,SAAS,QACjB,QACE,qBAAC;EAAS,GAAI;EAAO,WAAW,GAAG,uCAAuC,MAAM,UAAU;aACxF,qBAAC;GAAW,SAAS;;IAClB;IACD,oBAAC;KAAe,UAAU;eAAa;MAAsB;IAC5D,YAAY,oBAAC,4BAAgB,eAAe,MAAM,GAAkB;IACpE;;IACU,EACZ,QACC,oBAAC;GACY;GACX,OAAO,MAAM,SAAS;GACtB,GAAI;GACJ,WAAW,GACT,4EACA,MAAM,UACP;IACD;GAEK;AAGf,QACE,qBAAC;EAAS,GAAI;EAAO,WAAW,GAAG,yBAAyB,MAAM,UAAU;aAC1E,qBAAC;GAAW,SAAS;;IACnB,oBAAC;KAAe,UAAU;eAAa;MAAsB;IAC5D,YAAY,oBAAC,4BAAgB,eAAe,MAAM,GAAkB;IACpE;;IACU,EACb,oBAAC;GAAkB;GAAkB;GAAuB;IAAc;GACjE;;AAIf,SAAS,WAAW,EAClB,WACA,OACA,GAAG,SAIsB;CACzB,MAAM,OAAO,UAAU,MAAM,IAAI,CAAC,GAAG,GAAG,IAAI;CAC5C,MAAM,EAAE,QAAQ,QAAQ,WAAW,cAAc,EAC/C,MAAM,WACP,CAAC;AAEF,QACE,qBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,uBAAuB,MAAM,UAAU;aAClE,OAAO,KAAK,MAAM,UACjB,oBAAC;GAEC,MACE,qBAAC;IAAK,WAAU;;KACb;KAAK;KAAE;KAAM;;KACT;GAET,OAAO;GACP;GACA,WAAW,GAAG,UAAU,GAAG;GAC3B,SACE,oBAAC;IACC,MAAK;IACL,cAAW;IACX,WAAW,GACT,eAAe;KACb,OAAO;KACP,MAAM;KACP,CAAC,CACH;IACD,eAAe,OAAO,MAAM;cAE5B,oBAAC,WAAS;KACH;KAtBN,KAAK,GAwBV,CACF,EACF,qBAAC;GACC,MAAK;GACL,WAAW,GACT,eAAe;IACb,OAAO;IACP,WAAW;IACX,MAAM;IACP,CAAC,CACH;GACD,eAAe;AACb,WAAO,gBAAgB,MAAM,CAAC;;cAGhC,oBAAC,QAAK,WAAU,WAAW;IAEpB;GACL"}
+{"version":3,"file":"inputs.js","names":["value"],"sources":["../../../src/playground/components/inputs.tsx"],"sourcesContent":["'use client';\nimport { type ComponentProps, type HTMLAttributes, type ReactNode, useState } from 'react';\nimport { ChevronRight, Plus, Trash2, X } from 'lucide-react';\nimport { FieldKey, useArray, useDataEngine, useFieldValue, useObject } from '@fumari/stf';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/ui/components/select';\nimport { Input, labelVariants } from '@/ui/components/input';\nimport { getDefaultValue } from '../get-default-values';\nimport { cn } from '@/utils/cn';\nimport { buttonVariants } from 'fumadocs-ui/components/ui/button';\nimport { FormatFlags, schemaToString } from '@/utils/schema-to-string';\nimport { anyFields, useFieldInfo, useResolvedSchema, useSchemaScope } from '@/playground/schema';\nimport type { ParsedSchema } from '@/utils/schema';\nimport { stringifyFieldKey } from '@fumari/stf/lib/utils';\n\nfunction FieldLabel(props: ComponentProps<'label'>) {\n  return (\n    <label {...props} className={cn('w-full inline-flex items-center gap-0.5', props.className)}>\n      {props.children}\n    </label>\n  );\n}\n\nfunction FieldLabelName({\n  required = false,\n  ...props\n}: ComponentProps<'span'> & { required?: boolean }) {\n  return (\n    <span {...props} className={cn(labelVariants(), 'font-mono me-auto', props.className)}>\n      {props.children}\n      {required && <span className=\"text-red-400/80 mx-1\">*</span>}\n    </span>\n  );\n}\n\nfunction FieldLabelType(props: ComponentProps<'code'>) {\n  return (\n    <code {...props} className={cn('text-xs text-fd-muted-foreground', props.className)}>\n      {props.children}\n    </code>\n  );\n}\n\nexport function ObjectInput({\n  field: _field,\n  fieldName,\n  ...props\n}: {\n  field: Exclude<ParsedSchema, boolean>;\n  fieldName: FieldKey;\n} & ComponentProps<'div'>) {\n  const field = useResolvedSchema(_field);\n  const [nextName, setNextName] = useState('');\n  const { properties, onAppend, onDelete } = useObject(fieldName, {\n    defaultValue: () => getDefaultValue(field) as object,\n    properties: field.properties ?? {},\n    fallback: field.additionalProperties,\n    patternProperties: field.patternProperties,\n  });\n\n  const isDynamic = field.patternProperties ?? field.additionalProperties;\n  return (\n    <div {...props} className={cn('grid grid-cols-1 gap-4 @md:grid-cols-2', props.className)}>\n      {properties.map((child) => {\n        let toolbar: ReactNode = null;\n        if (child.kind === 'pattern' || child.kind === 'fallback') {\n          toolbar = (\n            <button\n              type=\"button\"\n              aria-label=\"Remove Item\"\n              className={cn(\n                buttonVariants({\n                  color: 'outline',\n                  size: 'icon-xs',\n                }),\n              )}\n              onClick={() => {\n                onDelete(child.key);\n              }}\n            >\n              <Trash2 />\n            </button>\n          );\n        }\n\n        return (\n          <FieldSet\n            key={child.key}\n            name={child.key}\n            field={child.info}\n            fieldName={child.field}\n            isRequired={field.required?.includes(child.key)}\n            toolbar={toolbar}\n          />\n        );\n      })}\n      {isDynamic && (\n        <div className=\"flex gap-2 col-span-full\">\n          <Input\n            value={nextName}\n            placeholder=\"Enter Property Name\"\n            onChange={(e) => setNextName(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                setNextName('');\n                onAppend(nextName);\n                e.preventDefault();\n              }\n            }}\n          />\n          <button\n            type=\"button\"\n            className={cn(buttonVariants({ color: 'secondary', size: 'sm' }), 'px-4')}\n            onClick={() => {\n              onAppend(nextName);\n              setNextName('');\n            }}\n          >\n            New\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function JsonInput({ fieldName }: { fieldName: FieldKey }) {\n  const engine = useDataEngine();\n  const [error, setError] = useState<string | null>(null);\n  const [value, setValue] = useState(() => JSON.stringify(engine.init(fieldName, {}), null, 2));\n\n  return (\n    <div className=\"flex flex-col bg-fd-secondary text-fd-secondary-foreground overflow-hidden border rounded-lg\">\n      <textarea\n        value={value}\n        className=\"p-2 h-[240px] text-sm font-mono resize-none focus-visible:outline-none\"\n        onChange={(v) => {\n          setValue(v.target.value);\n          try {\n            engine.update(fieldName, JSON.parse(v.target.value));\n            setError(null);\n          } catch (e) {\n            if (e instanceof Error) setError(e.message);\n          }\n        }}\n      />\n      <p className=\"p-2 text-xs font-mono border-t text-red-400 empty:hidden\">{error}</p>\n    </div>\n  );\n}\n\nexport function FieldInput({\n  field,\n  fieldName,\n  isRequired,\n  ...props\n}: HTMLAttributes<HTMLElement> & {\n  field: Exclude<ParsedSchema, boolean>;\n  isRequired?: boolean;\n  fieldName: FieldKey;\n}) {\n  const engine = useDataEngine();\n  const [value, setValue] = useFieldValue(fieldName);\n  const id = stringifyFieldKey(fieldName);\n  if (field.type === 'null') return;\n\n  function renderUnset(children: ReactNode) {\n    return (\n      <div {...props} className={cn('flex flex-row gap-2', props.className)}>\n        {children}\n        {value !== undefined && !isRequired && (\n          <button\n            type=\"button\"\n            onClick={() => engine.delete(fieldName)}\n            className=\"text-fd-muted-foreground\"\n          >\n            <X className=\"size-4\" />\n          </button>\n        )}\n      </div>\n    );\n  }\n\n  if (field.type === 'string' && field.format === 'binary') {\n    return renderUnset(\n      <>\n        <label\n          htmlFor={id}\n          className={cn(\n            buttonVariants({\n              color: 'secondary',\n              className: 'w-full h-9 gap-2 truncate',\n            }),\n          )}\n        >\n          {value instanceof File ? (\n            <>\n              <span className=\"text-fd-muted-foreground text-xs\">Selected</span>\n              <span className=\"truncate w-0 flex-1 text-end\">{value.name}</span>\n            </>\n          ) : (\n            <span className=\"text-fd-muted-foreground\">Upload</span>\n          )}\n        </label>\n        <input\n          id={id}\n          type=\"file\"\n          multiple={false}\n          onChange={(e) => {\n            if (!e.target.files || e.target.files.length === 0) return;\n            setValue(e.target.files.item(0));\n          }}\n          hidden\n        />\n      </>,\n    );\n  }\n\n  if (field.enum && field.enum.length > 0) {\n    const idx = field.enum.indexOf(value);\n\n    return (\n      <Select value={String(idx)} onValueChange={(v) => setValue(field.enum![Number(v)])}>\n        <SelectTrigger id={id} {...props}>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          {field.enum.map((item, i) => (\n            <SelectItem key={i} value={String(i)}>\n              {typeof item === 'string' ? item : JSON.stringify(item, null, 2)}\n            </SelectItem>\n          ))}\n          {!isRequired && <SelectItem value=\"-1\">Unset</SelectItem>}\n        </SelectContent>\n      </Select>\n    );\n  }\n\n  if (field.type === 'boolean') {\n    return (\n      <Select\n        value={String(value)}\n        onValueChange={(value) => setValue(value === 'undefined' ? undefined : value === 'true')}\n      >\n        <SelectTrigger id={id} {...props}>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"true\">True</SelectItem>\n          <SelectItem value=\"false\">False</SelectItem>\n          {!isRequired && <SelectItem value=\"undefined\">Unset</SelectItem>}\n        </SelectContent>\n      </Select>\n    );\n  }\n\n  const isNumber = field.type === 'integer' || field.type === 'number';\n  return renderUnset(\n    <Input\n      id={id}\n      placeholder=\"Enter value\"\n      type={isNumber ? 'number' : 'text'}\n      step={field.type === 'integer' ? 1 : undefined}\n      value={String(value ?? '')}\n      onChange={(e) => {\n        if (isNumber) {\n          setValue(Number.isNaN(e.target.valueAsNumber) ? undefined : e.target.valueAsNumber);\n        } else if (!isNumber) {\n          setValue(e.target.value);\n        }\n      }}\n    />,\n  );\n}\n\nexport function FieldSet({\n  field: _field,\n  fieldName,\n  toolbar,\n  name,\n  isRequired,\n  depth = 0,\n  slotType,\n  collapsible = true,\n  ...props\n}: HTMLAttributes<HTMLElement> & {\n  isRequired?: boolean;\n  name?: ReactNode;\n  field: ParsedSchema;\n  fieldName: FieldKey;\n  depth?: number;\n\n  slotType?: ReactNode;\n  toolbar?: ReactNode;\n  collapsible?: boolean;\n}) {\n  const { readOnly, writeOnly } = useSchemaScope();\n  const field = useResolvedSchema(_field);\n  const [show, setShow] = useState(!collapsible);\n  const { info, updateInfo } = useFieldInfo(fieldName, field);\n  const id = stringifyFieldKey(fieldName);\n  const dataEngine = useDataEngine();\n\n  if (_field === false) return;\n  if (field.readOnly && !readOnly) return;\n  if (field.writeOnly && !writeOnly) return;\n\n  if (info.unionField && field[info.unionField]) {\n    const union = field[info.unionField]!;\n    const showSelect = union.length > 1;\n\n    return (\n      <FieldSet\n        {...props}\n        name={name}\n        fieldName={fieldName}\n        isRequired={isRequired}\n        field={union[info.oneOf]}\n        depth={depth + 1}\n        slotType={showSelect ? false : slotType}\n        toolbar={\n          <>\n            {showSelect && (\n              <select\n                className=\"text-xs font-mono\"\n                value={info.oneOf}\n                onChange={(e) => {\n                  updateInfo({\n                    oneOf: Number(e.target.value),\n                  });\n                }}\n              >\n                {union.map((item, i) => (\n                  <option key={i} value={i} className=\"bg-fd-popover text-fd-popover-foreground\">\n                    {schemaToString(item, undefined, FormatFlags.UseAlias)}\n                  </option>\n                ))}\n              </select>\n            )}\n            {toolbar}\n          </>\n        }\n      />\n    );\n  }\n\n  if (Array.isArray(field.type)) {\n    const showSelect = field.type.length > 1;\n\n    return (\n      <FieldSet\n        {...props}\n        name={name}\n        fieldName={fieldName}\n        isRequired={isRequired}\n        field={{\n          ...field,\n          type: info.selectedType,\n        }}\n        depth={depth + 1}\n        slotType={showSelect ? false : slotType}\n        toolbar={\n          <>\n            {showSelect && (\n              <select\n                className=\"text-xs font-mono\"\n                value={info.selectedType}\n                onChange={(e) => {\n                  updateInfo({\n                    selectedType: e.target.value,\n                  });\n                }}\n              >\n                {field.type.map((item) => (\n                  <option\n                    key={item}\n                    value={item}\n                    className=\"bg-fd-popover text-fd-popover-foreground\"\n                  >\n                    {item}\n                  </option>\n                ))}\n              </select>\n            )}\n            {toolbar}\n          </>\n        }\n      />\n    );\n  }\n\n  if (field.type === 'object' || info.intersection) {\n    const schema = info.intersection?.merged ?? field;\n    return (\n      <fieldset\n        {...props}\n        className={cn('flex flex-col gap-1.5 col-span-full @container', props.className)}\n      >\n        <FieldLabel htmlFor={id}>\n          {collapsible && (\n            <button\n              type=\"button\"\n              onClick={() => {\n                dataEngine.init(fieldName, getDefaultValue(schema));\n                setShow((prev) => !prev);\n              }}\n              className={cn(\n                buttonVariants({\n                  size: 'icon-xs',\n                  color: 'ghost',\n                  className: 'text-fd-muted-foreground -ms-1',\n                }),\n              )}\n            >\n              <ChevronRight className={cn(show && 'rotate-90')} />\n            </button>\n          )}\n          <FieldLabelName required={isRequired}>{name}</FieldLabelName>\n          {slotType ?? <FieldLabelType>{schemaToString(field)}</FieldLabelType>}\n          {toolbar}\n        </FieldLabel>\n        {show && (\n          <ObjectInput\n            field={schema}\n            fieldName={fieldName}\n            {...props}\n            className={cn(\n              'rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm',\n              props.className,\n            )}\n          />\n        )}\n      </fieldset>\n    );\n  }\n\n  if (field.type === 'array') {\n    return (\n      <fieldset {...props} className={cn('flex flex-col gap-1.5 col-span-full', props.className)}>\n        <FieldLabel htmlFor={id}>\n          {collapsible && (\n            <button\n              type=\"button\"\n              onClick={() => {\n                dataEngine.init(fieldName, getDefaultValue(field));\n                setShow((prev) => !prev);\n              }}\n              className={cn(\n                buttonVariants({\n                  size: 'icon-xs',\n                  color: 'ghost',\n                  className: 'text-fd-muted-foreground -ms-1',\n                }),\n              )}\n            >\n              <ChevronRight className={cn(show && 'rotate-90')} />\n            </button>\n          )}\n          <FieldLabelName required={isRequired}>{name}</FieldLabelName>\n          {slotType ?? <FieldLabelType>{schemaToString(field)}</FieldLabelType>}\n          {toolbar}\n        </FieldLabel>\n        {show && (\n          <ArrayInput\n            fieldName={fieldName}\n            items={field.items ?? anyFields}\n            {...props}\n            className={cn(\n              'rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm',\n              props.className,\n            )}\n          />\n        )}\n      </fieldset>\n    );\n  }\n  return (\n    <fieldset {...props} className={cn('flex flex-col gap-1.5', props.className)}>\n      <FieldLabel htmlFor={id}>\n        <FieldLabelName required={isRequired}>{name}</FieldLabelName>\n        {slotType ?? <FieldLabelType>{schemaToString(field)}</FieldLabelType>}\n        {toolbar}\n      </FieldLabel>\n      <FieldInput field={field} fieldName={fieldName} isRequired={isRequired} />\n    </fieldset>\n  );\n}\n\nfunction ArrayInput({\n  fieldName,\n  items: itemSchema,\n  ...props\n}: {\n  fieldName: FieldKey;\n  items: ParsedSchema;\n} & ComponentProps<'div'>) {\n  const name = fieldName.at(-1) ?? '';\n  const { items, insertItem, removeItem } = useArray(fieldName, {\n    defaultValue: [],\n  });\n\n  return (\n    <div {...props} className={cn('flex flex-col gap-2', props.className)}>\n      {items.map((item) => (\n        <FieldSet\n          key={item.index}\n          name={\n            <span className=\"text-fd-muted-foreground\">\n              {name}[{item.index}]\n            </span>\n          }\n          field={itemSchema}\n          isRequired\n          fieldName={item.field}\n          toolbar={\n            <button\n              type=\"button\"\n              aria-label=\"Remove Item\"\n              className={cn(\n                buttonVariants({\n                  color: 'outline',\n                  size: 'icon-xs',\n                }),\n              )}\n              onClick={() => removeItem(item.index)}\n            >\n              <Trash2 />\n            </button>\n          }\n        />\n      ))}\n      <button\n        type=\"button\"\n        className={cn(\n          buttonVariants({\n            color: 'secondary',\n            className: 'gap-1.5 py-2',\n            size: 'sm',\n          }),\n        )}\n        onClick={() => {\n          insertItem(getDefaultValue(itemSchema));\n        }}\n      >\n        <Plus className=\"size-4\" />\n        New Item\n      </button>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,12 +1,12 @@
 import { cn } from "../../utils/cn.js";
+import { useQuery } from "../../utils/use-query.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/components/select.js";
 import { Input, labelVariants } from "../../ui/components/input.js";
-import { useQuery } from "../../utils/use-query.js";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../../ui/components/dialog.js";
 import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
+import { useForm } from "react-hook-form";
 
 //#region src/playground/components/oauth-dialog.tsx
 const FlowTypes = {