@nubitio/crud 0.5.23 → 0.5.26

package/dist/index.cjs

@@ -22,12 +22,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 //#endregion
 let react = require("react");
-react = __toESM(react, 1);
+let react$1 = __toESM(react, 1);
+react = __toESM(react);
 let react_router_dom = require("react-router-dom");
 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 _tiptap_react = require("@tiptap/react");
+let _tiptap_starter_kit = require("@tiptap/starter-kit");
+_tiptap_starter_kit = __toESM(_tiptap_starter_kit);
+let _tiptap_extension_link = require("@tiptap/extension-link");
+_tiptap_extension_link = __toESM(_tiptap_extension_link);
 let _tanstack_react_query = require("@tanstack/react-query");
 //#region packages/crud/crud/defineResource.ts
 const stringResourceCache = /* @__PURE__ */ new Map();
@@ -1452,19 +1458,179 @@ const fileTypeModule = {
 	}
 };
 //#endregion
+//#region packages/crud/field/registry/types/HtmlEditor.tsx
+function ToolbarButton({ active, disabled, title, onClick, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 = (0, _tiptap_react.useEditor)({
+		extensions: [_tiptap_starter_kit.default, _tiptap_extension_link.default.configure({
+			openOnClick: false,
+			autolink: true
+		})],
+		content: value,
+		editable,
+		onUpdate: ({ editor: e }) => {
+			onChange(e.isEmpty ? "" : e.getHTML());
+		}
+	});
+	(0, react.useEffect)(() => {
+		if (!editor) return;
+		if ((editor.isEmpty ? "" : editor.getHTML()) !== value) editor.commands.setContent(value ?? "");
+	}, [value, editor]);
+	(0, react.useEffect)(() => {
+		editor?.setEditable(editable);
+	}, [editable, editor]);
+	const handleLinkToggle = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `nb-html-editor${hasError ? " nb-html-editor--error" : ""}${!editable ? " nb-html-editor--readonly" : ""}`,
+		children: [
+			editable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "nb-html-editor__toolbar",
+				role: "toolbar",
+				"aria-label": "Text formatting",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						title: "Bold (Ctrl+B)",
+						active: editor?.isActive("bold"),
+						onClick: () => editor?.chain().focus().toggleBold().run(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "B" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						title: "Italic (Ctrl+I)",
+						active: editor?.isActive("italic"),
+						onClick: () => editor?.chain().focus().toggleItalic().run(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("em", { children: "I" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						title: "Strikethrough",
+						active: editor?.isActive("strike"),
+						onClick: () => editor?.chain().focus().toggleStrike().run(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("s", { children: "S" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDivider, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						title: "Heading 2",
+						active: editor?.isActive("heading", { level: 2 }),
+						onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
+						children: "H2"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						title: "Heading 3",
+						active: editor?.isActive("heading", { level: 3 }),
+						onClick: () => editor?.chain().focus().toggleHeading({ level: 3 }).run(),
+						children: "H3"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDivider, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						title: "Bullet list",
+						active: editor?.isActive("bulletList"),
+						onClick: () => editor?.chain().focus().toggleBulletList().run(),
+						children: "≡"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						title: "Ordered list",
+						active: editor?.isActive("orderedList"),
+						onClick: () => editor?.chain().focus().toggleOrderedList().run(),
+						children: "1."
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDivider, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						title: "Blockquote",
+						active: editor?.isActive("blockquote"),
+						onClick: () => editor?.chain().focus().toggleBlockquote().run(),
+						children: "“"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						title: editor?.isActive("link") ? "Remove link" : "Add link",
+						active: editor?.isActive("link"),
+						onClick: handleLinkToggle,
+						children: "🔗"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDivider, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						title: "Undo (Ctrl+Z)",
+						disabled: !editor?.can().undo(),
+						onClick: () => editor?.chain().focus().undo().run(),
+						children: "↩"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						title: "Redo (Ctrl+Y)",
+						disabled: !editor?.can().redo(),
+						onClick: () => editor?.chain().focus().redo().run(),
+						children: "↪"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				id,
+				name,
+				value,
+				readOnly: true
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "nb-datagrid__html-cell",
+		dangerouslySetInnerHTML: { __html: String(value ?? "") }
+	}),
+	ControlRender: ({ field, value, commonProps, disabled, errorClass, setFieldValue }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HtmlEditor, {
+		id: commonProps.id,
+		name: field.name,
+		value: String(value ?? ""),
+		disabled,
+		readOnly: commonProps.readOnly,
+		hasError: errorClass !== "",
+		onChange: (html) => setFieldValue(field.name, html)
 	})
 };
 //#endregion
@@ -1761,7 +1927,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$1.default.createElement(typeModule.CellRender, {
+		field,
+		value,
+		row
+	});
+	return typeModule.cellText(field, value, {
 		entityOptions,
 		yesLabel,
 		noLabel
@@ -1791,8 +1963,8 @@ const getIsMobile = () => typeof window !== "undefined" && window.matchMedia(MOB
 * layout to the card list, and popovers become bottom sheets.
 */
 function useIsMobile() {
-	const [isMobile, setIsMobile] = (0, react.useState)(getIsMobile);
-	(0, react.useEffect)(() => {
+	const [isMobile, setIsMobile] = (0, react$1.useState)(getIsMobile);
+	(0, react$1.useEffect)(() => {
 		if (typeof window === "undefined") return;
 		const media = window.matchMedia(MOBILE_QUERY);
 		const onChange = () => setIsMobile(media.matches);
@@ -1862,6 +2034,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] = (0, react$1.useState)(/* @__PURE__ */ new Map());
+	const [savingRows, setSavingRows] = (0, react$1.useState)(/* @__PURE__ */ new Set());
+	const [rowErrors, setRowErrors] = (0, react$1.useState)(/* @__PURE__ */ new Map());
+	const draftRowsRef = (0, react$1.useRef)(draftRows);
+	draftRowsRef.current = draftRows;
+	const optsRef = (0, react$1.useRef)({
+		url,
+		idField,
+		adapter,
+		httpClient,
+		fields,
+		onSaveSuccess,
+		onSaveError
+	});
+	optsRef.current = {
+		url,
+		idField,
+		adapter,
+		httpClient,
+		fields,
+		onSaveSuccess,
+		onSaveError
+	};
+	const isEditing = (0, react$1.useCallback)((key) => draftRowsRef.current.has(key), []);
+	const startEdit = (0, react$1.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 = (0, react$1.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 = (0, react$1.useCallback)(() => {
+		setDraftRows(/* @__PURE__ */ new Map());
+		setRowErrors(/* @__PURE__ */ new Map());
+	}, []);
+	const updateDraft = (0, react$1.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 = (0, react$1.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: (0, react$1.useCallback)(async (key) => {
+			if (await doSaveRow(key)) optsRef.current.onSaveSuccess?.();
+		}, [doSaveRow]),
+		saveAll: (0, react$1.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__ */ (0, react_jsx_runtime.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;
@@ -1931,19 +2434,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 }) {
@@ -2326,9 +2830,11 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 	]);
 	const fieldsRef = (0, react.useRef)(options.fields);
 	fieldsRef.current = options.fields;
+	const loadSeqRef = (0, react.useRef)(0);
 	const loadRows = (0, react.useCallback)(async () => {
 		if (options.manualLoad) return rowsRef.current;
 		setIsGridLoading(true);
+		const seq = ++loadSeqRef.current;
 		const loadOptions = {
 			filter: buildFilterExpression(filters, filterOperators, fieldsRef.current),
 			sort
@@ -2338,6 +2844,7 @@ const NativeDataGridView = (0, react.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);
@@ -2391,6 +2898,17 @@ const NativeDataGridView = (0, react.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 = (0, react.useRef)({
 		selectedKeys,
 		filters,
@@ -2457,7 +2975,13 @@ const NativeDataGridView = (0, react.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,
@@ -2481,6 +3005,10 @@ const NativeDataGridView = (0, react.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 });
@@ -2612,22 +3140,24 @@ const NativeDataGridView = (0, react.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 = (0, react.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;
@@ -2731,6 +3261,31 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 							})
 						]
 					}),
+					options.editMode === "batch" && inlineEdit.draftRows.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "nb-datagrid__batch-bar",
+						role: "status",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "nb-datagrid__batch-bar-label",
+							children: t("grid.inlineUnsavedRows", { count: inlineEdit.draftRows.size })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "nb-datagrid__batch-bar-actions",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "nb-datagrid__batch-bar-btn nb-datagrid__batch-bar-btn--discard",
+								onClick: () => inlineEdit.discardAll(),
+								children: t("grid.inlineDiscardAll")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "nb-datagrid__above-grid",
+						children: options.aboveGrid
+					}) : null,
 					isMobile && quickSearchField && (options.filterRow ?? true) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "nb-datagrid__quick-search",
 						children: [
@@ -3020,16 +3575,33 @@ const NativeDataGridView = (0, react.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__ */ (0, react_jsx_runtime.jsxs)(react.default.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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 });
@@ -3038,10 +3610,13 @@ const NativeDataGridView = (0, react.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");
@@ -3086,9 +3661,29 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 														})
 													}),
 													visibleFields.map((field, columnIndex) => {
+														const width = getColumnWidth(field, resolvedColWidths);
+														if (editing && canEditFieldInline(field)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															style: {
+																width,
+																textAlign: field.align
+															},
+															className: "nb-datagrid__edit-cell",
+															onClick: (e) => e.stopPropagation(),
+															children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("td", {
 															style: {
-																width: getColumnWidth(field, resolvedColWidths),
+																width,
 																textAlign: field.align
 															},
 															title: getCellText(field, row, filterRemoteOptions[field.name], t("common.yes"), t("common.no")),
@@ -3098,7 +3693,32 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 													hasRowActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 														className: "nb-datagrid__actions-cell",
 														onClick: (e) => e.stopPropagation(),
-														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+														children: editing ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+															className: "nb-datagrid__inline-actions",
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("i", {
+																	className: "ph ph-check",
+																	"aria-hidden": "true"
+																})
+															}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("i", {
+																	className: "ph ph-x",
+																	"aria-hidden": "true"
+																})
+															})]
+														}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 															className: "nb-datagrid__row-actions",
 															children: rowActions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
 																icon: "ph ph-dots-three-vertical",
@@ -3448,97 +4068,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);
@@ -3840,59 +4369,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.
@@ -4075,30 +4551,30 @@ function mapApiViolations(violations, detailPropertyName = "items", defaultMessa
 * the state seam, independently testable without the 900-line closure.
 */
 function useFormState({ fields, onFieldDataChanged }) {
-	const isEdit = (0, react.useRef)(false);
-	const uploadedFiles = (0, react.useRef)([]);
-	const existingMediaByField = (0, react.useRef)({});
-	const upsertUploadedFile = (0, react.useCallback)((entry) => {
+	const isEdit = (0, react$1.useRef)(false);
+	const uploadedFiles = (0, react$1.useRef)([]);
+	const existingMediaByField = (0, react$1.useRef)({});
+	const upsertUploadedFile = (0, react$1.useCallback)((entry) => {
 		uploadedFiles.current = [...uploadedFiles.current.filter((file) => file.name !== entry.name), entry];
 	}, []);
-	const [formData, setFormData] = (0, react.useState)(() => buildEmptyRow(fields));
-	const formDataRef = (0, react.useRef)(formData);
-	const [detailRows, setDetailRows] = (0, react.useState)([]);
-	const detailRowsRef = (0, react.useRef)(detailRows);
-	const [fieldState, setFieldState] = (0, react.useState)({});
-	const [errors, setErrors] = (0, react.useState)({});
-	const [detailErrors, setDetailErrors] = (0, react.useState)({});
-	const prependDataRef = (0, react.useRef)(/* @__PURE__ */ new Map());
-	const setNextFormData = (0, react.useCallback)((nextData) => {
+	const [formData, setFormData] = (0, react$1.useState)(() => buildEmptyRow(fields));
+	const formDataRef = (0, react$1.useRef)(formData);
+	const [detailRows, setDetailRows] = (0, react$1.useState)([]);
+	const detailRowsRef = (0, react$1.useRef)(detailRows);
+	const [fieldState, setFieldState] = (0, react$1.useState)({});
+	const [errors, setErrors] = (0, react$1.useState)({});
+	const [detailErrors, setDetailErrors] = (0, react$1.useState)({});
+	const prependDataRef = (0, react$1.useRef)(/* @__PURE__ */ new Map());
+	const setNextFormData = (0, react$1.useCallback)((nextData) => {
 		formDataRef.current = nextData;
 		setFormData(nextData);
 		onFieldDataChanged?.(nextData);
 	}, [onFieldDataChanged]);
-	const setNextDetailRows = (0, react.useCallback)((nextRows) => {
+	const setNextDetailRows = (0, react$1.useCallback)((nextRows) => {
 		detailRowsRef.current = nextRows;
 		setDetailRows(nextRows);
 	}, []);
-	const setFieldValue = (0, react.useCallback)((name, value) => {
+	const setFieldValue = (0, react$1.useCallback)((name, value) => {
 		const field = fields.find((candidate) => candidate.name === name);
 		const nextData = {
 			...formDataRef.current,
@@ -4113,22 +4589,22 @@ function useFormState({ fields, onFieldDataChanged }) {
 		onFieldDataChanged?.(nextData);
 		(field?.onChange)?.(value);
 	}, [fields, onFieldDataChanged]);
-	const setEditMode = (0, react.useCallback)((value) => {
+	const setEditMode = (0, react$1.useCallback)((value) => {
 		isEdit.current = value;
 	}, []);
-	const resetUploadSession = (0, react.useCallback)(() => {
+	const resetUploadSession = (0, react$1.useCallback)(() => {
 		uploadedFiles.current = [];
 	}, []);
-	const setExistingMedia = (0, react.useCallback)((media) => {
+	const setExistingMedia = (0, react$1.useCallback)((media) => {
 		existingMediaByField.current = media;
 	}, []);
-	const clearExistingMedia = (0, react.useCallback)((name) => {
+	const clearExistingMedia = (0, react$1.useCallback)((name) => {
 		delete existingMediaByField.current[name];
 	}, []);
-	const resetPrependData = (0, react.useCallback)(() => {
+	const resetPrependData = (0, react$1.useCallback)(() => {
 		prependDataRef.current = /* @__PURE__ */ new Map();
 	}, []);
-	const clearDetailCellError = (0, react.useCallback)((rowIndex, fieldName) => {
+	const clearDetailCellError = (0, react$1.useCallback)((rowIndex, fieldName) => {
 		setDetailErrors((current) => {
 			const rowErrors = current[rowIndex];
 			if (!rowErrors?.[fieldName]) return current;
@@ -4140,10 +4616,10 @@ function useFormState({ fields, onFieldDataChanged }) {
 			return next;
 		});
 	}, []);
-	(0, react.useEffect)(() => {
+	(0, react$1.useEffect)(() => {
 		formDataRef.current = formData;
 	}, [formData]);
-	(0, react.useEffect)(() => {
+	(0, react$1.useEffect)(() => {
 		detailRowsRef.current = detailRows;
 	}, [detailRows]);
 	return {
@@ -5284,7 +5760,7 @@ function fromOperations(supportedOperations) {
 */
 function usePermissions(resource, supportedOperations = []) {
 	const opsKey = supportedOperations.slice().sort().join(",");
-	return (0, react.useMemo)(() => {
+	return (0, react$1.useMemo)(() => {
 		const p = resource.permissions;
 		const inferred = fromOperations(supportedOperations);
 		function resolveWithInferred(permValue, inferredValue, platformDefault) {
@@ -5300,20 +5776,24 @@ 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
 function useSelectionState(identityField) {
-	const [selectedIds, setSelectedIds] = (0, react.useState)([]);
-	const onSelectionChanged = (0, react.useCallback)((selectedRows) => {
+	const [selectedIds, setSelectedIds] = (0, react$1.useState)([]);
+	const onSelectionChanged = (0, react$1.useCallback)((selectedRows) => {
 		setSelectedIds(selectedRows.map((row) => {
 			const val = row[identityField];
 			if (typeof val === "string" || typeof val === "number") return val;
 			return String(val);
 		}));
 	}, [identityField]);
-	const clearSelection = (0, react.useCallback)(() => {
+	const clearSelection = (0, react$1.useCallback)(() => {
 		setSelectedIds([]);
 	}, []);
 	return {
@@ -5344,7 +5824,7 @@ function resolveVisibleColumns(resource, activeKey) {
 	return resource.columnPresets.find((p) => p.key === activeKey)?.columns ?? null;
 }
 function useColumnPreset(resource) {
-	const [activePreset, setActivePresetState] = (0, react.useState)(() => {
+	const [activePreset, setActivePresetState] = (0, react$1.useState)(() => {
 		if (!resource.columnPresets?.length) return null;
 		const stored = readFromStorage(resource.id);
 		if (stored && resource.columnPresets.some((p) => p.key === stored)) return stored;
@@ -5352,7 +5832,7 @@ function useColumnPreset(resource) {
 	});
 	return {
 		activePreset,
-		setPreset: (0, react.useCallback)((key) => {
+		setPreset: (0, react$1.useCallback)((key) => {
 			writeToStorage(resource.id, key);
 			setActivePresetState(key);
 		}, [resource.id]),
@@ -5673,19 +6153,19 @@ function buildFields(items) {
 //#endregion
 //#region packages/crud/crud/useCrudPage.ts
 function useCrudPage(resource, externalFormRef) {
-	const resolvedResource = (0, react.useMemo)(() => resolveCrudResource(resource), [resource]);
+	const resolvedResource = (0, react$1.useMemo)(() => resolveCrudResource(resource), [resource]);
 	const events = resolvedResource.events;
-	const _internalFormRef = (0, react.useRef)(null);
+	const _internalFormRef = (0, react$1.useRef)(null);
 	const formRef = externalFormRef ?? _internalFormRef;
-	const fields = (0, react.useMemo)(() => buildFields(resolvedResource.fields ?? []), [resolvedResource.fields]);
+	const fields = (0, react$1.useMemo)(() => buildFields(resolvedResource.fields ?? []), [resolvedResource.fields]);
 	return {
 		events,
 		resource: resolvedResource,
 		fields,
-		formFields: (0, react.useMemo)(() => resolvedResource.formFields ? buildFields(resolvedResource.formFields) : fields, [fields, resolvedResource.formFields]),
+		formFields: (0, react$1.useMemo)(() => resolvedResource.formFields ? buildFields(resolvedResource.formFields) : fields, [fields, resolvedResource.formFields]),
 		formRef,
 		permissions: usePermissions(resolvedResource, resolvedResource._supportedOperations ?? []),
-		selectionState: useSelectionState((0, react.useMemo)(() => {
+		selectionState: useSelectionState((0, react$1.useMemo)(() => {
 			return fields.find((f) => f.isIdentity)?.name ?? "id";
 		}, [fields])),
 		presetState: useColumnPreset(resolvedResource)
@@ -6044,7 +6524,7 @@ function useDialogStoreContext() {
 function useCrudDialogStore(resourceId) {
 	const { state, dispatch } = useDialogStoreContext();
 	const dialogState = state[resourceId] ?? initialDialogState();
-	const openDialog = (0, react.useCallback)((mode, rowData = null) => {
+	const openDialog = (0, react$1.useCallback)((mode, rowData = null) => {
 		dispatch({
 			type: "OPEN",
 			resourceId,
@@ -6052,7 +6532,7 @@ function useCrudDialogStore(resourceId) {
 			rowData
 		});
 	}, [dispatch, resourceId]);
-	const closeDialog = (0, react.useCallback)(() => {
+	const closeDialog = (0, react$1.useCallback)(() => {
 		dispatch({
 			type: "CLOSE",
 			resourceId
@@ -6149,7 +6629,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__ */ (0, react_jsx_runtime.jsx)(DialogStoreProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CrudPageInner, {
+const CrudPage = ({ resource, onFormDataChange, initialRecordId, initialIsNew, computedValues, initialFilters, onFiltersChange, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef, aboveGrid, onOperationChange }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogStoreProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CrudPageInner, {
 	resource,
 	onFormDataChange,
 	initialRecordId,
@@ -6162,9 +6642,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 } = (0, _nubitio_core.useCoreTranslation)();
 	const { events, resource: resolvedResource, fields, formFields, formRef, permissions, selectionState, presetState } = useCrudPage((0, react.useMemo)(() => resolveCrudResource(resource), [resource]), externalFormRef);
 	const datagridFields = (0, react.useMemo)(() => fields.filter((field) => field.isIdentity || field.visible !== false), [fields]);
@@ -6427,6 +6908,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__ */ (0, react_jsx_runtime.jsx)(ColumnPresetSelector, {
 		resourceId: resolvedResource.id,
@@ -6489,6 +6980,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,
@@ -6639,7 +7131,7 @@ function useRouting(routing) {
 	return {
 		initialRecordId,
 		initialIsNew,
-		initialFilters: (0, react.useMemo)(() => {
+		initialFilters: (0, react$1.useMemo)(() => {
 			if (!syncFiltersToUrl) return NO_FILTERS;
 			const filters = {};
 			searchParams.forEach((value, key) => {
@@ -6647,7 +7139,7 @@ function useRouting(routing) {
 			});
 			return filters;
 		}, [syncFiltersToUrl, searchParams]),
-		syncFilters: (0, react.useCallback)((filters) => {
+		syncFilters: (0, react$1.useCallback)((filters) => {
 			if (!routing?.syncFiltersToUrl) return;
 			const next = new URLSearchParams();
 			Object.entries(filters).forEach(([key, value]) => {
@@ -6758,23 +7250,23 @@ function crudReducer(state, action) {
 */
 function useSmartCrudOperation(events, routingState) {
 	const [on] = (0, _nubitio_core.useEvents)();
-	const [{ activeOperation, formData }, dispatchState] = (0, react.useReducer)(crudReducer, routingState, stateFromRouting);
-	const handleFormDataChange = (0, react.useCallback)((data) => {
+	const [{ activeOperation, formData }, dispatchState] = (0, react$1.useReducer)(crudReducer, routingState, stateFromRouting);
+	const handleFormDataChange = (0, react$1.useCallback)((data) => {
 		dispatchState({
 			type: "set-form-data",
 			data
 		});
 	}, []);
-	const startCreate = (0, react.useCallback)(() => {
+	const startCreate = (0, react$1.useCallback)(() => {
 		dispatchState({ type: "create" });
 	}, []);
-	const startEdit = (0, react.useCallback)(() => {
+	const startEdit = (0, react$1.useCallback)(() => {
 		dispatchState({ type: "edit" });
 	}, []);
-	const resetOperation = (0, react.useCallback)(() => {
+	const resetOperation = (0, react$1.useCallback)(() => {
 		dispatchState({ type: "reset" });
 	}, []);
-	(0, react.useEffect)(() => {
+	(0, react$1.useEffect)(() => {
 		dispatchState({
 			type: "sync-routing",
 			routingState: {
@@ -6783,7 +7275,7 @@ function useSmartCrudOperation(events, routingState) {
 			}
 		});
 	}, [routingState.initialIsNew, routingState.initialRecordId]);
-	(0, react.useEffect)(() => {
+	(0, react$1.useEffect)(() => {
 		const subscriptions = [];
 		if (events?.ADD) subscriptions.push(on(events.ADD, () => {
 			dispatchState({ type: "create" });
@@ -6829,7 +7321,7 @@ function useSmartCrudOperation(events, routingState) {
 * so grids and forms can resolve row keys consistently.
 */
 function useFieldPermissions(fields, userRoles) {
-	return (0, react.useMemo)(() => {
+	return (0, react$1.useMemo)(() => {
 		return fields.reduce((acc, field) => {
 			if (field.isIdentity) {
 				acc.push(field);
@@ -6899,7 +7391,7 @@ function evaluateConditionalRuleState(field, formData) {
 * are returned. Empty objects `{}` are treated as valid create-form state.
 */
 function useConditionalRules(fields, formData) {
-	return (0, react.useMemo)(() => {
+	return (0, react$1.useMemo)(() => {
 		return fields.map((field) => evaluateConditionalRuleState(field, formData));
 	}, [fields, formData]);
 }
@@ -6934,9 +7426,9 @@ function useDependsOn(fields, formData) {
 		url: field.url ?? null,
 		values: (field.dependsOn ?? []).map((dep) => formData[dep])
 	}));
-	const isMounted = (0, react.useRef)(false);
-	const previousEntriesRef = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
+	const isMounted = (0, react$1.useRef)(false);
+	const previousEntriesRef = (0, react$1.useRef)(null);
+	(0, react$1.useEffect)(() => {
 		if (!isMounted.current) {
 			isMounted.current = true;
 			previousEntriesRef.current = currentEntries;
@@ -7118,7 +7610,7 @@ function applyFieldOperationSemantics(field, operation, behavior, owner = `Field
 * from schema loading and routing concerns.
 */
 function useSmartCrudFields(fields, activeOperation, formData, roles) {
-	const permissionFilteredFields = useFieldPermissions((0, react.useMemo)(() => {
+	const permissionFilteredFields = useFieldPermissions((0, react$1.useMemo)(() => {
 		if (!activeOperation) return fields;
 		return fields.map((field) => {
 			const runtimeField = field;
@@ -7130,7 +7622,7 @@ function useSmartCrudFields(fields, activeOperation, formData, roles) {
 	useDependsOn(permissionFilteredFields, formData);
 	return {
 		gridFields: permissionFilteredFields,
-		processedFields: (0, react.useMemo)(() => {
+		processedFields: (0, react$1.useMemo)(() => {
 			const stateByName = new Map(fieldStates.map((s) => [s.name, s]));
 			let anyChanged = false;
 			const merged = permissionFilteredFields.map((field) => {
@@ -7150,7 +7642,7 @@ function useSmartCrudFields(fields, activeOperation, formData, roles) {
 			});
 			return anyChanged ? merged : permissionFilteredFields;
 		}, [permissionFilteredFields, fieldStates]),
-		computedValues: (0, react.useMemo)(() => fieldStates.reduce((acc, state) => {
+		computedValues: (0, react$1.useMemo)(() => fieldStates.reduce((acc, state) => {
 			if (state.computedValue !== void 0) acc[state.name] = state.computedValue;
 			return acc;
 		}, {}), [fieldStates])
@@ -7610,7 +8102,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 = (0, _tanstack_react_query.useQueryClient)();
 	const internalGridRef = (0, react.useRef)(null);
 	const effectiveGridRef = gridRef ?? internalGridRef;
@@ -7695,6 +8187,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		editDisabled,
 		deleteDisabled,
 		gridRef: effectiveGridRef,
+		aboveGrid: aboveGrid ?? resource.aboveGrid,
 		onOperationChange: (operation) => {
 			if (operation === "create") {
 				startCreate();