@questpie/admin 0.0.1

package/src/views/collection/auto-form-fields.tsx

@@ -0,0 +1,982 @@
+/**
+ * AutoFormFields Component
+ *
+ * Automatically generates form fields from:
+ * 1. CMS schema (Drizzle columns)
+ * 2. Admin config (field overrides, layout, sections, tabs)
+ *
+ * Replaces manual field definitions!
+ */
+
+import * as React from "react";
+import { useFormContext } from "react-hook-form";
+import { FormField } from "./form-field";
+import type { FormFieldProps } from "./form-field";
+import { RelationSelect } from "../../components/fields/relation-select";
+import { RelationPicker } from "../../components/fields/relation-picker";
+import { RichTextEditor } from "../../components/fields/rich-text-editor";
+import { EmbeddedCollectionField } from "../../components/fields/embedded-collection";
+import { ArrayField } from "../../components/fields/array-field";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "../../components/ui/accordion";
+import {
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "../../components/ui/tabs";
+import { cn } from "../../utils";
+import { useAdminContext } from "../../hooks/admin-provider";
+import type { Questpie } from "questpie";
+import type {
+	EditConfig,
+	FieldConfig,
+	FieldLayout,
+	SectionConfig,
+	SectionLayout,
+	TabConfig,
+} from "../../config";
+import type { ComponentRegistry } from "../../config/component-registry";
+
+type ValueResolver<T> = T | ((values: any) => T);
+type CollectionConfig = {
+	edit?: EditConfig;
+	fields?: Record<string, FieldConfig>;
+};
+
+export interface AutoFormFieldsProps<T extends Questpie<any>, K extends string> {
+	/**
+	 * CMS instance (for schema introspection)
+	 */
+	cms?: T;
+
+	/**
+	 * Collection name
+	 */
+	collection: K;
+
+	/**
+	 * Admin config for this collection
+	 */
+	config?: CollectionConfig;
+
+	/**
+	 * Component registry for custom field types
+	 */
+	registry?: ComponentRegistry;
+
+	/**
+	 * Custom field renderer (fallback)
+	 */
+	renderField?: (
+		fieldName: string,
+		fieldConfig?: FieldConfig,
+	) => React.ReactNode;
+
+	/**
+	 * Field name prefix for nested fields
+	 */
+	fieldPrefix?: string;
+
+	/**
+	 * All collection configs (for embedded collections)
+	 */
+	allCollectionsConfig?: Record<string, CollectionConfig>;
+}
+
+/**
+ * Get default fields for a collection
+ * This would come from CMS schema introspection
+ */
+function getDefaultFields(collection: string): string[] {
+	// TODO: Extract from CMS schema
+	// For now, return common pattern
+	const commonFields = {
+		barbers: ["name", "email", "phone", "bio", "avatar", "isActive"],
+		services: ["name", "description", "duration", "price", "isActive"],
+		appointments: [
+			"customerId",
+			"barberId",
+			"serviceId",
+			"scheduledAt",
+			"status",
+			"notes",
+		],
+		reviews: ["appointmentId", "rating", "comment"],
+	};
+
+	return commonFields[collection as keyof typeof commonFields] || [];
+}
+
+function getFormValues(form: any, fieldPrefix?: string) {
+	if (!form?.watch) return {};
+	const values = fieldPrefix ? form.watch(fieldPrefix) : form.watch();
+	return values ?? {};
+}
+
+function getFullFieldName(fieldName: string, fieldPrefix?: string) {
+	return fieldPrefix ? `${fieldPrefix}.${fieldName}` : fieldName;
+}
+
+function resolveValue<T>(
+	value: ValueResolver<T> | undefined,
+	formValues: any,
+	defaultValue: T,
+): T {
+	if (value === undefined) return defaultValue;
+	if (typeof value === "function") {
+		return (value as (values: any) => T)(formValues);
+	}
+	return value;
+}
+
+function resolveOptions(
+	options:
+		| Array<{ label: string; value: any }>
+		| ((values: any) => Array<{ label: string; value: any }>)
+		| undefined,
+	formValues: any,
+) {
+	if (!options) return undefined;
+	if (typeof options === "function") {
+		return options(formValues);
+	}
+	return options;
+}
+
+function resolveRelationTarget(relationConfig?: FieldConfig["relation"]) {
+	return relationConfig?.targetCollection;
+}
+
+type FieldContext = {
+	fieldName: string;
+	fullFieldName: string;
+	collection: string;
+	fieldConfig?: FieldConfig;
+	fieldValue: any;
+	label: string;
+	description?: string;
+	placeholder?: string;
+	options?: Array<{ label: string; value: any }>;
+	isVisible: boolean;
+	isReadOnly: boolean;
+	isDisabled: boolean;
+	isRequired: boolean;
+	isLocalized: boolean;
+	locale?: string;
+	fieldError?: string;
+	updateValue: (nextValue: any) => void;
+	type?: string;
+};
+
+function getFieldContext({
+	fieldName,
+	fieldConfig,
+	collection,
+	form,
+	fieldPrefix,
+	locale,
+}: {
+	fieldName: string;
+	fieldConfig?: FieldConfig;
+	collection: string;
+	form: any;
+	fieldPrefix?: string;
+	locale?: string;
+}): FieldContext {
+	const formValues = getFormValues(form, fieldPrefix);
+	const fullFieldName = getFullFieldName(fieldName, fieldPrefix);
+	const fieldState = form?.getFieldState
+		? form.getFieldState(fullFieldName)
+		: undefined;
+	const fieldError = fieldState?.error?.message;
+	const fieldValue = formValues[fieldName];
+
+	const label = fieldConfig?.label || fieldName;
+	const description = fieldConfig?.description;
+	const placeholder = fieldConfig?.placeholder;
+
+	const isVisible = resolveValue(fieldConfig?.visible, formValues, true);
+	const isReadOnly = resolveValue(fieldConfig?.readOnly, formValues, false);
+	const isDisabled = resolveValue(fieldConfig?.disabled, formValues, false);
+	const isRequired = resolveValue(fieldConfig?.required, formValues, false);
+	const options = resolveOptions(fieldConfig?.options, formValues);
+	const isLocalized = !!fieldConfig?.localized;
+
+	const type = fieldConfig?.type;
+
+	const updateValue = (nextValue: any) => {
+		if (form?.setValue) {
+			form.setValue(fullFieldName, nextValue, {
+				shouldDirty: true,
+				shouldTouch: true,
+			});
+		}
+	};
+
+	return {
+		fieldName,
+		fullFieldName,
+		collection,
+		fieldConfig,
+		fieldValue,
+		label,
+		description,
+		placeholder,
+		options,
+		isVisible,
+		isReadOnly,
+		isDisabled,
+		isRequired,
+		isLocalized,
+		locale,
+		fieldError,
+		updateValue,
+		type,
+	};
+}
+
+function buildComponentProps(context: FieldContext) {
+	return {
+		key: context.fullFieldName,
+		name: context.fullFieldName,
+		value: context.fieldValue,
+		onChange: context.updateValue,
+		label: context.label,
+		description: context.description,
+		placeholder: context.placeholder,
+		required: context.isRequired,
+		disabled: context.isDisabled,
+		readOnly: context.isReadOnly,
+		error: context.fieldError,
+		localized: context.isLocalized,
+		locale: context.locale,
+	};
+}
+
+function buildRelationProps(context: FieldContext) {
+	return {
+		label: context.label,
+		required: context.isRequired,
+		disabled: context.isDisabled,
+		readOnly: context.isReadOnly,
+		placeholder: context.placeholder,
+		error: context.fieldError,
+		localized: context.isLocalized,
+		locale: context.locale,
+	};
+}
+
+function buildFormFieldProps(context: FieldContext): FormFieldProps {
+	return {
+		name: context.fullFieldName,
+		label: context.label,
+		description: context.description,
+		placeholder: context.placeholder,
+		required: context.isRequired,
+		disabled: context.isDisabled || context.isReadOnly,
+		localized: context.isLocalized,
+		locale: context.locale,
+	};
+}
+
+function renderConfigError(message: string) {
+	return (
+		<div className="rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive">
+			{message}
+		</div>
+	);
+}
+
+function renderFormField(
+	formFieldProps: FormFieldProps,
+	type?: FormFieldProps["type"],
+	extra?: Partial<FormFieldProps>,
+) {
+	return <FormField {...formFieldProps} type={type} {...extra} />;
+}
+
+function renderCustomComponent({
+	context,
+	registry,
+	componentProps,
+}: {
+	context: FieldContext;
+	registry?: ComponentRegistry;
+	componentProps: ReturnType<typeof buildComponentProps>;
+}) {
+	const component = context.fieldConfig?.component;
+	if (!component) return null;
+	const CustomComponent =
+		typeof component === "string"
+			? (
+					registry?.fields as
+						| Record<string, React.ComponentType<any>>
+						| undefined
+				)?.[component] || registry?.custom?.[component]
+			: component;
+	if (!CustomComponent) return null;
+	return <CustomComponent {...componentProps} />;
+}
+
+function renderRelationField({
+	context,
+	relationProps,
+	formFieldProps,
+}: {
+	context: FieldContext;
+	relationProps: ReturnType<typeof buildRelationProps>;
+	formFieldProps: FormFieldProps;
+}) {
+	const relationConfig = context.fieldConfig?.relation;
+	const shouldRender = context.type === "relation" || !!relationConfig;
+	if (!shouldRender) return null;
+
+	if (!relationConfig) {
+		return renderConfigError(
+			`Missing relation config for "${context.fieldName}". Define relation.targetCollection.`,
+		);
+	}
+
+	const targetCollection = resolveRelationTarget(relationConfig);
+
+	if (!targetCollection) {
+		return renderConfigError(
+			`Missing relation.targetCollection for "${context.fieldName}".`,
+		);
+	}
+
+	const baseRelationProps = {
+		key: context.fullFieldName,
+		name: context.fullFieldName,
+		targetCollection,
+		filter: relationConfig?.filter,
+		renderFormFields: undefined,
+		...relationProps,
+	};
+
+	const isMultiple =
+		relationConfig?.mode === "picker" || Array.isArray(context.fieldValue);
+
+	if (isMultiple) {
+		return (
+			<RelationPicker
+				{...baseRelationProps}
+				value={context.fieldValue || []}
+				onChange={context.updateValue}
+				orderable={relationConfig?.orderable}
+			/>
+		);
+	}
+
+	return (
+		<RelationSelect
+			{...baseRelationProps}
+			value={context.fieldValue}
+			onChange={context.updateValue}
+		/>
+	);
+}
+
+function renderEmbeddedField({
+	context,
+	registry,
+	allCollectionsConfig,
+	componentProps,
+}: {
+	context: FieldContext;
+	registry?: ComponentRegistry;
+	allCollectionsConfig?: Record<string, CollectionConfig>;
+	componentProps: ReturnType<typeof buildComponentProps>;
+}) {
+	const embeddedConfig = context.fieldConfig?.embedded;
+	if (!embeddedConfig) return null;
+
+	const embeddedCollection = embeddedConfig.collection;
+	const embeddedCollectionConfig = embeddedCollection
+		? allCollectionsConfig?.[embeddedCollection]
+		: undefined;
+	const EmbeddedComponent = (registry?.fields?.embedded ||
+		EmbeddedCollectionField) as React.ComponentType<any>;
+
+	return (
+		<EmbeddedComponent
+			{...componentProps}
+			value={context.fieldValue || []}
+			collection={embeddedCollection}
+			mode={embeddedConfig?.mode}
+			orderable={embeddedConfig?.orderable}
+			rowLabel={embeddedConfig?.rowLabel}
+			renderFields={(index: number) =>
+				embeddedCollection ? (
+					<AutoFormFields
+						collection={embeddedCollection}
+						config={embeddedCollectionConfig}
+						registry={registry}
+						fieldPrefix={`${context.fullFieldName}.${index}`}
+						allCollectionsConfig={allCollectionsConfig}
+					/>
+				) : null
+			}
+		/>
+	);
+}
+
+function renderArrayField({
+	context,
+	registry,
+	componentProps,
+}: {
+	context: FieldContext;
+	registry?: ComponentRegistry;
+	componentProps: ReturnType<typeof buildComponentProps>;
+}) {
+	const arrayConfig = context.fieldConfig?.array;
+	const shouldRender = context.type === "array" || !!arrayConfig;
+	if (!shouldRender) return null;
+
+	const ArrayComponent = (registry?.fields?.array ||
+		ArrayField) as React.ComponentType<any>;
+	const config = arrayConfig || {};
+
+	return (
+		<ArrayComponent
+			{...componentProps}
+			value={context.fieldValue || []}
+			placeholder={config.placeholder ?? context.placeholder}
+			itemType={config.itemType}
+			options={config.options || context.options}
+			orderable={config.orderable}
+			minItems={config.minItems}
+			maxItems={config.maxItems}
+		/>
+	);
+}
+
+function renderRichTextField({
+	context,
+	registry,
+	componentProps,
+}: {
+	context: FieldContext;
+	registry?: ComponentRegistry;
+	componentProps: ReturnType<typeof buildComponentProps>;
+}) {
+	if (context.type !== "richText") return null;
+	const RichTextComponent = registry?.fields?.richText || RichTextEditor;
+	return (
+		<RichTextComponent {...componentProps} {...context.fieldConfig?.richText} />
+	);
+}
+
+function renderPrimitiveField({
+	context,
+	formFieldProps,
+}: {
+	context: FieldContext;
+	formFieldProps: FormFieldProps;
+}) {
+	if (!context.type) {
+		return renderConfigError(
+			`Missing field type for "${context.fieldName}". Define it in admin config.`,
+		);
+	}
+	if (context.type === "boolean") {
+		return renderFormField(formFieldProps, "switch");
+	}
+	if (context.type === "select" && context.options) {
+		return renderFormField(formFieldProps, "select", {
+			options: context.options,
+		});
+	}
+	return renderFormField(
+		formFieldProps,
+		context.type as FormFieldProps["type"],
+	);
+}
+
+/**
+ * Render a single field with conditional logic
+ */
+function FieldRenderer({
+	fieldName,
+	fieldConfig,
+	collection,
+	registry,
+	fieldPrefix,
+	allCollectionsConfig,
+}: {
+	fieldName: string;
+	fieldConfig?: FieldConfig;
+	collection: string;
+	registry?: ComponentRegistry;
+	fieldPrefix?: string;
+	allCollectionsConfig?: Record<string, CollectionConfig>;
+}) {
+	// Get current form values for conditional rendering
+	const form = useFormContext() as any;
+	const { locale } = useAdminContext<any>();
+	const context = getFieldContext({
+		fieldName,
+		fieldConfig,
+		collection,
+		form,
+		fieldPrefix,
+		locale,
+	});
+
+	if (!context.isVisible) return null;
+
+	const componentProps = buildComponentProps(context);
+	const relationProps = buildRelationProps(context);
+	const formFieldProps = buildFormFieldProps(context);
+
+	const renderers = [
+		() =>
+			renderCustomComponent({
+				context,
+				registry,
+				componentProps,
+			}),
+		() =>
+			renderRelationField({
+				context,
+				relationProps,
+				formFieldProps,
+			}),
+		() =>
+			renderEmbeddedField({
+				context,
+				registry,
+				allCollectionsConfig,
+				componentProps,
+			}),
+		() =>
+			renderArrayField({
+				context,
+				registry,
+				componentProps,
+			}),
+		() =>
+			renderRichTextField({
+				context,
+				registry,
+				componentProps,
+			}),
+		() =>
+			renderPrimitiveField({
+				context,
+				formFieldProps,
+			}),
+	];
+
+	for (const render of renderers) {
+		const node = render();
+		if (node) return node;
+	}
+
+	return null;
+}
+
+const gridColumnClasses: Record<number, string> = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-3",
+	4: "grid-cols-4",
+	5: "grid-cols-5",
+	6: "grid-cols-6",
+	7: "grid-cols-7",
+	8: "grid-cols-8",
+	9: "grid-cols-9",
+	10: "grid-cols-10",
+	11: "grid-cols-11",
+	12: "grid-cols-12",
+};
+
+function getGridColumnsClass(columns?: number, prefix?: "sm" | "md" | "lg") {
+	if (!columns) return "";
+	const base = gridColumnClasses[columns];
+	if (!base) return "";
+	return prefix ? `${prefix}:${base}` : base;
+}
+
+function getGapStyle(gap?: number) {
+	if (gap === undefined) return undefined;
+	return `${gap * 0.25}rem`;
+}
+
+function normalizeSectionFields(
+	fields: string[] | FieldLayout[],
+): FieldLayout[] {
+	if (!fields?.length) return [];
+	if (typeof fields[0] === "string") {
+		return (fields as string[]).map((field) => ({ field }));
+	}
+	return fields as FieldLayout[];
+}
+
+function resolveSpan(span: string | number | undefined, columns: number) {
+	if (!span) return undefined;
+	if (typeof span === "number") return Math.max(1, Math.min(columns, span));
+	if (span === "full") return columns;
+	const fractions: Record<string, number> = {
+		"1/2": 0.5,
+		"1/3": 1 / 3,
+		"2/3": 2 / 3,
+		"1/4": 0.25,
+		"3/4": 0.75,
+	};
+	const fraction = fractions[span];
+	if (!fraction) return undefined;
+	return Math.max(1, Math.round(columns * fraction));
+}
+
+/**
+ * AutoFormFields Component
+ */
+export function AutoFormFields<T extends Questpie<any>, K extends string>({
+	cms: _cms,
+	collection,
+	config,
+	registry,
+	renderField,
+	fieldPrefix,
+	allCollectionsConfig,
+}: AutoFormFieldsProps<T, K>): React.ReactElement {
+	const form = useFormContext() as any;
+	const formValues = getFormValues(form, fieldPrefix);
+
+	// Get field order
+	const fieldOrder =
+		config?.edit?.fields || getDefaultFields(collection as string);
+
+	const excludedFields = new Set(config?.edit?.exclude || []);
+	const sidebarFieldSet = new Set(config?.edit?.sidebar?.fields || []);
+
+	const isFieldExcluded = React.useCallback(
+		(fieldName: string) => {
+			if (excludedFields.has(fieldName)) return true;
+			const fieldConfig = config?.fields?.[fieldName];
+			if (fieldConfig?.hidden) return true;
+			return false;
+		},
+		[config?.fields, excludedFields],
+	);
+
+	const renderFieldNode = React.useCallback(
+		(fieldName: string) => {
+			if (isFieldExcluded(fieldName)) return null;
+			const fieldConfig = config?.fields?.[fieldName];
+			const fullFieldName = getFullFieldName(fieldName, fieldPrefix);
+			if (renderField) {
+				return renderField(fullFieldName, fieldConfig);
+			}
+			return (
+				<FieldRenderer
+					key={fullFieldName}
+					fieldName={fieldName}
+					fieldConfig={fieldConfig}
+					collection={collection as string}
+					registry={registry}
+					fieldPrefix={fieldPrefix}
+					allCollectionsConfig={allCollectionsConfig}
+				/>
+			);
+		},
+		[
+			collection,
+			config?.fields,
+			fieldPrefix,
+			isFieldExcluded,
+			registry,
+			renderField,
+			allCollectionsConfig,
+		],
+	);
+
+	const renderFieldLayout = React.useCallback(
+		(field: FieldLayout, layout: SectionLayout, columns: number) => {
+			const fieldNode = renderFieldNode(field.field);
+			if (!fieldNode) return null;
+
+			const style: React.CSSProperties = {};
+			if (layout === "columns" || layout === "grid") {
+				const span = resolveSpan(field.span, columns);
+				if (span) {
+					style.gridColumn = `span ${span} / span ${span}`;
+				}
+				if (field.rowSpan) {
+					style.gridRow = `span ${field.rowSpan} / span ${field.rowSpan}`;
+				}
+			}
+
+			if (field.width) {
+				style.width = field.width;
+			}
+
+			return (
+				<div
+					key={field.field}
+					style={style}
+					className={cn(
+						layout === "inline" ? "min-w-[180px] flex-1" : "min-w-0",
+					)}
+				>
+					{fieldNode}
+				</div>
+			);
+		},
+		[renderFieldNode],
+	);
+
+	const renderFieldsContainer = React.useCallback(
+		(
+			fields: FieldLayout[],
+			layout: SectionLayout,
+			columns: number,
+			grid?: SectionConfig["grid"],
+		) => {
+			const normalizedFields = fields.filter(
+				(field) => !isFieldExcluded(field.field),
+			);
+			if (!normalizedFields.length) return null;
+
+			if (layout === "inline") {
+				return (
+					<div
+						className="flex flex-wrap gap-4"
+						style={{ gap: getGapStyle(grid?.gap) }}
+					>
+						{normalizedFields.map((field) =>
+							renderFieldLayout(field, layout, columns),
+						)}
+					</div>
+				);
+			}
+
+			if (layout === "columns" || layout === "grid") {
+				const baseClass = getGridColumnsClass(columns);
+				const gridClassName = cn(
+					"grid gap-4",
+					baseClass,
+					getGridColumnsClass(grid?.responsive?.sm, "sm"),
+					getGridColumnsClass(grid?.responsive?.md, "md"),
+					getGridColumnsClass(grid?.responsive?.lg, "lg"),
+				);
+				const style: React.CSSProperties = {
+					gap: getGapStyle(grid?.gap),
+					...(baseClass
+						? {}
+						: {
+								gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+							}),
+				};
+
+				return (
+					<div className={gridClassName} style={style}>
+						{normalizedFields.map((field) =>
+							renderFieldLayout(field, layout, columns),
+						)}
+					</div>
+				);
+			}
+
+			return (
+				<div className="space-y-4">
+					{normalizedFields.map((field) =>
+						renderFieldLayout(field, layout, columns),
+					)}
+				</div>
+			);
+		},
+		[isFieldExcluded, renderFieldLayout],
+	);
+
+	const renderSection = React.useCallback(
+		(section: SectionConfig, index: number, excludedSet?: Set<string>) => {
+			const isVisible = resolveValue(section.visible, formValues, true);
+
+			if (!isVisible) return null;
+
+			const sectionFields = normalizeSectionFields(section.fields).filter(
+				(field) => !excludedSet?.has(field.field),
+			);
+
+			if (!sectionFields.length) return null;
+
+			const layout = section.layout ?? "auto";
+			const columns =
+				layout === "columns"
+					? section.columns || section.grid?.columns || 2
+					: section.grid?.columns || section.columns || 1;
+			const content = renderFieldsContainer(
+				sectionFields,
+				layout,
+				columns,
+				section.grid,
+			);
+
+			if (!content) return null;
+
+			const header =
+				section.title || section.description ? (
+					<div>
+						{section.title && (
+							<h3 className="text-lg font-semibold">{section.title}</h3>
+						)}
+						{section.description && (
+							<p className="text-sm text-muted-foreground">
+								{section.description}
+							</p>
+						)}
+					</div>
+				) : null;
+
+			if (section.collapsible) {
+				const value = `section-${index}`;
+				return (
+					<Accordion
+						key={value}
+						defaultValue={section.defaultOpen ? [value] : []}
+					>
+						<AccordionItem value={value}>
+							<AccordionTrigger>{section.title || "Section"}</AccordionTrigger>
+							<AccordionContent className="space-y-3 pt-2">
+								{section.description && (
+									<p className="text-sm text-muted-foreground">
+										{section.description}
+									</p>
+								)}
+								{content}
+							</AccordionContent>
+						</AccordionItem>
+					</Accordion>
+				);
+			}
+
+			return (
+				<div key={index} className={cn("space-y-4", section.className)}>
+					{header}
+					{content}
+				</div>
+			);
+		},
+		[formValues, renderFieldsContainer],
+	);
+
+	const renderSections = React.useCallback(
+		(sections: SectionConfig[], excludedSet?: Set<string>) => {
+			const renderedSections = sections
+				.map((section, index) => renderSection(section, index, excludedSet))
+				.filter(Boolean);
+
+			if (!renderedSections.length) return null;
+
+			return <div className="space-y-6">{renderedSections}</div>;
+		},
+		[renderSection],
+	);
+
+	const renderTabs = React.useCallback(
+		(tabs: TabConfig[], excludedSet?: Set<string>) => {
+			const visibleTabs = tabs.filter((tab) =>
+				resolveValue(tab.visible, formValues, true),
+			);
+
+			if (!visibleTabs.length) return null;
+
+			const defaultTab = visibleTabs[0]?.id;
+
+			return (
+				<Tabs defaultValue={defaultTab}>
+					<TabsList variant="line">
+						{visibleTabs.map((tab) => (
+							<TabsTrigger key={tab.id} value={tab.id}>
+								{tab.label}
+							</TabsTrigger>
+						))}
+					</TabsList>
+					{visibleTabs.map((tab) => (
+						<TabsContent key={tab.id} value={tab.id}>
+							{tab.sections
+								? renderSections(tab.sections, excludedSet)
+								: renderFieldsContainer(
+										normalizeSectionFields(tab.fields || []).filter(
+											(field) => !excludedSet?.has(field.field),
+										),
+										"auto",
+										1,
+									)}
+						</TabsContent>
+					))}
+				</Tabs>
+			);
+		},
+		[formValues, renderFieldsContainer, renderSections],
+	);
+
+	const visibleFields = fieldOrder.filter(
+		(fieldName) => !isFieldExcluded(fieldName),
+	);
+
+	const defaultContent = config?.edit?.tabs
+		? renderTabs(config.edit.tabs, undefined)
+		: config?.edit?.sections
+			? renderSections(config.edit.sections, undefined)
+			: renderFieldsContainer(normalizeSectionFields(visibleFields), "auto", 1);
+
+	const isSidebarLayout =
+		config?.edit?.layout === "with-sidebar" && sidebarFieldSet.size > 0;
+
+	if (isSidebarLayout) {
+		const sidebarFields = Array.from(sidebarFieldSet).filter(
+			(fieldName) => !isFieldExcluded(fieldName),
+		);
+		const sidebarContent = renderFieldsContainer(
+			normalizeSectionFields(sidebarFields),
+			"auto",
+			1,
+		);
+		const mainContent = config?.edit?.tabs
+			? renderTabs(config.edit.tabs, sidebarFieldSet)
+			: config?.edit?.sections
+				? renderSections(config.edit.sections, sidebarFieldSet)
+				: renderFieldsContainer(
+						normalizeSectionFields(
+							visibleFields.filter(
+								(fieldName) => !sidebarFieldSet.has(fieldName),
+							),
+						),
+						"auto",
+						1,
+					);
+
+		const sidebarPosition = config?.edit?.sidebar?.position || "right";
+		const sidebarWidth = config?.edit?.sidebar?.width || "280px";
+
+		return (
+			<div
+				className={cn(
+					"flex flex-col gap-6 lg:flex-row",
+					sidebarPosition === "left" ? "lg:flex-row-reverse" : "",
+				)}
+			>
+				<div className="min-w-0 flex-1">{mainContent}</div>
+				{sidebarContent && (
+					<aside
+						className="rounded-md border bg-card p-4"
+						style={{ width: sidebarWidth }}
+					>
+						<div className="space-y-4">{sidebarContent}</div>
+					</aside>
+				)}
+			</div>
+		);
+	}
+
+	return <div>{defaultContent}</div>;
+}