@questpie/admin 3.2.7 → 3.3.0

package/dist/client/components/fields/object-array-field.mjs

@@ -3,7 +3,7 @@ import { cn } from "../../lib/utils.mjs";
 import { selectAdmin, useAdminStore } from "../../runtime/provider.mjs";
 import { configureField } from "../../builder/field/field.mjs";
 import { Button } from "../ui/button.mjs";
-import { LocaleBadge } from "./locale-badge.mjs";
+import { FieldCountAccessory, FieldWrapper } from "./field-wrapper.mjs";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../ui/dialog.mjs";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../ui/sheet.mjs";
 import { gridColumnClasses } from "./field-utils.mjs";
@@ -19,7 +19,7 @@ import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
 * Manages arrays of objects with inline, modal, or drawer editing.
 * Similar to EmbeddedCollectionField but with inline field definitions.
 */
-function ItemFieldRenderer({ fieldName, fieldDef, parentName, disabled }) {
+const ItemFieldRenderer = React.memo(function ItemFieldRenderer$1({ fieldName, fieldDef, parentName, disabled }) {
 	const resolveText = useResolveText();
 	const fullName = `${parentName}.${fieldName}`;
 	const options = fieldDef["~options"] || {};
@@ -41,8 +41,8 @@ function ItemFieldRenderer({ fieldName, fieldDef, parentName, disabled }) {
 		locale,
 		...fieldSpecificOptions
 	});
-}
-function ObjectArrayItemFields({ fieldEntries, layout, columns, name, index, disabled }) {
+});
+const ObjectArrayItemFields = React.memo(function ObjectArrayItemFields$1({ fieldEntries, layout, columns, name, index, disabled }) {
 	if (fieldEntries.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "py-2",
 		children: /* @__PURE__ */ jsx("p", {
@@ -68,8 +68,108 @@ function ObjectArrayItemFields({ fieldEntries, layout, columns, name, index, dis
 		className: "space-y-4",
 		children: fieldElements
 	});
+});
+function ObjectArrayItemLabel({ name, index, fallbackLabel, resolveItemLabel }) {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Fragment, { children: resolveItemLabel(useWatch({
+		control,
+		name: `${name}.${index}`
+	}), index) || fallbackLabel });
 }
-function ObjectArrayField({ name, label, description, placeholder, required, disabled, localized, locale, item: itemProp, mode = "inline", layout = "stack", columns = 2, itemLabel: itemLabelProp, orderable = false, minItems, maxItems }) {
+const ObjectArrayItemRow = React.memo(function ObjectArrayItemRow$1({ index, totalCount, fieldEntries, layout, columns, name, mode, orderable, canRemove, disabled, itemFieldsDisabled, resolveItemLabel, onEdit, onMove, onRemove, t }) {
+	const canMoveUp = orderable && index > 0;
+	const canMoveDown = orderable && index < totalCount - 1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "panel-surface overflow-hidden",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "border-border-subtle bg-surface-low flex items-center justify-between border-b px-3 py-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground shrink-0 text-xs tabular-nums",
+					children: ["#", index + 1]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate text-sm font-medium",
+					children: /* @__PURE__ */ jsx(ObjectArrayItemLabel, {
+						name,
+						index,
+						resolveItemLabel
+					})
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: [
+					orderable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						className: "relative after:absolute after:-inset-1",
+						onClick: () => onMove(index, index - 1),
+						disabled: !canMoveUp || disabled,
+						title: t("field.moveUp"),
+						"aria-label": t("field.moveUp"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:caret-up",
+							className: "size-3.5"
+						})
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						className: "relative after:absolute after:-inset-1",
+						onClick: () => onMove(index, index + 1),
+						disabled: !canMoveDown || disabled,
+						title: t("field.moveDown"),
+						"aria-label": t("field.moveDown"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:caret-down",
+							className: "size-3.5"
+						})
+					})] }),
+					mode !== "inline" && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						className: "relative after:absolute after:-inset-1",
+						onClick: () => onEdit(index),
+						disabled,
+						title: t("common.edit"),
+						"aria-label": t("common.edit"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:pencil",
+							className: "size-3.5"
+						})
+					}),
+					canRemove && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						className: "relative after:absolute after:-inset-1",
+						onClick: () => onRemove(index),
+						disabled,
+						title: t("common.remove"),
+						"aria-label": t("common.remove"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:trash",
+							className: "size-3.5"
+						})
+					})
+				]
+			})]
+		}), mode === "inline" && /* @__PURE__ */ jsx("div", {
+			className: "p-3",
+			children: /* @__PURE__ */ jsx(ObjectArrayItemFields, {
+				fieldEntries,
+				layout,
+				columns,
+				name,
+				index,
+				disabled: itemFieldsDisabled
+			})
+		})]
+	});
+});
+function ObjectArrayField({ name, label, description, placeholder, required, disabled, readOnly, error, localized, locale, item: itemProp, mode = "inline", layout = "stack", columns = 2, itemLabel: itemLabelProp, orderable = false, minItems, maxItems }) {
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
 	const resolvedPlaceholder = placeholder ? resolveText(placeholder) : void 0;
@@ -79,10 +179,6 @@ function ObjectArrayField({ name, label, description, placeholder, required, dis
 		control,
 		name
 	});
-	const values = useWatch({
-		control,
-		name
-	});
 	const admin = useAdminStore(selectAdmin);
 	const [activeIndex, setActiveIndex] = React.useState(null);
 	const [isOpen, setIsOpen] = React.useState(false);
@@ -96,9 +192,10 @@ function ObjectArrayField({ name, label, description, placeholder, required, dis
 		}
 		return itemProp;
 	}, [itemProp, admin]);
-	const fieldEntries = Object.entries(itemFields);
-	const canAddMore = !maxItems || fields.length < maxItems;
-	const canRemove = !minItems || fields.length > minItems;
+	const fieldEntries = React.useMemo(() => Object.entries(itemFields), [itemFields]);
+	const withinMaxItems = !maxItems || fields.length < maxItems;
+	const canAddMore = !readOnly && withinMaxItems;
+	const canRemove = !readOnly && (!minItems || fields.length > minItems);
 	const fallbackLabel = resolvedLabel || "Item";
 	const emptyLabel = t("array.empty", { name: fallbackLabel });
 	const addLabel = t("array.addItem", { name: fallbackLabel });
@@ -117,15 +214,23 @@ function ObjectArrayField({ name, label, description, placeholder, required, dis
 		itemLabelProp,
 		resolveText
 	]);
-	const handleAdd = () => {
-		if (disabled || !canAddMore) return;
+	const handleAdd = React.useCallback(() => {
+		if (disabled || readOnly || !canAddMore) return;
 		append(Object.fromEntries(fieldEntries.map(([key]) => [key, void 0])));
 		if (mode !== "inline") {
 			setActiveIndex(fields.length);
 			setIsOpen(true);
 		}
-	};
-	const handleRemove = (index) => {
+	}, [
+		append,
+		canAddMore,
+		disabled,
+		readOnly,
+		fieldEntries,
+		fields.length,
+		mode
+	]);
+	const handleRemove = React.useCallback((index) => {
 		if (!canRemove) return;
 		remove(index);
 		if (activeIndex === null) return;
@@ -133,20 +238,32 @@ function ObjectArrayField({ name, label, description, placeholder, required, dis
 			setIsOpen(false);
 			setActiveIndex(null);
 		} else if (index < activeIndex) setActiveIndex((prev) => prev !== null ? prev - 1 : null);
-	};
-	const handleMove = (from, to) => {
+	}, [
+		activeIndex,
+		canRemove,
+		remove
+	]);
+	const handleMove = React.useCallback((from, to) => {
 		if (to < 0 || to >= fields.length) return;
 		move(from, to);
 		if (activeIndex === null) return;
 		if (activeIndex === from) setActiveIndex(to);
 		else if (activeIndex === to) setActiveIndex(from);
-	};
-	const handleOpenChange = (open) => {
+	}, [
+		activeIndex,
+		fields.length,
+		move
+	]);
+	const handleEdit = React.useCallback((index) => {
+		setActiveIndex(index);
+		setIsOpen(true);
+	}, []);
+	const handleOpenChange = React.useCallback((open) => {
 		setIsOpen(open);
 		if (!open) setActiveIndex(null);
-	};
+	}, []);
 	const emptyState = /* @__PURE__ */ jsx("div", {
-		className: "py-2",
+		className: "panel-surface border-border-subtle border-dashed px-3 py-3",
 		children: /* @__PURE__ */ jsx("p", {
 			className: "text-muted-foreground text-sm text-pretty",
 			children: resolvedPlaceholder || emptyLabel
@@ -158,137 +275,50 @@ function ObjectArrayField({ name, label, description, placeholder, required, dis
 		columns,
 		name,
 		index: activeIndex,
-		disabled
+		disabled: disabled || readOnly
 	}) : null;
-	const editorTitle = activeIndex !== null ? resolveItemLabel(values?.[activeIndex], activeIndex) : fallbackLabel;
+	const editorTitle = activeIndex !== null ? /* @__PURE__ */ jsx(ObjectArrayItemLabel, {
+		name,
+		index: activeIndex,
+		fallbackLabel,
+		resolveItemLabel
+	}) : fallbackLabel;
 	const showEditor = mode === "modal" || mode === "drawer";
-	return /* @__PURE__ */ jsxs("div", {
-		className: "qa-object-array-field space-y-2",
+	return /* @__PURE__ */ jsxs(FieldWrapper, {
+		name,
+		label,
+		description,
+		required,
+		disabled,
+		readOnly,
+		error,
+		localized,
+		locale,
+		labelAccessory: /* @__PURE__ */ jsx(FieldCountAccessory, {
+			count: fields.length,
+			max: maxItems
+		}),
 		children: [
-			label && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsxs("label", {
-					htmlFor: name,
-					className: "text-sm font-medium",
-					children: [
-						resolvedLabel,
-						required && /* @__PURE__ */ jsx("span", {
-							className: "text-destructive",
-							children: "*"
-						}),
-						maxItems && /* @__PURE__ */ jsxs("span", {
-							className: "text-muted-foreground ml-2 text-xs tabular-nums",
-							children: [
-								"(",
-								fields.length,
-								"/",
-								maxItems,
-								")"
-							]
-						})
-					]
-				}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
-			}),
-			description && /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-sm text-pretty",
-				children: resolveText(description)
-			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "space-y-3",
-				children: fields.length === 0 ? emptyState : fields.map((field, index) => {
-					const itemValue = values?.[index];
-					const itemLabel = resolveItemLabel(itemValue, index);
-					const canMoveUp = orderable && index > 0;
-					const canMoveDown = orderable && index < fields.length - 1;
-					return /* @__PURE__ */ jsxs("div", {
-						className: "panel-surface overflow-hidden",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "border-border-subtle bg-surface-low flex items-center justify-between border-b px-3 py-2",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ jsxs("span", {
-									className: "text-muted-foreground text-xs tabular-nums",
-									children: ["#", index + 1]
-								}), /* @__PURE__ */ jsx("span", {
-									className: "text-sm font-medium",
-									children: itemLabel
-								})]
-							}), /* @__PURE__ */ jsxs("div", {
-								className: "flex items-center gap-1",
-								children: [
-									orderable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
-										type: "button",
-										variant: "ghost",
-										size: "icon-sm",
-										className: "relative after:absolute after:-inset-1",
-										onClick: () => handleMove(index, index - 1),
-										disabled: !canMoveUp || disabled,
-										title: t("field.moveUp"),
-										"aria-label": t("field.moveUp"),
-										children: /* @__PURE__ */ jsx(Icon, {
-											icon: "ph:caret-up",
-											className: "size-3.5"
-										})
-									}), /* @__PURE__ */ jsx(Button, {
-										type: "button",
-										variant: "ghost",
-										size: "icon-sm",
-										className: "relative after:absolute after:-inset-1",
-										onClick: () => handleMove(index, index + 1),
-										disabled: !canMoveDown || disabled,
-										title: t("field.moveDown"),
-										"aria-label": t("field.moveDown"),
-										children: /* @__PURE__ */ jsx(Icon, {
-											icon: "ph:caret-down",
-											className: "size-3.5"
-										})
-									})] }),
-									mode !== "inline" && /* @__PURE__ */ jsx(Button, {
-										type: "button",
-										variant: "ghost",
-										size: "icon-sm",
-										className: "relative after:absolute after:-inset-1",
-										onClick: () => {
-											setActiveIndex(index);
-											setIsOpen(true);
-										},
-										disabled,
-										title: t("common.edit"),
-										"aria-label": t("common.edit"),
-										children: /* @__PURE__ */ jsx(Icon, {
-											icon: "ph:pencil",
-											className: "size-3.5"
-										})
-									}),
-									canRemove && /* @__PURE__ */ jsx(Button, {
-										type: "button",
-										variant: "ghost",
-										size: "icon-sm",
-										className: "relative after:absolute after:-inset-1",
-										onClick: () => handleRemove(index),
-										disabled,
-										title: t("common.remove"),
-										"aria-label": t("common.remove"),
-										children: /* @__PURE__ */ jsx(Icon, {
-											icon: "ph:trash",
-											className: "size-3.5"
-										})
-									})
-								]
-							})]
-						}), mode === "inline" && /* @__PURE__ */ jsx("div", {
-							className: "p-3",
-							children: /* @__PURE__ */ jsx(ObjectArrayItemFields, {
-								fieldEntries,
-								layout,
-								columns,
-								name,
-								index,
-								disabled
-							})
-						})]
-					}, field.id);
-				})
+				className: "qa-object-array-field space-y-3",
+				children: fields.length === 0 ? emptyState : fields.map((field, index) => /* @__PURE__ */ jsx(ObjectArrayItemRow, {
+					index,
+					totalCount: fields.length,
+					fieldEntries,
+					layout,
+					columns,
+					name,
+					mode,
+					orderable: orderable && !readOnly,
+					canRemove,
+					disabled,
+					itemFieldsDisabled: disabled || readOnly,
+					resolveItemLabel,
+					onEdit: handleEdit,
+					onMove: handleMove,
+					onRemove: handleRemove,
+					t
+				}, field.id))
 			}),
 			canAddMore && /* @__PURE__ */ jsxs(Button, {
 				type: "button",

package/dist/client/components/fields/object-field.mjs

@@ -2,8 +2,9 @@ import { useResolveText } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
 import { selectAdmin, useAdminStore } from "../../runtime/provider.mjs";
 import { configureField } from "../../builder/field/field.mjs";
+import { Button } from "../ui/button.mjs";
+import { FieldLocaleIndicator, FieldWrapper } from "./field-wrapper.mjs";
 import { gridColumnClasses } from "./field-utils.mjs";
-import { FieldWrapper } from "./field-wrapper.mjs";
 import { FieldLayoutRenderer } from "../layout/field-layout-renderer.mjs";
 import { Icon } from "@iconify/react";
 import * as React from "react";
@@ -16,6 +17,46 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Renders nested fields for JSON object structures.
 * Supports wrapper modes (flat, collapsible) and layout modes (stack, inline, grid).
 */
+function ObjectFieldPanel({ name, label, description, required, disabled, localized, locale, className, isCollapsed, onToggle, children }) {
+	const resolveText = useResolveText();
+	const resolvedLabel = resolveText(label ?? name);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("qa-object-field panel-surface overflow-hidden", className),
+		children: [/* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			onClick: onToggle,
+			className: "h-auto min-h-10 w-full justify-between rounded-none px-3 py-2 text-left",
+			disabled,
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						icon: isCollapsed ? "ph:caret-right" : "ph:caret-down",
+						className: "size-4 shrink-0"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate font-medium",
+						children: resolvedLabel
+					}),
+					required && /* @__PURE__ */ jsx("span", {
+						className: "text-destructive shrink-0",
+						children: "*"
+					})
+				]
+			}), /* @__PURE__ */ jsx(FieldLocaleIndicator, {
+				localized,
+				locale
+			})]
+		}), !isCollapsed && /* @__PURE__ */ jsxs("div", {
+			className: "border-border-subtle space-y-4 border-t p-4",
+			children: [description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm text-pretty",
+				children: resolveText(description)
+			}), children]
+		})]
+	});
+}
 function NestedFieldRenderer({ fieldName, fieldDef, parentName, disabled }) {
 	const resolveText = useResolveText();
 	const fullName = `${parentName}.${fieldName}`;
@@ -25,7 +66,7 @@ function NestedFieldRenderer({ fieldName, fieldDef, parentName, disabled }) {
 		className: "text-destructive text-sm",
 		children: ["No component for field type: ", fieldDef.name]
 	});
-	const { label, description, placeholder, required, disabled: optionsDisabled, readOnly, hidden, localized, locale, ...fieldSpecificOptions } = options;
+	const { label, description, placeholder, required, disabled: optionsDisabled, readOnly, hidden: _hidden, localized, locale, ...fieldSpecificOptions } = options;
 	return /* @__PURE__ */ jsx(Component, {
 		name: fullName,
 		label: resolveText(label),
@@ -43,6 +84,9 @@ function ObjectField({ name, label, description, required, disabled, localized,
 	const resolveText = useResolveText();
 	const admin = useAdminStore(selectAdmin);
 	const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
+	const toggleCollapsed = React.useCallback(() => {
+		setIsCollapsed((current) => !current);
+	}, []);
 	const nestedFields = React.useMemo(() => {
 		if (!fieldsProp) return {};
 		if (typeof fieldsProp === "function") {
@@ -53,56 +97,43 @@ function ObjectField({ name, label, description, required, disabled, localized,
 		}
 		return fieldsProp;
 	}, [fieldsProp, admin]);
-	const fieldEntries = Object.entries(nestedFields);
+	const fieldEntries = React.useMemo(() => Object.entries(nestedFields), [nestedFields]);
+	const layoutCtx = React.useMemo(() => ({
+		renderField: (fieldName) => {
+			const fieldDef = nestedFields[fieldName];
+			if (!fieldDef) return null;
+			return /* @__PURE__ */ jsx(NestedFieldRenderer, {
+				fieldName,
+				fieldDef,
+				parentName: name,
+				disabled
+			}, fieldName);
+		},
+		resolveText: (text, fallback) => resolveText(text, fallback)
+	}), [
+		disabled,
+		name,
+		nestedFields,
+		resolveText
+	]);
 	if (fieldEntries.length === 0) return null;
 	if (formProp?.fields?.length) {
 		const content = /* @__PURE__ */ jsx(FieldLayoutRenderer, {
 			items: formProp.fields,
-			ctx: {
-				renderField: (fieldName, opts) => {
-					const fieldDef = nestedFields[fieldName];
-					if (!fieldDef) return null;
-					return /* @__PURE__ */ jsx(NestedFieldRenderer, {
-						fieldName,
-						fieldDef,
-						parentName: name,
-						disabled
-					}, fieldName);
-				},
-				resolveText: (text, fallback) => resolveText(text, fallback)
-			}
+			ctx: layoutCtx
 		});
-		if (wrapper === "collapsible") return /* @__PURE__ */ jsxs("div", {
-			className: cn("qa-object-field panel-surface", className),
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => setIsCollapsed(!isCollapsed),
-				className: "hover:bg-muted flex min-h-10 w-full items-center justify-between p-3 text-left transition-colors active:scale-[0.96]",
-				disabled,
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [
-						isCollapsed ? /* @__PURE__ */ jsx(Icon, {
-							icon: "ph:caret-right",
-							className: "h-4 w-4"
-						}) : /* @__PURE__ */ jsx(Icon, {
-							icon: "ph:caret-down",
-							className: "h-4 w-4"
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "font-medium",
-							children: resolveText(label ?? name)
-						}),
-						required && /* @__PURE__ */ jsx("span", {
-							className: "text-destructive",
-							children: "*"
-						})
-					]
-				})
-			}), !isCollapsed && /* @__PURE__ */ jsx("div", {
-				className: "border-t p-4",
-				children: content
-			})]
+		if (wrapper === "collapsible") return /* @__PURE__ */ jsx(ObjectFieldPanel, {
+			name,
+			label,
+			description,
+			required,
+			disabled,
+			localized,
+			locale,
+			className,
+			isCollapsed,
+			onToggle: toggleCollapsed,
+			children: content
 		});
 		if (label) return /* @__PURE__ */ jsx(FieldWrapper, {
 			name,
@@ -122,46 +153,24 @@ function ObjectField({ name, label, description, required, disabled, localized,
 			children: content
 		});
 	}
-	if (wrapper === "collapsible" || layout === "collapsible") return /* @__PURE__ */ jsxs("div", {
-		className: cn("qa-object-field panel-surface", className),
-		children: [/* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: () => setIsCollapsed(!isCollapsed),
-			className: "hover:bg-muted flex min-h-10 w-full items-center justify-between p-3 text-left transition-colors active:scale-[0.96]",
-			disabled,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [
-					isCollapsed ? /* @__PURE__ */ jsx(Icon, {
-						icon: "ph:caret-right",
-						className: "h-4 w-4"
-					}) : /* @__PURE__ */ jsx(Icon, {
-						icon: "ph:caret-down",
-						className: "h-4 w-4"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "font-medium",
-						children: resolveText(label ?? name)
-					}),
-					required && /* @__PURE__ */ jsx("span", {
-						className: "text-destructive",
-						children: "*"
-					})
-				]
-			})
-		}), !isCollapsed && /* @__PURE__ */ jsxs("div", {
-			className: "border-t p-4",
-			children: [description && /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground mb-4 text-sm text-pretty",
-				children: resolveText(description)
-			}), /* @__PURE__ */ jsx(NestedFieldsLayout, {
-				fieldEntries,
-				layout,
-				columns,
-				name,
-				disabled
-			})]
-		})]
+	if (wrapper === "collapsible" || layout === "collapsible") return /* @__PURE__ */ jsx(ObjectFieldPanel, {
+		name,
+		label,
+		description,
+		required,
+		disabled,
+		localized,
+		locale,
+		className,
+		isCollapsed,
+		onToggle: toggleCollapsed,
+		children: /* @__PURE__ */ jsx(NestedFieldsLayout, {
+			fieldEntries,
+			layout,
+			columns,
+			name,
+			disabled
+		})
 	});
 	if (label) return /* @__PURE__ */ jsx(FieldWrapper, {
 		name,

package/dist/client/components/fields/relation-picker.mjs

@@ -2,11 +2,11 @@ import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
 import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
 import { resolveIconElement } from "../component-renderer.mjs";
 import { Button } from "../ui/button.mjs";
-import { LocaleBadge } from "./locale-badge.mjs";
 import { getAutoColumns } from "./field-utils.mjs";
 import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
 import { SelectSingle } from "../primitives/select-single.mjs";
 import { ResourceSheet } from "../sheets/resource-sheet.mjs";
+import { LocaleBadge } from "./locale-badge.mjs";
 import { RelationItemsDisplay } from "./relation/relation-items-display.mjs";
 import { Icon } from "@iconify/react";
 import * as React from "react";

package/dist/client/components/fields/relation-select.mjs

@@ -2,13 +2,13 @@ import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
 import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
 import { resolveIconElement } from "../component-renderer.mjs";
-import { LocaleBadge } from "./locale-badge.mjs";
 import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
 import { InputGroupAddon, InputGroupButton } from "../ui/input-group.mjs";
 import { FieldSelectActionGroup } from "../primitives/field-select-control.mjs";
 import { SelectSingle } from "../primitives/select-single.mjs";
 import { useCollectionItem } from "../../hooks/use-collection.mjs";
 import { ResourceSheet } from "../sheets/resource-sheet.mjs";
+import { LocaleBadge } from "./locale-badge.mjs";
 import { Icon } from "@iconify/react";
 import * as React from "react";
 import { useQueryClient } from "@tanstack/react-query";

package/dist/client/components/fields/rich-text-editor/index.mjs

@@ -1,9 +1,9 @@
 import { useResolveText, useTranslation } from "../../../i18n/hooks.mjs";
 import { cn } from "../../../lib/utils.mjs";
-import { LocaleBadge } from "../locale-badge.mjs";
 import { Label } from "../../ui/label.mjs";
 import { Skeleton } from "../../ui/skeleton.mjs";
 import { isModifierShortcut } from "../../../utils/keyboard-shortcuts.mjs";
+import { LocaleBadge } from "../locale-badge.mjs";
 import { createLinkAttributes, isLikelyLinkHref } from "./link-utils.mjs";
 import { RichTextToolbar } from "./toolbar.mjs";
 import { RichTextBubbleMenu } from "./bubble-menu.mjs";