@questpie/admin 1.1.1 → 2.0.0

package/dist/client/views/collection/auto-form-fields.mjs

@@ -0,0 +1,453 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { resolveIconElement } from "../../components/component-renderer.mjs";
+import { getFieldName, isFieldReference } from "../../builder/types/field-types.mjs";
+import { getGridColumnsClass } from "../../components/fields/field-utils.mjs";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../components/ui/accordion.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs.mjs";
+import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
+import { useGlobalFields } from "../../hooks/use-global-fields.mjs";
+import { getFullFieldName, resolveValue } from "./field-context.mjs";
+import { FieldRenderer } from "./field-renderer.mjs";
+import * as React$1 from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/auto-form-fields.tsx
+/**
+* Normalize FieldLayoutItem to field name
+* Only handles field references, returns null for layout containers
+*/
+function normalizeFieldItem(item) {
+	if (typeof item === "string") return { field: item };
+	if (typeof item === "object" && item !== null && "field" in item && typeof item.field === "string") return {
+		field: item.field,
+		className: "className" in item ? item.className : void 0
+	};
+	return null;
+}
+function getGapStyle(gap) {
+	if (gap === void 0) return void 0;
+	return `${gap * .25}rem`;
+}
+function mapFormSchemaToConfig(form) {
+	if (!form) return void 0;
+	if (form.fields?.length) return {
+		fields: form.fields,
+		sidebar: form.sidebar
+	};
+}
+/**
+* Render fields list
+*/
+function renderFields({ fieldItems, fields, collection, mode = "collection", registry, fieldPrefix, allCollectionsConfig, excludedFields, columns = 1, gap, className }) {
+	const visibleFields = fieldItems.map(normalizeFieldItem).filter((item) => item !== null).filter((item) => !excludedFields?.has(item.field));
+	if (!visibleFields.length) return null;
+	const gridClass = columns > 1 ? getGridColumnsClass(columns, true) : "";
+	const shouldLastFieldSpan = columns > 1 && visibleFields.length % columns !== 0;
+	const fieldElements = visibleFields.map((item, index) => {
+		const spanClass = index === visibleFields.length - 1 && shouldLastFieldSpan ? "col-span-full" : "";
+		return /* @__PURE__ */ jsx(FieldRenderer, {
+			fieldName: item.field,
+			fieldDef: fields[item.field],
+			collection,
+			mode,
+			registry,
+			fieldPrefix,
+			allCollectionsConfig,
+			className: cn(item.className, spanClass),
+			renderEmbeddedFields: ({ embeddedCollection, embeddedCollectionConfig, fullFieldName, index: embeddedIndex }) => /* @__PURE__ */ jsx(AutoFormFields, {
+				collection: embeddedCollection,
+				mode: "collection",
+				config: embeddedCollectionConfig,
+				registry,
+				fieldPrefix: `${fullFieldName}.${embeddedIndex}`,
+				allCollectionsConfig
+			})
+		}, item.field);
+	});
+	if (columns > 1) return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-4", gridClass, className),
+		style: gap ? { gap: getGapStyle(gap) } : void 0,
+		children: fieldElements
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("space-y-4", className),
+		children: fieldElements
+	});
+}
+/**
+* Render field layout items (fields, sections, tabs)
+*
+* NEW API: fields array can contain:
+* - Field references (string or {field, className})
+* - Section layouts ({ type: 'section', ... })
+* - Tabs layouts ({ type: 'tabs', ... })
+*/
+function getLayoutKey(item) {
+	if (item.type === "tabs") {
+		const tabKey = item.tabs.map((tab) => tab.id).filter(Boolean).join("-");
+		return tabKey ? `tabs-${tabKey}` : "tabs";
+	}
+	const fieldKey = item.fields.map((fieldItem) => {
+		if (isFieldReference(fieldItem)) return getFieldName(fieldItem) ?? "field";
+		if (typeof fieldItem === "object" && "type" in fieldItem) return fieldItem.type;
+		return "item";
+	}).join("-");
+	return fieldKey ? `section-${fieldKey}` : "section";
+}
+function renderFieldLayoutItems({ fieldItems, fields, collection, mode = "collection", registry, fieldPrefix, allCollectionsConfig, excludedFields, formValues, resolveText }) {
+	if (!fieldItems?.length) return null;
+	const validItems = fieldItems.map((item, index) => {
+		if (isFieldReference(item)) {
+			const fieldName = getFieldName(item);
+			if (!fieldName || !fields[fieldName]) return null;
+			if (excludedFields?.has(fieldName)) return null;
+			const fieldDef = fields[fieldName];
+			const fieldOptions = fieldDef["~options"] || {};
+			if (typeof fieldOptions.hidden === "function" ? fieldOptions.hidden(formValues) : fieldOptions.hidden === true) return null;
+			return /* @__PURE__ */ jsx(FieldRenderer, {
+				fieldName,
+				fieldDef,
+				collection,
+				mode,
+				registry,
+				fieldPrefix,
+				allCollectionsConfig,
+				className: typeof item === "object" && "className" in item ? item.className : void 0,
+				renderEmbeddedFields: ({ embeddedCollection, embeddedCollectionConfig, fullFieldName, index: embeddedIndex }) => /* @__PURE__ */ jsx(AutoFormFields, {
+					collection: embeddedCollection,
+					mode: "collection",
+					config: embeddedCollectionConfig,
+					registry,
+					fieldPrefix: `${fullFieldName}.${embeddedIndex}`,
+					allCollectionsConfig
+				})
+			}, fieldName);
+		}
+		if (typeof item === "object" && "type" in item) switch (item.type) {
+			case "tabs": return /* @__PURE__ */ jsx(React$1.Fragment, { children: renderTabs({
+				tabsLayout: item,
+				fields,
+				collection,
+				mode,
+				registry,
+				fieldPrefix,
+				allCollectionsConfig,
+				excludedFields,
+				formValues,
+				resolveText
+			}) }, getLayoutKey(item));
+			case "section": return /* @__PURE__ */ jsx(React$1.Fragment, { children: renderSection({
+				section: item,
+				index,
+				fields,
+				collection,
+				mode,
+				registry,
+				fieldPrefix,
+				allCollectionsConfig,
+				excludedFields,
+				formValues,
+				resolveText
+			}) }, getLayoutKey(item));
+			default: return null;
+		}
+		return null;
+	}).filter(Boolean);
+	return validItems.length === 1 ? validItems[0] : /* @__PURE__ */ jsx("div", {
+		className: "space-y-6",
+		children: validItems
+	});
+}
+/**
+* Render a section layout
+* Mirrors object field: wrapper (flat|collapsible) + layout (stack|inline|grid)
+*/
+function renderSection({ section, index, fields, collection, mode = "collection", registry, fieldPrefix, allCollectionsConfig, excludedFields, formValues, resolveText }) {
+	if (resolveValue(section.hidden, formValues, false)) return null;
+	const wrapper = section.wrapper ?? "flat";
+	const layout = section.layout ?? "stack";
+	const columns = section.columns ?? 2;
+	const gap = section.gap;
+	const renderSectionFields = () => {
+		if (layout === "grid") return renderFields({
+			fieldItems: section.fields,
+			fields,
+			collection,
+			mode,
+			registry,
+			fieldPrefix,
+			allCollectionsConfig,
+			excludedFields,
+			columns,
+			gap,
+			className: section.className
+		});
+		if (layout === "inline") return /* @__PURE__ */ jsx("div", {
+			className: cn("flex flex-wrap gap-4", section.className),
+			children: section.fields.map((item, _idx) => {
+				const fieldName = getFieldName(item);
+				if (!fieldName || !fields[fieldName]) return null;
+				if (excludedFields?.has(fieldName)) return null;
+				const fieldDef = fields[fieldName];
+				const fieldOptions = fieldDef["~options"] || {};
+				if (!(typeof fieldOptions.visible === "function" ? fieldOptions.visible(formValues) : fieldOptions.visible !== false)) return null;
+				return /* @__PURE__ */ jsx(FieldRenderer, {
+					fieldName,
+					fieldDef,
+					collection,
+					mode,
+					registry,
+					fieldPrefix,
+					allCollectionsConfig,
+					className: typeof item === "object" && "className" in item ? item.className : void 0,
+					renderEmbeddedFields: ({ embeddedCollection, embeddedCollectionConfig, fullFieldName, index: embeddedIndex }) => /* @__PURE__ */ jsx(AutoFormFields, {
+						collection: embeddedCollection,
+						mode: "collection",
+						config: embeddedCollectionConfig,
+						registry,
+						fieldPrefix: `${fullFieldName}.${embeddedIndex}`,
+						allCollectionsConfig
+					})
+				}, fieldName);
+			})
+		});
+		return renderFieldLayoutItems({
+			fieldItems: section.fields,
+			fields,
+			collection,
+			mode,
+			registry,
+			fieldPrefix,
+			allCollectionsConfig,
+			excludedFields,
+			formValues,
+			resolveText
+		});
+	};
+	const content = renderSectionFields();
+	if (!content) return null;
+	const header = section.label || section.description ? /* @__PURE__ */ jsxs("div", {
+		className: "mb-4",
+		children: [section.label && /* @__PURE__ */ jsx("h3", {
+			className: "text-lg font-semibold",
+			children: resolveText(section.label, "", formValues)
+		}), section.description && /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground mt-1",
+			children: resolveText(section.description, "", formValues)
+		})]
+	}) : null;
+	if (wrapper === "collapsible") {
+		const value = `section-${index}`;
+		return /* @__PURE__ */ jsx(Accordion, {
+			defaultValue: section.defaultCollapsed !== true ? [value] : [],
+			className: "w-full",
+			children: /* @__PURE__ */ jsxs(AccordionItem, {
+				value,
+				className: "border rounded-lg px-4",
+				children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+					className: "hover:no-underline",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: resolveText(section.label, "Section", formValues)
+					})
+				}), /* @__PURE__ */ jsxs(AccordionContent, {
+					className: "pt-2 pb-4",
+					children: [section.description && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground mb-4",
+						children: resolveText(section.description, "", formValues)
+					}), content]
+				})]
+			})
+		}, value);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-4", section.className),
+		children: [header, content]
+	});
+}
+/**
+* Render tabs layout
+*/
+function renderTabs({ tabsLayout, fields, collection, mode = "collection", registry, fieldPrefix, allCollectionsConfig, excludedFields, formValues, resolveText }) {
+	const visibleTabs = tabsLayout.tabs.filter((tab) => !resolveValue(tab.hidden, formValues, false));
+	if (!visibleTabs.length) return null;
+	const defaultTab = visibleTabs[0]?.id;
+	return /* @__PURE__ */ jsxs(Tabs, {
+		defaultValue: defaultTab,
+		children: [/* @__PURE__ */ jsx(TabsList, {
+			variant: "line",
+			children: visibleTabs.map((tab) => /* @__PURE__ */ jsxs(TabsTrigger, {
+				value: tab.id,
+				children: [resolveIconElement(tab.icon, { className: "mr-2 size-4" }), resolveText(tab.label, tab.id, formValues)]
+			}, tab.id))
+		}), visibleTabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+			value: tab.id,
+			className: "mt-4",
+			children: renderFieldLayoutItems({
+				fieldItems: tab.fields,
+				fields,
+				collection,
+				mode,
+				registry,
+				fieldPrefix,
+				allCollectionsConfig,
+				excludedFields,
+				formValues,
+				resolveText
+			})
+		}, tab.id))]
+	});
+}
+/**
+* Render sidebar content
+*/
+function renderSidebar({ sidebar, fields, collection, mode = "collection", registry, fieldPrefix, allCollectionsConfig, formValues, resolveText }) {
+	return renderFieldLayoutItems({
+		fieldItems: sidebar.fields,
+		fields,
+		collection,
+		mode,
+		registry,
+		fieldPrefix,
+		allCollectionsConfig,
+		formValues,
+		resolveText
+	});
+}
+/**
+* Extract field names from field layout items recursively
+*/
+function extractFieldNamesFromFieldItems(fieldItems) {
+	const fieldNames = /* @__PURE__ */ new Set();
+	if (!fieldItems) return fieldNames;
+	for (const item of fieldItems) {
+		if (isFieldReference(item)) {
+			const fieldName = getFieldName(item);
+			if (fieldName) fieldNames.add(fieldName);
+			continue;
+		}
+		if (typeof item === "object" && "type" in item) switch (item.type) {
+			case "tabs":
+				for (const tab of item.tabs) {
+					const tabFields = extractFieldNamesFromFieldItems(tab.fields);
+					for (const f of tabFields) fieldNames.add(f);
+				}
+				break;
+			case "section": {
+				const sectionFields = extractFieldNamesFromFieldItems(item.fields);
+				for (const f of sectionFields) fieldNames.add(f);
+				break;
+			}
+		}
+	}
+	return fieldNames;
+}
+/**
+* AutoFormFields Component
+*
+* Renders form fields based on CollectionBuilderState config.
+* Supports recursive tabs/sections nesting and auto-generates
+* field list when no form config is defined.
+*/
+function AutoFormFields({ cms: _cms, collection, mode = "collection", config, registry, renderField, fieldPrefix, allCollectionsConfig }) {
+	const collectionResult = useCollectionFields(mode === "collection" ? collection : "", {
+		fallbackFields: mode === "collection" ? config?.fields : void 0,
+		schemaQueryOptions: { enabled: mode === "collection" }
+	});
+	const globalResult = useGlobalFields(mode === "global" ? collection : "", { schemaQueryOptions: { enabled: mode === "global" } });
+	const resolvedFields = mode === "global" ? {
+		...globalResult.fields,
+		...config?.fields
+	} : collectionResult.fields;
+	const schema = mode === "global" ? globalResult.schema : collectionResult.schema;
+	const watchedValues = useWatch({ control: useFormContext().control });
+	const formValues = React$1.useMemo(() => {
+		if (!watchedValues) return {};
+		if (!fieldPrefix) return watchedValues;
+		const parts = fieldPrefix.split(".");
+		let result = watchedValues;
+		for (const part of parts) {
+			result = result?.[part];
+			if (result === void 0) return {};
+		}
+		return result ?? {};
+	}, [watchedValues, fieldPrefix]);
+	const resolveText = useResolveText();
+	const fields = resolvedFields || {};
+	const schemaFormConfig = mapFormSchemaToConfig(schema?.admin?.form);
+	const formConfig = (config?.form)?.["~config"] ?? config?.form ?? schemaFormConfig;
+	const allFieldNames = Object.keys(fields);
+	const sidebarFieldNames = formConfig?.sidebar ? extractFieldNamesFromFieldItems(formConfig.sidebar.fields) : /* @__PURE__ */ new Set();
+	if (renderField) return /* @__PURE__ */ jsx("div", {
+		className: "space-y-4",
+		children: allFieldNames.map((fieldName) => {
+			const fullFieldName = getFullFieldName(fieldName, fieldPrefix);
+			return /* @__PURE__ */ jsx(React$1.Fragment, { children: renderField(fullFieldName, fields[fieldName]) }, fullFieldName);
+		})
+	});
+	const renderMainContent = () => {
+		if (formConfig?.fields?.length) return renderFieldLayoutItems({
+			fieldItems: formConfig.fields,
+			fields,
+			collection,
+			mode,
+			registry,
+			fieldPrefix,
+			allCollectionsConfig,
+			excludedFields: sidebarFieldNames,
+			formValues,
+			resolveText
+		});
+		const autoFields = allFieldNames.filter((f) => !sidebarFieldNames.has(f));
+		if (autoFields.length) return renderFields({
+			fieldItems: autoFields,
+			fields,
+			collection,
+			mode,
+			registry,
+			fieldPrefix,
+			allCollectionsConfig
+		});
+		return null;
+	};
+	const mainContent = renderMainContent();
+	if (formConfig?.sidebar?.fields?.length && formConfig?.sidebar) {
+		const sidebarContent = renderSidebar({
+			sidebar: formConfig.sidebar,
+			fields,
+			collection,
+			mode,
+			registry,
+			fieldPrefix,
+			allCollectionsConfig,
+			formValues,
+			resolveText
+		});
+		return /* @__PURE__ */ jsx("div", {
+			className: "@container w-full",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("flex flex-col-reverse gap-6 @2xl:flex-row", (formConfig.sidebar.position || "right") === "left" && "@2xl:flex-row-reverse"),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: mainContent
+				}), sidebarContent && /* @__PURE__ */ jsx("aside", {
+					className: cn("@2xl:border-l @max-2xl:border-b @max-2xl:pb-4 w-full border-border @2xl:pl-4", "w-full @2xl:max-w-xs"),
+					children: /* @__PURE__ */ jsx("div", {
+						className: "space-y-4 @2xl:sticky @2xl:h-auto @2xl:top-4",
+						children: sidebarContent
+					})
+				})]
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "@container",
+		children: mainContent
+	});
+}
+
+//#endregion
+export { AutoFormFields };
+//# sourceMappingURL=auto-form-fields.mjs.map

package/dist/client/views/collection/auto-form-fields.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-form-fields.mjs","names":["React","result: any"],"sources":["../../../../src/client/views/collection/auto-form-fields.tsx"],"sourcesContent":["/**\n * AutoFormFields Component\n *\n * Automatically generates form fields from CollectionBuilderState:\n * - Reads field definitions (FieldDefinition) from config.fields\n * - Reads form layout (FormViewConfig) from config.form\n * - Supports recursive tabs/sections nesting\n * - Auto-generates fields when no form config is defined\n */\n\nimport type { CollectionSchema, Questpie } from \"questpie\";\nimport * as React from \"react\";\nimport { useFormContext, useWatch } from \"react-hook-form\";\nimport type {\n\tComponentRegistry,\n\tFieldLayoutItem,\n\tFormSidebarConfig,\n\tFormViewConfig,\n\tSectionLayout,\n\tTabConfig,\n\tTabsLayout,\n} from \"../../builder\";\nimport type { FieldDefinition } from \"../../builder/field/field\";\nimport {\n\tgetFieldName,\n\tisFieldReference,\n} from \"../../builder/types/field-types\";\nimport { resolveIconElement } from \"../../components/component-renderer\";\nimport { getGridColumnsClass } from \"../../components/fields/field-utils\";\nimport {\n\tAccordion,\n\tAccordionContent,\n\tAccordionItem,\n\tAccordionTrigger,\n} from \"../../components/ui/accordion\";\nimport {\n\tTabs,\n\tTabsContent,\n\tTabsList,\n\tTabsTrigger,\n} from \"../../components/ui/tabs\";\nimport { useCollectionFields } from \"../../hooks/use-collection-fields\";\nimport { useGlobalFields } from \"../../hooks/use-global-fields\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn } from \"../../utils\";\nimport { getFullFieldName, resolveValue } from \"./field-context\";\nimport { FieldRenderer } from \"./field-renderer\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Collection config as expected by AutoFormFields\n * This matches CollectionBuilderState structure\n */\ninterface CollectionConfig {\n\tname?: string;\n\tfields?: Record<string, FieldDefinition>;\n\tform?: FormViewConfig;\n}\n\ntype AdminFormSchema = CollectionSchema[\"admin\"] extends infer TAdmin\n\t? TAdmin extends { form?: infer TForm }\n\t\t? TForm\n\t\t: undefined\n\t: undefined;\n\nexport interface AutoFormFieldsProps<\n\tT extends Questpie<any> = Questpie<any>,\n\tK extends string = string,\n> {\n\t/**\n\t * CMS instance (for schema introspection) - optional\n\t */\n\tcms?: T;\n\n\t/**\n\t * Collection or global name\n\t */\n\tcollection: K;\n\n\t/**\n\t * Schema source mode.\n\t * - \"collection\": Fetch collection schema (default)\n\t * - \"global\": Fetch global schema\n\t * @default \"collection\"\n\t */\n\tmode?: \"collection\" | \"global\";\n\n\t/**\n\t * Collection config (CollectionBuilderState)\n\t */\n\tconfig?: CollectionConfig;\n\n\t/**\n\t * Component registry for custom field types\n\t */\n\tregistry?: ComponentRegistry;\n\n\t/**\n\t * Custom field renderer (fallback)\n\t */\n\trenderField?: (\n\t\tfieldName: string,\n\t\tfieldDef?: FieldDefinition,\n\t) => React.ReactNode;\n\n\t/**\n\t * Field name prefix for nested fields\n\t */\n\tfieldPrefix?: string;\n\n\t/**\n\t * All collection configs (for embedded collections)\n\t */\n\tallCollectionsConfig?: Record<string, CollectionConfig>;\n}\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\n/**\n * Normalize FieldLayoutItem to field name\n * Only handles field references, returns null for layout containers\n */\nfunction normalizeFieldItem(item: FieldLayoutItem): {\n\tfield: string;\n\tclassName?: string;\n} | null {\n\tif (typeof item === \"string\") {\n\t\treturn { field: item };\n\t}\n\tif (\n\t\ttypeof item === \"object\" &&\n\t\titem !== null &&\n\t\t\"field\" in item &&\n\t\ttypeof item.field === \"string\"\n\t) {\n\t\treturn {\n\t\t\tfield: item.field,\n\t\t\tclassName: \"className\" in item ? item.className : undefined,\n\t\t};\n\t}\n\treturn null;\n}\n\n// ============================================================================\n// Layout Helpers\n// ============================================================================\n\nfunction getGapStyle(gap?: number) {\n\tif (gap === undefined) return undefined;\n\treturn `${gap * 0.25}rem`;\n}\n\n// ============================================================================\n// Schema Mapping Helpers\n// ============================================================================\n\nfunction formatTabId(label: unknown, index: number): string {\n\tif (typeof label === \"string\") {\n\t\tconst normalized = label\n\t\t\t.toLowerCase()\n\t\t\t.replace(/\\s+/g, \"-\")\n\t\t\t.replace(/[^a-z0-9-_]/g, \"\");\n\t\treturn normalized || `tab-${index}`;\n\t}\n\tif (label && typeof label === \"object\" && \"key\" in label) {\n\t\tconst key = (label as { key?: string }).key;\n\t\tif (key) return key;\n\t}\n\treturn `tab-${index}`;\n}\n\nfunction mapSectionsToLayout(\n\tsections: Array<{\n\t\tlabel?: any;\n\t\tdescription?: any;\n\t\tfields: FieldLayoutItem[];\n\t\tcollapsible?: boolean;\n\t\tdefaultCollapsed?: boolean;\n\t}>,\n): FieldLayoutItem[] {\n\treturn sections.map((section) => ({\n\t\ttype: \"section\",\n\t\tlabel: section.label,\n\t\tdescription: section.description,\n\t\tfields: section.fields,\n\t\twrapper: section.collapsible ? \"collapsible\" : \"flat\",\n\t\tdefaultCollapsed: section.defaultCollapsed,\n\t}));\n}\n\nfunction mapFormSchemaToConfig(\n\tform?: AdminFormSchema,\n): FormViewConfig | undefined {\n\tif (!form) return undefined;\n\n\t// New format: form already has the correct FormViewConfig structure\n\t// with fields array containing inline sections/tabs\n\tif (form.fields?.length) {\n\t\treturn {\n\t\t\tfields: form.fields as FieldLayoutItem[],\n\t\t\tsidebar: form.sidebar as FormSidebarConfig | undefined,\n\t\t};\n\t}\n\n\treturn undefined;\n}\n\n// ============================================================================\n// Field Layout Renderers (Recursive)\n// ============================================================================\n\ninterface FieldLayoutRendererProps {\n\tfieldItems: FieldLayoutItem[];\n\tfields: Record<string, FieldDefinition>;\n\tcollection: string;\n\tmode?: \"collection\" | \"global\";\n\tregistry?: ComponentRegistry;\n\tfieldPrefix?: string;\n\tallCollectionsConfig?: Record<string, CollectionConfig>;\n\texcludedFields?: Set<string>;\n\tformValues: any;\n\tresolveText: (\n\t\ttext: any,\n\t\tfallback?: string,\n\t\tcontextValues?: Record<string, any>,\n\t) => string;\n}\n\n/**\n * Render fields list\n */\nfunction renderFields({\n\tfieldItems,\n\tfields,\n\tcollection,\n\tmode = \"collection\",\n\tregistry,\n\tfieldPrefix,\n\tallCollectionsConfig,\n\texcludedFields,\n\tcolumns = 1,\n\tgap,\n\tclassName,\n}: {\n\tfieldItems: FieldLayoutItem[];\n\tfields: Record<string, FieldDefinition>;\n\tcollection: string;\n\tmode?: \"collection\" | \"global\";\n\tregistry?: ComponentRegistry;\n\tfieldPrefix?: string;\n\tallCollectionsConfig?: Record<string, CollectionConfig>;\n\texcludedFields?: Set<string>;\n\tcolumns?: number;\n\tgap?: number;\n\tclassName?: string;\n}) {\n\tconst visibleFields = fieldItems\n\t\t.map(normalizeFieldItem)\n\t\t.filter(\n\t\t\t(item): item is { field: string; className?: string } => item !== null,\n\t\t)\n\t\t.filter((item) => !excludedFields?.has(item.field));\n\n\tif (!visibleFields.length) return null;\n\n\tconst gridClass = columns > 1 ? getGridColumnsClass(columns, true) : \"\";\n\n\t// Calculate if last field should span full width\n\t// (when there's an odd number of fields in a multi-column grid)\n\tconst shouldLastFieldSpan =\n\t\tcolumns > 1 && visibleFields.length % columns !== 0;\n\n\tconst fieldElements = visibleFields.map((item, index) => {\n\t\tconst isLast = index === visibleFields.length - 1;\n\t\t// Use col-span-full for last item that would be alone in its row\n\t\tconst spanClass = isLast && shouldLastFieldSpan ? \"col-span-full\" : \"\";\n\n\t\treturn (\n\t\t\t<FieldRenderer\n\t\t\t\tkey={item.field}\n\t\t\t\tfieldName={item.field}\n\t\t\t\tfieldDef={fields[item.field]}\n\t\t\t\tcollection={collection}\n\t\t\t\tmode={mode}\n\t\t\t\tregistry={registry}\n\t\t\t\tfieldPrefix={fieldPrefix}\n\t\t\t\tallCollectionsConfig={allCollectionsConfig}\n\t\t\t\tclassName={cn(item.className, spanClass)}\n\t\t\t\trenderEmbeddedFields={({\n\t\t\t\t\tembeddedCollection,\n\t\t\t\t\tembeddedCollectionConfig,\n\t\t\t\t\tfullFieldName,\n\t\t\t\t\tindex: embeddedIndex,\n\t\t\t\t}) => (\n\t\t\t\t\t<AutoFormFields\n\t\t\t\t\t\tcollection={embeddedCollection}\n\t\t\t\t\t\tmode=\"collection\"\n\t\t\t\t\t\tconfig={embeddedCollectionConfig}\n\t\t\t\t\t\tregistry={registry}\n\t\t\t\t\t\tfieldPrefix={`${fullFieldName}.${embeddedIndex}`}\n\t\t\t\t\t\tallCollectionsConfig={allCollectionsConfig}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t/>\n\t\t);\n\t});\n\n\t// Grid uses container query breakpoints (@sm:, @md:, etc.)\n\t// These respond to the nearest @container ancestor (defined in AutoFormFields wrapper)\n\tif (columns > 1) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\"grid gap-4\", gridClass, className)}\n\t\t\t\tstyle={gap ? { gap: getGapStyle(gap) } : undefined}\n\t\t\t>\n\t\t\t\t{fieldElements}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Single column - no grid needed\n\treturn <div className={cn(\"space-y-4\", className)}>{fieldElements}</div>;\n}\n\n/**\n * Render field layout items (fields, sections, tabs)\n *\n * NEW API: fields array can contain:\n * - Field references (string or {field, className})\n * - Section layouts ({ type: 'section', ... })\n * - Tabs layouts ({ type: 'tabs', ... })\n */\nfunction getLayoutKey(item: SectionLayout | TabsLayout): string {\n\tif (item.type === \"tabs\") {\n\t\tconst tabKey = item.tabs\n\t\t\t.map((tab: TabConfig) => tab.id)\n\t\t\t.filter(Boolean)\n\t\t\t.join(\"-\");\n\t\treturn tabKey ? `tabs-${tabKey}` : \"tabs\";\n\t}\n\n\tconst fieldKey = item.fields\n\t\t.map((fieldItem: FieldLayoutItem) => {\n\t\t\tif (isFieldReference(fieldItem)) {\n\t\t\t\treturn getFieldName(fieldItem) ?? \"field\";\n\t\t\t}\n\t\t\tif (typeof fieldItem === \"object\" && \"type\" in fieldItem) {\n\t\t\t\treturn fieldItem.type;\n\t\t\t}\n\t\t\treturn \"item\";\n\t\t})\n\t\t.join(\"-\");\n\n\treturn fieldKey ? `section-${fieldKey}` : \"section\";\n}\n\nfunction renderFieldLayoutItems({\n\tfieldItems,\n\tfields,\n\tcollection,\n\tmode = \"collection\",\n\tregistry,\n\tfieldPrefix,\n\tallCollectionsConfig,\n\texcludedFields,\n\tformValues,\n\tresolveText,\n}: FieldLayoutRendererProps): React.ReactNode {\n\tif (!fieldItems?.length) return null;\n\n\tconst renderedItems = fieldItems.map((item, index) => {\n\t\t// Field reference (string or {field, className})\n\t\tif (isFieldReference(item)) {\n\t\t\tconst fieldName = getFieldName(item);\n\t\t\tif (!fieldName || !fields[fieldName]) return null;\n\n\t\t\t// Check if excluded\n\t\t\tif (excludedFields?.has(fieldName)) return null;\n\n\t\t\t// Check if hidden\n\t\t\tconst fieldDef = fields[fieldName];\n\t\t\tconst fieldOptions = (fieldDef as any)[\"~options\"] || {};\n\t\t\tconst isHidden =\n\t\t\t\ttypeof fieldOptions.hidden === \"function\"\n\t\t\t\t\t? fieldOptions.hidden(formValues)\n\t\t\t\t\t: fieldOptions.hidden === true;\n\t\t\tif (isHidden) return null;\n\n\t\t\treturn (\n\t\t\t\t<FieldRenderer\n\t\t\t\t\tkey={fieldName}\n\t\t\t\t\tfieldName={fieldName}\n\t\t\t\t\tfieldDef={fieldDef}\n\t\t\t\t\tcollection={collection}\n\t\t\t\t\tmode={mode}\n\t\t\t\t\tregistry={registry}\n\t\t\t\t\tfieldPrefix={fieldPrefix}\n\t\t\t\t\tallCollectionsConfig={allCollectionsConfig}\n\t\t\t\t\tclassName={\n\t\t\t\t\t\ttypeof item === \"object\" && \"className\" in item\n\t\t\t\t\t\t\t? item.className\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\trenderEmbeddedFields={({\n\t\t\t\t\t\tembeddedCollection,\n\t\t\t\t\t\tembeddedCollectionConfig,\n\t\t\t\t\t\tfullFieldName,\n\t\t\t\t\t\tindex: embeddedIndex,\n\t\t\t\t\t}) => (\n\t\t\t\t\t\t<AutoFormFields\n\t\t\t\t\t\t\tcollection={embeddedCollection}\n\t\t\t\t\t\t\tmode=\"collection\"\n\t\t\t\t\t\t\tconfig={embeddedCollectionConfig}\n\t\t\t\t\t\t\tregistry={registry}\n\t\t\t\t\t\t\tfieldPrefix={`${fullFieldName}.${embeddedIndex}`}\n\t\t\t\t\t\t\tallCollectionsConfig={allCollectionsConfig}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\t// Layout containers\n\t\tif (typeof item === \"object\" && \"type\" in item) {\n\t\t\tswitch (item.type) {\n\t\t\t\tcase \"tabs\":\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<React.Fragment key={getLayoutKey(item)}>\n\t\t\t\t\t\t\t{renderTabs({\n\t\t\t\t\t\t\t\ttabsLayout: item,\n\t\t\t\t\t\t\t\tfields,\n\t\t\t\t\t\t\t\tcollection,\n\t\t\t\t\t\t\t\tmode,\n\t\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\t\tfieldPrefix,\n\t\t\t\t\t\t\t\tallCollectionsConfig,\n\t\t\t\t\t\t\t\texcludedFields,\n\t\t\t\t\t\t\t\tformValues,\n\t\t\t\t\t\t\t\tresolveText,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t);\n\n\t\t\t\tcase \"section\":\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<React.Fragment key={getLayoutKey(item)}>\n\t\t\t\t\t\t\t{renderSection({\n\t\t\t\t\t\t\t\tsection: item,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tfields,\n\t\t\t\t\t\t\t\tcollection,\n\t\t\t\t\t\t\t\tmode,\n\t\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\t\tfieldPrefix,\n\t\t\t\t\t\t\t\tallCollectionsConfig,\n\t\t\t\t\t\t\t\texcludedFields,\n\t\t\t\t\t\t\t\tformValues,\n\t\t\t\t\t\t\t\tresolveText,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t);\n\n\t\t\t\tdefault:\n\t\t\t\t\treturn null;\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t});\n\n\tconst validItems = renderedItems.filter(Boolean);\n\n\treturn validItems.length === 1 ? (\n\t\tvalidItems[0]\n\t) : (\n\t\t<div className=\"space-y-6\">{validItems}</div>\n\t);\n}\n\n/**\n * Render a section layout\n * Mirrors object field: wrapper (flat|collapsible) + layout (stack|inline|grid)\n */\nfunction renderSection({\n\tsection,\n\tindex,\n\tfields,\n\tcollection,\n\tmode = \"collection\",\n\tregistry,\n\tfieldPrefix,\n\tallCollectionsConfig,\n\texcludedFields,\n\tformValues,\n\tresolveText,\n}: {\n\tsection: SectionLayout;\n\tindex: number;\n\tfields: Record<string, FieldDefinition>;\n\tcollection: string;\n\tmode?: \"collection\" | \"global\";\n\tregistry?: ComponentRegistry;\n\tfieldPrefix?: string;\n\tallCollectionsConfig?: Record<string, CollectionConfig>;\n\texcludedFields?: Set<string>;\n\tformValues: any;\n\tresolveText: (\n\t\ttext: any,\n\t\tfallback?: string,\n\t\tcontextValues?: Record<string, any>,\n\t) => string;\n}): React.ReactNode {\n\t// Check if hidden\n\tconst isHidden = resolveValue(section.hidden, formValues, false);\n\tif (isHidden) return null;\n\n\tconst wrapper = section.wrapper ?? \"flat\";\n\tconst layout = section.layout ?? \"stack\";\n\tconst columns = section.columns ?? 2;\n\tconst gap = section.gap;\n\n\t// Render section fields based on layout mode\n\tconst renderSectionFields = () => {\n\t\tif (layout === \"grid\") {\n\t\t\t// Grid layout - use renderFields with columns\n\t\t\treturn renderFields({\n\t\t\t\tfieldItems: section.fields,\n\t\t\t\tfields,\n\t\t\t\tcollection,\n\t\t\t\tmode,\n\t\t\t\tregistry,\n\t\t\t\tfieldPrefix,\n\t\t\t\tallCollectionsConfig,\n\t\t\t\texcludedFields,\n\t\t\t\tcolumns,\n\t\t\t\tgap,\n\t\t\t\tclassName: section.className,\n\t\t\t});\n\t\t}\n\n\t\tif (layout === \"inline\") {\n\t\t\t// Inline layout - horizontal flexbox\n\t\t\treturn (\n\t\t\t\t<div className={cn(\"flex flex-wrap gap-4\", section.className)}>\n\t\t\t\t\t{section.fields.map((item, _idx) => {\n\t\t\t\t\t\tconst fieldName = getFieldName(item);\n\t\t\t\t\t\tif (!fieldName || !fields[fieldName]) return null;\n\t\t\t\t\t\tif (excludedFields?.has(fieldName)) return null;\n\n\t\t\t\t\t\tconst fieldDef = fields[fieldName];\n\t\t\t\t\t\tconst fieldOptions = (fieldDef as any)[\"~options\"] || {};\n\t\t\t\t\t\tconst isVis =\n\t\t\t\t\t\t\ttypeof fieldOptions.visible === \"function\"\n\t\t\t\t\t\t\t\t? fieldOptions.visible(formValues)\n\t\t\t\t\t\t\t\t: fieldOptions.visible !== false;\n\t\t\t\t\t\tif (!isVis) return null;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<FieldRenderer\n\t\t\t\t\t\t\t\tkey={fieldName}\n\t\t\t\t\t\t\t\tfieldName={fieldName}\n\t\t\t\t\t\t\t\tfieldDef={fieldDef}\n\t\t\t\t\t\t\t\tcollection={collection}\n\t\t\t\t\t\t\t\tmode={mode}\n\t\t\t\t\t\t\t\tregistry={registry}\n\t\t\t\t\t\t\t\tfieldPrefix={fieldPrefix}\n\t\t\t\t\t\t\t\tallCollectionsConfig={allCollectionsConfig}\n\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\ttypeof item === \"object\" && \"className\" in item\n\t\t\t\t\t\t\t\t\t\t? item.className\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trenderEmbeddedFields={({\n\t\t\t\t\t\t\t\t\tembeddedCollection,\n\t\t\t\t\t\t\t\t\tembeddedCollectionConfig,\n\t\t\t\t\t\t\t\t\tfullFieldName,\n\t\t\t\t\t\t\t\t\tindex: embeddedIndex,\n\t\t\t\t\t\t\t\t}) => (\n\t\t\t\t\t\t\t\t\t<AutoFormFields\n\t\t\t\t\t\t\t\t\t\tcollection={embeddedCollection}\n\t\t\t\t\t\t\t\t\t\tmode=\"collection\"\n\t\t\t\t\t\t\t\t\t\tconfig={embeddedCollectionConfig}\n\t\t\t\t\t\t\t\t\t\tregistry={registry}\n\t\t\t\t\t\t\t\t\t\tfieldPrefix={`${fullFieldName}.${embeddedIndex}`}\n\t\t\t\t\t\t\t\t\t\tallCollectionsConfig={allCollectionsConfig}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\t// Stack layout (default) - render using main function\n\t\treturn renderFieldLayoutItems({\n\t\t\tfieldItems: section.fields,\n\t\t\tfields,\n\t\t\tcollection,\n\t\t\tmode,\n\t\t\tregistry,\n\t\t\tfieldPrefix,\n\t\t\tallCollectionsConfig,\n\t\t\texcludedFields,\n\t\t\tformValues,\n\t\t\tresolveText,\n\t\t});\n\t};\n\n\tconst content = renderSectionFields();\n\tif (!content) return null;\n\n\t// Section header\n\tconst header =\n\t\tsection.label || section.description ? (\n\t\t\t<div className=\"mb-4\">\n\t\t\t\t{section.label && (\n\t\t\t\t\t<h3 className=\"text-lg font-semibold\">\n\t\t\t\t\t\t{resolveText(section.label, \"\", formValues)}\n\t\t\t\t\t</h3>\n\t\t\t\t)}\n\t\t\t\t{section.description && (\n\t\t\t\t\t<p className=\"text-sm text-muted-foreground mt-1\">\n\t\t\t\t\t\t{resolveText(section.description, \"\", formValues)}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t) : null;\n\n\t// Collapsible wrapper\n\tif (wrapper === \"collapsible\") {\n\t\tconst value = `section-${index}`;\n\t\tconst defaultOpen = section.defaultCollapsed !== true;\n\n\t\treturn (\n\t\t\t<Accordion\n\t\t\t\tkey={value}\n\t\t\t\tdefaultValue={defaultOpen ? [value] : []}\n\t\t\t\tclassName=\"w-full\"\n\t\t\t>\n\t\t\t\t<AccordionItem value={value} className=\"border rounded-lg px-4\">\n\t\t\t\t\t<AccordionTrigger className=\"hover:no-underline\">\n\t\t\t\t\t\t<span className=\"font-semibold\">\n\t\t\t\t\t\t\t{resolveText(section.label, \"Section\", formValues)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</AccordionTrigger>\n\t\t\t\t\t<AccordionContent className=\"pt-2 pb-4\">\n\t\t\t\t\t\t{section.description && (\n\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground mb-4\">\n\t\t\t\t\t\t\t\t{resolveText(section.description, \"\", formValues)}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</AccordionContent>\n\t\t\t\t</AccordionItem>\n\t\t\t</Accordion>\n\t\t);\n\t}\n\n\t// Flat wrapper (no visual container)\n\treturn (\n\t\t<div className={cn(\"space-y-4\", section.className)}>\n\t\t\t{header}\n\t\t\t{content}\n\t\t</div>\n\t);\n}\n\n/**\n * Render tabs layout\n */\nfunction renderTabs({\n\ttabsLayout,\n\tfields,\n\tcollection,\n\tmode = \"collection\",\n\tregistry,\n\tfieldPrefix,\n\tallCollectionsConfig,\n\texcludedFields,\n\tformValues,\n\tresolveText,\n}: {\n\ttabsLayout: TabsLayout;\n\tfields: Record<string, FieldDefinition>;\n\tcollection: string;\n\tmode?: \"collection\" | \"global\";\n\tregistry?: ComponentRegistry;\n\tfieldPrefix?: string;\n\tallCollectionsConfig?: Record<string, CollectionConfig>;\n\texcludedFields?: Set<string>;\n\tformValues: any;\n\tresolveText: (\n\t\ttext: any,\n\t\tfallback?: string,\n\t\tcontextValues?: Record<string, any>,\n\t) => string;\n}): React.ReactNode {\n\tconst visibleTabs = tabsLayout.tabs.filter(\n\t\t(tab: TabConfig) => !resolveValue(tab.hidden, formValues, false),\n\t);\n\n\tif (!visibleTabs.length) return null;\n\n\tconst defaultTab = visibleTabs[0]?.id;\n\n\treturn (\n\t\t<Tabs defaultValue={defaultTab}>\n\t\t\t<TabsList variant=\"line\">\n\t\t\t\t{visibleTabs.map((tab: TabConfig) => (\n\t\t\t\t\t<TabsTrigger key={tab.id} value={tab.id}>\n\t\t\t\t\t\t{resolveIconElement(tab.icon, { className: \"mr-2 size-4\" })}\n\t\t\t\t\t\t{resolveText(tab.label, tab.id, formValues)}\n\t\t\t\t\t</TabsTrigger>\n\t\t\t\t))}\n\t\t\t</TabsList>\n\t\t\t{visibleTabs.map((tab: TabConfig) => (\n\t\t\t\t<TabsContent key={tab.id} value={tab.id} className=\"mt-4\">\n\t\t\t\t\t{renderFieldLayoutItems({\n\t\t\t\t\t\tfieldItems: tab.fields,\n\t\t\t\t\t\tfields,\n\t\t\t\t\t\tcollection,\n\t\t\t\t\t\tmode,\n\t\t\t\t\t\tregistry,\n\t\t\t\t\t\tfieldPrefix,\n\t\t\t\t\t\tallCollectionsConfig,\n\t\t\t\t\t\texcludedFields,\n\t\t\t\t\t\tformValues,\n\t\t\t\t\t\tresolveText,\n\t\t\t\t\t})}\n\t\t\t\t</TabsContent>\n\t\t\t))}\n\t\t</Tabs>\n\t);\n}\n\n/**\n * Render sidebar content\n */\nfunction renderSidebar({\n\tsidebar,\n\tfields,\n\tcollection,\n\tmode = \"collection\",\n\tregistry,\n\tfieldPrefix,\n\tallCollectionsConfig,\n\tformValues,\n\tresolveText,\n}: {\n\tsidebar: FormSidebarConfig;\n\tfields: Record<string, FieldDefinition>;\n\tcollection: string;\n\tmode?: \"collection\" | \"global\";\n\tregistry?: ComponentRegistry;\n\tfieldPrefix?: string;\n\tallCollectionsConfig?: Record<string, CollectionConfig>;\n\tformValues: any;\n\tresolveText: (\n\t\ttext: any,\n\t\tfallback?: string,\n\t\tcontextValues?: Record<string, any>,\n\t) => string;\n}): React.ReactNode {\n\treturn renderFieldLayoutItems({\n\t\tfieldItems: sidebar.fields,\n\t\tfields,\n\t\tcollection,\n\t\tmode,\n\t\tregistry,\n\t\tfieldPrefix,\n\t\tallCollectionsConfig,\n\t\tformValues,\n\t\tresolveText,\n\t});\n}\n\n/**\n * Extract field names from field layout items recursively\n */\nfunction extractFieldNamesFromFieldItems(\n\tfieldItems?: FieldLayoutItem[],\n): Set<string> {\n\tconst fieldNames = new Set<string>();\n\n\tif (!fieldItems) return fieldNames;\n\n\tfor (const item of fieldItems) {\n\t\t// Field reference\n\t\tif (isFieldReference(item)) {\n\t\t\tconst fieldName = getFieldName(item);\n\t\t\tif (fieldName) fieldNames.add(fieldName);\n\t\t\tcontinue;\n\t\t}\n\n\t\t// Layout containers\n\t\tif (typeof item === \"object\" && \"type\" in item) {\n\t\t\tswitch (item.type) {\n\t\t\t\tcase \"tabs\":\n\t\t\t\t\tfor (const tab of item.tabs) {\n\t\t\t\t\t\tconst tabFields = extractFieldNamesFromFieldItems(tab.fields);\n\t\t\t\t\t\tfor (const f of tabFields) fieldNames.add(f);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase \"section\": {\n\t\t\t\t\tconst sectionFields = extractFieldNamesFromFieldItems(item.fields);\n\t\t\t\t\tfor (const f of sectionFields) fieldNames.add(f);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn fieldNames;\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\n/**\n * AutoFormFields Component\n *\n * Renders form fields based on CollectionBuilderState config.\n * Supports recursive tabs/sections nesting and auto-generates\n * field list when no form config is defined.\n */\nexport function AutoFormFields<T extends Questpie<any>, K extends string>({\n\tcms: _cms,\n\tcollection,\n\tmode = \"collection\",\n\tconfig,\n\tregistry,\n\trenderField,\n\tfieldPrefix,\n\tallCollectionsConfig,\n}: AutoFormFieldsProps<T, K>): React.ReactElement {\n\t// Use the appropriate hook based on mode\n\tconst collectionResult = useCollectionFields(\n\t\tmode === \"collection\" ? collection : \"\",\n\t\t{\n\t\t\tfallbackFields: mode === \"collection\" ? config?.fields : undefined,\n\t\t\tschemaQueryOptions: { enabled: mode === \"collection\" },\n\t\t},\n\t);\n\tconst globalResult = useGlobalFields(mode === \"global\" ? collection : \"\", {\n\t\tschemaQueryOptions: { enabled: mode === \"global\" },\n\t});\n\n\tconst resolvedFields =\n\t\tmode === \"global\"\n\t\t\t? { ...globalResult.fields, ...config?.fields }\n\t\t\t: collectionResult.fields;\n\tconst schema =\n\t\tmode === \"global\" ? (globalResult.schema as any) : collectionResult.schema;\n\tconst form = useFormContext() as any;\n\t// Use useWatch hook (React pattern) instead of form.watch() method\n\t// Watch all form values - the fieldPrefix scoping is handled below\n\tconst watchedValues = useWatch({ control: form.control });\n\n\t// Extract the scoped values if fieldPrefix is provided\n\tconst formValues = React.useMemo(() => {\n\t\tif (!watchedValues) return {};\n\t\tif (!fieldPrefix) return watchedValues as Record<string, any>;\n\t\t// Navigate to the nested path\n\t\tconst parts = fieldPrefix.split(\".\");\n\t\tlet result: any = watchedValues;\n\t\tfor (const part of parts) {\n\t\t\tresult = result?.[part];\n\t\t\tif (result === undefined) return {};\n\t\t}\n\t\treturn (result ?? {}) as Record<string, any>;\n\t}, [watchedValues, fieldPrefix]);\n\n\tconst resolveText = useResolveText();\n\n\t// Get fields config\n\tconst fields = (resolvedFields || {}) as Record<string, FieldDefinition>;\n\n\t// Extract form config from view builder (~config property)\n\tconst schemaFormConfig = mapFormSchemaToConfig(schema?.admin?.form);\n\tconst formConfig =\n\t\t(config?.form as any)?.[\"~config\"] ?? config?.form ?? schemaFormConfig;\n\n\t// Get all field names for auto-generation\n\tconst allFieldNames = Object.keys(fields);\n\n\t// Collect sidebar field names to exclude from main content\n\tconst sidebarFieldNames = formConfig?.sidebar\n\t\t? extractFieldNamesFromFieldItems(formConfig.sidebar.fields)\n\t\t: new Set<string>();\n\n\t// Custom render function provided\n\tif (renderField) {\n\t\treturn (\n\t\t\t<div className=\"space-y-4\">\n\t\t\t\t{allFieldNames.map((fieldName) => {\n\t\t\t\t\tconst fullFieldName = getFullFieldName(fieldName, fieldPrefix);\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<React.Fragment key={fullFieldName}>\n\t\t\t\t\t\t\t{renderField(fullFieldName, fields[fieldName])}\n\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Render main content based on form config\n\tconst renderMainContent = () => {\n\t\t// If form config has fields, render them\n\t\tif (formConfig?.fields?.length) {\n\t\t\treturn renderFieldLayoutItems({\n\t\t\t\tfieldItems: formConfig.fields,\n\t\t\t\tfields,\n\t\t\t\tcollection,\n\t\t\t\tmode,\n\t\t\t\tregistry,\n\t\t\t\tfieldPrefix,\n\t\t\t\tallCollectionsConfig,\n\t\t\t\texcludedFields: sidebarFieldNames,\n\t\t\t\tformValues,\n\t\t\t\tresolveText,\n\t\t\t});\n\t\t}\n\n\t\t// Auto-generate: render all fields not in sidebar\n\t\tconst autoFields = allFieldNames.filter((f) => !sidebarFieldNames.has(f));\n\t\tif (autoFields.length) {\n\t\t\treturn renderFields({\n\t\t\t\tfieldItems: autoFields,\n\t\t\t\tfields,\n\t\t\t\tcollection,\n\t\t\t\tmode,\n\t\t\t\tregistry,\n\t\t\t\tfieldPrefix,\n\t\t\t\tallCollectionsConfig,\n\t\t\t});\n\t\t}\n\n\t\treturn null;\n\t};\n\n\tconst mainContent = renderMainContent();\n\n\t// Check if sidebar layout is needed\n\tconst hasSidebar = formConfig?.sidebar?.fields?.length;\n\n\tif (hasSidebar && formConfig?.sidebar) {\n\t\tconst sidebarContent = renderSidebar({\n\t\t\tsidebar: formConfig.sidebar,\n\t\t\tfields,\n\t\t\tcollection,\n\t\t\tmode,\n\t\t\tregistry,\n\t\t\tfieldPrefix,\n\t\t\tallCollectionsConfig,\n\t\t\tformValues,\n\t\t\tresolveText,\n\t\t});\n\n\t\tconst sidebarPosition = formConfig.sidebar.position || \"right\";\n\n\t\t// Single @container on outermost wrapper for all container queries\n\t\treturn (\n\t\t\t<div className=\"@container w-full\">\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex flex-col-reverse gap-6 @2xl:flex-row\",\n\t\t\t\t\t\tsidebarPosition === \"left\" && \"@2xl:flex-row-reverse\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"min-w-0 flex-1\">{mainContent}</div>\n\t\t\t\t\t{sidebarContent && (\n\t\t\t\t\t\t<aside\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"@2xl:border-l @max-2xl:border-b @max-2xl:pb-4 w-full border-border @2xl:pl-4\",\n\t\t\t\t\t\t\t\t\"w-full @2xl:max-w-xs\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"space-y-4 @2xl:sticky @2xl:h-auto @2xl:top-4\">\n\t\t\t\t\t\t\t\t{sidebarContent}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</aside>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn <div className=\"@container\">{mainContent}</div>;\n}\n"],"mappings":"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"}