@nubitio/crud 0.2.1 → 0.3.0

package/dist/index.cjs

@@ -1091,12 +1091,16 @@ function formatSummaryValue(value, item) {
 		minimumFractionDigits: precision,
 		maximumFractionDigits: precision
 	} : void 0 };
-	if (item.valueFormat === "currency") return new Intl.NumberFormat((0, _nubitio_core.getCoreLocale)(), {
-		...baseOptions,
-		style: "currency",
-		currency: item.currency ?? "PEN",
-		currencyDisplay: item.currencyDisplay ?? "narrowSymbol"
-	}).format(value);
+	if (item.valueFormat === "currency") {
+		const currency = item.currency ?? (0, _nubitio_core.getCoreCurrency)();
+		if (currency === void 0) return new Intl.NumberFormat((0, _nubitio_core.getCoreLocale)(), baseOptions).format(value);
+		return new Intl.NumberFormat((0, _nubitio_core.getCoreLocale)(), {
+			...baseOptions,
+			style: "currency",
+			currency,
+			currencyDisplay: item.currencyDisplay ?? "narrowSymbol"
+		}).format(value);
+	}
 	if (item.valueFormat === "percent") return new Intl.NumberFormat((0, _nubitio_core.getCoreLocale)(), {
 		...baseOptions,
 		style: "percent"
@@ -1314,6 +1318,7 @@ function useLookupDropdown() {
 	};
 }
 function LookupDropdown({ activeOptionId, children, className, containerRef, disabled, id, label, menuRef, menuStyle, normalizedValue, onClear, onKeyDown, onQueryChange, onScroll, open, query, readOnly, required, setDraftQuery, setOpen }) {
+	const { t } = (0, _nubitio_core.useCoreTranslation)();
 	const blurTimer = (0, react.useRef)(void 0);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: containerRef,
@@ -1348,7 +1353,7 @@ function LookupDropdown({ activeOptionId, children, className, containerRef, dis
 			!disabled && !readOnly && normalizedValue !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: "nb-form__lookup-clear",
-				"aria-label": `Limpiar ${label}`,
+				"aria-label": t("form.lookupClear", { label }),
 				onMouseDown: (e) => e.preventDefault(),
 				onClick: onClear,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
@@ -1359,7 +1364,7 @@ function LookupDropdown({ activeOptionId, children, className, containerRef, dis
 			!disabled && !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: "nb-form__lookup-toggle",
-				"aria-label": `Abrir ${label}`,
+				"aria-label": t("form.lookupOpen", { label }),
 				onMouseDown: (e) => e.preventDefault(),
 				onClick: () => {
 					clearTimeout(blurTimer.current);
@@ -2574,7 +2579,7 @@ const NativeFormView = (0, react.forwardRef)((options, ref) => {
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "nb-form__tabs-nav",
 					role: "tablist",
-					"aria-label": "Secciones del formulario",
+					"aria-label": t("form.tabsAriaLabel"),
 					children: groups.map((group, index) => {
 						const tabIcon = resolveTabIcon(group.icon);
 						const isActive = index === activeTab;
@@ -2760,8 +2765,18 @@ function getCellText(field, row, entityOptions, yesLabel = "Yes", noLabel = "No"
 	if (field.type === "enum" || field.type === "switch") return getEnumDisplayValue(field, value);
 	if (field.type === "date") return getDateDisplay(value);
 	if (field.type === "datetime") return getDateTimeDisplay(value);
+	if (field.type === "currency") return getCurrencyDisplay(value);
 	return getPrimitiveDisplay(value, yesLabel, noLabel);
 }
+function getCurrencyDisplay(value) {
+	if (value === null || value === void 0 || value === "") return "";
+	const num = Number(value);
+	if (!Number.isFinite(num)) return String(value);
+	return num.toLocaleString((0, _nubitio_core.getCoreLocale)(), {
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	});
+}
 function renderCell(field, row, rowIndex, columnIndex, entityOptions, yesLabel = "Yes", noLabel = "No") {
 	const value = row[field.name];
 	if (field.formatter) return field.formatter({
@@ -2774,6 +2789,7 @@ function renderCell(field, row, rowIndex, columnIndex, entityOptions, yesLabel =
 	if (field.type === "enum" || field.type === "switch") return getEnumDisplayValue(field, value);
 	if (field.type === "date") return getDateDisplay(value);
 	if (field.type === "datetime") return getDateTimeDisplay(value);
+	if (field.type === "currency") return getCurrencyDisplay(value);
 	return getPrimitiveDisplay(value, yesLabel, noLabel);
 }
 function normalizeIcon$1(icon) {
@@ -3611,8 +3627,10 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 		options.onSelectionChanged?.({ selectedRowsData: nextRows });
 		emit(DATA_GRID_EVENTS.SELECTION_CHANGED, nextRows);
 	};
+	const rowEditable = (row) => options.canEditRow?.(row) !== false;
+	const rowDeletable = (row) => options.canDeleteRow?.(row) !== false;
 	const buildRowActions = (row) => [
-		...options.allowEdit && (options.onEdit || options.events?.EDIT) ? [{
+		...options.allowEdit && rowEditable(row) && (options.onEdit || options.events?.EDIT) ? [{
 			text: t("grid.buttonEdit"),
 			icon: "ph-pencil-simple",
 			disabled: options.editDisabled,
@@ -3627,7 +3645,7 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 			onClick: () => options.onView(row)
 		}] : [],
 		...getResolvedRowActions(row, options.rowActions),
-		...options.allowDelete && (options.onDelete || options.events?.DELETE) ? [{
+		...options.allowDelete && rowDeletable(row) && (options.onDelete || options.events?.DELETE) ? [{
 			text: t("grid.buttonDelete"),
 			icon: "ph-trash",
 			type: "danger",
@@ -3636,7 +3654,7 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 		}] : []
 	];
 	const openRow = (row) => {
-		if (options.allowEdit && (options.onEdit || options.events?.EDIT)) {
+		if (options.allowEdit && rowEditable(row) && (options.onEdit || options.events?.EDIT)) {
 			if (options.onEdit) options.onEdit(row);
 			else emit(options.events.EDIT, { row });
 			return;
@@ -4965,218 +4983,519 @@ function resolveCrudResource(resource, overrides = {}) {
 	};
 }
 //#endregion
-//#region packages/crud/crud/useCrudPage.ts
-function useCrudPage(resource, externalFormRef) {
-	const resolvedResource = (0, react.useMemo)(() => resolveCrudResource(resource), [resource]);
-	const events = resolvedResource.events;
-	const _internalFormRef = (0, react.useRef)(null);
-	const formRef = externalFormRef ?? _internalFormRef;
-	const fields = (0, react.useMemo)(() => resolvedResource.fields ?? [], [resolvedResource.fields]);
-	return {
-		events,
-		resource: resolvedResource,
-		fields,
-		formFields: (0, react.useMemo)(() => resolvedResource.formFields ?? fields, [fields, resolvedResource.formFields]),
-		formRef,
-		permissions: usePermissions(resolvedResource, resolvedResource._supportedOperations ?? []),
-		selectionState: useSelectionState((0, react.useMemo)(() => {
-			return fields.find((f) => f.isIdentity)?.name ?? "id";
-		}, [fields])),
-		presetState: useColumnPreset(resolvedResource)
-	};
-}
-//#endregion
-//#region packages/crud/crud/AuditTrailPanel.tsx
-const ACTION_COLORS = {
-	create: "#2e7d32",
-	update: "#1565c0",
-	delete: "#c62828"
-};
-function DefaultEntryRenderer({ entry }) {
-	const { t } = (0, _nubitio_core.useCoreTranslation)();
-	const date = new Date(entry.timestamp);
-	const formatted = Number.isNaN(date.getTime()) ? entry.timestamp : date.toLocaleString((0, _nubitio_core.getCoreLocale)(), { timeZone: (0, _nubitio_core.getCoreTimezone)() });
-	const actionLabels = {
-		create: t("auditTrail.action.create"),
-		update: t("auditTrail.action.update"),
-		delete: t("auditTrail.action.delete")
-	};
-	const changeKeys = Object.keys(entry.changes);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-		style: {
-			borderBottom: "1px solid #e0e0e0",
-			padding: "10px 0",
-			listStyle: "none"
-		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			style: {
-				display: "flex",
-				alignItems: "center",
-				gap: 8,
-				marginBottom: 4
-			},
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					style: {
-						fontSize: 12,
-						color: "#757575"
-					},
-					children: formatted
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					style: {
-						fontSize: 12,
-						color: "#424242"
-					},
-					children: entry.user
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					style: {
-						fontSize: 11,
-						fontWeight: 600,
-						padding: "1px 6px",
-						borderRadius: 4,
-						backgroundColor: ACTION_COLORS[entry.action],
-						color: "#fff"
-					},
-					children: actionLabels[entry.action]
-				})
-			]
-		}), changeKeys.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			style: {
-				margin: "4px 0 0 0",
-				padding: "0 0 0 16px"
-			},
-			children: changeKeys.map((field) => {
-				const { before, after } = entry.changes[field];
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-					style: {
-						fontSize: 12,
-						color: "#616161"
-					},
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [field, ":"] }),
-						" ",
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							style: { color: "#c62828" },
-							children: String(before ?? "—")
-						}),
-						" → ",
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							style: { color: "#2e7d32" },
-							children: String(after ?? "—")
-						})
-					]
-				}, field);
-			})
-		})]
-	});
-}
-function AuditTrailPanel({ url, renderEntry, visible, onClose }) {
-	const { t } = (0, _nubitio_core.useCoreTranslation)();
-	const httpClient = (0, _nubitio_core.useCoreHttpClient)();
-	const [fetchState, setFetchState] = (0, react.useState)({ status: "idle" });
-	(0, react.useEffect)(() => {
-		if (!visible || url === null) {
-			setFetchState({ status: "idle" });
-			return;
-		}
-		let cancelled = false;
-		setFetchState({ status: "loading" });
-		httpClient.get(url).then((response) => {
-			if (!cancelled) setFetchState({
-				status: "success",
-				entries: response.data
-			});
-		}).catch(() => {
-			if (!cancelled) setFetchState({ status: "error" });
-		});
-		return () => {
-			cancelled = true;
+//#region packages/crud/field/BaseFieldBuilder.ts
+var BaseFieldBuilder = class {
+	_field;
+	constructor(type) {
+		this._field = {
+			isIdentity: false,
+			type,
+			col: void 0,
+			name: "",
+			label: "",
+			width: void 0,
+			height: null,
+			minWidth: void 0,
+			align: "left",
+			sortable: true,
+			filterable: true,
+			hideable: true,
+			validators: [],
+			url: void 0,
+			loadOptions: [],
+			filters: [],
+			byKeyUrl: null,
+			textField: "",
+			valueField: "",
+			valueType: "string",
+			filterValue: void 0,
+			selectedFilterOperation: void 0,
+			data: [],
+			format: "",
+			formatter: void 0,
+			itemFormatter: void 0,
+			visible: true,
+			defaultValue: void 0,
+			onChange: void 0,
+			onSelect: void 0,
+			onClick: void 0,
+			readonly: false,
+			disabled: false,
+			hidden: false,
+			required: false,
+			precision: 0,
+			accept: null,
+			buttons: [],
+			searchEnabled: true,
+			searchExpr: null,
+			helpText: void 0,
+			contentRender: null,
+			visibleOnForm: true,
+			maxLength: void 0,
+			multiple: false,
+			autoSelectIfSingle: false,
+			sendAsString: false
 		};
-	}, [
-		httpClient,
-		url,
-		visible
-	]);
-	if (!visible) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
-		className: "nb-audit-trail-panel",
-		style: {
-			border: "1px solid #e0e0e0",
-			borderRadius: 4,
-			padding: "12px 16px",
-			backgroundColor: "#fafafa",
-			minWidth: 280
-		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			style: {
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "space-between",
-				marginBottom: 12
-			},
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-				style: { fontSize: 14 },
-				children: t("auditTrail.title")
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				onClick: onClose,
-				"aria-label": t("auditTrail.closeButton"),
-				style: {
-					background: "none",
-					border: "none",
-					cursor: "pointer",
-					fontSize: 18,
-					lineHeight: 1,
-					padding: "0 4px",
-					color: "#616161"
-				},
-				children: "×"
-			})]
-		}), url === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			style: {
-				fontSize: 13,
-				color: "#757575",
-				margin: 0
-			},
-			children: t("auditTrail.selectRecord")
-		}) : fetchState.status === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			style: {
-				fontSize: 13,
-				color: "#757575",
-				margin: 0
-			},
-			children: t("auditTrail.loading")
-		}) : fetchState.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			style: {
-				fontSize: 13,
-				color: "#c62828",
-				margin: 0
-			},
-			children: t("auditTrail.error")
-		}) : fetchState.status === "success" ? fetchState.entries.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			style: {
-				fontSize: 13,
-				color: "#757575",
-				margin: 0
-			},
-			children: t("auditTrail.empty")
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			style: {
-				margin: 0,
-				padding: 0
-			},
-			children: fetchState.entries.map((entry) => renderEntry ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderEntry(entry) }, String(entry.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultEntryRenderer, { entry }, String(entry.id)))
-		}) : null]
-	});
+	}
+	isIdentity(isIdentity) {
+		this._field.isIdentity = isIdentity;
+		return this;
+	}
+	col(col) {
+		this._field.col = col;
+		return this;
+	}
+	layoutHint(value) {
+		this._field.layoutHint = value;
+		return this;
+	}
+	cardRole(value) {
+		this._field.cardRole = value;
+		return this;
+	}
+	preferredColSpan(value) {
+		this._field.preferredColSpan = value;
+		return this;
+	}
+	minColSpan(value) {
+		this._field.minColSpan = value;
+		return this;
+	}
+	forceFullWidth(value = true) {
+		this._field.forceFullWidth = value;
+		return this;
+	}
+	name(name) {
+		this._field.name = name;
+		return this;
+	}
+	label(label) {
+		this._field.label = label;
+		return this;
+	}
+	width(width) {
+		this._field.width = width;
+		return this;
+	}
+	height(height) {
+		this._field.height = height;
+		return this;
+	}
+	minWidth(minWidth) {
+		this._field.minWidth = minWidth;
+		return this;
+	}
+	align(align) {
+		this._field.align = align;
+		return this;
+	}
+	sortable(sortable) {
+		this._field.sortable = sortable;
+		return this;
+	}
+	filterable(filterable) {
+		this._field.filterable = filterable;
+		return this;
+	}
+	hideable(hideable) {
+		this._field.hideable = hideable;
+		return this;
+	}
+	validators(validators) {
+		this._field.validators = validators;
+		return this;
+	}
+	valueType(valueType) {
+		this._field.valueType = valueType;
+		return this;
+	}
+	filterValue(filterValue) {
+		this._field.filterValue = filterValue;
+		return this;
+	}
+	data(data) {
+		this._field.data = data;
+		return this;
+	}
+	format(format) {
+		this._field.format = format;
+		return this;
+	}
+	formatter(formatter) {
+		this._field.formatter = formatter;
+		return this;
+	}
+	itemFormatter(itemFormatter) {
+		this._field.itemFormatter = itemFormatter;
+		return this;
+	}
+	visible(visible) {
+		this._field.visible = visible;
+		return this;
+	}
+	defaultValue(defaultValue) {
+		this._field.defaultValue = defaultValue;
+		return this;
+	}
+	onChange(onChange) {
+		this._field.onChange = onChange;
+		return this;
+	}
+	onSelect(onSelect) {
+		this._field.onSelect = onSelect;
+		return this;
+	}
+	onClick(onClick) {
+		this._field.onClick = onClick;
+		return this;
+	}
+	readonly(readonly) {
+		this._field.readonly = readonly;
+		return this;
+	}
+	disabled(disabled) {
+		this._field.disabled = disabled;
+		return this;
+	}
+	hidden(hidden) {
+		this._field.hidden = hidden;
+		return this;
+	}
+	required(required) {
+		this._field.required = required;
+		return this;
+	}
+	precision(value) {
+		this._field.precision = value;
+		return this;
+	}
+	accept(value) {
+		this._field.accept = value;
+		return this;
+	}
+	buttons(value) {
+		this._field.buttons = value;
+		return this;
+	}
+	searchEnabled(value) {
+		this._field.searchEnabled = value;
+		return this;
+	}
+	searchExpr(value) {
+		this._field.searchExpr = value;
+		return this;
+	}
+	helpText(value) {
+		this._field.helpText = value;
+		return this;
+	}
+	contentRender(value) {
+		this._field.contentRender = value;
+		return this;
+	}
+	visibleOnForm(value) {
+		this._field.visibleOnForm = value;
+		return this;
+	}
+	autoSelectIfSingle(value) {
+		this._field.autoSelectIfSingle = value;
+		return this;
+	}
+	url(url) {
+		this._field.url = url;
+		return this;
+	}
+	loadOptions(param) {
+		this._field.loadOptions = param;
+		return this;
+	}
+	filters(filters) {
+		this._field.filters = filters;
+		return this;
+	}
+	byKeyUrl(byKeyUrl) {
+		this._field.byKeyUrl = byKeyUrl;
+		return this;
+	}
+	textField(textField) {
+		this._field.textField = textField;
+		return this;
+	}
+	valueField(valueField) {
+		this._field.valueField = valueField;
+		return this;
+	}
+	selectedFilterOperation(operation) {
+		this._field.selectedFilterOperation = operation;
+		return this;
+	}
+	sendAsString(value) {
+		this._field.sendAsString = value;
+		return this;
+	}
+	multiple(value) {
+		this._field.multiple = value;
+		return this;
+	}
+	maxLength(value) {
+		this._field.maxLength = value;
+		return this;
+	}
+	visibleWhen(fn) {
+		this._field.visibleWhen = fn;
+		return this;
+	}
+	disabledWhen(fn) {
+		this._field.disabledWhen = fn;
+		return this;
+	}
+	computed(fn) {
+		this._field.computed = fn;
+		return this;
+	}
+	defaultWhen(fn) {
+		this._field.defaultWhen = fn;
+		return this;
+	}
+	requiredWhen(fn) {
+		this._field.requiredWhen = fn;
+		return this;
+	}
+	clearWhenHidden(value = true) {
+		this._field.clearWhenHidden = value;
+		return this;
+	}
+	dependsOn(fields) {
+		this._field.dependsOn = fields;
+		return this;
+	}
+	permissions(perms) {
+		this._field.permissions = perms;
+		return this;
+	}
+	build() {
+		return { ...this._field };
+	}
+};
+//#endregion
+//#region packages/crud/field/buildFields.ts
+/** Normalizes a mixed array of Fields and builders into plain Fields. */
+function buildFields(items) {
+	return items.map((item) => item instanceof BaseFieldBuilder ? item.build() : item);
 }
 //#endregion
-//#region packages/crud/crud/dialogStore.ts
-function initialDialogState() {
+//#region packages/crud/crud/useCrudPage.ts
+function useCrudPage(resource, externalFormRef) {
+	const resolvedResource = (0, react.useMemo)(() => resolveCrudResource(resource), [resource]);
+	const events = resolvedResource.events;
+	const _internalFormRef = (0, react.useRef)(null);
+	const formRef = externalFormRef ?? _internalFormRef;
+	const fields = (0, react.useMemo)(() => buildFields(resolvedResource.fields ?? []), [resolvedResource.fields]);
 	return {
-		isOpen: false,
-		mode: "add",
+		events,
+		resource: resolvedResource,
+		fields,
+		formFields: (0, react.useMemo)(() => resolvedResource.formFields ? buildFields(resolvedResource.formFields) : fields, [fields, resolvedResource.formFields]),
+		formRef,
+		permissions: usePermissions(resolvedResource, resolvedResource._supportedOperations ?? []),
+		selectionState: useSelectionState((0, react.useMemo)(() => {
+			return fields.find((f) => f.isIdentity)?.name ?? "id";
+		}, [fields])),
+		presetState: useColumnPreset(resolvedResource)
+	};
+}
+//#endregion
+//#region packages/crud/crud/AuditTrailPanel.tsx
+const ACTION_COLORS = {
+	create: "#2e7d32",
+	update: "#1565c0",
+	delete: "#c62828"
+};
+function DefaultEntryRenderer({ entry }) {
+	const { t } = (0, _nubitio_core.useCoreTranslation)();
+	const date = new Date(entry.timestamp);
+	const formatted = Number.isNaN(date.getTime()) ? entry.timestamp : date.toLocaleString((0, _nubitio_core.getCoreLocale)(), { timeZone: (0, _nubitio_core.getCoreTimezone)() });
+	const actionLabels = {
+		create: t("auditTrail.action.create"),
+		update: t("auditTrail.action.update"),
+		delete: t("auditTrail.action.delete")
+	};
+	const changeKeys = Object.keys(entry.changes);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		style: {
+			borderBottom: "1px solid #e0e0e0",
+			padding: "10px 0",
+			listStyle: "none"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				marginBottom: 4
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: {
+						fontSize: 12,
+						color: "#757575"
+					},
+					children: formatted
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: {
+						fontSize: 12,
+						color: "#424242"
+					},
+					children: entry.user
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: {
+						fontSize: 11,
+						fontWeight: 600,
+						padding: "1px 6px",
+						borderRadius: 4,
+						backgroundColor: ACTION_COLORS[entry.action],
+						color: "#fff"
+					},
+					children: actionLabels[entry.action]
+				})
+			]
+		}), changeKeys.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			style: {
+				margin: "4px 0 0 0",
+				padding: "0 0 0 16px"
+			},
+			children: changeKeys.map((field) => {
+				const { before, after } = entry.changes[field];
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					style: {
+						fontSize: 12,
+						color: "#616161"
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [field, ":"] }),
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: { color: "#c62828" },
+							children: String(before ?? "—")
+						}),
+						" → ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: { color: "#2e7d32" },
+							children: String(after ?? "—")
+						})
+					]
+				}, field);
+			})
+		})]
+	});
+}
+function AuditTrailPanel({ url, renderEntry, visible, onClose }) {
+	const { t } = (0, _nubitio_core.useCoreTranslation)();
+	const httpClient = (0, _nubitio_core.useCoreHttpClient)();
+	const [fetchState, setFetchState] = (0, react.useState)({ status: "idle" });
+	(0, react.useEffect)(() => {
+		if (!visible || url === null) {
+			setFetchState({ status: "idle" });
+			return;
+		}
+		let cancelled = false;
+		setFetchState({ status: "loading" });
+		httpClient.get(url).then((response) => {
+			if (!cancelled) setFetchState({
+				status: "success",
+				entries: response.data
+			});
+		}).catch(() => {
+			if (!cancelled) setFetchState({ status: "error" });
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		httpClient,
+		url,
+		visible
+	]);
+	if (!visible) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+		className: "nb-audit-trail-panel",
+		style: {
+			border: "1px solid #e0e0e0",
+			borderRadius: 4,
+			padding: "12px 16px",
+			backgroundColor: "#fafafa",
+			minWidth: 280
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				marginBottom: 12
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+				style: { fontSize: 14 },
+				children: t("auditTrail.title")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: onClose,
+				"aria-label": t("auditTrail.closeButton"),
+				style: {
+					background: "none",
+					border: "none",
+					cursor: "pointer",
+					fontSize: 18,
+					lineHeight: 1,
+					padding: "0 4px",
+					color: "#616161"
+				},
+				children: "×"
+			})]
+		}), url === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			style: {
+				fontSize: 13,
+				color: "#757575",
+				margin: 0
+			},
+			children: t("auditTrail.selectRecord")
+		}) : fetchState.status === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			style: {
+				fontSize: 13,
+				color: "#757575",
+				margin: 0
+			},
+			children: t("auditTrail.loading")
+		}) : fetchState.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			style: {
+				fontSize: 13,
+				color: "#c62828",
+				margin: 0
+			},
+			children: t("auditTrail.error")
+		}) : fetchState.status === "success" ? fetchState.entries.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			style: {
+				fontSize: 13,
+				color: "#757575",
+				margin: 0
+			},
+			children: t("auditTrail.empty")
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			style: {
+				margin: 0,
+				padding: 0
+			},
+			children: fetchState.entries.map((entry) => renderEntry ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderEntry(entry) }, String(entry.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultEntryRenderer, { entry }, String(entry.id)))
+		}) : null]
+	});
+}
+//#endregion
+//#region packages/crud/crud/dialogStore.ts
+function initialDialogState() {
+	return {
+		isOpen: false,
+		mode: "add",
 		rowData: null
 	};
 }
@@ -5247,9 +5566,16 @@ function useCrudDialogStore(resourceId) {
 //#endregion
 //#region packages/crud/crud/resolveResourceDetails.ts
 function resolveResourceDetails(resource) {
+	const { gridDetail, formDetail } = resource;
 	return {
-		gridDetail: resource.gridDetail,
-		formDetail: resource.formDetail
+		gridDetail: gridDetail && {
+			...gridDetail,
+			fields: typeof gridDetail.fields === "function" ? (parentRow) => buildFields(gridDetail.fields(parentRow)) : buildFields(gridDetail.fields)
+		},
+		formDetail: formDetail && {
+			...formDetail,
+			fields: buildFields(formDetail.fields)
+		}
 	};
 }
 //#endregion
@@ -5341,6 +5667,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 	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]);
+	const rawPermissions = typeof resolvedResource.permissions === "function" ? void 0 : resolvedResource.permissions;
 	const routeAwareGridFields = (0, react.useMemo)(() => datagridFields.map((field) => {
 		const routeFilterValue = initialFilters[field.name];
 		if (routeFilterValue === void 0) {
@@ -5600,6 +5927,9 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 				allowExport: permissions.canExport,
 				editDisabled,
 				deleteDisabled,
+				canEditRow: rawPermissions?.canEditRow,
+				canDeleteRow: rawPermissions?.canDeleteRow,
+				summaryFields: resolvedResource.summaryFields,
 				sort: resolvedResource.sort,
 				filter: routeAwareFilters,
 				paging: resolvedResource.paging,
@@ -5641,6 +5971,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 					events,
 					detailFields: formDetail?.fields,
 					detailUrl: formDetail?.url,
+					detailSummary: formDetail?.summary,
 					detailPropertyName: formDetail?.propertyName,
 					allowAdding: dialogMode !== "view" && formDetail?.allowAdding,
 					allowDeleting: dialogMode !== "view" && formDetail?.allowDeleting,
@@ -5703,6 +6034,38 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 	});
 };
 //#endregion
+//#region packages/crud/crud/crudRoute.tsx
+/**
+* Wires the two React Router v6 routes a page-mode resource needs:
+* the list route and the record route (`/sales` and `/sales/:id`, where
+* `:id` is also matched by the literal `new` for the create form).
+*
+* React Router v6 has no optional params (`:id?`), so page mode
+* (`viewMode: 'page'` + `routing: { routeParam: 'id' }`) requires both
+* routes to render the same element. This helper returns them in one call:
+*
+* ```tsx
+* <Routes>
+*   {crudRoute('/sales', <SalesPage />)}
+*   {crudRoute('/purchases', <PurchasesPage />, 'purchaseId')}
+* </Routes>
+* ```
+*
+* @param path - The list path, e.g. `/sales`.
+* @param element - The page element (typically a `SmartCrudPage` wrapper).
+* @param routeParam - Param name used in `routing.routeParam`. Default `'id'`.
+*/
+function crudRoute(path, element, routeParam = "id") {
+	const base = path.replace(/\/+$/, "");
+	return [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
+		path: base,
+		element
+	}, base), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
+		path: `${base}/:${routeParam}`,
+		element
+	}, `${base}/:${routeParam}`)];
+}
+//#endregion
 //#region packages/crud/crud/routing/useRouting.ts
 const NO_FILTERS = {};
 /**
@@ -6666,7 +7029,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 	const hasManualFields = !resource.fieldContract && Array.isArray(resource.fields) && resource.fields.length > 0;
 	const { fields, isLoading, error, supportedOperations } = useResolvedResourceFields({
 		apiUrl: resolvedBaseResource.apiUrl,
-		manualFields: hasManualFields ? resource.fields : void 0,
+		manualFields: hasManualFields ? buildFields(resource.fields) : void 0,
 		overrides: hasManualFields ? void 0 : fieldOverrides,
 		fieldContract: resource.fieldContract
 	});
@@ -6697,7 +7060,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		...resolvedBaseResource,
 		...!hasManualFields ? { fields: gridFields } : {},
 		apiUrl: normalizedApiUrl,
-		fields: hasManualFields ? resource.fields : gridFields,
+		fields: hasManualFields ? buildFields(resource.fields) : gridFields,
 		formFields: processedFields,
 		_supportedOperations: supportedOperations
 	}), [
@@ -6748,301 +7111,6 @@ function defineFields(contract) {
 }
 const defineFieldContract = defineFields;
 //#endregion
-//#region packages/crud/field/BaseFieldBuilder.ts
-var BaseFieldBuilder = class {
-	_field;
-	constructor(type) {
-		this._field = {
-			isIdentity: false,
-			type,
-			col: void 0,
-			name: "",
-			label: "",
-			width: void 0,
-			height: null,
-			minWidth: void 0,
-			align: "left",
-			sortable: true,
-			filterable: true,
-			hideable: true,
-			validators: [],
-			url: void 0,
-			loadOptions: [],
-			filters: [],
-			byKeyUrl: null,
-			textField: "",
-			valueField: "",
-			valueType: "string",
-			filterValue: void 0,
-			selectedFilterOperation: void 0,
-			data: [],
-			format: "",
-			formatter: void 0,
-			itemFormatter: void 0,
-			visible: true,
-			defaultValue: void 0,
-			onChange: void 0,
-			onSelect: void 0,
-			onClick: void 0,
-			readonly: false,
-			disabled: false,
-			hidden: false,
-			required: false,
-			precision: 0,
-			accept: null,
-			buttons: [],
-			searchEnabled: true,
-			searchExpr: null,
-			helpText: void 0,
-			contentRender: null,
-			visibleOnForm: true,
-			maxLength: void 0,
-			multiple: false,
-			autoSelectIfSingle: false,
-			sendAsString: false
-		};
-	}
-	isIdentity(isIdentity) {
-		this._field.isIdentity = isIdentity;
-		return this;
-	}
-	col(col) {
-		this._field.col = col;
-		return this;
-	}
-	layoutHint(value) {
-		this._field.layoutHint = value;
-		return this;
-	}
-	cardRole(value) {
-		this._field.cardRole = value;
-		return this;
-	}
-	preferredColSpan(value) {
-		this._field.preferredColSpan = value;
-		return this;
-	}
-	minColSpan(value) {
-		this._field.minColSpan = value;
-		return this;
-	}
-	forceFullWidth(value = true) {
-		this._field.forceFullWidth = value;
-		return this;
-	}
-	name(name) {
-		this._field.name = name;
-		return this;
-	}
-	label(label) {
-		this._field.label = label;
-		return this;
-	}
-	width(width) {
-		this._field.width = width;
-		return this;
-	}
-	height(height) {
-		this._field.height = height;
-		return this;
-	}
-	minWidth(minWidth) {
-		this._field.minWidth = minWidth;
-		return this;
-	}
-	align(align) {
-		this._field.align = align;
-		return this;
-	}
-	sortable(sortable) {
-		this._field.sortable = sortable;
-		return this;
-	}
-	filterable(filterable) {
-		this._field.filterable = filterable;
-		return this;
-	}
-	hideable(hideable) {
-		this._field.hideable = hideable;
-		return this;
-	}
-	validators(validators) {
-		this._field.validators = validators;
-		return this;
-	}
-	valueType(valueType) {
-		this._field.valueType = valueType;
-		return this;
-	}
-	filterValue(filterValue) {
-		this._field.filterValue = filterValue;
-		return this;
-	}
-	data(data) {
-		this._field.data = data;
-		return this;
-	}
-	format(format) {
-		this._field.format = format;
-		return this;
-	}
-	formatter(formatter) {
-		this._field.formatter = formatter;
-		return this;
-	}
-	itemFormatter(itemFormatter) {
-		this._field.itemFormatter = itemFormatter;
-		return this;
-	}
-	visible(visible) {
-		this._field.visible = visible;
-		return this;
-	}
-	defaultValue(defaultValue) {
-		this._field.defaultValue = defaultValue;
-		return this;
-	}
-	onChange(onChange) {
-		this._field.onChange = onChange;
-		return this;
-	}
-	onSelect(onSelect) {
-		this._field.onSelect = onSelect;
-		return this;
-	}
-	onClick(onClick) {
-		this._field.onClick = onClick;
-		return this;
-	}
-	readonly(readonly) {
-		this._field.readonly = readonly;
-		return this;
-	}
-	disabled(disabled) {
-		this._field.disabled = disabled;
-		return this;
-	}
-	hidden(hidden) {
-		this._field.hidden = hidden;
-		return this;
-	}
-	required(required) {
-		this._field.required = required;
-		return this;
-	}
-	precision(value) {
-		this._field.precision = value;
-		return this;
-	}
-	accept(value) {
-		this._field.accept = value;
-		return this;
-	}
-	buttons(value) {
-		this._field.buttons = value;
-		return this;
-	}
-	searchEnabled(value) {
-		this._field.searchEnabled = value;
-		return this;
-	}
-	searchExpr(value) {
-		this._field.searchExpr = value;
-		return this;
-	}
-	helpText(value) {
-		this._field.helpText = value;
-		return this;
-	}
-	contentRender(value) {
-		this._field.contentRender = value;
-		return this;
-	}
-	visibleOnForm(value) {
-		this._field.visibleOnForm = value;
-		return this;
-	}
-	autoSelectIfSingle(value) {
-		this._field.autoSelectIfSingle = value;
-		return this;
-	}
-	url(url) {
-		this._field.url = url;
-		return this;
-	}
-	loadOptions(param) {
-		this._field.loadOptions = param;
-		return this;
-	}
-	filters(filters) {
-		this._field.filters = filters;
-		return this;
-	}
-	byKeyUrl(byKeyUrl) {
-		this._field.byKeyUrl = byKeyUrl;
-		return this;
-	}
-	textField(textField) {
-		this._field.textField = textField;
-		return this;
-	}
-	valueField(valueField) {
-		this._field.valueField = valueField;
-		return this;
-	}
-	selectedFilterOperation(operation) {
-		this._field.selectedFilterOperation = operation;
-		return this;
-	}
-	sendAsString(value) {
-		this._field.sendAsString = value;
-		return this;
-	}
-	multiple(value) {
-		this._field.multiple = value;
-		return this;
-	}
-	maxLength(value) {
-		this._field.maxLength = value;
-		return this;
-	}
-	visibleWhen(fn) {
-		this._field.visibleWhen = fn;
-		return this;
-	}
-	disabledWhen(fn) {
-		this._field.disabledWhen = fn;
-		return this;
-	}
-	computed(fn) {
-		this._field.computed = fn;
-		return this;
-	}
-	defaultWhen(fn) {
-		this._field.defaultWhen = fn;
-		return this;
-	}
-	requiredWhen(fn) {
-		this._field.requiredWhen = fn;
-		return this;
-	}
-	clearWhenHidden(value = true) {
-		this._field.clearWhenHidden = value;
-		return this;
-	}
-	dependsOn(fields) {
-		this._field.dependsOn = fields;
-		return this;
-	}
-	permissions(perms) {
-		this._field.permissions = perms;
-		return this;
-	}
-	build() {
-		return { ...this._field };
-	}
-};
-//#endregion
 //#region packages/crud/field/FieldBuilders.ts
 /**
 * Factory for the standard hidden identity field (type NONE, name 'id').
@@ -7923,6 +7991,7 @@ exports.SmartCrudPage = SmartCrudPage;
 exports.SmartCrudRolesProvider = SmartCrudRolesProvider;
 exports.ToolbarSelect = ToolbarSelect;
 exports.buildFieldColSpanContext = buildFieldColSpanContext;
+exports.buildFields = buildFields;
 exports.checkboxField = checkboxField;
 exports.computeSummaryValue = computeSummaryValue;
 Object.defineProperty(exports, "createCrudEvents", {
@@ -7931,6 +8000,7 @@ Object.defineProperty(exports, "createCrudEvents", {
 		return _nubitio_core.createCrudEvents;
 	}
 });
+exports.crudRoute = crudRoute;
 exports.currencyField = currencyField;
 exports.dateField = dateField;
 exports.datetimeField = datetimeField;