@nubitio/crud 0.5.24 → 0.5.27

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,459 @@ 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 valuesEqual$1(a, b) {
+	if (a === b) return true;
+	if (a == null && b == null) return true;
+	if (a == null || b == null) return false;
+	const numA = Number(a);
+	const numB = Number(b);
+	if (!Number.isNaN(numA) && !Number.isNaN(numB)) return numA === numB;
+	return String(a) === String(b);
+}
+function useInlineEdit({ mode, url, idField, adapter = HydraAdapter, httpClient, fields, onSaveSuccess, onSaveError, onBatchSave }) {
+	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 [activeCell, setActiveCell] = (0, react$1.useState)(null);
+	const draftRowsRef = (0, react$1.useRef)(draftRows);
+	draftRowsRef.current = draftRows;
+	const optsRef = (0, react$1.useRef)({
+		url,
+		idField,
+		adapter,
+		httpClient,
+		fields,
+		onSaveSuccess,
+		onSaveError,
+		onBatchSave
+	});
+	optsRef.current = {
+		url,
+		idField,
+		adapter,
+		httpClient,
+		fields,
+		onSaveSuccess,
+		onSaveError,
+		onBatchSave
+	};
+	const isEditing = (0, react$1.useCallback)((key) => draftRows.has(key), [draftRows]);
+	const isCellActive = (0, react$1.useCallback)((key, fieldName) => activeCell != null && activeCell.key === key && activeCell.fieldName === fieldName, [activeCell]);
+	const isCellDirty = (0, react$1.useCallback)((key, fieldName, original) => {
+		const draft = draftRows.get(key);
+		if (!draft) return false;
+		return !valuesEqual$1(draft[fieldName], original[fieldName]);
+	}, [draftRows]);
+	const hasDraftChanges = (0, react$1.useCallback)((key, original) => {
+		const draft = draftRows.get(key);
+		if (!draft) return false;
+		return optsRef.current.fields.some((field) => canEditFieldInline(field) && !valuesEqual$1(draft[field.name], original[field.name]));
+	}, [draftRows]);
+	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;
+		});
+		setActiveCell(null);
+	}, [mode]);
+	const startCellEdit = (0, react$1.useCallback)((row, fieldName) => {
+		const key = row[optsRef.current.idField];
+		setDraftRows((prev) => {
+			const existing = prev.get(key);
+			const withoutKey = (mode === "row" ? [] : Array.from(prev.entries())).filter(([entryKey]) => entryKey !== key);
+			return new Map([...withoutKey, [key, existing ? { ...existing } : { ...row }]]);
+		});
+		setRowErrors((prev) => {
+			const next = new Map(prev);
+			next.delete(key);
+			return next;
+		});
+		setActiveCell({
+			key,
+			fieldName
+		});
+	}, [mode]);
+	const stopCellEdit = (0, react$1.useCallback)(() => {
+		setActiveCell(null);
+	}, []);
+	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;
+		});
+		setActiveCell((current) => current?.key === key ? null : current);
+	}, []);
+	const discardAll = (0, react$1.useCallback)(() => {
+		setDraftRows(/* @__PURE__ */ new Map());
+		setRowErrors(/* @__PURE__ */ new Map());
+		setActiveCell(null);
+	}, []);
+	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;
+			});
+		}
+	}, []);
+	const validateDraft = (0, react$1.useCallback)((key, draft, fs) => {
+		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) return true;
+		setRowErrors((prev) => new Map(prev).set(key, errors));
+		return false;
+	}, []);
+	const doSaveBatch = (0, react$1.useCallback)(async () => {
+		const { fields: fs, onBatchSave: saveBatch, onSaveError: onErr } = optsRef.current;
+		if (!saveBatch) return false;
+		const entries = Array.from(draftRowsRef.current.entries());
+		if (entries.length === 0) return false;
+		if (!entries.every(([key, draft]) => validateDraft(key, draft, fs))) return false;
+		const keys = entries.map(([key]) => key);
+		setSavingRows((prev) => new Set([...prev, ...keys]));
+		try {
+			await saveBatch(entries.map(([, draft]) => ({ ...draft })));
+			setDraftRows(/* @__PURE__ */ new Map());
+			setRowErrors(/* @__PURE__ */ new Map());
+			return true;
+		} catch (err) {
+			keys.forEach((key) => onErr?.(key, err));
+			return false;
+		} finally {
+			setSavingRows((prev) => {
+				const next = new Set(prev);
+				keys.forEach((key) => next.delete(key));
+				return next;
+			});
+		}
+	}, [validateDraft]);
+	return {
+		draftRows,
+		savingRows,
+		rowErrors,
+		activeCell,
+		isEditing,
+		isCellActive,
+		isCellDirty,
+		hasDraftChanges,
+		startEdit,
+		startCellEdit,
+		stopCellEdit,
+		cancelEdit,
+		discardAll,
+		updateDraft,
+		saveRow: (0, react$1.useCallback)(async (key) => {
+			if (optsRef.current.onBatchSave) {
+				const ok = await doSaveBatch();
+				if (ok) optsRef.current.onSaveSuccess?.();
+				return ok;
+			}
+			const ok = await doSaveRow(key);
+			if (ok) optsRef.current.onSaveSuccess?.();
+			return ok;
+		}, [doSaveBatch, doSaveRow]),
+		saveAll: (0, react$1.useCallback)(async () => {
+			if (optsRef.current.onBatchSave) {
+				const ok = await doSaveBatch();
+				if (ok) optsRef.current.onSaveSuccess?.();
+				return ok;
+			}
+			const keys = Array.from(draftRowsRef.current.keys());
+			const anySuccess = (await Promise.allSettled(keys.map((key) => doSaveRow(key)))).some((r) => r.status === "fulfilled" && r.value);
+			if (anySuccess) optsRef.current.onSaveSuccess?.();
+			return anySuccess;
+		}, [doSaveBatch, doSaveRow])
+	};
+}
+function focusInlineControl(container) {
+	if (!container) return;
+	const focusable = container.querySelector("input:not([type=\"hidden\"]):not([disabled]):not([readonly]), select:not([disabled]), textarea:not([disabled]), .nb-date-picker__input:not([readonly]), .nb-dropdown__trigger:not([disabled])");
+	focusable?.focus();
+	if (focusable instanceof HTMLInputElement && focusable.type !== "checkbox") focusable.select();
+}
+/**
+* Renders a single cell as an editable control during inline editing.
+* Uses the same FieldTypeModule.ControlRender path as the full form, with
+* compact styling so controls fit naturally inside a table cell.
+*/
+function InlineEditCell({ field, rowKey, draft, onChange, errors, disabled = false, allRemoteOptions, httpClient, t, autoFocus = true }) {
+	const containerRef = (0, react.useRef)(null);
+	const typeModule = getFieldTypeModule(field.type);
+	const fieldError = errors?.[field.name];
+	const errorClass = fieldError ? " is-error" : "";
+	(0, react.useEffect)(() => {
+		if (!autoFocus) return;
+		focusInlineControl(containerRef.current);
+	}, [
+		autoFocus,
+		field.name,
+		rowKey
+	]);
+	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", {
+		ref: containerRef,
+		className: `nb-inline-cell${errorClass ? " nb-inline-cell--error" : ""}`,
+		onKeyDown: (event) => {
+			if (event.key === "Escape") event.stopPropagation();
+		},
+		onMouseDown: (event) => {
+			if (event.target.closest(".nb-date-picker__panel, .nb-form__lookup-menu, .nb-dropdown__menu, .nb-datagrid__actions-popover")) return;
+			event.stopPropagation();
+		},
+		onClick: (event) => event.stopPropagation(),
+		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 +2556,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 }) {
@@ -1975,6 +2601,25 @@ function normalizeIcon$1(icon) {
 function isDateLikeField(field) {
 	return field.type === "date" || field.type === "datetime";
 }
+function isCellEditMode(editMode) {
+	return editMode === "cell" || editMode === "batch";
+}
+function resolveInlineEditToolbar(editMode, inlineEditToolbar) {
+	if (inlineEditToolbar === false) return null;
+	const defaultShow = isCellEditMode(editMode);
+	if (inlineEditToolbar == null) return defaultShow ? {
+		save: true,
+		revert: true
+	} : null;
+	if (typeof inlineEditToolbar === "boolean") return inlineEditToolbar ? {
+		save: true,
+		revert: true
+	} : null;
+	return {
+		save: inlineEditToolbar.save !== false,
+		revert: inlineEditToolbar.revert !== false
+	};
+}
 function getToolbarKey(action, index) {
 	return action.key ?? action.text ?? String(index);
 }
@@ -2326,9 +2971,20 @@ 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.data) {
+			rowsRef.current = options.data;
+			setRows(options.data);
+			setTotalCount(options.data.length);
+			setGridSummary(options.gridSummary ?? null);
+			setIsGridLoading(false);
+			onContentReadyRef.current?.();
+			return options.data;
+		}
 		if (options.manualLoad) return rowsRef.current;
 		setIsGridLoading(true);
+		const seq = ++loadSeqRef.current;
 		const loadOptions = {
 			filter: buildFilterExpression(filters, filterOperators, fieldsRef.current),
 			sort
@@ -2338,6 +2994,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);
@@ -2348,6 +3005,8 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 	}, [
 		filterOperators,
 		filters,
+		options.data,
+		options.gridSummary,
 		options.manualLoad,
 		options.paging,
 		page,
@@ -2391,19 +3050,58 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 		resourceStoreFactory,
 		visibleFields
 	]);
+	const canInlineEditMode = options.editMode === "row" || options.editMode === "cell" || options.editMode === "batch";
+	const cellEditMode = isCellEditMode(options.editMode);
+	const rowInlineMode = options.editMode === "row";
+	const inlineEditToolbar = resolveInlineEditToolbar(options.editMode, options.inlineEditToolbar);
+	const showRowInlineActions = options.inlineRowActions ?? rowInlineMode;
+	const inlineEdit = useInlineEdit({
+		mode: cellEditMode ? "batch" : "row",
+		url: options.url,
+		idField,
+		adapter: options.adapter,
+		httpClient,
+		fields: options.fields,
+		onSaveSuccess: () => void loadRows(),
+		onSaveError: () => {},
+		onBatchSave: options.onBatchSave
+	});
+	const dirtyRowCount = (0, react.useMemo)(() => rows.filter((row) => {
+		const key = row[idField] ?? row;
+		return inlineEdit.draftRows.has(key) && inlineEdit.hasDraftChanges(key, row);
+	}).length, [
+		rows,
+		idField,
+		inlineEdit.draftRows,
+		inlineEdit.hasDraftChanges
+	]);
+	const hasPendingInlineEdits = dirtyRowCount > 0;
+	(0, react.useEffect)(() => {
+		if (!inlineEdit.activeCell) return;
+		const handler = (event) => {
+			const target = event.target;
+			if (target.closest(".nb-datagrid__edit-cell")) return;
+			if (target.closest(".nb-date-picker__panel, .nb-form__lookup-menu, .nb-dropdown__menu, .nb-datagrid__actions-popover")) return;
+			inlineEdit.stopCellEdit();
+		};
+		document.addEventListener("mousedown", handler);
+		return () => document.removeEventListener("mousedown", handler);
+	}, [inlineEdit.activeCell, inlineEdit.stopCellEdit]);
 	const handleStateRef = (0, react.useRef)({
 		selectedKeys,
 		filters,
 		filterOperators,
 		loadRows,
-		idField
+		idField,
+		inlineEdit
 	});
 	handleStateRef.current = {
 		selectedKeys,
 		filters,
 		filterOperators,
 		loadRows,
-		idField
+		idField,
+		inlineEdit
 	};
 	(0, react.useImperativeHandle)(ref, () => ({
 		showLoading: (message) => {
@@ -2443,7 +3141,9 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 			setFilterInputs(nextFilters);
 			setFilterOperators(nextOperators);
 			setPage(0);
-		}
+		},
+		hasEditData: () => handleStateRef.current.inlineEdit.draftRows.size > 0,
+		saveChanges: () => handleStateRef.current.inlineEdit.saveAll()
 	}), [options.fields, t]);
 	const selectedRows = rows.filter((row) => selectedKeys.includes(row[idField]));
 	const selectRow = (row) => {
@@ -2457,7 +3157,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) && rowInlineMode && 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 +3187,10 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 		}] : []
 	];
 	const openRow = (row) => {
+		if (options.allowEdit && rowEditable(row) && rowInlineMode && 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,28 +3322,41 @@ 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 && (rowInlineMode && showRowInlineActions || 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 extra = Math.max(0, containerWidth - dataTotal - fixedTotal);
+		if (visibleFields.length === 0 || containerWidth <= 0) return colWidths;
+		const bases = visibleFields.map((f) => getColumnWidth(f, colWidths));
+		const dataTotal = bases.reduce((sum, width) => sum + width, 0);
+		const fixedTotal = (hasCheckbox ? CHECKBOX_COL_WIDTH : 0) + (hasDetail ? DETAIL_COL_WIDTH : 0) + (hasRowActions ? actionsColWidth : 0);
+		const available = Math.max(0, containerWidth - fixedTotal);
+		if (dataTotal > available && available > 0) {
+			const scale = available / dataTotal;
+			const result = {};
+			visibleFields.forEach((field, index) => {
+				const floor = field.minWidth ?? MIN_COL_WIDTH;
+				result[field.name] = Math.max(floor, Math.floor(bases[index] * scale));
+			});
+			return result;
+		}
+		const extra = Math.max(0, available - dataTotal);
 		if (extra === 0 || dataTotal === 0) return colWidths;
 		let distributed = 0;
 		const result = {};
 		visibleFields.forEach((f, i) => {
-			const base = getColumnWidth(f, colWidths);
+			const base = bases[i];
 			const share = i < visibleFields.length - 1 ? Math.round(extra * (base / dataTotal)) : extra - distributed;
 			result[f.name] = base + share;
 			distributed += share;
@@ -2645,7 +3368,8 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 		hasCheckbox,
 		hasDetail,
 		hasRowActions,
-		containerWidth
+		containerWidth,
+		actionsColWidth
 	]);
 	const tableLayoutStyle = { "--nb-datagrid-layout-width": `${layoutWidth}px` };
 	const filterableFields = visibleFields.filter((field) => field.filterable);
@@ -2724,6 +3448,18 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 									children: activeFilterCount
 								})]
 							}),
+							inlineEditToolbar?.revert && hasPendingInlineEdits && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
+								className: "nb-datagrid__toolbar-icon-action nb-datagrid__toolbar-icon-action--revert",
+								icon: "ph ph-arrow-counter-clockwise",
+								label: t("grid.inlineRevertChanges"),
+								onClick: () => inlineEdit.discardAll()
+							}),
+							inlineEditToolbar?.save && hasPendingInlineEdits && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
+								className: "nb-datagrid__toolbar-icon-action nb-datagrid__toolbar-icon-action--save",
+								icon: "ph ph-floppy-disk",
+								label: t("grid.inlineSaveChanges"),
+								onClick: () => void inlineEdit.saveAll()
+							}),
 							toolbar.showRefresh !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
 								icon: "ph ph-arrow-clockwise",
 								label: t("grid.buttonRefresh"),
@@ -2731,6 +3467,14 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 							})
 						]
 					}),
+					cellEditMode && hasPendingInlineEdits && !inlineEditToolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "nb-datagrid__batch-bar nb-datagrid__batch-bar--compact",
+						role: "status",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "nb-datagrid__batch-bar-label",
+							children: t("grid.inlineUnsavedRows", { count: dirtyRowCount })
+						})
+					}),
 					options.aboveGrid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "nb-datagrid__above-grid",
 						children: options.aboveGrid
@@ -3024,16 +3768,37 @@ 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 rowHasChanges = editing && inlineEdit.hasDraftChanges(key, row);
+											const saving = inlineEdit.savingRows.has(key);
+											const rowDraft = inlineEdit.draftRows.get(key) ?? row;
+											const rowFieldErrors = inlineEdit.rowErrors.get(key);
+											const rowInRowEdit = rowInlineMode && editing;
 											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" : "",
+													rowInRowEdit ? "nb-datagrid__row--editing" : "",
+													rowHasChanges ? "nb-datagrid__row--dirty" : "",
+													saving ? "nb-datagrid__row--saving" : ""
+												].filter(Boolean).join(" "),
 												tabIndex: 0,
 												"aria-selected": selected,
-												onClick: () => selectRow(row),
+												onClick: () => {
+													if (rowInRowEdit) return;
+													selectRow(row);
+												},
 												onDoubleClick: () => {
+													if (rowInRowEdit || inlineEdit.activeCell) return;
+													if (options.allowEdit && rowEditable(row) && rowInlineMode && 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 });
@@ -3042,10 +3807,14 @@ 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 (inlineEdit.activeCell && event.key === "Escape") inlineEdit.stopCellEdit();
+													else if (rowInRowEdit && event.key === "Escape") inlineEdit.cancelEdit(key);
+													else if (rowInRowEdit && event.key === "Enter" && showRowInlineActions) inlineEdit.saveRow(key);
+													else if (!editing && event.key === "Enter" && options.allowEdit && rowInlineMode && 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");
@@ -3090,19 +3859,87 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 														})
 													}),
 													visibleFields.map((field, columnIndex) => {
+														const width = getColumnWidth(field, resolvedColWidths);
+														const editable = options.allowEdit && !options.editDisabled && rowEditable(row) && canEditFieldInline(field);
+														const cellActive = inlineEdit.isCellActive(key, field.name);
+														const cellDirty = editing && inlineEdit.isCellDirty(key, field.name, row);
+														const showCellEditor = editable && (rowInRowEdit && editing || cellEditMode && cellActive);
+														const displayRow = editing ? rowDraft : row;
+														const cellClassName = [
+															showCellEditor ? "nb-datagrid__edit-cell" : "nb-datagrid__data-cell",
+															editable && canInlineEditMode ? "nb-datagrid__cell--editable" : "",
+															cellDirty ? "nb-datagrid__cell--dirty" : "",
+															cellActive ? "nb-datagrid__cell--active" : ""
+														].filter(Boolean).join(" ");
+														const beginInlineEdit = () => {
+															if (!editable) return;
+															selectRow(row);
+															if (cellEditMode) inlineEdit.startCellEdit(row, field.name);
+															else if (rowInlineMode && !editing) inlineEdit.startEdit(row);
+														};
+														if (showCellEditor) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+															style: {
+																width,
+																textAlign: field.align
+															},
+															className: cellClassName,
+															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,
+																autoFocus: true
+															})
+														}, 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")),
-															children: renderCell(field, row, rowIndex, columnIndex, filterRemoteOptions[field.name], t("common.yes"), t("common.no"))
+															className: cellClassName,
+															title: getCellText(field, displayRow, filterRemoteOptions[field.name], t("common.yes"), t("common.no")),
+															onClick: (event) => {
+																if (!editable || !canInlineEditMode) return;
+																event.stopPropagation();
+																beginInlineEdit();
+															},
+															children: renderCell(field, displayRow, rowIndex, columnIndex, filterRemoteOptions[field.name], t("common.yes"), t("common.no"))
 														}, field.name);
 													}),
 													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: rowInRowEdit && showRowInlineActions ? /* @__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",
@@ -3452,97 +4289,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);
@@ -3844,59 +4590,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.
@@ -4079,30 +4772,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,
@@ -4117,22 +4810,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;
@@ -4144,10 +4837,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 {
@@ -5288,7 +5981,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) {
@@ -5313,15 +6006,15 @@ function usePermissions(resource, supportedOperations = []) {
 //#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 {
@@ -5352,7 +6045,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;
@@ -5360,7 +6053,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]),
@@ -5681,19 +6374,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)
@@ -6052,7 +6745,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,
@@ -6060,7 +6753,7 @@ function useCrudDialogStore(resourceId) {
 			rowData
 		});
 	}, [dispatch, resourceId]);
-	const closeDialog = (0, react.useCallback)(() => {
+	const closeDialog = (0, react$1.useCallback)(() => {
 		dispatch({
 			type: "CLOSE",
 			resourceId
@@ -6506,6 +7199,8 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 				selectionMode: hasMultipleSelection ? "multiple" : "single",
 				onSelectionChanged: handleSelectionChanged,
 				editMode: resolvedResource.editMode,
+				inlineEditToolbar: resolvedResource.inlineEditToolbar,
+				inlineRowActions: resolvedResource.inlineRowActions,
 				visibleColumns: presetState.visibleColumns,
 				beforeToolbar: renderPresetSelector,
 				aboveGrid: aboveGridContent,
@@ -6659,7 +7354,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) => {
@@ -6667,7 +7362,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]) => {
@@ -6778,23 +7473,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: {
@@ -6803,7 +7498,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" });
@@ -6849,7 +7544,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);
@@ -6919,7 +7614,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]);
 }
@@ -6954,9 +7649,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;
@@ -7138,7 +7833,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;
@@ -7150,7 +7845,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) => {
@@ -7170,7 +7865,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])