@questpie/admin 1.1.0 → 2.0.0

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

@@ -0,0 +1,313 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { selectAdmin, useAdminStore } from "../../runtime/provider.mjs";
+import { Button } from "../ui/button.mjs";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../ui/dialog.mjs";
+import { createFieldRegistryProxy } from "../../builder/proxies.mjs";
+import { gridColumnClasses } from "./field-utils.mjs";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../ui/sheet.mjs";
+import { LocaleBadge } from "./locale-badge.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/object-array-field.tsx
+/**
+* ObjectArrayField Component
+*
+* 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 resolveText = useResolveText();
+	const fullName = `${parentName}.${fieldName}`;
+	const options = fieldDef["~options"] || {};
+	const Component = fieldDef.field?.component;
+	if (!Component) return /* @__PURE__ */ jsxs("div", {
+		className: "text-sm text-destructive",
+		children: ["No component for field type: ", fieldDef.name]
+	});
+	const { label, description, placeholder, required, disabled: optionsDisabled, readOnly, 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 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();
+	const resolvedPlaceholder = placeholder ? resolveText(placeholder) : void 0;
+	const resolvedLabel = label ? resolveText(label) : void 0;
+	const { control } = useFormContext();
+	const { fields, append, remove, move } = useFieldArray({
+		control,
+		name
+	});
+	const values = useWatch({
+		control,
+		name
+	});
+	const admin = useAdminStore(selectAdmin);
+	const [activeIndex, setActiveIndex] = React$1.useState(null);
+	const [isOpen, setIsOpen] = React$1.useState(false);
+	const itemFields = React$1.useMemo(() => {
+		if (!itemProp) return {};
+		if (typeof itemProp === "function") return itemProp({ r: createFieldRegistryProxy(admin.getFields()) });
+		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 });
+	const resolveItemLabel = React$1.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(activeIndex - 1);
+	};
+	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 renderItemFields = (index) => {
+		if (fieldEntries.length === 0) return /* @__PURE__ */ jsx("div", {
+			className: "rounded-lg border border-dashed p-4 text-center",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				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
+		});
+	};
+	const emptyState = /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border border-dashed p-4 text-center",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: resolvedPlaceholder || emptyLabel
+		})
+	});
+	const editorContent = activeIndex !== null ? renderItemFields(activeIndex) : null;
+	const editorTitle = activeIndex !== null ? resolveItemLabel(values?.[activeIndex], activeIndex) : fallbackLabel;
+	const showEditor = mode === "modal" || mode === "drawer";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "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: "ml-2 text-xs text-muted-foreground",
+							children: [
+								"(",
+								fields.length,
+								"/",
+								maxItems,
+								")"
+							]
+						})
+					]
+				}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				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: "rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "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-xs text-muted-foreground",
+									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",
+										className: "h-6 w-6",
+										onClick: () => handleMove(index, index - 1),
+										disabled: !canMoveUp || disabled,
+										title: "Move up",
+										"aria-label": "Move item up",
+										children: /* @__PURE__ */ jsx(Icon, {
+											icon: "ph:caret-up",
+											className: "h-3 w-3"
+										})
+									}), /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										className: "h-6 w-6",
+										onClick: () => handleMove(index, index + 1),
+										disabled: !canMoveDown || disabled,
+										title: "Move down",
+										"aria-label": "Move item down",
+										children: /* @__PURE__ */ jsx(Icon, {
+											icon: "ph:caret-down",
+											className: "h-3 w-3"
+										})
+									})] }),
+									mode !== "inline" && /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										className: "h-6 w-6",
+										onClick: () => {
+											setActiveIndex(index);
+											setIsOpen(true);
+										},
+										disabled,
+										title: t("common.edit"),
+										"aria-label": t("common.edit"),
+										children: /* @__PURE__ */ jsx(Icon, {
+											icon: "ph:pencil",
+											className: "h-3 w-3"
+										})
+									}),
+									canRemove && /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										className: "h-6 w-6",
+										onClick: () => handleRemove(index),
+										disabled,
+										title: t("common.remove"),
+										"aria-label": t("common.remove"),
+										children: /* @__PURE__ */ jsx(Icon, {
+											icon: "ph:trash",
+											className: "h-3 w-3"
+										})
+									})
+								]
+							})]
+						}), mode === "inline" && /* @__PURE__ */ jsx("div", {
+							className: "p-3",
+							children: renderItemFields(index)
+						})]
+					}, 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
+					})]
+				})
+			}),
+			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
+					})]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { ObjectArrayField };
+//# sourceMappingURL=object-array-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"object-array-field.mjs","names":["React"],"sources":["../../../../src/client/components/fields/object-array-field.tsx"],"sourcesContent":["/**\n * ObjectArrayField Component\n *\n * Manages arrays of objects with inline, modal, or drawer editing.\n * Similar to EmbeddedCollectionField but with inline field definitions.\n */\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport { useFieldArray, useFormContext, useWatch } from \"react-hook-form\";\nimport type { FieldDefinition } from \"../../builder/field/field\";\nimport { createFieldRegistryProxy } from \"../../builder/proxies\";\nimport { useResolveText, useTranslation } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { selectAdmin, useAdminStore } from \"../../runtime\";\nimport { Button } from \"../ui/button\";\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogDescription,\n\tDialogHeader,\n\tDialogTitle,\n} from \"../ui/dialog\";\nimport {\n\tSheet,\n\tSheetContent,\n\tSheetDescription,\n\tSheetHeader,\n\tSheetTitle,\n} from \"../ui/sheet\";\nimport type { ArrayFieldConfig, BaseFieldProps } from \"./field-types\";\nimport { gridColumnClasses } from \"./field-utils\";\nimport { LocaleBadge } from \"./locale-badge\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ObjectArrayFieldProps\n\textends BaseFieldProps,\n\t\tPick<\n\t\t\tArrayFieldConfig,\n\t\t\t| \"item\"\n\t\t\t| \"mode\"\n\t\t\t| \"layout\"\n\t\t\t| \"columns\"\n\t\t\t| \"itemLabel\"\n\t\t\t| \"orderable\"\n\t\t\t| \"minItems\"\n\t\t\t| \"maxItems\"\n\t\t> {}\n\n// ============================================================================\n// Nested Field Renderer (for object items)\n// ============================================================================\n\ninterface ItemFieldRendererProps {\n\tfieldName: string;\n\tfieldDef: FieldDefinition;\n\tparentName: string;\n\tdisabled?: boolean;\n}\n\nfunction ItemFieldRenderer({\n\tfieldName,\n\tfieldDef,\n\tparentName,\n\tdisabled,\n}: ItemFieldRendererProps) {\n\tconst resolveText = useResolveText();\n\tconst fullName = `${parentName}.${fieldName}`;\n\tconst options = fieldDef[\"~options\"] || {};\n\n\t// Get the component from the field definition (registry-based)\n\tconst Component = fieldDef.field?.component as\n\t\t| React.ComponentType<any>\n\t\t| undefined;\n\n\tif (!Component) {\n\t\treturn (\n\t\t\t<div className=\"text-sm text-destructive\">\n\t\t\t\tNo component for field type: {fieldDef.name}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Strip UI-specific options that are handled separately\n\tconst {\n\t\tlabel,\n\t\tdescription,\n\t\tplaceholder,\n\t\trequired,\n\t\tdisabled: optionsDisabled,\n\t\treadOnly,\n\t\thidden,\n\t\tlocalized,\n\t\tlocale,\n\t\t...fieldSpecificOptions\n\t} = options;\n\n\treturn (\n\t\t<Component\n\t\t\tname={fullName}\n\t\t\tlabel={resolveText(label)}\n\t\t\tdescription={resolveText(description)}\n\t\t\tplaceholder={resolveText(placeholder)}\n\t\t\trequired={required}\n\t\t\tdisabled={disabled || optionsDisabled}\n\t\t\treadOnly={readOnly}\n\t\t\tlocalized={localized}\n\t\t\tlocale={locale}\n\t\t\t{...fieldSpecificOptions}\n\t\t/>\n\t);\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport function ObjectArrayField({\n\tname,\n\tlabel,\n\tdescription,\n\tplaceholder,\n\trequired,\n\tdisabled,\n\tlocalized,\n\tlocale,\n\titem: itemProp,\n\tmode = \"inline\",\n\tlayout = \"stack\",\n\tcolumns = 2,\n\titemLabel: itemLabelProp,\n\torderable = false,\n\tminItems,\n\tmaxItems,\n}: ObjectArrayFieldProps) {\n\tconst { t } = useTranslation();\n\tconst resolveText = useResolveText();\n\tconst resolvedPlaceholder = placeholder\n\t\t? resolveText(placeholder)\n\t\t: undefined;\n\tconst resolvedLabel = label ? resolveText(label) : undefined;\n\tconst form = useFormContext();\n\tconst { control } = form;\n\tconst { fields, append, remove, move } = useFieldArray({ control, name });\n\tconst values = useWatch({ control, name }) as any[] | undefined;\n\n\tconst admin = useAdminStore(selectAdmin);\n\tconst [activeIndex, setActiveIndex] = React.useState<number | null>(null);\n\tconst [isOpen, setIsOpen] = React.useState(false);\n\n\t// Resolve item field definitions\n\tconst itemFields = React.useMemo(() => {\n\t\tif (!itemProp) return {};\n\n\t\tif (typeof itemProp === \"function\") {\n\t\t\tconst registeredFields = admin.getFields();\n\t\t\tconst r = createFieldRegistryProxy(registeredFields as any);\n\t\t\treturn itemProp({ r });\n\t\t}\n\n\t\treturn itemProp;\n\t}, [itemProp, admin]);\n\n\tconst fieldEntries = Object.entries(itemFields);\n\tconst canAddMore = !maxItems || fields.length < maxItems;\n\tconst canRemove = !minItems || fields.length > minItems;\n\tconst fallbackLabel = resolvedLabel || \"Item\";\n\tconst emptyLabel = t(\"array.empty\", { name: fallbackLabel });\n\tconst addLabel = t(\"array.addItem\", { name: fallbackLabel });\n\n\t// Resolve item label\n\tconst resolveItemLabel = React.useCallback(\n\t\t(item: any, index: number) => {\n\t\t\tif (typeof itemLabelProp === \"function\") {\n\t\t\t\tconst labelValue = itemLabelProp(item, index);\n\t\t\t\tif (labelValue) return labelValue;\n\t\t\t}\n\t\t\tif (typeof itemLabelProp === \"string\") {\n\t\t\t\treturn resolveText(itemLabelProp);\n\t\t\t}\n\t\t\t// Try common label fields\n\t\t\tif (item?.name) return String(item.name);\n\t\t\tif (item?.title) return String(item.title);\n\t\t\tif (item?.label) return String(item.label);\n\t\t\treturn `${fallbackLabel} ${index + 1}`;\n\t\t},\n\t\t[fallbackLabel, itemLabelProp, resolveText],\n\t);\n\n\tconst handleAdd = () => {\n\t\tif (disabled || !canAddMore) return;\n\t\t// Create empty object with keys from field definitions (immutable pattern)\n\t\tconst emptyItem = Object.fromEntries(\n\t\t\tfieldEntries.map(([key]) => [key, undefined]),\n\t\t);\n\t\tappend(emptyItem);\n\t\tif (mode !== \"inline\") {\n\t\t\tsetActiveIndex(fields.length);\n\t\t\tsetIsOpen(true);\n\t\t}\n\t};\n\n\tconst handleRemove = (index: number) => {\n\t\tif (!canRemove) return;\n\t\tremove(index);\n\t\tif (activeIndex === null) return;\n\t\tif (index === activeIndex) {\n\t\t\tsetIsOpen(false);\n\t\t\tsetActiveIndex(null);\n\t\t} else if (index < activeIndex) {\n\t\t\tsetActiveIndex(activeIndex - 1);\n\t\t}\n\t};\n\n\tconst handleMove = (from: number, to: number) => {\n\t\tif (to < 0 || to >= fields.length) return;\n\t\tmove(from, to);\n\t\tif (activeIndex === null) return;\n\t\tif (activeIndex === from) {\n\t\t\tsetActiveIndex(to);\n\t\t} else if (activeIndex === to) {\n\t\t\tsetActiveIndex(from);\n\t\t}\n\t};\n\n\tconst handleOpenChange = (open: boolean) => {\n\t\tsetIsOpen(open);\n\t\tif (!open) {\n\t\t\tsetActiveIndex(null);\n\t\t}\n\t};\n\n\t// Render fields for an item at given index\n\tconst renderItemFields = (index: number) => {\n\t\tif (fieldEntries.length === 0) {\n\t\t\treturn (\n\t\t\t\t<div className=\"rounded-lg border border-dashed p-4 text-center\">\n\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\tNo fields configured for items.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\tconst fieldElements = fieldEntries.map(([fieldName, fieldDef]) => (\n\t\t\t<ItemFieldRenderer\n\t\t\t\tkey={fieldName}\n\t\t\t\tfieldName={fieldName}\n\t\t\t\tfieldDef={fieldDef as FieldDefinition}\n\t\t\t\tparentName={`${name}.${index}`}\n\t\t\t\tdisabled={disabled}\n\t\t\t/>\n\t\t));\n\n\t\tif (layout === \"inline\") {\n\t\t\treturn (\n\t\t\t\t<div className=\"flex flex-wrap items-end gap-2\">{fieldElements}</div>\n\t\t\t);\n\t\t}\n\n\t\tif (layout === \"grid\") {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"grid gap-4\",\n\t\t\t\t\t\tgridColumnClasses[columns] || \"grid-cols-2\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{fieldElements}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\t// Default: stack\n\t\treturn <div className=\"space-y-4\">{fieldElements}</div>;\n\t};\n\n\tconst emptyState = (\n\t\t<div className=\"rounded-lg border border-dashed p-4 text-center\">\n\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t{resolvedPlaceholder || emptyLabel}\n\t\t\t</p>\n\t\t</div>\n\t);\n\n\tconst editorContent =\n\t\tactiveIndex !== null ? renderItemFields(activeIndex) : null;\n\tconst editorTitle =\n\t\tactiveIndex !== null\n\t\t\t? resolveItemLabel(values?.[activeIndex], activeIndex)\n\t\t\t: fallbackLabel;\n\n\tconst showEditor = mode === \"modal\" || mode === \"drawer\";\n\n\treturn (\n\t\t<div className=\"space-y-2\">\n\t\t\t{label && (\n\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t<label htmlFor={name} className=\"text-sm font-medium\">\n\t\t\t\t\t\t{resolvedLabel}\n\t\t\t\t\t\t{required && <span className=\"text-destructive\">*</span>}\n\t\t\t\t\t\t{maxItems && (\n\t\t\t\t\t\t\t<span className=\"ml-2 text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t({fields.length}/{maxItems})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</label>\n\t\t\t\t\t{localized && <LocaleBadge locale={locale || \"i18n\"} />}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{description && (\n\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t{resolveText(description)}\n\t\t\t\t</p>\n\t\t\t)}\n\n\t\t\t<div className=\"space-y-3\">\n\t\t\t\t{fields.length === 0\n\t\t\t\t\t? emptyState\n\t\t\t\t\t: fields.map((field, index) => {\n\t\t\t\t\t\t\tconst itemValue = values?.[index];\n\t\t\t\t\t\t\tconst itemLabel = resolveItemLabel(itemValue, index);\n\t\t\t\t\t\t\tconst canMoveUp = orderable && index > 0;\n\t\t\t\t\t\t\tconst canMoveDown = orderable && index < fields.length - 1;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={field.id}\n\t\t\t\t\t\t\t\t\tclassName=\"rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-between border-b px-3 py-2\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t#{index + 1}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium\">{itemLabel}</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t{orderable && (\n\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-6 w-6\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleMove(index, index - 1)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={!canMoveUp || disabled}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Move up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Move item up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:caret-up\" className=\"h-3 w-3\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-6 w-6\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleMove(index, index + 1)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={!canMoveDown || disabled}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Move down\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Move item down\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:caret-down\" className=\"h-3 w-3\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t{mode !== \"inline\" && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-6 w-6\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetActiveIndex(index);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsOpen(true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={t(\"common.edit\")}\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-label={t(\"common.edit\")}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil\" className=\"h-3 w-3\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t{canRemove && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-6 w-6\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleRemove(index)}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={t(\"common.remove\")}\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-label={t(\"common.remove\")}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:trash\" className=\"h-3 w-3\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t{mode === \"inline\" && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"p-3\">{renderItemFields(index)}</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t</div>\n\n\t\t\t{canAddMore && (\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tonClick={handleAdd}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon=\"ph:plus\" className=\"h-4 w-4\" />\n\t\t\t\t\t{addLabel}\n\t\t\t\t</Button>\n\t\t\t)}\n\n\t\t\t{showEditor && mode === \"modal\" && (\n\t\t\t\t<Dialog open={isOpen} onOpenChange={handleOpenChange}>\n\t\t\t\t\t<DialogContent className=\"sm:max-w-2xl\">\n\t\t\t\t\t\t<DialogHeader>\n\t\t\t\t\t\t\t<DialogTitle>{editorTitle}</DialogTitle>\n\t\t\t\t\t\t\t{description && (\n\t\t\t\t\t\t\t\t<DialogDescription>\n\t\t\t\t\t\t\t\t\t{resolveText(description)}\n\t\t\t\t\t\t\t\t</DialogDescription>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</DialogHeader>\n\t\t\t\t\t\t<div className=\"space-y-4\">{editorContent}</div>\n\t\t\t\t\t</DialogContent>\n\t\t\t\t</Dialog>\n\t\t\t)}\n\n\t\t\t{showEditor && mode === \"drawer\" && (\n\t\t\t\t<Sheet open={isOpen} onOpenChange={handleOpenChange}>\n\t\t\t\t\t<SheetContent side=\"right\" className=\"sm:max-w-lg\">\n\t\t\t\t\t\t<SheetHeader>\n\t\t\t\t\t\t\t<SheetTitle>{editorTitle}</SheetTitle>\n\t\t\t\t\t\t\t{description && (\n\t\t\t\t\t\t\t\t<SheetDescription>{resolveText(description)}</SheetDescription>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</SheetHeader>\n\t\t\t\t\t\t<div className=\"space-y-4 p-4\">{editorContent}</div>\n\t\t\t\t\t</SheetContent>\n\t\t\t\t</Sheet>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/client/components/fields/object-field.d.mts

@@ -0,0 +1,32 @@
+import { BaseFieldProps, ObjectFieldConfig } from "./field-types.mjs";
+import * as react_jsx_runtime216 from "react/jsx-runtime";
+
+//#region src/client/components/fields/object-field.d.ts
+
+interface ObjectFieldProps extends BaseFieldProps, Omit<ObjectFieldConfig, "fields"> {
+  /**
+   * Nested field definitions.
+   * Can be a callback (evaluated at render time) or pre-evaluated record.
+   */
+  fields?: ((ctx: {
+    r: any;
+  }) => Record<string, any>) | Record<string, any>;
+}
+declare function ObjectField({
+  name,
+  label,
+  description,
+  required,
+  disabled,
+  localized,
+  locale,
+  className,
+  fields: fieldsProp,
+  wrapper,
+  layout,
+  columns,
+  defaultCollapsed
+}: ObjectFieldProps): react_jsx_runtime216.JSX.Element | null;
+//#endregion
+export { ObjectField, ObjectFieldProps };
+//# sourceMappingURL=object-field.d.mts.map

package/dist/client/components/fields/object-field.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-field.d.mts","names":[],"sources":["../../../../src/client/components/fields/object-field.tsx"],"sourcesContent":[],"mappings":";;;;;AA8BuD,UAPtC,gBAAA,SACR,cAM8C,EALrD,IAKqD,CALhD,iBAKgD,EAAA,QAAA,CAAA,CAAA;EAN9C;;;AAgFT;EACC,MAAA,CAAA,EAAA,CAAA,CAAA,GAAA,EAAA;IACA,CAAA,EAAA,GAAA;EACA,CAAA,EAAA,GA7E+B,MA6E/B,CAAA,MAAA,EAAA,GAAA,CAAA,CAAA,GA7EsD,MA6EtD,CAAA,MAAA,EAAA,GAAA,CAAA;;AAEA,iBALe,WAAA,CAKf;EAAA,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,QAAA;EAAA,QAAA;EAAA,SAAA;EAAA,MAAA;EAAA,SAAA;EAAA,MAAA,EAIQ,UAJR;EAAA,OAAA;EAAA,MAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EASE,gBATF,CAAA,EASkB,oBAAA,CAAA,GAAA,CAAA,OAAA,GATlB,IAAA"}

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

@@ -0,0 +1,128 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { selectAdmin, useAdminStore } from "../../runtime/provider.mjs";
+import { createFieldRegistryProxy } from "../../builder/proxies.mjs";
+import { gridColumnClasses } from "./field-utils.mjs";
+import { FieldWrapper } from "./field-wrapper.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/object-field.tsx
+/**
+* ObjectField Component
+*
+* Renders nested fields for JSON object structures.
+* Supports wrapper modes (flat, collapsible) and layout modes (stack, inline, grid).
+*/
+function NestedFieldRenderer({ fieldName, fieldDef, parentName, disabled }) {
+	const resolveText = useResolveText();
+	const fullName = `${parentName}.${fieldName}`;
+	const options = fieldDef["~options"] || {};
+	const Component = fieldDef.field?.component;
+	if (!Component) return /* @__PURE__ */ jsxs("div", {
+		className: "text-sm text-destructive",
+		children: ["No component for field type: ", fieldDef.name]
+	});
+	const { label, description, placeholder, required, disabled: optionsDisabled, readOnly, 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 ObjectField({ name, label, description, required, disabled, localized, locale, className, fields: fieldsProp, wrapper = "flat", layout = "stack", columns = 2, defaultCollapsed = true }) {
+	const resolveText = useResolveText();
+	const admin = useAdminStore(selectAdmin);
+	const [isCollapsed, setIsCollapsed] = React$1.useState(defaultCollapsed);
+	const nestedFields = React$1.useMemo(() => {
+		if (!fieldsProp) return {};
+		if (typeof fieldsProp === "function") return fieldsProp({ r: createFieldRegistryProxy(admin.getFields()) });
+		return fieldsProp;
+	}, [fieldsProp, admin]);
+	const fieldEntries = Object.entries(nestedFields);
+	if (fieldEntries.length === 0) return null;
+	const renderFields = () => {
+		const fieldElements = fieldEntries.map(([fieldName, fieldDef]) => /* @__PURE__ */ jsx(NestedFieldRenderer, {
+			fieldName,
+			fieldDef,
+			parentName: name,
+			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
+		});
+	};
+	if (wrapper === "collapsible" || layout === "collapsible") return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm", className),
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setIsCollapsed(!isCollapsed),
+			className: "flex w-full items-center justify-between p-3 text-left hover:bg-muted/50",
+			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: "mb-4 text-sm text-muted-foreground",
+				children: resolveText(description)
+			}), renderFields()]
+		})]
+	});
+	if (label) return /* @__PURE__ */ jsx(FieldWrapper, {
+		name,
+		label: resolveText(label),
+		description,
+		required,
+		disabled,
+		localized,
+		locale,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pt-1", className),
+			children: renderFields()
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: renderFields()
+	});
+}
+
+//#endregion
+export { ObjectField };
+//# sourceMappingURL=object-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"object-field.mjs","names":["React"],"sources":["../../../../src/client/components/fields/object-field.tsx"],"sourcesContent":["/**\n * ObjectField Component\n *\n * Renders nested fields for JSON object structures.\n * Supports wrapper modes (flat, collapsible) and layout modes (stack, inline, grid).\n */\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\n\nimport type { FieldDefinition } from \"../../builder/field/field\";\nimport { createFieldRegistryProxy } from \"../../builder/proxies\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { selectAdmin, useAdminStore } from \"../../runtime\";\nimport type { BaseFieldProps, ObjectFieldConfig } from \"./field-types\";\nimport { gridColumnClasses } from \"./field-utils\";\nimport { FieldWrapper } from \"./field-wrapper\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ObjectFieldProps\n\textends BaseFieldProps,\n\t\tOmit<ObjectFieldConfig, \"fields\"> {\n\t/**\n\t * Nested field definitions.\n\t * Can be a callback (evaluated at render time) or pre-evaluated record.\n\t */\n\tfields?: ((ctx: { r: any }) => Record<string, any>) | Record<string, any>;\n}\n\n// ============================================================================\n// Nested Field Renderer\n// ============================================================================\n\ninterface NestedFieldRendererProps {\n\tfieldName: string;\n\tfieldDef: FieldDefinition;\n\tparentName: string;\n\tdisabled?: boolean;\n}\n\nfunction NestedFieldRenderer({\n\tfieldName,\n\tfieldDef,\n\tparentName,\n\tdisabled,\n}: NestedFieldRendererProps) {\n\tconst resolveText = useResolveText();\n\tconst fullName = `${parentName}.${fieldName}`;\n\tconst options = fieldDef[\"~options\"] || {};\n\n\t// Get the component from the field definition (registry-based)\n\t// Cast to ComponentType since MaybeLazyComponent includes lazy variants\n\tconst Component = fieldDef.field?.component as\n\t\t| React.ComponentType<any>\n\t\t| undefined;\n\n\tif (!Component) {\n\t\t// Fallback error display if no component found\n\t\treturn (\n\t\t\t<div className=\"text-sm text-destructive\">\n\t\t\t\tNo component for field type: {fieldDef.name}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Strip UI-specific options that are handled by FieldWrapper\n\tconst {\n\t\tlabel,\n\t\tdescription,\n\t\tplaceholder,\n\t\trequired,\n\t\tdisabled: optionsDisabled,\n\t\treadOnly,\n\t\thidden,\n\t\tlocalized,\n\t\tlocale,\n\t\t...fieldSpecificOptions\n\t} = options;\n\n\t// Render using the component from the field registry\n\treturn (\n\t\t<Component\n\t\t\tname={fullName}\n\t\t\tlabel={resolveText(label)}\n\t\t\tdescription={resolveText(description)}\n\t\t\tplaceholder={resolveText(placeholder)}\n\t\t\trequired={required}\n\t\t\tdisabled={disabled || optionsDisabled}\n\t\t\treadOnly={readOnly}\n\t\t\tlocalized={localized}\n\t\t\tlocale={locale}\n\t\t\t{...fieldSpecificOptions}\n\t\t/>\n\t);\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport function ObjectField({\n\tname,\n\tlabel,\n\tdescription,\n\trequired,\n\tdisabled,\n\tlocalized,\n\tlocale,\n\tclassName,\n\tfields: fieldsProp,\n\twrapper = \"flat\",\n\tlayout = \"stack\",\n\tcolumns = 2,\n\tdefaultCollapsed = true,\n}: ObjectFieldProps) {\n\tconst resolveText = useResolveText();\n\tconst admin = useAdminStore(selectAdmin);\n\tconst [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);\n\n\t// Resolve nested field definitions\n\tconst nestedFields = React.useMemo(() => {\n\t\tif (!fieldsProp) return {};\n\n\t\t// If it's a callback, evaluate it with field registry\n\t\tif (typeof fieldsProp === \"function\") {\n\t\t\tconst registeredFields = admin.getFields();\n\t\t\tconst r = createFieldRegistryProxy(registeredFields as any);\n\t\t\treturn fieldsProp({ r });\n\t\t}\n\n\t\t// Otherwise it's already evaluated\n\t\treturn fieldsProp;\n\t}, [fieldsProp, admin]);\n\n\tconst fieldEntries = Object.entries(nestedFields);\n\n\tif (fieldEntries.length === 0) {\n\t\treturn null;\n\t}\n\n\t// Render nested fields based on layout\n\tconst renderFields = () => {\n\t\tconst fieldElements = fieldEntries.map(([fieldName, fieldDef]) => (\n\t\t\t<NestedFieldRenderer\n\t\t\t\tkey={fieldName}\n\t\t\t\tfieldName={fieldName}\n\t\t\t\tfieldDef={fieldDef as FieldDefinition}\n\t\t\t\tparentName={name}\n\t\t\t\tdisabled={disabled}\n\t\t\t/>\n\t\t));\n\n\t\tif (layout === \"inline\") {\n\t\t\treturn (\n\t\t\t\t<div className=\"flex flex-wrap items-end gap-2\">{fieldElements}</div>\n\t\t\t);\n\t\t}\n\n\t\tif (layout === \"grid\") {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"grid gap-4\",\n\t\t\t\t\t\tgridColumnClasses[columns] || \"grid-cols-2\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{fieldElements}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\t// Default: stack\n\t\treturn <div className=\"space-y-4\">{fieldElements}</div>;\n\t};\n\n\t// Collapsible wrapper (also support legacy layout=\"collapsible\" for backwards compatibility)\n\tif (wrapper === \"collapsible\" || (layout as string) === \"collapsible\") {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={() => setIsCollapsed(!isCollapsed)}\n\t\t\t\t\tclassName=\"flex w-full items-center justify-between p-3 text-left hover:bg-muted/50\"\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t{isCollapsed ? (\n\t\t\t\t\t\t\t<Icon icon=\"ph:caret-right\" className=\"h-4 w-4\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon icon=\"ph:caret-down\" className=\"h-4 w-4\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span className=\"font-medium\">{resolveText(label ?? name)}</span>\n\t\t\t\t\t\t{required && <span className=\"text-destructive\">*</span>}\n\t\t\t\t\t</div>\n\t\t\t\t</button>\n\t\t\t\t{!isCollapsed && (\n\t\t\t\t\t<div className=\"border-t p-4\">\n\t\t\t\t\t\t{description && (\n\t\t\t\t\t\t\t<p className=\"mb-4 text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t{resolveText(description)}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{renderFields()}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Flat wrapper with optional label\n\tif (label) {\n\t\treturn (\n\t\t\t<FieldWrapper\n\t\t\t\tname={name}\n\t\t\t\tlabel={resolveText(label)}\n\t\t\t\tdescription={description}\n\t\t\t\trequired={required}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tlocalized={localized}\n\t\t\t\tlocale={locale}\n\t\t\t>\n\t\t\t\t<div className={cn(\"pt-1\", className)}>{renderFields()}</div>\n\t\t\t</FieldWrapper>\n\t\t);\n\t}\n\n\t// No label - just render fields\n\treturn <div className={className}>{renderFields()}</div>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA4CA,SAAS,oBAAoB,EAC5B,WACA,UACA,YACA,YAC4B;CAC5B,MAAM,cAAc,gBAAgB;CACpC,MAAM,WAAW,GAAG,WAAW,GAAG;CAClC,MAAM,UAAU,SAAS,eAAe,EAAE;CAI1C,MAAM,YAAY,SAAS,OAAO;AAIlC,KAAI,CAAC,UAEJ,QACC,qBAAC;EAAI,WAAU;aAA2B,iCACX,SAAS;GAClC;CAKR,MAAM,EACL,OACA,aACA,aACA,UACA,UAAU,iBACV,UACA,QACA,WACA,QACA,GAAG,yBACA;AAGJ,QACC,oBAAC;EACA,MAAM;EACN,OAAO,YAAY,MAAM;EACzB,aAAa,YAAY,YAAY;EACrC,aAAa,YAAY,YAAY;EAC3B;EACV,UAAU,YAAY;EACZ;EACC;EACH;EACR,GAAI;GACH;;AAQJ,SAAgB,YAAY,EAC3B,MACA,OACA,aACA,UACA,UACA,WACA,QACA,WACA,QAAQ,YACR,UAAU,QACV,SAAS,SACT,UAAU,GACV,mBAAmB,QACC;CACpB,MAAM,cAAc,gBAAgB;CACpC,MAAM,QAAQ,cAAc,YAAY;CACxC,MAAM,CAAC,aAAa,kBAAkBA,QAAM,SAAS,iBAAiB;CAGtE,MAAM,eAAeA,QAAM,cAAc;AACxC,MAAI,CAAC,WAAY,QAAO,EAAE;AAG1B,MAAI,OAAO,eAAe,WAGzB,QAAO,WAAW,EAAE,GADV,yBADe,MAAM,WAAW,CACiB,EACpC,CAAC;AAIzB,SAAO;IACL,CAAC,YAAY,MAAM,CAAC;CAEvB,MAAM,eAAe,OAAO,QAAQ,aAAa;AAEjD,KAAI,aAAa,WAAW,EAC3B,QAAO;CAIR,MAAM,qBAAqB;EAC1B,MAAM,gBAAgB,aAAa,KAAK,CAAC,WAAW,cACnD,oBAAC;GAEW;GACD;GACV,YAAY;GACF;KAJL,UAKJ,CACD;AAEF,MAAI,WAAW,SACd,QACC,oBAAC;GAAI,WAAU;aAAkC;IAAoB;AAIvE,MAAI,WAAW,OACd,QACC,oBAAC;GACA,WAAW,GACV,cACA,kBAAkB,YAAY,cAC9B;aAEA;IACI;AAKR,SAAO,oBAAC;GAAI,WAAU;aAAa;IAAoB;;AAIxD,KAAI,YAAY,iBAAkB,WAAsB,cACvD,QACC,qBAAC;EACA,WAAW,GACV,kEACA,UACA;aAED,oBAAC;GACA,MAAK;GACL,eAAe,eAAe,CAAC,YAAY;GAC3C,WAAU;GACA;aAEV,qBAAC;IAAI,WAAU;;KACb,cACA,oBAAC;MAAK,MAAK;MAAiB,WAAU;OAAY,GAElD,oBAAC;MAAK,MAAK;MAAgB,WAAU;OAAY;KAElD,oBAAC;MAAK,WAAU;gBAAe,YAAY,SAAS,KAAK;OAAQ;KAChE,YAAY,oBAAC;MAAK,WAAU;gBAAmB;OAAQ;;KACnD;IACE,EACR,CAAC,eACD,qBAAC;GAAI,WAAU;cACb,eACA,oBAAC;IAAE,WAAU;cACX,YAAY,YAAY;KACtB,EAEJ,cAAc;IACV;GAEF;AAKR,KAAI,MACH,QACC,oBAAC;EACM;EACN,OAAO,YAAY,MAAM;EACZ;EACH;EACA;EACC;EACH;YAER,oBAAC;GAAI,WAAW,GAAG,QAAQ,UAAU;aAAG,cAAc;IAAO;GAC/C;AAKjB,QAAO,oBAAC;EAAe;YAAY,cAAc;GAAO"}

package/dist/client/components/fields/relation/displays/cards-display.d.mts

@@ -0,0 +1,2 @@
+import "./types.mjs";
+import "react/jsx-runtime";