@questpie/admin 3.2.4 → 3.2.5

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

@@ -7,7 +7,6 @@ import { LocaleBadge } from "./locale-badge.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";
-import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -20,687 +19,312 @@ 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(t0) {
-	const $ = c(35);
-	const { fieldName, fieldDef, parentName, disabled } = t0;
+function ItemFieldRenderer({ fieldName, fieldDef, parentName, disabled }) {
 	const resolveText = useResolveText();
 	const fullName = `${parentName}.${fieldName}`;
-	let t1;
-	if ($[0] !== fieldDef) {
-		t1 = fieldDef["~options"] || {};
-		$[0] = fieldDef;
-		$[1] = t1;
-	} else t1 = $[1];
-	const options = t1;
+	const options = fieldDef["~options"] || {};
 	const Component = fieldDef.component;
-	if (!Component) {
-		let t2$1;
-		if ($[2] !== fieldDef.name) {
-			t2$1 = /* @__PURE__ */ jsxs("div", {
-				className: "text-destructive text-sm",
-				children: ["No component for field type: ", fieldDef.name]
-			});
-			$[2] = fieldDef.name;
-			$[3] = t2$1;
-		} else t2$1 = $[3];
-		return t2$1;
-	}
-	let description;
-	let fieldSpecificOptions;
-	let label;
-	let locale;
-	let localized;
-	let optionsDisabled;
-	let placeholder;
-	let readOnly;
-	let required;
-	if ($[4] !== options) {
-		const { label: t2$1, description: t3$1, placeholder: t4$1, required: t5$1, disabled: t6$1, readOnly: t7, hidden: _hidden, localized: t8, locale: t9, ...t10 } = options;
-		label = t2$1;
-		description = t3$1;
-		placeholder = t4$1;
-		required = t5$1;
-		optionsDisabled = t6$1;
-		readOnly = t7;
-		localized = t8;
-		locale = t9;
-		fieldSpecificOptions = t10;
-		$[4] = options;
-		$[5] = description;
-		$[6] = fieldSpecificOptions;
-		$[7] = label;
-		$[8] = locale;
-		$[9] = localized;
-		$[10] = optionsDisabled;
-		$[11] = placeholder;
-		$[12] = readOnly;
-		$[13] = required;
-	} else {
-		description = $[5];
-		fieldSpecificOptions = $[6];
-		label = $[7];
-		locale = $[8];
-		localized = $[9];
-		optionsDisabled = $[10];
-		placeholder = $[11];
-		readOnly = $[12];
-		required = $[13];
-	}
-	let t2;
-	if ($[14] !== label || $[15] !== resolveText) {
-		t2 = resolveText(label);
-		$[14] = label;
-		$[15] = resolveText;
-		$[16] = t2;
-	} else t2 = $[16];
-	let t3;
-	if ($[17] !== description || $[18] !== resolveText) {
-		t3 = resolveText(description);
-		$[17] = description;
-		$[18] = resolveText;
-		$[19] = t3;
-	} else t3 = $[19];
-	let t4;
-	if ($[20] !== placeholder || $[21] !== resolveText) {
-		t4 = resolveText(placeholder);
-		$[20] = placeholder;
-		$[21] = resolveText;
-		$[22] = t4;
-	} else t4 = $[22];
-	const t5 = disabled || optionsDisabled;
-	let t6;
-	if ($[23] !== Component || $[24] !== fieldSpecificOptions || $[25] !== fullName || $[26] !== locale || $[27] !== localized || $[28] !== readOnly || $[29] !== required || $[30] !== t2 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Component, {
-			name: fullName,
-			label: t2,
-			description: t3,
-			placeholder: t4,
-			required,
-			disabled: t5,
-			readOnly,
-			localized,
-			locale,
-			...fieldSpecificOptions
-		});
-		$[23] = Component;
-		$[24] = fieldSpecificOptions;
-		$[25] = fullName;
-		$[26] = locale;
-		$[27] = localized;
-		$[28] = readOnly;
-		$[29] = required;
-		$[30] = t2;
-		$[31] = t3;
-		$[32] = t4;
-		$[33] = t5;
-		$[34] = t6;
-	} else t6 = $[34];
-	return t6;
+	if (!Component) return /* @__PURE__ */ jsxs("div", {
+		className: "text-destructive text-sm",
+		children: ["No component for field type: ", fieldDef.name]
+	});
+	const { label, description, placeholder, required, disabled: optionsDisabled, readOnly, hidden: _hidden, localized, locale, ...fieldSpecificOptions } = options;
+	return /* @__PURE__ */ jsx(Component, {
+		name: fullName,
+		label: resolveText(label),
+		description: resolveText(description),
+		placeholder: resolveText(placeholder),
+		required,
+		disabled: disabled || optionsDisabled,
+		readOnly,
+		localized,
+		locale,
+		...fieldSpecificOptions
+	});
 }
-function ObjectArrayItemFields(t0) {
-	const $ = c(19);
-	const { fieldEntries, layout, columns, name, index, disabled } = t0;
-	if (fieldEntries.length === 0) {
-		let t1$1;
-		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t1$1 = /* @__PURE__ */ jsx("div", {
-				className: "py-2",
-				children: /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground text-sm text-pretty",
-					children: "No fields configured for items."
-				})
-			});
-			$[0] = t1$1;
-		} else t1$1 = $[0];
-		return t1$1;
-	}
-	let t1;
-	if ($[1] !== disabled || $[2] !== fieldEntries || $[3] !== index || $[4] !== name) {
-		let t2$1;
-		if ($[6] !== disabled || $[7] !== index || $[8] !== name) {
-			t2$1 = (t3) => {
-				const [fieldName, fieldDef] = t3;
-				return /* @__PURE__ */ jsx(ItemFieldRenderer, {
-					fieldName,
-					fieldDef,
-					parentName: `${name}.${index}`,
-					disabled
-				}, fieldName);
-			};
-			$[6] = disabled;
-			$[7] = index;
-			$[8] = name;
-			$[9] = t2$1;
-		} else t2$1 = $[9];
-		t1 = fieldEntries.map(t2$1);
-		$[1] = disabled;
-		$[2] = fieldEntries;
-		$[3] = index;
-		$[4] = name;
-		$[5] = t1;
-	} else t1 = $[5];
-	const fieldElements = t1;
-	if (layout === "inline") {
-		let t2$1;
-		if ($[10] !== fieldElements) {
-			t2$1 = /* @__PURE__ */ jsx("div", {
-				className: "flex flex-wrap items-end gap-2",
-				children: fieldElements
-			});
-			$[10] = fieldElements;
-			$[11] = t2$1;
-		} else t2$1 = $[11];
-		return t2$1;
-	}
-	if (layout === "grid") {
-		const t2$1 = gridColumnClasses[columns] || "grid-cols-2";
-		let t3;
-		if ($[12] !== t2$1) {
-			t3 = cn("grid gap-4", t2$1);
-			$[12] = t2$1;
-			$[13] = t3;
-		} else t3 = $[13];
-		let t4;
-		if ($[14] !== fieldElements || $[15] !== t3) {
-			t4 = /* @__PURE__ */ jsx("div", {
-				className: t3,
-				children: fieldElements
-			});
-			$[14] = fieldElements;
-			$[15] = t3;
-			$[16] = t4;
-		} else t4 = $[16];
-		return t4;
-	}
-	let t2;
-	if ($[17] !== fieldElements) {
-		t2 = /* @__PURE__ */ jsx("div", {
-			className: "space-y-4",
-			children: fieldElements
-		});
-		$[17] = fieldElements;
-		$[18] = t2;
-	} else t2 = $[18];
-	return t2;
+function ObjectArrayItemFields({ fieldEntries, layout, columns, name, index, disabled }) {
+	if (fieldEntries.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "py-2",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm text-pretty",
+			children: "No fields configured for items."
+		})
+	});
+	const fieldElements = fieldEntries.map(([fieldName, fieldDef]) => /* @__PURE__ */ jsx(ItemFieldRenderer, {
+		fieldName,
+		fieldDef,
+		parentName: `${name}.${index}`,
+		disabled
+	}, fieldName));
+	if (layout === "inline") return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-end gap-2",
+		children: fieldElements
+	});
+	if (layout === "grid") return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-4", gridColumnClasses[columns] || "grid-cols-2"),
+		children: fieldElements
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-4",
+		children: fieldElements
+	});
 }
-function ObjectArrayField(t0) {
-	const $ = c(118);
-	const { name, label, description, placeholder, required, disabled, localized, locale, item: itemProp, mode: t1, layout: t2, columns: t3, itemLabel: itemLabelProp, orderable: t4, minItems, maxItems } = t0;
-	const mode = t1 === void 0 ? "inline" : t1;
-	const layout = t2 === void 0 ? "stack" : t2;
-	const columns = t3 === void 0 ? 2 : t3;
-	const orderable = t4 === void 0 ? false : t4;
+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 { t } = useTranslation();
 	const resolveText = useResolveText();
-	let t5;
-	if ($[0] !== placeholder || $[1] !== resolveText) {
-		t5 = placeholder ? resolveText(placeholder) : void 0;
-		$[0] = placeholder;
-		$[1] = resolveText;
-		$[2] = t5;
-	} else t5 = $[2];
-	const resolvedPlaceholder = t5;
+	const resolvedPlaceholder = placeholder ? resolveText(placeholder) : void 0;
 	const resolvedLabel = label ? resolveText(label) : void 0;
 	const { control } = useFormContext();
-	let t6;
-	if ($[3] !== control || $[4] !== name) {
-		t6 = {
-			control,
-			name
-		};
-		$[3] = control;
-		$[4] = name;
-		$[5] = t6;
-	} else t6 = $[5];
-	const { fields, append, remove, move } = useFieldArray(t6);
-	let t7;
-	if ($[6] !== control || $[7] !== name) {
-		t7 = {
-			control,
-			name
-		};
-		$[6] = control;
-		$[7] = name;
-		$[8] = t7;
-	} else t7 = $[8];
-	const values = useWatch(t7);
+	const { fields, append, remove, move } = useFieldArray({
+		control,
+		name
+	});
+	const values = useWatch({
+		control,
+		name
+	});
 	const admin = useAdminStore(selectAdmin);
 	const [activeIndex, setActiveIndex] = React.useState(null);
 	const [isOpen, setIsOpen] = React.useState(false);
-	let t8;
-	bb0: {
-		if (!itemProp) {
-			let t9$1;
-			if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-				t9$1 = {};
-				$[9] = t9$1;
-			} else t9$1 = $[9];
-			t8 = t9$1;
-			break bb0;
-		}
+	const itemFields = React.useMemo(() => {
+		if (!itemProp) return {};
 		if (typeof itemProp === "function") {
-			let t9$1;
-			if ($[10] !== admin || $[11] !== itemProp) {
-				const registeredFields = admin.getFields();
-				const r = {};
-				for (const key in registeredFields) r[key] = (opts) => configureField(registeredFields[key], opts ?? {});
-				t9$1 = itemProp({ r });
-				$[10] = admin;
-				$[11] = itemProp;
-				$[12] = t9$1;
-			} else t9$1 = $[12];
-			t8 = t9$1;
-			break bb0;
+			const registeredFields = admin.getFields();
+			const r = {};
+			for (const key in registeredFields) r[key] = (opts) => configureField(registeredFields[key], opts ?? {});
+			return itemProp({ r });
 		}
-		t8 = itemProp;
-	}
-	const itemFields = t8;
-	let t9;
-	if ($[13] !== itemFields) {
-		t9 = Object.entries(itemFields);
-		$[13] = itemFields;
-		$[14] = t9;
-	} else t9 = $[14];
-	const fieldEntries = t9;
+		return itemProp;
+	}, [itemProp, admin]);
+	const fieldEntries = Object.entries(itemFields);
 	const canAddMore = !maxItems || fields.length < maxItems;
 	const canRemove = !minItems || fields.length > minItems;
 	const fallbackLabel = resolvedLabel || "Item";
 	const emptyLabel = t("array.empty", { name: fallbackLabel });
 	const addLabel = t("array.addItem", { name: fallbackLabel });
-	let t10;
-	if ($[15] !== fallbackLabel || $[16] !== itemLabelProp || $[17] !== resolveText) {
-		t10 = (item, index) => {
-			if (typeof itemLabelProp === "function") {
-				const labelValue = itemLabelProp(item, index);
-				if (labelValue) return labelValue;
-			}
-			if (typeof itemLabelProp === "string") return resolveText(itemLabelProp);
-			if (item?.name) return String(item.name);
-			if (item?.title) return String(item.title);
-			if (item?.label) return String(item.label);
-			return `${fallbackLabel} ${index + 1}`;
-		};
-		$[15] = fallbackLabel;
-		$[16] = itemLabelProp;
-		$[17] = resolveText;
-		$[18] = t10;
-	} else t10 = $[18];
-	const resolveItemLabel = t10;
-	let t11;
-	if ($[19] !== append || $[20] !== canAddMore || $[21] !== disabled || $[22] !== fieldEntries || $[23] !== fields.length || $[24] !== mode || $[25] !== setActiveIndex || $[26] !== setIsOpen) {
-		t11 = () => {
-			if (disabled || !canAddMore) return;
-			append(Object.fromEntries(fieldEntries.map(_temp)));
-			if (mode !== "inline") {
-				setActiveIndex(fields.length);
-				setIsOpen(true);
-			}
-		};
-		$[19] = append;
-		$[20] = canAddMore;
-		$[21] = disabled;
-		$[22] = fieldEntries;
-		$[23] = fields.length;
-		$[24] = mode;
-		$[25] = setActiveIndex;
-		$[26] = setIsOpen;
-		$[27] = t11;
-	} else t11 = $[27];
-	const handleAdd = t11;
-	let t12;
-	if ($[28] !== activeIndex || $[29] !== canRemove || $[30] !== remove || $[31] !== setActiveIndex || $[32] !== setIsOpen) {
-		t12 = (index_0) => {
-			if (!canRemove) return;
-			remove(index_0);
-			if (activeIndex === null) return;
-			if (index_0 === activeIndex) {
-				setIsOpen(false);
-				setActiveIndex(null);
-			} else if (index_0 < activeIndex) setActiveIndex(_temp2);
-		};
-		$[28] = activeIndex;
-		$[29] = canRemove;
-		$[30] = remove;
-		$[31] = setActiveIndex;
-		$[32] = setIsOpen;
-		$[33] = t12;
-	} else t12 = $[33];
-	const handleRemove = t12;
-	let t13;
-	if ($[34] !== activeIndex || $[35] !== fields.length || $[36] !== move || $[37] !== setActiveIndex) {
-		t13 = (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);
-		};
-		$[34] = activeIndex;
-		$[35] = fields.length;
-		$[36] = move;
-		$[37] = setActiveIndex;
-		$[38] = t13;
-	} else t13 = $[38];
-	const handleMove = t13;
-	let t14;
-	if ($[39] !== setActiveIndex || $[40] !== setIsOpen) {
-		t14 = (open) => {
-			setIsOpen(open);
-			if (!open) setActiveIndex(null);
-		};
-		$[39] = setActiveIndex;
-		$[40] = setIsOpen;
-		$[41] = t14;
-	} else t14 = $[41];
-	const handleOpenChange = t14;
-	const t15 = resolvedPlaceholder || emptyLabel;
-	let t16;
-	if ($[42] !== t15) {
-		t16 = /* @__PURE__ */ jsx("div", {
-			className: "py-2",
-			children: /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-sm text-pretty",
-				children: t15
-			})
-		});
-		$[42] = t15;
-		$[43] = t16;
-	} else t16 = $[43];
-	const emptyState = t16;
-	let t17;
-	if ($[44] !== activeIndex || $[45] !== columns || $[46] !== disabled || $[47] !== fieldEntries || $[48] !== layout || $[49] !== name) {
-		t17 = activeIndex !== null ? /* @__PURE__ */ jsx(ObjectArrayItemFields, {
-			fieldEntries,
-			layout,
-			columns,
-			name,
-			index: activeIndex,
-			disabled
-		}) : null;
-		$[44] = activeIndex;
-		$[45] = columns;
-		$[46] = disabled;
-		$[47] = fieldEntries;
-		$[48] = layout;
-		$[49] = name;
-		$[50] = t17;
-	} else t17 = $[50];
-	const editorContent = t17;
-	let t18;
-	if ($[51] !== activeIndex || $[52] !== fallbackLabel || $[53] !== resolveItemLabel || $[54] !== values) {
-		t18 = activeIndex !== null ? resolveItemLabel(values?.[activeIndex], activeIndex) : fallbackLabel;
-		$[51] = activeIndex;
-		$[52] = fallbackLabel;
-		$[53] = resolveItemLabel;
-		$[54] = values;
-		$[55] = t18;
-	} else t18 = $[55];
-	const editorTitle = t18;
-	const showEditor = mode === "modal" || mode === "drawer";
-	let t19;
-	if ($[56] !== fields.length || $[57] !== label || $[58] !== locale || $[59] !== localized || $[60] !== maxItems || $[61] !== name || $[62] !== required || $[63] !== resolvedLabel) {
-		t19 = 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" })]
-		});
-		$[56] = fields.length;
-		$[57] = label;
-		$[58] = locale;
-		$[59] = localized;
-		$[60] = maxItems;
-		$[61] = name;
-		$[62] = required;
-		$[63] = resolvedLabel;
-		$[64] = t19;
-	} else t19 = $[64];
-	let t20;
-	if ($[65] !== description || $[66] !== resolveText) {
-		t20 = description && /* @__PURE__ */ jsx("p", {
+	const resolveItemLabel = React.useCallback((item, index) => {
+		if (typeof itemLabelProp === "function") {
+			const labelValue = itemLabelProp(item, index);
+			if (labelValue) return labelValue;
+		}
+		if (typeof itemLabelProp === "string") return resolveText(itemLabelProp);
+		if (item?.name) return String(item.name);
+		if (item?.title) return String(item.title);
+		if (item?.label) return String(item.label);
+		return `${fallbackLabel} ${index + 1}`;
+	}, [
+		fallbackLabel,
+		itemLabelProp,
+		resolveText
+	]);
+	const handleAdd = () => {
+		if (disabled || !canAddMore) return;
+		append(Object.fromEntries(fieldEntries.map(([key]) => [key, void 0])));
+		if (mode !== "inline") {
+			setActiveIndex(fields.length);
+			setIsOpen(true);
+		}
+	};
+	const handleRemove = (index) => {
+		if (!canRemove) return;
+		remove(index);
+		if (activeIndex === null) return;
+		if (index === activeIndex) {
+			setIsOpen(false);
+			setActiveIndex(null);
+		} else if (index < activeIndex) setActiveIndex((prev) => prev !== null ? prev - 1 : null);
+	};
+	const handleMove = (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) => {
+		setIsOpen(open);
+		if (!open) setActiveIndex(null);
+	};
+	const emptyState = /* @__PURE__ */ jsx("div", {
+		className: "py-2",
+		children: /* @__PURE__ */ jsx("p", {
 			className: "text-muted-foreground text-sm text-pretty",
-			children: resolveText(description)
-		});
-		$[65] = description;
-		$[66] = resolveText;
-		$[67] = t20;
-	} else t20 = $[67];
-	let t21;
-	if ($[68] !== canRemove || $[69] !== columns || $[70] !== disabled || $[71] !== emptyState || $[72] !== fieldEntries || $[73] !== fields || $[74] !== handleMove || $[75] !== handleRemove || $[76] !== layout || $[77] !== mode || $[78] !== name || $[79] !== orderable || $[80] !== resolveItemLabel || $[81] !== setActiveIndex || $[82] !== setIsOpen || $[83] !== t || $[84] !== values) {
-		t21 = fields.length === 0 ? emptyState : fields.map((field, index_1) => {
-			const itemValue = values?.[index_1];
-			const itemLabel = resolveItemLabel(itemValue, index_1);
-			const canMoveUp = orderable && index_1 > 0;
-			const canMoveDown = orderable && index_1 < 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 + 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_1, index_1 - 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_1, index_1 + 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_1);
-									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_1),
-								disabled,
-								title: t("common.remove"),
-								"aria-label": t("common.remove"),
-								children: /* @__PURE__ */ jsx(Icon, {
-									icon: "ph:trash",
-									className: "size-3.5"
-								})
+			children: resolvedPlaceholder || emptyLabel
+		})
+	});
+	const editorContent = activeIndex !== null ? /* @__PURE__ */ jsx(ObjectArrayItemFields, {
+		fieldEntries,
+		layout,
+		columns,
+		name,
+		index: activeIndex,
+		disabled
+	}) : null;
+	const editorTitle = activeIndex !== null ? resolveItemLabel(values?.[activeIndex], activeIndex) : fallbackLabel;
+	const showEditor = mode === "modal" || mode === "drawer";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "qa-object-array-field space-y-2",
+		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);
+				})
+			}),
+			canAddMore && /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				onClick: handleAdd,
+				disabled,
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:plus",
+					className: "h-4 w-4"
+				}), addLabel]
+			}),
+			showEditor && mode === "modal" && /* @__PURE__ */ jsx(Dialog, {
+				open: isOpen,
+				onOpenChange: handleOpenChange,
+				children: /* @__PURE__ */ jsxs(DialogContent, {
+					className: "sm:max-w-2xl",
+					children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: editorTitle }), description && /* @__PURE__ */ jsx(DialogDescription, { children: resolveText(description) })] }), /* @__PURE__ */ jsx("div", {
+						className: "space-y-4",
+						children: editorContent
 					})]
-				}), mode === "inline" && /* @__PURE__ */ jsx("div", {
-					className: "p-3",
-					children: /* @__PURE__ */ jsx(ObjectArrayItemFields, {
-						fieldEntries,
-						layout,
-						columns,
-						name,
-						index: index_1,
-						disabled
-					})
-				})]
-			}, field.id);
-		});
-		$[68] = canRemove;
-		$[69] = columns;
-		$[70] = disabled;
-		$[71] = emptyState;
-		$[72] = fieldEntries;
-		$[73] = fields;
-		$[74] = handleMove;
-		$[75] = handleRemove;
-		$[76] = layout;
-		$[77] = mode;
-		$[78] = name;
-		$[79] = orderable;
-		$[80] = resolveItemLabel;
-		$[81] = setActiveIndex;
-		$[82] = setIsOpen;
-		$[83] = t;
-		$[84] = values;
-		$[85] = t21;
-	} else t21 = $[85];
-	let t22;
-	if ($[86] !== t21) {
-		t22 = /* @__PURE__ */ jsx("div", {
-			className: "space-y-3",
-			children: t21
-		});
-		$[86] = t21;
-		$[87] = t22;
-	} else t22 = $[87];
-	let t23;
-	if ($[88] !== addLabel || $[89] !== canAddMore || $[90] !== disabled || $[91] !== handleAdd) {
-		t23 = canAddMore && /* @__PURE__ */ jsxs(Button, {
-			type: "button",
-			variant: "outline",
-			onClick: handleAdd,
-			disabled,
-			children: [/* @__PURE__ */ jsx(Icon, {
-				icon: "ph:plus",
-				className: "h-4 w-4"
-			}), addLabel]
-		});
-		$[88] = addLabel;
-		$[89] = canAddMore;
-		$[90] = disabled;
-		$[91] = handleAdd;
-		$[92] = t23;
-	} else t23 = $[92];
-	let t24;
-	if ($[93] !== description || $[94] !== editorContent || $[95] !== editorTitle || $[96] !== handleOpenChange || $[97] !== isOpen || $[98] !== mode || $[99] !== resolveText || $[100] !== showEditor) {
-		t24 = showEditor && mode === "modal" && /* @__PURE__ */ jsx(Dialog, {
-			open: isOpen,
-			onOpenChange: handleOpenChange,
-			children: /* @__PURE__ */ jsxs(DialogContent, {
-				className: "sm:max-w-2xl",
-				children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: editorTitle }), description && /* @__PURE__ */ jsx(DialogDescription, { children: resolveText(description) })] }), /* @__PURE__ */ jsx("div", {
-					className: "space-y-4",
-					children: editorContent
-				})]
-			})
-		});
-		$[93] = description;
-		$[94] = editorContent;
-		$[95] = editorTitle;
-		$[96] = handleOpenChange;
-		$[97] = isOpen;
-		$[98] = mode;
-		$[99] = resolveText;
-		$[100] = showEditor;
-		$[101] = t24;
-	} else t24 = $[101];
-	let t25;
-	if ($[102] !== description || $[103] !== editorContent || $[104] !== editorTitle || $[105] !== handleOpenChange || $[106] !== isOpen || $[107] !== mode || $[108] !== resolveText || $[109] !== showEditor) {
-		t25 = showEditor && mode === "drawer" && /* @__PURE__ */ jsx(Sheet, {
-			open: isOpen,
-			onOpenChange: handleOpenChange,
-			children: /* @__PURE__ */ jsxs(SheetContent, {
-				side: "right",
-				className: "sm:max-w-lg",
-				children: [/* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsx(SheetTitle, { children: editorTitle }), description && /* @__PURE__ */ jsx(SheetDescription, { children: resolveText(description) })] }), /* @__PURE__ */ jsx("div", {
-					className: "space-y-4 p-4",
-					children: editorContent
-				})]
+				})
+			}),
+			showEditor && mode === "drawer" && /* @__PURE__ */ jsx(Sheet, {
+				open: isOpen,
+				onOpenChange: handleOpenChange,
+				children: /* @__PURE__ */ jsxs(SheetContent, {
+					side: "right",
+					className: "sm:max-w-lg",
+					children: [/* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsx(SheetTitle, { children: editorTitle }), description && /* @__PURE__ */ jsx(SheetDescription, { children: resolveText(description) })] }), /* @__PURE__ */ jsx("div", {
+						className: "space-y-4 p-4",
+						children: editorContent
+					})]
+				})
 			})
-		});
-		$[102] = description;
-		$[103] = editorContent;
-		$[104] = editorTitle;
-		$[105] = handleOpenChange;
-		$[106] = isOpen;
-		$[107] = mode;
-		$[108] = resolveText;
-		$[109] = showEditor;
-		$[110] = t25;
-	} else t25 = $[110];
-	let t26;
-	if ($[111] !== t19 || $[112] !== t20 || $[113] !== t22 || $[114] !== t23 || $[115] !== t24 || $[116] !== t25) {
-		t26 = /* @__PURE__ */ jsxs("div", {
-			className: "qa-object-array-field space-y-2",
-			children: [
-				t19,
-				t20,
-				t22,
-				t23,
-				t24,
-				t25
-			]
-		});
-		$[111] = t19;
-		$[112] = t20;
-		$[113] = t22;
-		$[114] = t23;
-		$[115] = t24;
-		$[116] = t25;
-		$[117] = t26;
-	} else t26 = $[117];
-	return t26;
-}
-function _temp2(prev) {
-	return prev !== null ? prev - 1 : null;
-}
-function _temp(t0) {
-	const [key_0] = t0;
-	return [key_0, void 0];
+		]
+	});
 }
 
 //#endregion