@nubitio/crud 0.5.14 → 0.5.16

package/dist/index.cjs

@@ -28,7 +28,6 @@ let react_dom = require("react-dom");
 let _nubitio_ui = require("@nubitio/ui");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _nubitio_core = require("@nubitio/core");
-let react_dropzone = require("react-dropzone");
 let _tanstack_react_query = require("@tanstack/react-query");
 //#region packages/crud/crud/defineResource.ts
 const stringResourceCache = /* @__PURE__ */ new Map();
@@ -1243,9 +1242,6 @@ const enumTypeModule = {
 };
 //#endregion
 //#region packages/crud/form/FileUploadField.tsx
-function cx$1(...values) {
-	return values.filter(Boolean).join(" ");
-}
 function resolveMediaPath(media) {
 	if (!media) return null;
 	const path = media["path"];
@@ -1271,27 +1267,6 @@ function resolveMediaIri(uploadUrl, media) {
 function isImageMimeType(mimeType) {
 	return !!mimeType && mimeType.startsWith("image/");
 }
-function buildDropzoneAccept(accept) {
-	if (!accept || accept === "*/*" || accept === "*") return void 0;
-	if (accept === "image/*") return {
-		"image/png": [".png"],
-		"image/jpeg": [".jpg", ".jpeg"],
-		"image/webp": [".webp"],
-		"image/gif": [".gif"]
-	};
-	if (accept.includes(",")) return accept.split(",").reduce((acc, token) => {
-		const trimmed = token.trim();
-		if (!trimmed) return acc;
-		if (trimmed.startsWith(".")) {
-			acc["application/octet-stream"] = [...acc["application/octet-stream"] ?? [], trimmed];
-			return acc;
-		}
-		acc[trimmed] = [];
-		return acc;
-	}, {});
-	if (accept.startsWith(".")) return { "application/octet-stream": [accept] };
-	return { [accept]: [] };
-}
 async function uploadMediaFile(file, uploadUrl, httpClient) {
 	const body = new FormData();
 	body.append("file", file);
@@ -1371,17 +1346,6 @@ function FileUploadField({ field, disabled = false, readOnly = false, invalid =
 		t,
 		uploadUrl
 	]);
-	const { getRootProps, getInputProps, isDragActive, open } = (0, react_dropzone.useDropzone)({
-		accept: buildDropzoneAccept(field.accept),
-		disabled: disabled || readOnly || status === "uploading",
-		multiple: false,
-		noClick: !!(previewUrl || fileName),
-		noKeyboard: !!(previewUrl || fileName),
-		onDrop: (acceptedFiles) => {
-			const file = acceptedFiles[0];
-			if (file) uploadFile(file);
-		}
-	});
 	const handleClear = () => {
 		revokeLocalPreview();
 		setPreviewUrl(null);
@@ -1391,104 +1355,35 @@ function FileUploadField({ field, disabled = false, readOnly = false, invalid =
 		setErrorMessage(null);
 		onCleared(field.name);
 	};
-	const isInteractive = !disabled && !readOnly;
-	const hasContent = !!(previewUrl || fileName);
-	const placeholderIcon = imageMode ? "ph-image" : "ph-file-arrow-up";
-	const placeholderTitle = isDragActive ? t("form.fileUploadDrop") : imageMode ? t("form.imageUploadPrompt") : t("form.fileUploadPrompt");
-	const placeholderHint = imageMode ? t("form.imageUploadHint") : t("form.fileUploadHint");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cx$1("nb-form__file-upload", imageMode && "nb-form__file-upload--image", invalid && "nb-form__file-upload--invalid"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			...getRootProps({ className: cx$1("nb-form__file-upload-zone", isDragActive && "nb-form__file-upload-zone--active", hasContent && "nb-form__file-upload-zone--filled", status === "uploading" && "nb-form__file-upload-zone--uploading", !isInteractive && "nb-form__file-upload-zone--disabled") }),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", { ...getInputProps({
-				id: `nb-form-${field.name}`,
-				"aria-label": field.label
-			}) }), hasContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				previewUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-					className: "nb-form__file-upload-preview",
-					src: previewUrl,
-					alt: field.label
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "nb-form__file-upload-file",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "nb-form__file-upload-file-icon",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { className: "ph ph-file" })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "nb-form__file-upload-file-meta",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "nb-form__file-upload-file-name",
-							children: fileName
-						}), fileUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-							className: "nb-form__file-upload-file-link",
-							href: fileUrl,
-							target: "_blank",
-							rel: "noreferrer",
-							onClick: (event) => event.stopPropagation(),
-							children: t("form.fileUploadOpen")
-						})]
-					})]
-				}),
-				status === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "nb-form__file-upload-overlay",
-					"aria-live": "polite",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "nb-form__file-upload-spinner",
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("form.fileUploading") })]
-				}),
-				isInteractive && status !== "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "nb-form__file-upload-actions",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "nb-form__file-upload-action",
-						onClick: (event) => {
-							event.stopPropagation();
-							open();
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-							className: "ph ph-arrows-clockwise",
-							"aria-hidden": "true"
-						}), t("form.fileUploadReplace")]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "nb-form__file-upload-action nb-form__file-upload-action--danger",
-						onClick: (event) => {
-							event.stopPropagation();
-							handleClear();
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-							className: "ph ph-trash",
-							"aria-hidden": "true"
-						}), t("form.fileUploadRemove")]
-					})]
-				})
-			] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "nb-form__file-upload-placeholder",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "nb-form__file-upload-icon",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { className: `ph ${placeholderIcon}` })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "nb-form__file-upload-title",
-						children: placeholderTitle
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "nb-form__file-upload-hint",
-						children: placeholderHint
-					})
-				]
-			})]
-		}), errorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "nb-form__file-upload-error",
-			role: "alert",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-				className: "ph ph-warning-circle",
-				"aria-hidden": "true"
-			}), errorMessage]
-		})]
+	const value = {
+		fileName,
+		fileUrl,
+		previewUrl
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.FileDropzone, {
+		accept: field.accept,
+		disabled,
+		readOnly,
+		invalid,
+		image: imageMode,
+		value,
+		uploading: status === "uploading",
+		error: errorMessage,
+		inputId: `nb-form-${field.name}`,
+		inputLabel: field.label,
+		labels: {
+			dropPrompt: t("form.fileUploadDrop"),
+			prompt: t("form.fileUploadPrompt"),
+			imagePrompt: t("form.imageUploadPrompt"),
+			hint: t("form.fileUploadHint"),
+			imageHint: t("form.imageUploadHint"),
+			uploading: t("form.fileUploading"),
+			replace: t("form.fileUploadReplace"),
+			remove: t("form.fileUploadRemove"),
+			open: t("form.fileUploadOpen")
+		},
+		onFileSelect: (file) => void uploadFile(file),
+		onClear: handleClear
 	});
 }
 function isImageFileField(field) {
@@ -3671,6 +3566,7 @@ function normalizeFormData(data, fields, adapter = HydraAdapter, prependDataByFi
 			else row[field.name] = null;
 		}
 		if (field.type === "entity") normalizeEntityField(row, field, adapter, prependDataByField);
+		if (field.type !== "entity" && field.type !== "file" && (Array.isArray(row[field.name]) || row[field.name] !== null && typeof row[field.name] === "object")) delete row[field.name];
 	});
 	return row;
 }
@@ -4304,9 +4200,20 @@ function validateField(field, value, formData, t) {
 	}
 	return null;
 }
+const DETAIL_CURRENCY_COL_WIDTH = 112;
+const DETAIL_NUMBER_COL_WIDTH = 96;
+function resolveDetailColWidth(field, colWidths) {
+	if (colWidths[field.name] !== void 0) return colWidths[field.name];
+	if (field.width !== void 0) {
+		const parsed = typeof field.width === "number" ? field.width : Number.parseInt(String(field.width), 10);
+		return Number.isFinite(parsed) ? parsed : void 0;
+	}
+	if (field.type === "currency") return DETAIL_CURRENCY_COL_WIDTH;
+	if (field.type === "number") return DETAIL_NUMBER_COL_WIDTH;
+}
 function DetailColumnGroup({ allowDeleting, fields, colWidths }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("colgroup", { children: [fields.map((field) => {
-		const width = colWidths[field.name] ?? field.width;
+		const width = resolveDetailColWidth(field, colWidths);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { style: width ? { width } : void 0 }, field.name);
 	}), allowDeleting && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "nb-form__col-actions-col" })] });
 }
@@ -4316,7 +4223,6 @@ function DetailSummaryFooter({ allowDeleting, colWidths, fields, rows, scrollRef
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: scrollRef,
 		className: "nb-form__detail-summary-wrap",
-		"aria-hidden": "true",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
 			className: "nb-form__detail-table nb-form__detail-summary-table",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailColumnGroup, {
@@ -4328,11 +4234,16 @@ function DetailSummaryFooter({ allowDeleting, colWidths, fields, rows, scrollRef
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [fields.map((field) => {
 					const item = itemsByColumn.get(field.name);
 					const align = item?.align ?? field.align;
+					const alignItems = align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start";
+					const colWidth = item ? resolveDetailColWidth(field, colWidths) : void 0;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-						style: align ? { textAlign: align } : void 0,
+						style: {
+							...align ? { textAlign: align } : void 0,
+							...colWidth ? { minWidth: colWidth } : void 0
+						},
 						children: item && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "nb-form__detail-summary-cell",
-							style: { justifyContent: align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start" },
+							style: { alignItems },
 							children: [item.label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "nb-form__detail-summary-label",
 								children: item.label
@@ -7221,6 +7132,22 @@ function useSmartCrudFields(fields, activeOperation, formData, roles) {
 	};
 }
 //#endregion
+//#region packages/crud/crud/applyFormDetailFormFieldOverrides.ts
+/**
+* Hides the header form field that mirrors `formDetail.propertyName`.
+* OneToMany collections serialized as object arrays must not render as a
+* plain text input ([object Object]) when line items are edited via formDetail.
+*/
+function applyFormDetailFormFieldOverrides(fields, formDetail) {
+	const propertyName = formDetail?.propertyName?.trim();
+	if (!propertyName) return fields;
+	return fields.map((field) => field.name === propertyName ? {
+		...field,
+		visibleOnForm: false,
+		hidden: true
+	} : field);
+}
+//#endregion
 //#region packages/crud/crud/fieldValidation.ts
 var SmartCrudFieldContractError = class extends Error {
 	issues;
@@ -7663,6 +7590,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 	const { activeOperation, formData, handleFormDataChange, startCreate, startEdit, resetOperation } = useSmartCrudOperation(void 0, routingState);
 	const roles = useSmartCrudRoles();
 	const { gridFields, processedFields, computedValues } = useSmartCrudFields(fields, activeOperation, formData, (0, react.useMemo)(() => roles ?? [], [roles]));
+	const formFields = (0, react.useMemo)(() => applyFormDetailFormFieldOverrides(processedFields, resolvedBaseResource.formDetail), [processedFields, resolvedBaseResource.formDetail]);
 	(0, _nubitio_core.useMercureSubscription)(resource.apiUrl, () => {
 		effectiveGridRef.current?.refresh();
 	}, resolvedBaseResource.mercure !== false);
@@ -7672,7 +7600,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		...!hasManualFields ? { fields: gridFields } : {},
 		apiUrl: normalizedApiUrl,
 		fields: hasManualFields ? buildFields(resource.fields) : gridFields,
-		formFields: processedFields,
+		formFields,
 		formLayout: resolvedBaseResource.formLayout ?? inferredFormLayout,
 		_supportedOperations: supportedOperations
 	}), [
@@ -7681,7 +7609,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		hasManualFields,
 		inferredFormLayout,
 		normalizedApiUrl,
-		processedFields,
+		formFields,
 		resolvedBaseResource,
 		resource.fields,
 		supportedOperations

package/dist/index.mjs

@@ -1,10 +1,9 @@
 import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Route, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { createPortal } from "react-dom";
-import { AppDialog, AppDropdown, Badge, Button, ConfirmDialog, DatePicker, DateRangePicker, Drawer, EmptyState, IconButton, Skeleton, Timeline, TimelineItem } from "@nubitio/ui";
+import { AppDialog, AppDropdown, Badge, Button, ConfirmDialog, DatePicker, DateRangePicker, Drawer, EmptyState, FileDropzone, IconButton, Skeleton, Timeline, TimelineItem } from "@nubitio/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createCrudEvents, createScopedEventBus, getCoreCurrency, getCoreLocale, getCoreTimezone, useCoreHttpClient, useCoreRuntime, useCoreTranslation, useEvents, useMercureSubscription } from "@nubitio/core";
-import { useDropzone } from "react-dropzone";
 import { useQueryClient } from "@tanstack/react-query";
 //#region packages/crud/crud/defineResource.ts
 const stringResourceCache = /* @__PURE__ */ new Map();
@@ -1219,9 +1218,6 @@ const enumTypeModule = {
 };
 //#endregion
 //#region packages/crud/form/FileUploadField.tsx
-function cx$1(...values) {
-	return values.filter(Boolean).join(" ");
-}
 function resolveMediaPath(media) {
 	if (!media) return null;
 	const path = media["path"];
@@ -1247,27 +1243,6 @@ function resolveMediaIri(uploadUrl, media) {
 function isImageMimeType(mimeType) {
 	return !!mimeType && mimeType.startsWith("image/");
 }
-function buildDropzoneAccept(accept) {
-	if (!accept || accept === "*/*" || accept === "*") return void 0;
-	if (accept === "image/*") return {
-		"image/png": [".png"],
-		"image/jpeg": [".jpg", ".jpeg"],
-		"image/webp": [".webp"],
-		"image/gif": [".gif"]
-	};
-	if (accept.includes(",")) return accept.split(",").reduce((acc, token) => {
-		const trimmed = token.trim();
-		if (!trimmed) return acc;
-		if (trimmed.startsWith(".")) {
-			acc["application/octet-stream"] = [...acc["application/octet-stream"] ?? [], trimmed];
-			return acc;
-		}
-		acc[trimmed] = [];
-		return acc;
-	}, {});
-	if (accept.startsWith(".")) return { "application/octet-stream": [accept] };
-	return { [accept]: [] };
-}
 async function uploadMediaFile(file, uploadUrl, httpClient) {
 	const body = new FormData();
 	body.append("file", file);
@@ -1347,17 +1322,6 @@ function FileUploadField({ field, disabled = false, readOnly = false, invalid =
 		t,
 		uploadUrl
 	]);
-	const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
-		accept: buildDropzoneAccept(field.accept),
-		disabled: disabled || readOnly || status === "uploading",
-		multiple: false,
-		noClick: !!(previewUrl || fileName),
-		noKeyboard: !!(previewUrl || fileName),
-		onDrop: (acceptedFiles) => {
-			const file = acceptedFiles[0];
-			if (file) uploadFile(file);
-		}
-	});
 	const handleClear = () => {
 		revokeLocalPreview();
 		setPreviewUrl(null);
@@ -1367,104 +1331,35 @@ function FileUploadField({ field, disabled = false, readOnly = false, invalid =
 		setErrorMessage(null);
 		onCleared(field.name);
 	};
-	const isInteractive = !disabled && !readOnly;
-	const hasContent = !!(previewUrl || fileName);
-	const placeholderIcon = imageMode ? "ph-image" : "ph-file-arrow-up";
-	const placeholderTitle = isDragActive ? t("form.fileUploadDrop") : imageMode ? t("form.imageUploadPrompt") : t("form.fileUploadPrompt");
-	const placeholderHint = imageMode ? t("form.imageUploadHint") : t("form.fileUploadHint");
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx$1("nb-form__file-upload", imageMode && "nb-form__file-upload--image", invalid && "nb-form__file-upload--invalid"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			...getRootProps({ className: cx$1("nb-form__file-upload-zone", isDragActive && "nb-form__file-upload-zone--active", hasContent && "nb-form__file-upload-zone--filled", status === "uploading" && "nb-form__file-upload-zone--uploading", !isInteractive && "nb-form__file-upload-zone--disabled") }),
-			children: [/* @__PURE__ */ jsx("input", { ...getInputProps({
-				id: `nb-form-${field.name}`,
-				"aria-label": field.label
-			}) }), hasContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				previewUrl ? /* @__PURE__ */ jsx("img", {
-					className: "nb-form__file-upload-preview",
-					src: previewUrl,
-					alt: field.label
-				}) : /* @__PURE__ */ jsxs("div", {
-					className: "nb-form__file-upload-file",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "nb-form__file-upload-file-icon",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ jsx("i", { className: "ph ph-file" })
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "nb-form__file-upload-file-meta",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "nb-form__file-upload-file-name",
-							children: fileName
-						}), fileUrl && /* @__PURE__ */ jsx("a", {
-							className: "nb-form__file-upload-file-link",
-							href: fileUrl,
-							target: "_blank",
-							rel: "noreferrer",
-							onClick: (event) => event.stopPropagation(),
-							children: t("form.fileUploadOpen")
-						})]
-					})]
-				}),
-				status === "uploading" && /* @__PURE__ */ jsxs("div", {
-					className: "nb-form__file-upload-overlay",
-					"aria-live": "polite",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "nb-form__file-upload-spinner",
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ jsx("span", { children: t("form.fileUploading") })]
-				}),
-				isInteractive && status !== "uploading" && /* @__PURE__ */ jsxs("div", {
-					className: "nb-form__file-upload-actions",
-					children: [/* @__PURE__ */ jsxs("button", {
-						type: "button",
-						className: "nb-form__file-upload-action",
-						onClick: (event) => {
-							event.stopPropagation();
-							open();
-						},
-						children: [/* @__PURE__ */ jsx("i", {
-							className: "ph ph-arrows-clockwise",
-							"aria-hidden": "true"
-						}), t("form.fileUploadReplace")]
-					}), /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						className: "nb-form__file-upload-action nb-form__file-upload-action--danger",
-						onClick: (event) => {
-							event.stopPropagation();
-							handleClear();
-						},
-						children: [/* @__PURE__ */ jsx("i", {
-							className: "ph ph-trash",
-							"aria-hidden": "true"
-						}), t("form.fileUploadRemove")]
-					})]
-				})
-			] }) : /* @__PURE__ */ jsxs("div", {
-				className: "nb-form__file-upload-placeholder",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "nb-form__file-upload-icon",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ jsx("i", { className: `ph ${placeholderIcon}` })
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "nb-form__file-upload-title",
-						children: placeholderTitle
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "nb-form__file-upload-hint",
-						children: placeholderHint
-					})
-				]
-			})]
-		}), errorMessage && /* @__PURE__ */ jsxs("span", {
-			className: "nb-form__file-upload-error",
-			role: "alert",
-			children: [/* @__PURE__ */ jsx("i", {
-				className: "ph ph-warning-circle",
-				"aria-hidden": "true"
-			}), errorMessage]
-		})]
+	const value = {
+		fileName,
+		fileUrl,
+		previewUrl
+	};
+	return /* @__PURE__ */ jsx(FileDropzone, {
+		accept: field.accept,
+		disabled,
+		readOnly,
+		invalid,
+		image: imageMode,
+		value,
+		uploading: status === "uploading",
+		error: errorMessage,
+		inputId: `nb-form-${field.name}`,
+		inputLabel: field.label,
+		labels: {
+			dropPrompt: t("form.fileUploadDrop"),
+			prompt: t("form.fileUploadPrompt"),
+			imagePrompt: t("form.imageUploadPrompt"),
+			hint: t("form.fileUploadHint"),
+			imageHint: t("form.imageUploadHint"),
+			uploading: t("form.fileUploading"),
+			replace: t("form.fileUploadReplace"),
+			remove: t("form.fileUploadRemove"),
+			open: t("form.fileUploadOpen")
+		},
+		onFileSelect: (file) => void uploadFile(file),
+		onClear: handleClear
 	});
 }
 function isImageFileField(field) {
@@ -3647,6 +3542,7 @@ function normalizeFormData(data, fields, adapter = HydraAdapter, prependDataByFi
 			else row[field.name] = null;
 		}
 		if (field.type === "entity") normalizeEntityField(row, field, adapter, prependDataByField);
+		if (field.type !== "entity" && field.type !== "file" && (Array.isArray(row[field.name]) || row[field.name] !== null && typeof row[field.name] === "object")) delete row[field.name];
 	});
 	return row;
 }
@@ -4280,9 +4176,20 @@ function validateField(field, value, formData, t) {
 	}
 	return null;
 }
+const DETAIL_CURRENCY_COL_WIDTH = 112;
+const DETAIL_NUMBER_COL_WIDTH = 96;
+function resolveDetailColWidth(field, colWidths) {
+	if (colWidths[field.name] !== void 0) return colWidths[field.name];
+	if (field.width !== void 0) {
+		const parsed = typeof field.width === "number" ? field.width : Number.parseInt(String(field.width), 10);
+		return Number.isFinite(parsed) ? parsed : void 0;
+	}
+	if (field.type === "currency") return DETAIL_CURRENCY_COL_WIDTH;
+	if (field.type === "number") return DETAIL_NUMBER_COL_WIDTH;
+}
 function DetailColumnGroup({ allowDeleting, fields, colWidths }) {
 	return /* @__PURE__ */ jsxs("colgroup", { children: [fields.map((field) => {
-		const width = colWidths[field.name] ?? field.width;
+		const width = resolveDetailColWidth(field, colWidths);
 		return /* @__PURE__ */ jsx("col", { style: width ? { width } : void 0 }, field.name);
 	}), allowDeleting && /* @__PURE__ */ jsx("col", { className: "nb-form__col-actions-col" })] });
 }
@@ -4292,7 +4199,6 @@ function DetailSummaryFooter({ allowDeleting, colWidths, fields, rows, scrollRef
 	return /* @__PURE__ */ jsx("div", {
 		ref: scrollRef,
 		className: "nb-form__detail-summary-wrap",
-		"aria-hidden": "true",
 		children: /* @__PURE__ */ jsxs("table", {
 			className: "nb-form__detail-table nb-form__detail-summary-table",
 			children: [/* @__PURE__ */ jsx(DetailColumnGroup, {
@@ -4304,11 +4210,16 @@ function DetailSummaryFooter({ allowDeleting, colWidths, fields, rows, scrollRef
 				children: /* @__PURE__ */ jsxs("tr", { children: [fields.map((field) => {
 					const item = itemsByColumn.get(field.name);
 					const align = item?.align ?? field.align;
+					const alignItems = align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start";
+					const colWidth = item ? resolveDetailColWidth(field, colWidths) : void 0;
 					return /* @__PURE__ */ jsx("td", {
-						style: align ? { textAlign: align } : void 0,
+						style: {
+							...align ? { textAlign: align } : void 0,
+							...colWidth ? { minWidth: colWidth } : void 0
+						},
 						children: item && /* @__PURE__ */ jsxs("div", {
 							className: "nb-form__detail-summary-cell",
-							style: { justifyContent: align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start" },
+							style: { alignItems },
 							children: [item.label && /* @__PURE__ */ jsx("span", {
 								className: "nb-form__detail-summary-label",
 								children: item.label
@@ -7197,6 +7108,22 @@ function useSmartCrudFields(fields, activeOperation, formData, roles) {
 	};
 }
 //#endregion
+//#region packages/crud/crud/applyFormDetailFormFieldOverrides.ts
+/**
+* Hides the header form field that mirrors `formDetail.propertyName`.
+* OneToMany collections serialized as object arrays must not render as a
+* plain text input ([object Object]) when line items are edited via formDetail.
+*/
+function applyFormDetailFormFieldOverrides(fields, formDetail) {
+	const propertyName = formDetail?.propertyName?.trim();
+	if (!propertyName) return fields;
+	return fields.map((field) => field.name === propertyName ? {
+		...field,
+		visibleOnForm: false,
+		hidden: true
+	} : field);
+}
+//#endregion
 //#region packages/crud/crud/fieldValidation.ts
 var SmartCrudFieldContractError = class extends Error {
 	issues;
@@ -7639,6 +7566,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 	const { activeOperation, formData, handleFormDataChange, startCreate, startEdit, resetOperation } = useSmartCrudOperation(void 0, routingState);
 	const roles = useSmartCrudRoles();
 	const { gridFields, processedFields, computedValues } = useSmartCrudFields(fields, activeOperation, formData, useMemo(() => roles ?? [], [roles]));
+	const formFields = useMemo(() => applyFormDetailFormFieldOverrides(processedFields, resolvedBaseResource.formDetail), [processedFields, resolvedBaseResource.formDetail]);
 	useMercureSubscription(resource.apiUrl, () => {
 		effectiveGridRef.current?.refresh();
 	}, resolvedBaseResource.mercure !== false);
@@ -7648,7 +7576,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		...!hasManualFields ? { fields: gridFields } : {},
 		apiUrl: normalizedApiUrl,
 		fields: hasManualFields ? buildFields(resource.fields) : gridFields,
-		formFields: processedFields,
+		formFields,
 		formLayout: resolvedBaseResource.formLayout ?? inferredFormLayout,
 		_supportedOperations: supportedOperations
 	}), [
@@ -7657,7 +7585,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		hasManualFields,
 		inferredFormLayout,
 		normalizedApiUrl,
-		processedFields,
+		formFields,
 		resolvedBaseResource,
 		resource.fields,
 		supportedOperations

package/dist/style.css

@@ -1705,471 +1705,6 @@ html[data-density=compact] .nb-datagrid .nb-badge {
     box-shadow: none;
   }
 }
-.nb-form__file-upload {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  width: 100%;
-}
-
-.nb-form__file-upload-zone {
-  align-items: center;
-  background: var(--surface-1);
-  border: 1px dashed var(--border-color);
-  border-radius: var(--radius-lg);
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  min-height: 112px;
-  overflow: hidden;
-  position: relative;
-  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
-  width: 100%;
-}
-.nb-form__file-upload-zone:hover:not(.nb-form__file-upload-zone--disabled):not(.nb-form__file-upload-zone--filled) {
-  background: color-mix(in srgb, var(--accent-color) 4%, var(--surface-1));
-  border-color: var(--accent-color);
-}
-.nb-form__file-upload-zone--active {
-  background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-1));
-  border-color: var(--accent-color);
-}
-.nb-form__file-upload-zone--filled {
-  border-style: solid;
-  cursor: default;
-  min-height: 88px;
-}
-.nb-form__file-upload-zone--uploading {
-  pointer-events: none;
-}
-.nb-form__file-upload-zone--disabled {
-  cursor: not-allowed;
-  opacity: 0.72;
-}
-.nb-form__file-upload-zone:focus-visible {
-  box-shadow: 0 0 0 3px var(--focus-ring-color);
-  outline: none;
-}
-
-.nb-form__file-upload--image .nb-form__file-upload-zone {
-  min-height: 168px;
-}
-
-.nb-form__file-upload--image .nb-form__file-upload-zone--filled {
-  min-height: 180px;
-}
-
-.nb-form__file-upload--invalid .nb-form__file-upload-zone {
-  border-color: var(--error-color);
-}
-
-.nb-form__file-upload-placeholder {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  max-width: 320px;
-  padding: var(--space-4);
-  text-align: center;
-}
-
-.nb-form__file-upload-icon {
-  align-items: center;
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
-  border-radius: 999px;
-  color: var(--accent-color);
-  display: inline-flex;
-  font-size: 24px;
-  height: 48px;
-  justify-content: center;
-  width: 48px;
-}
-
-.nb-form__file-upload-title {
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-}
-
-.nb-form__file-upload-hint {
-  color: var(--text-tertiary);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-}
-
-.nb-form__file-upload-preview {
-  display: block;
-  height: 100%;
-  max-height: 220px;
-  object-fit: contain;
-  width: 100%;
-}
-
-.nb-form__file-upload-file {
-  align-items: center;
-  display: flex;
-  gap: var(--space-3);
-  max-width: 100%;
-  padding: var(--space-3) var(--space-4);
-  width: 100%;
-}
-
-.nb-form__file-upload-file-icon {
-  align-items: center;
-  background: var(--surface-0);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--accent-color);
-  display: inline-flex;
-  flex: 0 0 auto;
-  font-size: 22px;
-  height: 44px;
-  justify-content: center;
-  width: 44px;
-}
-
-.nb-form__file-upload-file-meta {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.nb-form__file-upload-file-name {
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.nb-form__file-upload-file-link {
-  color: var(--accent-color);
-  font-size: var(--font-size-xs);
-  text-decoration: none;
-}
-.nb-form__file-upload-file-link:hover {
-  text-decoration: underline;
-}
-
-.nb-form__file-upload-overlay {
-  align-items: center;
-  background: rgba(0, 0, 0, 0.42);
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  font-size: var(--font-size-sm);
-  gap: var(--space-2);
-  inset: 0;
-  justify-content: center;
-  position: absolute;
-}
-
-.nb-form__file-upload-spinner {
-  animation: nb-form-file-spin 700ms linear infinite;
-  border: 2px solid rgba(255, 255, 255, 0.35);
-  border-radius: 999px;
-  border-top-color: #fff;
-  height: 24px;
-  width: 24px;
-}
-
-@keyframes nb-form-file-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.nb-form__file-upload-actions {
-  align-items: center;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent);
-  bottom: 0;
-  display: flex;
-  gap: var(--space-2);
-  inset-inline: 0;
-  justify-content: center;
-  opacity: 0;
-  padding: var(--space-3);
-  position: absolute;
-  transition: opacity var(--transition-base);
-}
-
-.nb-form__file-upload-zone--filled:hover .nb-form__file-upload-actions,
-.nb-form__file-upload-zone--filled:focus-within .nb-form__file-upload-actions {
-  opacity: 1;
-}
-
-.nb-form__file-upload-action {
-  align-items: center;
-  background: var(--surface-1);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  cursor: pointer;
-  display: inline-flex;
-  font: inherit;
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  gap: var(--space-1);
-  min-height: 28px;
-  padding: 0 var(--space-2);
-  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
-}
-.nb-form__file-upload-action:hover {
-  border-color: var(--accent-color);
-  color: var(--accent-color);
-}
-.nb-form__file-upload-action--danger:hover {
-  border-color: var(--error-color);
-  color: var(--error-color);
-}
-.nb-form__file-upload-action:focus-visible {
-  box-shadow: 0 0 0 2px var(--focus-ring-color);
-  outline: none;
-}
-
-.nb-form__file-upload-error {
-  align-items: center;
-  color: var(--error-color);
-  display: inline-flex;
-  font-size: var(--font-size-xs);
-  gap: var(--space-1);
-}
-.nb-form__file-upload {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  width: 100%;
-}
-
-.nb-form__file-upload-zone {
-  align-items: center;
-  background: var(--surface-1);
-  border: 1px dashed var(--border-color);
-  border-radius: var(--radius-lg);
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  min-height: 112px;
-  overflow: hidden;
-  position: relative;
-  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
-  width: 100%;
-}
-.nb-form__file-upload-zone:hover:not(.nb-form__file-upload-zone--disabled):not(.nb-form__file-upload-zone--filled) {
-  background: color-mix(in srgb, var(--accent-color) 4%, var(--surface-1));
-  border-color: var(--accent-color);
-}
-.nb-form__file-upload-zone--active {
-  background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-1));
-  border-color: var(--accent-color);
-}
-.nb-form__file-upload-zone--filled {
-  border-style: solid;
-  cursor: default;
-  min-height: 88px;
-}
-.nb-form__file-upload-zone--uploading {
-  pointer-events: none;
-}
-.nb-form__file-upload-zone--disabled {
-  cursor: not-allowed;
-  opacity: 0.72;
-}
-.nb-form__file-upload-zone:focus-visible {
-  box-shadow: 0 0 0 3px var(--focus-ring-color);
-  outline: none;
-}
-
-.nb-form__file-upload--image .nb-form__file-upload-zone {
-  min-height: 168px;
-}
-
-.nb-form__file-upload--image .nb-form__file-upload-zone--filled {
-  min-height: 180px;
-}
-
-.nb-form__file-upload--invalid .nb-form__file-upload-zone {
-  border-color: var(--error-color);
-}
-
-.nb-form__file-upload-placeholder {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  max-width: 320px;
-  padding: var(--space-4);
-  text-align: center;
-}
-
-.nb-form__file-upload-icon {
-  align-items: center;
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
-  border-radius: 999px;
-  color: var(--accent-color);
-  display: inline-flex;
-  font-size: 24px;
-  height: 48px;
-  justify-content: center;
-  width: 48px;
-}
-
-.nb-form__file-upload-title {
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-}
-
-.nb-form__file-upload-hint {
-  color: var(--text-tertiary);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-}
-
-.nb-form__file-upload-preview {
-  display: block;
-  height: 100%;
-  max-height: 220px;
-  object-fit: contain;
-  width: 100%;
-}
-
-.nb-form__file-upload-file {
-  align-items: center;
-  display: flex;
-  gap: var(--space-3);
-  max-width: 100%;
-  padding: var(--space-3) var(--space-4);
-  width: 100%;
-}
-
-.nb-form__file-upload-file-icon {
-  align-items: center;
-  background: var(--surface-0);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--accent-color);
-  display: inline-flex;
-  flex: 0 0 auto;
-  font-size: 22px;
-  height: 44px;
-  justify-content: center;
-  width: 44px;
-}
-
-.nb-form__file-upload-file-meta {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.nb-form__file-upload-file-name {
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.nb-form__file-upload-file-link {
-  color: var(--accent-color);
-  font-size: var(--font-size-xs);
-  text-decoration: none;
-}
-.nb-form__file-upload-file-link:hover {
-  text-decoration: underline;
-}
-
-.nb-form__file-upload-overlay {
-  align-items: center;
-  background: rgba(0, 0, 0, 0.42);
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  font-size: var(--font-size-sm);
-  gap: var(--space-2);
-  inset: 0;
-  justify-content: center;
-  position: absolute;
-}
-
-.nb-form__file-upload-spinner {
-  animation: nb-form-file-spin 700ms linear infinite;
-  border: 2px solid rgba(255, 255, 255, 0.35);
-  border-radius: 999px;
-  border-top-color: #fff;
-  height: 24px;
-  width: 24px;
-}
-
-@keyframes nb-form-file-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.nb-form__file-upload-actions {
-  align-items: center;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent);
-  bottom: 0;
-  display: flex;
-  gap: var(--space-2);
-  inset-inline: 0;
-  justify-content: center;
-  opacity: 0;
-  padding: var(--space-3);
-  position: absolute;
-  transition: opacity var(--transition-base);
-}
-
-.nb-form__file-upload-zone--filled:hover .nb-form__file-upload-actions,
-.nb-form__file-upload-zone--filled:focus-within .nb-form__file-upload-actions {
-  opacity: 1;
-}
-
-.nb-form__file-upload-action {
-  align-items: center;
-  background: var(--surface-1);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  cursor: pointer;
-  display: inline-flex;
-  font: inherit;
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  gap: var(--space-1);
-  min-height: 28px;
-  padding: 0 var(--space-2);
-  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
-}
-.nb-form__file-upload-action:hover {
-  border-color: var(--accent-color);
-  color: var(--accent-color);
-}
-.nb-form__file-upload-action--danger:hover {
-  border-color: var(--error-color);
-  color: var(--error-color);
-}
-.nb-form__file-upload-action:focus-visible {
-  box-shadow: 0 0 0 2px var(--focus-ring-color);
-  outline: none;
-}
-
-.nb-form__file-upload-error {
-  align-items: center;
-  color: var(--error-color);
-  display: inline-flex;
-  font-size: var(--font-size-xs);
-  gap: var(--space-1);
-}
-
 .nb-form {
   color: var(--text-primary);
   display: flex;
@@ -2926,6 +2461,7 @@ html[data-density=compact] .nb-datagrid .nb-badge {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   min-height: 38px;
+  overflow: visible;
   padding: 8px;
   vertical-align: middle;
 }
@@ -2949,7 +2485,8 @@ html[data-density=compact] .nb-datagrid .nb-badge {
   background: var(--surface-2);
   border-top: 0;
   flex: 0 0 auto;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
   scrollbar-width: none;
 }
 .nb-form__detail-summary-wrap::-webkit-scrollbar {
@@ -2962,10 +2499,12 @@ html[data-density=compact] .nb-datagrid .nb-badge {
 }
 
 .nb-form__detail-summary-cell {
-  align-items: baseline;
+  align-items: flex-end;
   display: inline-flex;
-  gap: var(--space-2);
+  flex-direction: column;
+  gap: 2px;
   min-width: 100%;
+  overflow: visible;
 }
 
 .nb-form__detail-summary-label {
@@ -2978,9 +2517,12 @@ html[data-density=compact] .nb-datagrid .nb-badge {
 
 .nb-form__detail-summary-value {
   color: var(--text-primary);
+  display: block;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
+  max-width: none;
   white-space: nowrap;
+  width: max-content;
 }
 
 .nb-form__detail-table td .nb-form__control,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/crud",
-  "version": "0.5.14",
+  "version": "0.5.16",
   "type": "module",
   "description": "Declarative CRUD engine with field DSL, forms, datagrids, RBAC, conditional logic and pluggable adapters (Hydra/REST).",
   "license": "MIT",
@@ -56,10 +56,7 @@
     "react-dom": "^19.0.0",
     "react-i18next": "^14.0.0",
     "react-router-dom": "^6.0.0",
-    "@nubitio/core": "^0.5.14",
-    "@nubitio/ui": "^0.5.14"
-  },
-  "dependencies": {
-    "react-dropzone": "^15.0.0"
+    "@nubitio/core": "^0.5.16",
+    "@nubitio/ui": "^0.5.16"
   }
 }