@nubitio/crud 0.5.23 → 0.5.26

package/dist/index.mjs

@@ -4,6 +4,9 @@ import { createPortal } from "react-dom";
 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 { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
 import { useQueryClient } from "@tanstack/react-query";
 //#region packages/crud/crud/defineResource.ts
 const stringResourceCache = /* @__PURE__ */ new Map();
@@ -1428,19 +1431,179 @@ const fileTypeModule = {
 	}
 };
 //#endregion
+//#region packages/crud/field/registry/types/HtmlEditor.tsx
+function ToolbarButton({ active, disabled, title, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title,
+		disabled,
+		className: `nb-html-editor__btn${active ? " nb-html-editor__btn--active" : ""}`,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onClick();
+		},
+		children
+	});
+}
+function ToolbarDivider() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "nb-html-editor__divider",
+		"aria-hidden": true
+	});
+}
+function HtmlEditor({ id, name, value, disabled, readOnly, hasError, onChange }) {
+	const editable = !disabled && !readOnly;
+	const editor = useEditor({
+		extensions: [StarterKit, Link.configure({
+			openOnClick: false,
+			autolink: true
+		})],
+		content: value,
+		editable,
+		onUpdate: ({ editor: e }) => {
+			onChange(e.isEmpty ? "" : e.getHTML());
+		}
+	});
+	useEffect(() => {
+		if (!editor) return;
+		if ((editor.isEmpty ? "" : editor.getHTML()) !== value) editor.commands.setContent(value ?? "");
+	}, [value, editor]);
+	useEffect(() => {
+		editor?.setEditable(editable);
+	}, [editable, editor]);
+	const handleLinkToggle = useCallback(() => {
+		if (!editor) return;
+		if (editor.isActive("link")) editor.chain().focus().unsetLink().run();
+		else {
+			const url = window.prompt("URL");
+			if (url) editor.chain().focus().setLink({ href: url }).run();
+		}
+	}, [editor]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `nb-html-editor${hasError ? " nb-html-editor--error" : ""}${!editable ? " nb-html-editor--readonly" : ""}`,
+		children: [
+			editable && /* @__PURE__ */ jsxs("div", {
+				className: "nb-html-editor__toolbar",
+				role: "toolbar",
+				"aria-label": "Text formatting",
+				children: [
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						title: "Bold (Ctrl+B)",
+						active: editor?.isActive("bold"),
+						onClick: () => editor?.chain().focus().toggleBold().run(),
+						children: /* @__PURE__ */ jsx("strong", { children: "B" })
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						title: "Italic (Ctrl+I)",
+						active: editor?.isActive("italic"),
+						onClick: () => editor?.chain().focus().toggleItalic().run(),
+						children: /* @__PURE__ */ jsx("em", { children: "I" })
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						title: "Strikethrough",
+						active: editor?.isActive("strike"),
+						onClick: () => editor?.chain().focus().toggleStrike().run(),
+						children: /* @__PURE__ */ jsx("s", { children: "S" })
+					}),
+					/* @__PURE__ */ jsx(ToolbarDivider, {}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						title: "Heading 2",
+						active: editor?.isActive("heading", { level: 2 }),
+						onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
+						children: "H2"
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						title: "Heading 3",
+						active: editor?.isActive("heading", { level: 3 }),
+						onClick: () => editor?.chain().focus().toggleHeading({ level: 3 }).run(),
+						children: "H3"
+					}),
+					/* @__PURE__ */ jsx(ToolbarDivider, {}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						title: "Bullet list",
+						active: editor?.isActive("bulletList"),
+						onClick: () => editor?.chain().focus().toggleBulletList().run(),
+						children: "≡"
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						title: "Ordered list",
+						active: editor?.isActive("orderedList"),
+						onClick: () => editor?.chain().focus().toggleOrderedList().run(),
+						children: "1."
+					}),
+					/* @__PURE__ */ jsx(ToolbarDivider, {}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						title: "Blockquote",
+						active: editor?.isActive("blockquote"),
+						onClick: () => editor?.chain().focus().toggleBlockquote().run(),
+						children: "“"
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						title: editor?.isActive("link") ? "Remove link" : "Add link",
+						active: editor?.isActive("link"),
+						onClick: handleLinkToggle,
+						children: "🔗"
+					}),
+					/* @__PURE__ */ jsx(ToolbarDivider, {}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						title: "Undo (Ctrl+Z)",
+						disabled: !editor?.can().undo(),
+						onClick: () => editor?.chain().focus().undo().run(),
+						children: "↩"
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						title: "Redo (Ctrl+Y)",
+						disabled: !editor?.can().redo(),
+						onClick: () => editor?.chain().focus().redo().run(),
+						children: "↪"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				id,
+				name,
+				value,
+				readOnly: true
+			}),
+			/* @__PURE__ */ jsx(EditorContent, {
+				editor,
+				className: "nb-html-editor__content"
+			})
+		]
+	});
+}
+//#endregion
 //#region packages/crud/field/registry/types/html.tsx
+function stripTags(html) {
+	if (html === null || html === void 0) return "";
+	const str = String(html);
+	if (!str.includes("<")) return str;
+	try {
+		return new DOMParser().parseFromString(str, "text/html").body.textContent ?? "";
+	} catch {
+		return str.replace(/<[^>]*>/g, "");
+	}
+}
 const htmlTypeModule = {
 	defaultFilterOperator: "contains",
 	filterOperators: TEXT_OPERATORS,
 	buildFilterTerms: defaultBuildFilterTerms,
-	cellText: (_field, value, ctx) => getPrimitiveDisplay(value, ctx.yesLabel, ctx.noLabel),
+	cellText: (_field, value) => stripTags(value),
 	serializeFormValue: () => KEEP,
 	serializeDetailValue: () => KEEP,
-	ControlRender: ({ field, value, commonProps, errorClass, setFieldValue }) => /* @__PURE__ */ jsx("textarea", {
-		...commonProps,
-		className: `nb-form__control nb-form__textarea${errorClass}`,
-		value: inputValue(value),
-		onChange: (event) => setFieldValue(field.name, event.target.value)
+	CellRender: ({ value }) => /* @__PURE__ */ jsx("div", {
+		className: "nb-datagrid__html-cell",
+		dangerouslySetInnerHTML: { __html: String(value ?? "") }
+	}),
+	ControlRender: ({ field, value, commonProps, disabled, errorClass, setFieldValue }) => /* @__PURE__ */ jsx(HtmlEditor, {
+		id: commonProps.id,
+		name: field.name,
+		value: String(value ?? ""),
+		disabled,
+		readOnly: commonProps.readOnly,
+		hasError: errorClass !== "",
+		onChange: (html) => setFieldValue(field.name, html)
 	})
 };
 //#endregion
@@ -1737,7 +1900,13 @@ function renderCell(field, row, rowIndex, columnIndex, entityOptions, yesLabel =
 		rowIndex,
 		columnIndex
 	});
-	return getFieldTypeModule(field.type).cellText(field, value, {
+	const typeModule = getFieldTypeModule(field.type);
+	if (typeModule.CellRender) return React.createElement(typeModule.CellRender, {
+		field,
+		value,
+		row
+	});
+	return typeModule.cellText(field, value, {
 		entityOptions,
 		yesLabel,
 		noLabel
@@ -1838,6 +2007,337 @@ function DetailGridSection({ fields, url }) {
 	});
 }
 //#endregion
+//#region packages/crud/adapter/HydraAdapter.ts
+function trimTrailingSlash(value) {
+	return value.replace(/\/+$/, "");
+}
+function buildIRI(url, value) {
+	if (value.startsWith("/")) return value;
+	return `${url}/${value}`;
+}
+/**
+* Default backend adapter for API Platform / JSON-LD + Hydra backends.
+*
+* Conventions assumed:
+* - Records carry an `@id` IRI (e.g. `/api/users/5`) as their canonical identifier.
+* - Entity fields are serialized as IRI strings in POST/PATCH bodies.
+* - Collection responses follow the `hydra:member` / `hydra:totalItems` shape.
+* - `_iri` is a synthetic alias for `@id` used internally by the engine.
+*/
+const HydraAdapter = {
+	getRowId(record, idField) {
+		const direct = record[idField];
+		if (direct !== void 0 && direct !== null) return String(direct);
+		const iri = record["@id"] ?? record["_iri"];
+		if (iri !== void 0 && iri !== null) return String(iri);
+		return String(record["id"] ?? "");
+	},
+	buildItemUrl(baseUrl, id) {
+		const str = String(id);
+		if (str.startsWith("/")) return str;
+		return `${trimTrailingSlash(baseUrl)}/${str}`;
+	},
+	serializeEntityRef(field, rawValue) {
+		if (rawValue === null || rawValue === void 0 || rawValue === "" || rawValue === -999) return;
+		if (typeof rawValue === "object") {
+			const entity = rawValue;
+			const atId = entity["@id"];
+			if (typeof atId === "string") return buildIRI(field.url ?? "", atId);
+			const idValue = entity["id"];
+			const resolvedId = idValue !== void 0 && idValue !== null ? String(idValue) : String(entity[field.valueField]);
+			return buildIRI(field.url ?? "", resolvedId);
+		}
+		return buildIRI(field.url ?? "", String(rawValue));
+	},
+	normalizeEntityValue(rawValue, field) {
+		if (typeof rawValue === "string") return field.valueField === "_iri" ? rawValue : rawValue.split("/").pop();
+		if (typeof rawValue === "object" && rawValue !== null) {
+			const entity = rawValue;
+			const atId = entity["@id"];
+			if (typeof atId === "string") return field.valueField === "_iri" ? atId : atId.split("/").pop() ?? atId;
+			const directValue = entity[field.valueField];
+			if (directValue !== void 0 && directValue !== null) return directValue;
+		}
+		return rawValue;
+	},
+	getEntityOptionKey(item, field) {
+		if (field.valueField === "_iri") return item["_iri"] ?? item["@id"] ?? item["id"];
+		return item[field.valueField] ?? item["value"] ?? item["id"] ?? item["@id"];
+	},
+	parseListResponse(response) {
+		const r = response;
+		const member = r["hydra:member"];
+		if (Array.isArray(member)) return {
+			items: member,
+			total: Number(r["hydra:totalItems"] ?? member.length)
+		};
+		if (Array.isArray(response)) return {
+			items: response,
+			total: response.length
+		};
+		return {
+			items: [],
+			total: 0
+		};
+	},
+	synthesizeEntityKey(field, entityValue) {
+		if (!field.url) return void 0;
+		const base = trimTrailingSlash(field.url);
+		const directId = entityValue["id"];
+		if (typeof directId === "string" || typeof directId === "number") return `${base}/${directId}`;
+		const directValue = entityValue[field.valueField];
+		if (field.valueField !== "_iri" && (typeof directValue === "string" || typeof directValue === "number")) return `${base}/${directValue}`;
+		for (const key of [
+			"code",
+			"uuid",
+			"slug"
+		]) {
+			const candidate = entityValue[key];
+			if (typeof candidate === "string" || typeof candidate === "number") return `${base}/${candidate}`;
+		}
+	}
+};
+//#endregion
+//#region packages/crud/form/serializeFormData.ts
+function applySerializedValue(formData, field, result) {
+	if (result.kind === "set") formData[field.name] = result.value;
+	else if (result.kind === "omit") delete formData[field.name];
+}
+/**
+* Pure serialization of form data before HTTP submission.
+*
+* Applies uploaded file references and computed fields, then delegates the
+* per-type wire format (entity refs, business dates, numeric coercion, file
+* handling, NONE stripping) to each field's Field-Type module.
+*
+* This function is extracted from useFormSubmit for testability.
+*/
+function serializeFormFields(rawData, fields, ctx) {
+	const formData = { ...rawData };
+	ctx.uploadedFiles.forEach((file) => {
+		formData[file.name] = file.iri;
+	});
+	fields.forEach((field) => {
+		if (!field.computed) return;
+		const computedValue = field.computed(formData);
+		if (computedValue !== void 0) formData[field.name] = computedValue;
+	});
+	const moduleCtx = {
+		adapter: ctx.adapter ?? HydraAdapter,
+		format: ctx.format,
+		getFieldValue: ctx.getFieldValue
+	};
+	fields.forEach((field) => {
+		applySerializedValue(formData, field, getFieldTypeModule(field.type).serializeFormValue(field, formData[field.name], moduleCtx));
+	});
+	return formData;
+}
+/**
+* Serializes detail grid rows (entity refs, numeric coercion, identity cleanup).
+* Pure function — operates on an array of row records.
+*/
+function serializeDetailRows(rows, detailFields, detailIdField, isEditMode, adapter = HydraAdapter) {
+	const details = structuredClone(rows);
+	detailFields.forEach((field) => {
+		const typeModule = getFieldTypeModule(field.type);
+		details.forEach((detail) => {
+			applySerializedValue(detail, field, typeModule.serializeDetailValue(field, detail[field.name], adapter));
+		});
+	});
+	details.forEach((detail) => {
+		if (!isEditMode) delete detail[detailIdField];
+		else if (typeof detail[detailIdField] === "string") delete detail[detailIdField];
+	});
+	return details;
+}
+//#endregion
+//#region packages/crud/datagrid/useInlineEdit.ts
+/** Fields that are safe to edit inline (identity/readonly/file types are excluded). */
+function canEditFieldInline(field) {
+	return !field.isIdentity && !field.readonly && field.type !== "file" && field.visibleOnForm !== false;
+}
+function useInlineEdit({ mode, url, idField, adapter = HydraAdapter, httpClient, fields, onSaveSuccess, onSaveError }) {
+	const [draftRows, setDraftRows] = useState(/* @__PURE__ */ new Map());
+	const [savingRows, setSavingRows] = useState(/* @__PURE__ */ new Set());
+	const [rowErrors, setRowErrors] = useState(/* @__PURE__ */ new Map());
+	const draftRowsRef = useRef(draftRows);
+	draftRowsRef.current = draftRows;
+	const optsRef = useRef({
+		url,
+		idField,
+		adapter,
+		httpClient,
+		fields,
+		onSaveSuccess,
+		onSaveError
+	});
+	optsRef.current = {
+		url,
+		idField,
+		adapter,
+		httpClient,
+		fields,
+		onSaveSuccess,
+		onSaveError
+	};
+	const isEditing = useCallback((key) => draftRowsRef.current.has(key), []);
+	const startEdit = useCallback((row) => {
+		const key = row[optsRef.current.idField];
+		setDraftRows((prev) => {
+			const base = mode === "row" ? [] : Array.from(prev.entries());
+			return new Map([...base, [key, { ...row }]]);
+		});
+		setRowErrors((prev) => {
+			const next = new Map(prev);
+			next.delete(key);
+			return next;
+		});
+	}, [mode]);
+	const cancelEdit = useCallback((key) => {
+		setDraftRows((prev) => {
+			const next = new Map(prev);
+			next.delete(key);
+			return next;
+		});
+		setRowErrors((prev) => {
+			const next = new Map(prev);
+			next.delete(key);
+			return next;
+		});
+	}, []);
+	const discardAll = useCallback(() => {
+		setDraftRows(/* @__PURE__ */ new Map());
+		setRowErrors(/* @__PURE__ */ new Map());
+	}, []);
+	const updateDraft = useCallback((key, fieldName, value) => {
+		setDraftRows((prev) => {
+			const current = prev.get(key);
+			if (!current) return prev;
+			const next = new Map(prev);
+			next.set(key, {
+				...current,
+				[fieldName]: value
+			});
+			return next;
+		});
+	}, []);
+	const doSaveRow = useCallback(async (key) => {
+		const { url: u, adapter: a, httpClient: http, fields: fs, onSaveError: onErr } = optsRef.current;
+		const draft = draftRowsRef.current.get(key);
+		if (!draft) return false;
+		const errors = {};
+		fs.forEach((field) => {
+			if (!canEditFieldInline(field)) return;
+			if (field.required && (draft[field.name] == null || draft[field.name] === "")) errors[field.name] = "required";
+		});
+		if (Object.keys(errors).length > 0) {
+			setRowErrors((prev) => new Map(prev).set(key, errors));
+			return false;
+		}
+		setSavingRows((prev) => new Set([...prev, key]));
+		const serialized = serializeFormFields(draft, fs.filter(canEditFieldInline), {
+			uploadedFiles: [],
+			getFieldValue: (name) => draft[name]
+		});
+		try {
+			await http.patch(a.buildItemUrl(u, key), serialized);
+			setDraftRows((prev) => {
+				const next = new Map(prev);
+				next.delete(key);
+				return next;
+			});
+			setRowErrors((prev) => {
+				const next = new Map(prev);
+				next.delete(key);
+				return next;
+			});
+			return true;
+		} catch (err) {
+			onErr?.(key, err);
+			if (typeof err === "object" && err !== null && "status" in err && err.status === 422 && "data" in err) {
+				const data = err.data;
+				if (typeof data === "object" && data !== null && "violations" in data) {
+					const violations = data.violations ?? [];
+					const fieldErrors = {};
+					violations.forEach((v) => {
+						fieldErrors[v.propertyPath] = v.message;
+					});
+					setRowErrors((prev) => new Map(prev).set(key, fieldErrors));
+				}
+			}
+			return false;
+		} finally {
+			setSavingRows((prev) => {
+				const next = new Set(prev);
+				next.delete(key);
+				return next;
+			});
+		}
+	}, []);
+	return {
+		draftRows,
+		savingRows,
+		rowErrors,
+		isEditing,
+		startEdit,
+		cancelEdit,
+		discardAll,
+		updateDraft,
+		saveRow: useCallback(async (key) => {
+			if (await doSaveRow(key)) optsRef.current.onSaveSuccess?.();
+		}, [doSaveRow]),
+		saveAll: useCallback(async () => {
+			const keys = Array.from(draftRowsRef.current.keys());
+			if ((await Promise.allSettled(keys.map((key) => doSaveRow(key)))).some((r) => r.status === "fulfilled" && r.value)) optsRef.current.onSaveSuccess?.();
+		}, [doSaveRow])
+	};
+}
+//#endregion
+//#region packages/crud/datagrid/InlineEditCell.tsx
+/**
+* Renders a single cell as an editable control during inline row editing.
+* Uses the same FieldTypeModule.ControlRender path as the full form, but
+* with a compact common-props class so controls fit inside a table cell.
+*/
+function InlineEditCell({ field, rowKey, draft, onChange, errors, disabled = false, allRemoteOptions, httpClient, t }) {
+	const typeModule = getFieldTypeModule(field.type);
+	const fieldError = errors?.[field.name];
+	const errorClass = fieldError ? " is-error" : "";
+	const commonProps = {
+		className: `nb-inline-control${errorClass}`,
+		disabled,
+		id: `iec-${String(rowKey)}-${field.name}`,
+		name: field.name,
+		onClick: void 0,
+		readOnly: false,
+		required: field.required
+	};
+	const ctx = {
+		httpClient,
+		t,
+		remoteOptions: allRemoteOptions,
+		getPrependData: () => void 0,
+		getFieldValue: (name) => draft[name],
+		getExistingMedia: () => null,
+		clearExistingMedia: () => {},
+		upsertUploadedFile: () => {}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: `nb-inline-cell${errorClass ? " nb-inline-cell--error" : ""}`,
+		children: typeModule.ControlRender({
+			field,
+			value: draft[field.name],
+			error: fieldError,
+			errorClass,
+			disabled,
+			readOnly: false,
+			commonProps,
+			setFieldValue: onChange,
+			ctx
+		})
+	});
+}
+//#endregion
 //#region packages/crud/summary/SummaryUtils.ts
 function toFiniteNumber(value) {
 	if (value === null || value === void 0 || value === "") return null;
@@ -1907,19 +2407,20 @@ function resolveSummaryText(rows, item) {
 const DETAIL_COL_WIDTH = 36;
 const CHECKBOX_COL_WIDTH = 36;
 const ACTIONS_COL_WIDTH = 44;
+const INLINE_ACTIONS_COL_WIDTH = 72;
 const DEFAULT_COL_WIDTH = 120;
 const MIN_COL_WIDTH = 48;
 function getColumnWidth(field, colWidths) {
 	return colWidths[field.name] ?? field.width ?? field.minWidth ?? DEFAULT_COL_WIDTH;
 }
-function computeLayoutWidth({ visibleFields, colWidths, hasCheckbox, hasDetail, hasRowActions, containerWidth }) {
+function computeLayoutWidth({ visibleFields, colWidths, hasCheckbox, hasDetail, hasRowActions, containerWidth, actionsColWidth = ACTIONS_COL_WIDTH }) {
 	let total = 0;
 	if (hasDetail) total += DETAIL_COL_WIDTH;
 	if (hasCheckbox) total += CHECKBOX_COL_WIDTH;
 	visibleFields.forEach((field) => {
 		total += getColumnWidth(field, colWidths);
 	});
-	if (hasRowActions) total += ACTIONS_COL_WIDTH;
+	if (hasRowActions) total += actionsColWidth;
 	return Math.max(containerWidth, total);
 }
 function GridColumnGroup({ fields, colWidths, hasCheckbox, hasDetail, hasRowActions }) {
@@ -2302,9 +2803,11 @@ const NativeDataGridView = forwardRef((options, ref) => {
 	]);
 	const fieldsRef = useRef(options.fields);
 	fieldsRef.current = options.fields;
+	const loadSeqRef = useRef(0);
 	const loadRows = useCallback(async () => {
 		if (options.manualLoad) return rowsRef.current;
 		setIsGridLoading(true);
+		const seq = ++loadSeqRef.current;
 		const loadOptions = {
 			filter: buildFilterExpression(filters, filterOperators, fieldsRef.current),
 			sort
@@ -2314,6 +2817,7 @@ const NativeDataGridView = forwardRef((options, ref) => {
 			loadOptions.take = pageSize;
 		}
 		const result = await source.load(loadOptions);
+		if (seq !== loadSeqRef.current) return rowsRef.current;
 		rowsRef.current = result.data;
 		setRows(result.data);
 		setTotalCount(result.totalCount);
@@ -2367,6 +2871,17 @@ const NativeDataGridView = forwardRef((options, ref) => {
 		resourceStoreFactory,
 		visibleFields
 	]);
+	const canInlineEditMode = options.editMode === "row" || options.editMode === "batch";
+	const inlineEdit = useInlineEdit({
+		mode: options.editMode === "batch" ? "batch" : "row",
+		url: options.url,
+		idField,
+		adapter: options.adapter,
+		httpClient,
+		fields: options.fields,
+		onSaveSuccess: () => void loadRows(),
+		onSaveError: () => {}
+	});
 	const handleStateRef = useRef({
 		selectedKeys,
 		filters,
@@ -2433,7 +2948,13 @@ const NativeDataGridView = forwardRef((options, ref) => {
 	const rowEditable = (row) => options.canEditRow?.(row) !== false;
 	const rowDeletable = (row) => options.canDeleteRow?.(row) !== false;
 	const buildRowActions = (row) => [
-		...options.allowEdit && rowEditable(row) && (options.onEdit || options.events?.EDIT) ? [{
+		...options.allowEdit && rowEditable(row) && canInlineEditMode && !inlineEdit.isEditing(row[idField]) ? [{
+			text: t("grid.inlineEditRow"),
+			icon: "ph-pencil-simple",
+			disabled: options.editDisabled,
+			onClick: () => inlineEdit.startEdit(row)
+		}] : [],
+		...options.allowEdit && rowEditable(row) && !canInlineEditMode && (options.onEdit || options.events?.EDIT) ? [{
 			text: t("grid.buttonEdit"),
 			icon: "ph-pencil-simple",
 			disabled: options.editDisabled,
@@ -2457,6 +2978,10 @@ const NativeDataGridView = forwardRef((options, ref) => {
 		}] : []
 	];
 	const openRow = (row) => {
+		if (options.allowEdit && rowEditable(row) && canInlineEditMode) {
+			inlineEdit.startEdit(row);
+			return;
+		}
 		if (options.allowEdit && rowEditable(row) && (options.onEdit || options.events?.EDIT)) {
 			if (options.onEdit) options.onEdit(row);
 			else emit(options.events.EDIT, { row });
@@ -2588,22 +3113,24 @@ const NativeDataGridView = forwardRef((options, ref) => {
 	};
 	const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
 	const hasCheckbox = options.selectionMode === "multiple";
-	const hasBuiltInRowActions = Boolean(options.allowEdit && (options.onEdit || options.events?.EDIT) || options.allowView && options.onView || options.allowDelete && (options.onDelete || options.events?.DELETE));
+	const hasBuiltInRowActions = Boolean(options.allowEdit && (canInlineEditMode || options.onEdit || options.events?.EDIT) || options.allowView && options.onView || options.allowDelete && (options.onDelete || options.events?.DELETE));
 	const hasRowActions = Boolean(options.mode !== "minimal" && (hasBuiltInRowActions || options.rowActions));
 	const colSpan = visibleFields.length + (hasCheckbox ? 1 : 0) + (options.detailFields ? 1 : 0) + (hasRowActions ? 1 : 0);
 	const hasDetail = Boolean(options.detailFields);
+	const actionsColWidth = canInlineEditMode ? INLINE_ACTIONS_COL_WIDTH : ACTIONS_COL_WIDTH;
 	const layoutWidth = computeLayoutWidth({
 		visibleFields,
 		colWidths,
 		hasCheckbox,
 		hasDetail,
 		hasRowActions,
-		containerWidth
+		containerWidth,
+		actionsColWidth
 	});
 	const resolvedColWidths = useMemo(() => {
 		if (visibleFields.length === 0) return colWidths;
 		const dataTotal = visibleFields.reduce((sum, f) => sum + getColumnWidth(f, colWidths), 0);
-		const fixedTotal = (hasCheckbox ? CHECKBOX_COL_WIDTH : 0) + (hasDetail ? DETAIL_COL_WIDTH : 0) + (hasRowActions ? ACTIONS_COL_WIDTH : 0);
+		const fixedTotal = (hasCheckbox ? CHECKBOX_COL_WIDTH : 0) + (hasDetail ? DETAIL_COL_WIDTH : 0) + (hasRowActions ? actionsColWidth : 0);
 		const extra = Math.max(0, containerWidth - dataTotal - fixedTotal);
 		if (extra === 0 || dataTotal === 0) return colWidths;
 		let distributed = 0;
@@ -2707,6 +3234,31 @@ const NativeDataGridView = forwardRef((options, ref) => {
 							})
 						]
 					}),
+					options.editMode === "batch" && inlineEdit.draftRows.size > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "nb-datagrid__batch-bar",
+						role: "status",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "nb-datagrid__batch-bar-label",
+							children: t("grid.inlineUnsavedRows", { count: inlineEdit.draftRows.size })
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "nb-datagrid__batch-bar-actions",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "nb-datagrid__batch-bar-btn nb-datagrid__batch-bar-btn--discard",
+								onClick: () => inlineEdit.discardAll(),
+								children: t("grid.inlineDiscardAll")
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "nb-datagrid__batch-bar-btn nb-datagrid__batch-bar-btn--save",
+								onClick: () => void inlineEdit.saveAll(),
+								children: t("grid.inlineSaveAll", { count: inlineEdit.draftRows.size })
+							})]
+						})]
+					}),
+					options.aboveGrid ? /* @__PURE__ */ jsx("div", {
+						className: "nb-datagrid__above-grid",
+						children: options.aboveGrid
+					}) : null,
 					isMobile && quickSearchField && (options.filterRow ?? true) && /* @__PURE__ */ jsxs("div", {
 						className: "nb-datagrid__quick-search",
 						children: [
@@ -2996,16 +3548,33 @@ const NativeDataGridView = forwardRef((options, ref) => {
 										}) }) : rows.map((row, rowIndex) => {
 											const key = row[idField] ?? rowIndex;
 											const selected = selectedKeys.includes(key);
+											const editing = inlineEdit.draftRows.has(key);
+											const saving = inlineEdit.savingRows.has(key);
+											const rowDraft = inlineEdit.draftRows.get(key) ?? row;
+											const rowFieldErrors = inlineEdit.rowErrors.get(key);
 											const detailFields = typeof options.detailFields === "function" ? options.detailFields(row) : options.detailFields;
 											const detailUrl = options.detailUrl?.replace("{id}", String(key));
 											const expanded = expandedKeys.has(key);
 											const rowActions = buildRowActions(row);
 											return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
-												className: `nb-datagrid__row ${expanded ? "nb-datagrid__row--expanded" : ""} ${selected ? "nb-datagrid__row--selected" : ""}`,
+												className: [
+													"nb-datagrid__row",
+													expanded ? "nb-datagrid__row--expanded" : "",
+													selected ? "nb-datagrid__row--selected" : "",
+													editing ? "nb-datagrid__row--editing" : "",
+													saving ? "nb-datagrid__row--saving" : ""
+												].filter(Boolean).join(" "),
 												tabIndex: 0,
 												"aria-selected": selected,
-												onClick: () => selectRow(row),
+												onClick: () => {
+													if (!editing) selectRow(row);
+												},
 												onDoubleClick: () => {
+													if (editing) return;
+													if (options.allowEdit && rowEditable(row) && canInlineEditMode) {
+														inlineEdit.startEdit(row);
+														return;
+													}
 													if (options.allowEdit && (options.onEdit || options.events?.EDIT)) {
 														if (options.onEdit) options.onEdit(row);
 														else emit(options.events.EDIT, { row });
@@ -3014,10 +3583,13 @@ const NativeDataGridView = forwardRef((options, ref) => {
 													if (options.allowView && options.onView) options.onView(row);
 												},
 												onKeyDown: (event) => {
-													if (event.key === "Enter" && options.allowEdit && (options.onEdit || options.events?.EDIT)) if (options.onEdit) options.onEdit(row);
+													if (editing && event.key === "Escape") inlineEdit.cancelEdit(key);
+													else if (editing && event.key === "Enter") inlineEdit.saveRow(key);
+													else if (!editing && event.key === "Enter" && options.allowEdit && canInlineEditMode && rowEditable(row)) inlineEdit.startEdit(row);
+													else if (!editing && event.key === "Enter" && options.allowEdit && (options.onEdit || options.events?.EDIT)) if (options.onEdit) options.onEdit(row);
 													else emit(options.events.EDIT, { row });
-													else if (event.key === "Enter" && options.allowView && options.onView) options.onView(row);
-													else if (event.key === "Delete" && options.allowDelete && (options.onDelete || options.events?.DELETE)) setConfirmRow(row);
+													else if (!editing && event.key === "Enter" && options.allowView && options.onView) options.onView(row);
+													else if (!editing && event.key === "Delete" && options.allowDelete && (options.onDelete || options.events?.DELETE)) setConfirmRow(row);
 													else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
 														event.preventDefault();
 														const allRows = event.currentTarget.closest("tbody")?.querySelectorAll("tr.nb-datagrid__row");
@@ -3062,9 +3634,29 @@ const NativeDataGridView = forwardRef((options, ref) => {
 														})
 													}),
 													visibleFields.map((field, columnIndex) => {
+														const width = getColumnWidth(field, resolvedColWidths);
+														if (editing && canEditFieldInline(field)) return /* @__PURE__ */ jsx("td", {
+															style: {
+																width,
+																textAlign: field.align
+															},
+															className: "nb-datagrid__edit-cell",
+															onClick: (e) => e.stopPropagation(),
+															children: /* @__PURE__ */ jsx(InlineEditCell, {
+																field,
+																rowKey: key,
+																draft: rowDraft,
+																onChange: (name, value) => inlineEdit.updateDraft(key, name, value),
+																errors: rowFieldErrors,
+																disabled: saving,
+																allRemoteOptions: filterRemoteOptions,
+																httpClient,
+																t
+															})
+														}, field.name);
 														return /* @__PURE__ */ jsx("td", {
 															style: {
-																width: getColumnWidth(field, resolvedColWidths),
+																width,
 																textAlign: field.align
 															},
 															title: getCellText(field, row, filterRemoteOptions[field.name], t("common.yes"), t("common.no")),
@@ -3074,7 +3666,32 @@ const NativeDataGridView = forwardRef((options, ref) => {
 													hasRowActions && /* @__PURE__ */ jsx("td", {
 														className: "nb-datagrid__actions-cell",
 														onClick: (e) => e.stopPropagation(),
-														children: /* @__PURE__ */ jsx("div", {
+														children: editing ? /* @__PURE__ */ jsxs("div", {
+															className: "nb-datagrid__inline-actions",
+															children: [/* @__PURE__ */ jsx("button", {
+																type: "button",
+																className: "nb-datagrid__inline-btn nb-datagrid__inline-btn--save",
+																disabled: saving,
+																"aria-label": t("grid.inlineSaveRow"),
+																title: t("grid.inlineSaveRow"),
+																onClick: () => void inlineEdit.saveRow(key),
+																children: /* @__PURE__ */ jsx("i", {
+																	className: "ph ph-check",
+																	"aria-hidden": "true"
+																})
+															}), /* @__PURE__ */ jsx("button", {
+																type: "button",
+																className: "nb-datagrid__inline-btn nb-datagrid__inline-btn--cancel",
+																disabled: saving,
+																"aria-label": t("grid.inlineCancelRow"),
+																title: t("grid.inlineCancelRow"),
+																onClick: () => inlineEdit.cancelEdit(key),
+																children: /* @__PURE__ */ jsx("i", {
+																	className: "ph ph-x",
+																	"aria-hidden": "true"
+																})
+															})]
+														}) : /* @__PURE__ */ jsx("div", {
 															className: "nb-datagrid__row-actions",
 															children: rowActions.length > 0 && /* @__PURE__ */ jsx(IconButton, {
 																icon: "ph ph-dots-three-vertical",
@@ -3424,97 +4041,6 @@ const FORM_EVENTS = {
 };
 const FORM_ERRORS_EVENT = "form-errors";
 //#endregion
-//#region packages/crud/adapter/HydraAdapter.ts
-function trimTrailingSlash(value) {
-	return value.replace(/\/+$/, "");
-}
-function buildIRI(url, value) {
-	if (value.startsWith("/")) return value;
-	return `${url}/${value}`;
-}
-/**
-* Default backend adapter for API Platform / JSON-LD + Hydra backends.
-*
-* Conventions assumed:
-* - Records carry an `@id` IRI (e.g. `/api/users/5`) as their canonical identifier.
-* - Entity fields are serialized as IRI strings in POST/PATCH bodies.
-* - Collection responses follow the `hydra:member` / `hydra:totalItems` shape.
-* - `_iri` is a synthetic alias for `@id` used internally by the engine.
-*/
-const HydraAdapter = {
-	getRowId(record, idField) {
-		const direct = record[idField];
-		if (direct !== void 0 && direct !== null) return String(direct);
-		const iri = record["@id"] ?? record["_iri"];
-		if (iri !== void 0 && iri !== null) return String(iri);
-		return String(record["id"] ?? "");
-	},
-	buildItemUrl(baseUrl, id) {
-		const str = String(id);
-		if (str.startsWith("/")) return str;
-		return `${trimTrailingSlash(baseUrl)}/${str}`;
-	},
-	serializeEntityRef(field, rawValue) {
-		if (rawValue === null || rawValue === void 0 || rawValue === "" || rawValue === -999) return;
-		if (typeof rawValue === "object") {
-			const entity = rawValue;
-			const atId = entity["@id"];
-			if (typeof atId === "string") return buildIRI(field.url ?? "", atId);
-			const idValue = entity["id"];
-			const resolvedId = idValue !== void 0 && idValue !== null ? String(idValue) : String(entity[field.valueField]);
-			return buildIRI(field.url ?? "", resolvedId);
-		}
-		return buildIRI(field.url ?? "", String(rawValue));
-	},
-	normalizeEntityValue(rawValue, field) {
-		if (typeof rawValue === "string") return field.valueField === "_iri" ? rawValue : rawValue.split("/").pop();
-		if (typeof rawValue === "object" && rawValue !== null) {
-			const entity = rawValue;
-			const atId = entity["@id"];
-			if (typeof atId === "string") return field.valueField === "_iri" ? atId : atId.split("/").pop() ?? atId;
-			const directValue = entity[field.valueField];
-			if (directValue !== void 0 && directValue !== null) return directValue;
-		}
-		return rawValue;
-	},
-	getEntityOptionKey(item, field) {
-		if (field.valueField === "_iri") return item["_iri"] ?? item["@id"] ?? item["id"];
-		return item[field.valueField] ?? item["value"] ?? item["id"] ?? item["@id"];
-	},
-	parseListResponse(response) {
-		const r = response;
-		const member = r["hydra:member"];
-		if (Array.isArray(member)) return {
-			items: member,
-			total: Number(r["hydra:totalItems"] ?? member.length)
-		};
-		if (Array.isArray(response)) return {
-			items: response,
-			total: response.length
-		};
-		return {
-			items: [],
-			total: 0
-		};
-	},
-	synthesizeEntityKey(field, entityValue) {
-		if (!field.url) return void 0;
-		const base = trimTrailingSlash(field.url);
-		const directId = entityValue["id"];
-		if (typeof directId === "string" || typeof directId === "number") return `${base}/${directId}`;
-		const directValue = entityValue[field.valueField];
-		if (field.valueField !== "_iri" && (typeof directValue === "string" || typeof directValue === "number")) return `${base}/${directValue}`;
-		for (const key of [
-			"code",
-			"uuid",
-			"slug"
-		]) {
-			const candidate = entityValue[key];
-			if (typeof candidate === "string" || typeof candidate === "number") return `${base}/${candidate}`;
-		}
-	}
-};
-//#endregion
 //#region packages/crud/form/FormDataTransform.ts
 function upsertPrependData(store, field, item) {
 	const existing = store.get(field.name);
@@ -3816,59 +4342,6 @@ function buildFieldColSpanContext(options) {
 	};
 }
 //#endregion
-//#region packages/crud/form/serializeFormData.ts
-function applySerializedValue(formData, field, result) {
-	if (result.kind === "set") formData[field.name] = result.value;
-	else if (result.kind === "omit") delete formData[field.name];
-}
-/**
-* Pure serialization of form data before HTTP submission.
-*
-* Applies uploaded file references and computed fields, then delegates the
-* per-type wire format (entity refs, business dates, numeric coercion, file
-* handling, NONE stripping) to each field's Field-Type module.
-*
-* This function is extracted from useFormSubmit for testability.
-*/
-function serializeFormFields(rawData, fields, ctx) {
-	const formData = { ...rawData };
-	ctx.uploadedFiles.forEach((file) => {
-		formData[file.name] = file.iri;
-	});
-	fields.forEach((field) => {
-		if (!field.computed) return;
-		const computedValue = field.computed(formData);
-		if (computedValue !== void 0) formData[field.name] = computedValue;
-	});
-	const moduleCtx = {
-		adapter: ctx.adapter ?? HydraAdapter,
-		format: ctx.format,
-		getFieldValue: ctx.getFieldValue
-	};
-	fields.forEach((field) => {
-		applySerializedValue(formData, field, getFieldTypeModule(field.type).serializeFormValue(field, formData[field.name], moduleCtx));
-	});
-	return formData;
-}
-/**
-* Serializes detail grid rows (entity refs, numeric coercion, identity cleanup).
-* Pure function — operates on an array of row records.
-*/
-function serializeDetailRows(rows, detailFields, detailIdField, isEditMode, adapter = HydraAdapter) {
-	const details = JSON.parse(JSON.stringify(rows));
-	detailFields.forEach((field) => {
-		const typeModule = getFieldTypeModule(field.type);
-		details.forEach((detail) => {
-			applySerializedValue(detail, field, typeModule.serializeDetailValue(field, detail[field.name], adapter));
-		});
-	});
-	details.forEach((detail) => {
-		if (!isEditMode) delete detail[detailIdField];
-		else if (typeof detail[detailIdField] === "string") delete detail[detailIdField];
-	});
-	return details;
-}
-//#endregion
 //#region packages/crud/form/useFormSubmit.ts
 /**
 * Returns helpers for form serialization and HTTP submit/delete operations.
@@ -5276,7 +5749,11 @@ function usePermissions(resource, supportedOperations = []) {
 			canExport: resolve(p?.canExport, false),
 			canBulkDelete: resolve(p?.canBulkDelete, false)
 		};
-	}, [resource.id, opsKey]);
+	}, [
+		resource.id,
+		opsKey,
+		resource.permissions
+	]);
 }
 //#endregion
 //#region packages/crud/crud/useSelectionState.ts
@@ -6125,7 +6602,7 @@ function buildRoutingFilterRules(fields, initialFilters) {
 * Public export — wraps CrudPageInner in its own DialogStoreProvider so that
 * existing pages do not need to add a provider themselves.
 */
-const CrudPage = ({ resource, onFormDataChange, initialRecordId, initialIsNew, computedValues, initialFilters, onFiltersChange, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef, onOperationChange }) => /* @__PURE__ */ jsx(DialogStoreProvider, { children: /* @__PURE__ */ jsx(CrudPageInner, {
+const CrudPage = ({ resource, onFormDataChange, initialRecordId, initialIsNew, computedValues, initialFilters, onFiltersChange, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef, aboveGrid, onOperationChange }) => /* @__PURE__ */ jsx(DialogStoreProvider, { children: /* @__PURE__ */ jsx(CrudPageInner, {
 	resource,
 	onFormDataChange,
 	initialRecordId,
@@ -6138,9 +6615,10 @@ const CrudPage = ({ resource, onFormDataChange, initialRecordId, initialIsNew, c
 	editDisabled,
 	deleteDisabled,
 	gridRef,
+	aboveGrid,
 	onOperationChange
 }) });
-const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, initialIsNew = false, computedValues = EMPTY_COMPUTED_VALUES, initialFilters = EMPTY_INITIAL_FILTERS, onFiltersChange, formRef: externalFormRef, onSelectionChanged: externalOnSelectionChanged, editDisabled, deleteDisabled, gridRef: externalGridRef, onOperationChange }) => {
+const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, initialIsNew = false, computedValues = EMPTY_COMPUTED_VALUES, initialFilters = EMPTY_INITIAL_FILTERS, onFiltersChange, formRef: externalFormRef, onSelectionChanged: externalOnSelectionChanged, editDisabled, deleteDisabled, gridRef: externalGridRef, aboveGrid: aboveGridOverride, onOperationChange }) => {
 	const { t } = useCoreTranslation();
 	const { events, resource: resolvedResource, fields, formFields, formRef, permissions, selectionState, presetState } = useCrudPage(useMemo(() => resolveCrudResource(resource), [resource]), externalFormRef);
 	const datagridFields = useMemo(() => fields.filter((field) => field.isIdentity || field.visible !== false), [fields]);
@@ -6403,6 +6881,16 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 		resolvedResource.rowActions,
 		t
 	]);
+	const aboveGridSlot = aboveGridOverride ?? resolvedResource.aboveGrid;
+	const aboveGridContent = (() => {
+		if (!aboveGridSlot) return;
+		if (typeof aboveGridSlot === "function") return aboveGridSlot({
+			resource: resolvedResource,
+			gridRef,
+			refresh: () => gridRef.current?.refresh()
+		});
+		return aboveGridSlot;
+	})();
 	/** Preset selector rendered as a toolbar slot via `beforeToolbar`. */
 	const renderPresetSelector = hasPresets ? () => /* @__PURE__ */ jsx(ColumnPresetSelector, {
 		resourceId: resolvedResource.id,
@@ -6465,6 +6953,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 				editMode: resolvedResource.editMode,
 				visibleColumns: presetState.visibleColumns,
 				beforeToolbar: renderPresetSelector,
+				aboveGrid: aboveGridContent,
 				detailUrl: gridDetail?.url,
 				detailFields: gridDetail?.fields,
 				onFilterChange: onFiltersChange,
@@ -7586,7 +8075,7 @@ function formatRuntimeErrorMessage(error) {
 *
 * URL deep-linking is wired via `initialRecordId` / `initialIsNew` props on CrudPage.
 */
-function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef }) {
+function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef, aboveGrid }) {
 	const queryClient = useQueryClient();
 	const internalGridRef = useRef(null);
 	const effectiveGridRef = gridRef ?? internalGridRef;
@@ -7671,6 +8160,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		editDisabled,
 		deleteDisabled,
 		gridRef: effectiveGridRef,
+		aboveGrid: aboveGrid ?? resource.aboveGrid,
 		onOperationChange: (operation) => {
 			if (operation === "create") {
 				startCreate();