@nubitio/crud 0.5.0 → 0.5.2

package/dist/index.cjs

@@ -5310,12 +5310,61 @@ function useCrudPage(resource, externalFormRef) {
 }
 //#endregion
 //#region packages/crud/crud/AuditTrailPanel.tsx
-const ACTION_COLORS = {
-	create: "#2e7d32",
-	update: "#1565c0",
-	delete: "#c62828"
+const ACTION_BADGE = {
+	create: "success",
+	update: "info",
+	delete: "danger"
 };
-function DefaultEntryRenderer({ entry }) {
+const ACTION_TONE = {
+	create: "success",
+	update: "info",
+	delete: "danger"
+};
+function formatAuditValue(value, yesLabel, noLabel) {
+	if (value == null || value === "") return "—";
+	if (typeof value === "boolean") return value ? yesLabel : noLabel;
+	if (typeof value === "object") try {
+		return JSON.stringify(value);
+	} catch {
+		return String(value);
+	}
+	return String(value);
+}
+function DefaultEntryContent({ entry, resolveFieldLabel, yesLabel, noLabel }) {
+	const changeKeys = Object.keys(entry.changes);
+	if (changeKeys.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "nb-audit-trail__changes",
+		children: changeKeys.map((field) => {
+			const { before, after } = entry.changes[field];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: "nb-audit-trail__change",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "nb-audit-trail__field",
+					children: resolveFieldLabel(field)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "nb-audit-trail__diff",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "nb-audit-trail__value nb-audit-trail__value--before",
+							children: formatAuditValue(before, yesLabel, noLabel)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "nb-audit-trail__arrow",
+							"aria-hidden": "true",
+							children: "→"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "nb-audit-trail__value nb-audit-trail__value--after",
+							children: formatAuditValue(after, yesLabel, noLabel)
+						})
+					]
+				})]
+			}, field);
+		})
+	});
+}
+function DefaultEntryRenderer({ entry, resolveFieldLabel, yesLabel, noLabel }) {
 	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)() });
@@ -5324,177 +5373,159 @@ function DefaultEntryRenderer({ entry }) {
 		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);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.TimelineItem, {
+		status: "complete",
+		tone: ACTION_TONE[entry.action],
+		title: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "nb-audit-trail__meta",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "nb-audit-trail__user",
+				children: entry.user
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Badge, {
+				variant: ACTION_BADGE[entry.action],
+				size: "sm",
+				pill: true,
+				children: actionLabels[entry.action]
+			})]
+		}),
+		timestamp: formatted,
+		dateTime: entry.timestamp,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultEntryContent, {
+			entry,
+			resolveFieldLabel,
+			yesLabel,
+			noLabel
+		})
+	});
+}
+function AuditTrailSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "nb-audit-trail__skeleton",
+		"aria-busy": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Skeleton, {
+				variant: "rect",
+				height: 72
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Skeleton, {
+				variant: "rect",
+				height: 72
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Skeleton, {
+				variant: "rect",
+				height: 72
 			})
-		})]
+		]
 	});
 }
-function AuditTrailPanel({ url, renderEntry, visible, onClose }) {
+function AuditTrailPanel({ url, renderEntry, visible, onClose, recordSubtitle, resolveFieldLabel, drawerSize = "sm" }) {
 	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) {
+	const yesLabel = t("common.yes");
+	const noLabel = t("common.no");
+	const loadEntries = (0, react.useCallback)(() => {
+		if (url === null) {
 			setFetchState({ status: "idle" });
 			return;
 		}
-		let cancelled = false;
 		setFetchState({ status: "loading" });
 		httpClient.get(url).then((response) => {
-			if (!cancelled) setFetchState({
+			setFetchState({
 				status: "success",
 				entries: response.data
 			});
 		}).catch(() => {
-			if (!cancelled) setFetchState({ status: "error" });
+			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]
+	}, [httpClient, url]);
+	(0, react.useEffect)(() => {
+		if (!visible) {
+			setFetchState({ status: "idle" });
+			return;
+		}
+		loadEntries();
+	}, [loadEntries, visible]);
+	const drawerTitle = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("auditTrail.title") }), recordSubtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "nb-audit-trail__subtitle",
+		children: recordSubtitle
+	})] });
+	const body = (() => {
+		if (url === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.EmptyState, {
+			fill: true,
+			icon: "cursor-click",
+			title: t("auditTrail.selectRecord"),
+			description: t("auditTrail.selectRecordHint"),
+			size: "sm"
+		});
+		if (fetchState.status === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AuditTrailSkeleton, {});
+		if (fetchState.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "nb-audit-trail__error",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.EmptyState, {
+				fill: true,
+				variant: "danger",
+				icon: "warning-circle",
+				title: t("auditTrail.error"),
+				size: "sm",
+				action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Button, {
+					variant: "secondary",
+					size: "sm",
+					onClick: loadEntries,
+					children: t("auditTrail.retry")
+				})
+			})
+		});
+		if (fetchState.status === "success" && fetchState.entries.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.EmptyState, {
+			fill: true,
+			icon: "clock-counter-clockwise",
+			title: t("auditTrail.empty"),
+			description: t("auditTrail.emptyHint"),
+			size: "sm"
+		});
+		if (fetchState.status === "success") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Timeline, {
+			variant: "log",
+			"aria-label": t("auditTrail.title"),
+			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,
+				resolveFieldLabel,
+				yesLabel,
+				noLabel
+			}, String(entry.id)))
+		});
+		return null;
+	})();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Drawer, {
+		isOpen: visible,
+		onClose,
+		title: drawerTitle,
+		width: resolveDrawerWidth({ drawerSize }),
+		side: "right",
+		scrim: "subtle",
+		closeLabel: t("auditTrail.closeButton"),
+		"aria-label": t("auditTrail.title"),
+		className: "nb-audit-trail-drawer",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "nb-audit-trail",
+			children: body
+		})
 	});
 }
 //#endregion
+//#region packages/crud/crud/AuditTrail.ts
+function createAuditFieldLabelResolver(config, fields) {
+	const fieldLabelByName = new Map(fields.map((field) => [field.name, field.label || field.name]));
+	return (field) => {
+		const fromConfig = config?.fieldLabels;
+		if (fromConfig) {
+			if (typeof fromConfig === "function") {
+				const resolved = fromConfig(field);
+				if (resolved) return resolved;
+			} else if (fromConfig[field]) return fromConfig[field];
+		}
+		return fieldLabelByName.get(field) ?? field;
+	};
+}
+//#endregion
 //#region packages/crud/crud/dialogStore.ts
 function initialDialogState() {
 	return {
@@ -5842,13 +5873,30 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 		if (hasAuditTrail) {
 			const first = rows[0];
 			if (first != null) setSelectedRowId(first["id"] ?? first["ID"] ?? null);
+			else setSelectedRowId(null);
 		}
 	};
+	const selectedRow = selectedRows[0] ?? null;
 	const auditUrl = (0, react.useMemo)(() => {
 		if (!resolvedResource.auditTrail?.enabled || selectedRowId == null) return null;
 		const { apiUrl } = resolvedResource.auditTrail;
 		return typeof apiUrl === "function" ? apiUrl(selectedRowId) : `${apiUrl}${selectedRowId}`;
 	}, [resolvedResource.auditTrail, selectedRowId]);
+	const resolveAuditFieldLabel = (0, react.useMemo)(() => createAuditFieldLabelResolver(resolvedResource.auditTrail, routeAwareGridFields), [resolvedResource.auditTrail, routeAwareGridFields]);
+	const auditRecordSubtitle = (0, react.useMemo)(() => {
+		if (!resolvedResource.auditTrail?.recordSubtitle || selectedRow == null) return void 0;
+		return resolvedResource.auditTrail.recordSubtitle(selectedRow);
+	}, [resolvedResource.auditTrail, selectedRow]);
+	const openAuditTrail = (0, react.useCallback)((row) => {
+		if (row != null) {
+			const id = row["id"] ?? row["ID"] ?? null;
+			if (id != null) {
+				setSelectedRowId(id);
+				setSelectedRows([row]);
+			}
+		}
+		setAuditOpen(true);
+	}, []);
 	const executeBulkAction = (0, react.useCallback)(async (action) => {
 		await action.onAction(selectionState.selectedIds);
 		selectionState.clearSelection();
@@ -5862,7 +5910,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 		else executeBulkAction(action);
 	}, [executeBulkAction]);
 	const toolbar = (0, react.useMemo)(() => {
-		return resolveResourceToolbar(resolvedResource, {
+		const base = resolveResourceToolbar(resolvedResource, {
 			resource: resolvedResource,
 			selectedRow: selectedRows[0],
 			selectedRows,
@@ -5870,14 +5918,48 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 			formRef,
 			events,
 			emit
-		});
+		}) ?? {};
+		if (!hasAuditTrail) return base;
+		return {
+			...base,
+			utility: [...base.utility ?? [], {
+				key: "audit-trail",
+				text: t("crudPage.auditTrailButton"),
+				icon: "ph-clock-counter-clockwise",
+				hint: t("auditTrail.toolbarHint"),
+				disabled: selectedRowId == null,
+				onClick: () => openAuditTrail()
+			}]
+		};
 	}, [
 		emit,
 		events,
 		formRef,
 		gridRef,
+		hasAuditTrail,
+		openAuditTrail,
 		resolvedResource,
-		selectedRows
+		selectedRowId,
+		selectedRows,
+		t
+	]);
+	const rowActions = (0, react.useMemo)(() => {
+		const base = resolvedResource.rowActions;
+		if (!hasAuditTrail || resolvedResource.auditTrail?.rowAction === false) return base;
+		const auditAction = (row) => ({
+			key: "audit-trail",
+			text: t("auditTrail.rowAction"),
+			icon: "ph-clock-counter-clockwise",
+			onClick: () => openAuditTrail(row)
+		});
+		if (typeof base === "function") return (row) => [...base(row), auditAction(row)];
+		return (row) => [...base ?? [], auditAction(row)];
+	}, [
+		hasAuditTrail,
+		openAuditTrail,
+		resolvedResource.auditTrail?.rowAction,
+		resolvedResource.rowActions,
+		t
 	]);
 	/** Preset selector rendered as a toolbar slot via `beforeToolbar`. */
 	const renderPresetSelector = hasPresets ? () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnPresetSelector, {
@@ -5890,7 +5972,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 	}) : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		id: "wrapper",
-		className: [auditOpen && "wrapper--with-audit", viewMode.mode === "page" && dialogIsOpen && "wrapper--with-page"].filter(Boolean).join(" ") || void 0,
+		className: [viewMode.mode === "page" && dialogIsOpen && "wrapper--with-page"].filter(Boolean).join(" ") || void 0,
 		children: [
 			(resolvedResource.bulkActions?.length ?? 0) > 0 && selectionState.hasSelection && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "nb-bulk-toolbar",
@@ -5907,16 +5989,6 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 					children: action.label
 				}, action.key))]
 			}),
-			hasAuditTrail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "nb-audit-trail-toolbar",
-				style: { marginBottom: 8 },
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: () => setAuditOpen((prev) => !prev),
-					"aria-pressed": auditOpen,
-					children: t("crudPage.auditTrailButton")
-				})
-			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeDataGridView, {
 				ref: gridRef,
 				id: resolvedResource.id,
@@ -5941,7 +6013,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 				mode: resolvedResource.mode,
 				stateStoringEnabled: resolvedResource.stateStoring,
 				toolbar,
-				rowActions: resolvedResource.rowActions,
+				rowActions,
 				onAdd: requestNew,
 				onEdit: requestEdit,
 				onView: requestView,
@@ -6014,7 +6086,10 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 				url: auditUrl,
 				renderEntry: resolvedResource.auditTrail.renderEntry,
 				visible: auditOpen,
-				onClose: () => setAuditOpen(false)
+				onClose: () => setAuditOpen(false),
+				recordSubtitle: auditRecordSubtitle,
+				resolveFieldLabel: resolveAuditFieldLabel,
+				drawerSize: resolvedResource.auditTrail?.drawerSize
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.ConfirmDialog, {
 				open: confirmState.open,

package/dist/index.d.cts

@@ -495,10 +495,23 @@ interface AuditEntry {
     after: unknown;
   }>;
 }
-interface AuditTrailConfig {
+type AuditFieldLabelResolver = (field: string) => string;
+interface AuditTrailConfig<T extends DataRecord$1 = DataRecord$1> {
   enabled: boolean;
   apiUrl: string | ((id: string | number) => string);
+  /** Custom entry renderer. Receives resolved field labels via context in the panel. */
   renderEntry?: (entry: AuditEntry) => ReactNode;
+  /**
+   * Maps API field keys to display labels. When omitted, CrudPage falls back to
+   * matching grid field labels from the active resource schema.
+   */
+  fieldLabels?: Record<string, string> | ((field: string) => string | undefined);
+  /** One-line context shown under the drawer title for the selected row. */
+  recordSubtitle?: (row: T) => string | undefined;
+  /** Drawer width token. Default `sm` (480px) — read-only secondary panel. */
+  drawerSize?: CrudDrawerSize;
+  /** Adds a row-menu action that opens the audit drawer. Default true. */
+  rowAction?: boolean;
 }
 //#endregion
 //#region packages/crud/crud/fieldOperationSemantics.d.ts
@@ -1149,13 +1162,19 @@ interface AuditTrailPanelProps {
   renderEntry?: (entry: AuditEntry) => ReactNode;
   visible: boolean;
   onClose: () => void;
+  recordSubtitle?: string;
+  resolveFieldLabel: AuditFieldLabelResolver;
+  drawerSize?: CrudDrawerSize;
 }
 declare function AuditTrailPanel({
   url,
   renderEntry,
   visible,
-  onClose
-}: AuditTrailPanelProps): React.JSX.Element | null;
+  onClose,
+  recordSubtitle,
+  resolveFieldLabel,
+  drawerSize
+}: AuditTrailPanelProps): React.JSX.Element;
 //#endregion
 //#region packages/crud/field/FieldBuilders.d.ts
 /**
@@ -1936,4 +1955,4 @@ declare function ResourceStoreProvider({
 }: ResourceStoreProviderProps): React.JSX.Element;
 declare function useResourceStoreFactory(): ResourceStoreFactory;
 //#endregion
-export { type AuditEntry, type AuditTrailConfig, AuditTrailPanel, type AuditTrailPanelProps, type BackendAdapter, type BulkAction, type ColSpan, type ColumnPreset, ColumnPresetSelector, type ColumnPresetState, CrudDialogShell, CrudDrawerShell, type CrudDrawerSize, type CrudDrawerViewEvents, type CrudDrawerViewOptions, CrudFormShell, type CrudFormShellProps, CrudPage, CrudPageShell, type CrudPageViewEvents, type CrudPageViewOptions, type CrudViewMode, type CrudViewModeConfig, DATA_GRID_EVENTS, DEFAULT_DRAWER_SIZE, DEFAULT_DRAWER_WIDTH, DRAWER_WIDTHS, type DataGridSelectionChangedEvent, type DataGridSummaryItem, NativeDataGridView as DataGridView, type DataGridViewOptions, type DataRecord, type DetailSummaryOptions, CrudDialogView as DialogView, type DrawerSize, CrudDrawerView as DrawerView, type EnumOption, FORM_EVENTS, type Field, FieldBuilder, type FieldColSpanContext, type FieldDef, type FieldInput, type FieldOverride, FieldType, type FilterRule, type FormHandle, type FormLayout, type FormLayoutHint, type FormOnChangeFn, type FormPresentationContext, type FormPresentationMode, type FormSection, type FormTab, NativeFormView as FormView, type FormViewOptions, type FormatterFn, type GridCellContext, type GridData, type GridHandle, type GridOnChangeFn, HydraAdapter, type ItemFormatterFn, type LoadOption, type OnChangeFn, CrudPageView as PageView, type ResolvedViewMode, type ResourceConfig, type ResourceEmptyState, type ResourceFilterDescriptor, type ResourceFilterRule, type ResourceFormDetail, type ResourceGridDetail, type ResourceLoadOption, type ResourceLoadOptions, type ResourcePermissions, type ResourceRouting, type ResourceRowActions, ResourceSchemaProvider, type ResourceSchemaProviderProps, type ResourceSchemaResolution, type ResourceSchemaResolver, type ResourceSortDescriptor, type ResourceStore, type ResourceStoreFactory, type ResourceStoreOptions, ResourceStoreProvider, type ResourceStoreProviderProps, type ResourceToolbar, type ResourceToolbarAction, type ResourceToolbarActionVariant, type ResourceToolbarContext, type ResourceToolbarItems, RestAdapter, type SmartCrudFieldContract, type SmartCrudFieldOperation, type SmartCrudFieldPatch, type SmartCrudHydraFieldContract, type SmartCrudHydraFieldDirective, type SmartCrudManualField, type SmartCrudManualFieldContract, type SmartCrudOperation, SmartCrudPage, SmartCrudRolesProvider, type SummaryCalculateContext, type SummaryFormat, type SummaryItem, type SummaryTextContext, type SummaryType, ToolbarSelect, type ToolbarSelectOption, type ToolbarSelectProps, type ValidationRule, buildFieldColSpanContext, buildFields, checkboxField, computeSummaryValue, createCrudEvents, crudRoute, currencyField, dateField, datetimeField, defineFieldContract, defineFields, defineResource, entityField, enumField, fileField, formatSummaryValue, identityField, imageField, isLongTextField, isShortField, noneField, numberField, parseDrawerWidthPx, passwordField, resolveDrawerLayoutBucket, resolveDrawerSize, resolveDrawerWidth, resolveFieldColSpan, resolveFieldsColSpans, resolveSummaryText, resolveViewMode, selectField, switchField, textField, textareaField, useColumnPreset, useResourceStoreFactory, useSmartCrudRoles, validateFieldContract };
+export { type AuditEntry, type AuditFieldLabelResolver, type AuditTrailConfig, AuditTrailPanel, type AuditTrailPanelProps, type BackendAdapter, type BulkAction, type ColSpan, type ColumnPreset, ColumnPresetSelector, type ColumnPresetState, CrudDialogShell, CrudDrawerShell, type CrudDrawerSize, type CrudDrawerViewEvents, type CrudDrawerViewOptions, CrudFormShell, type CrudFormShellProps, CrudPage, CrudPageShell, type CrudPageViewEvents, type CrudPageViewOptions, type CrudViewMode, type CrudViewModeConfig, DATA_GRID_EVENTS, DEFAULT_DRAWER_SIZE, DEFAULT_DRAWER_WIDTH, DRAWER_WIDTHS, type DataGridSelectionChangedEvent, type DataGridSummaryItem, NativeDataGridView as DataGridView, type DataGridViewOptions, type DataRecord, type DetailSummaryOptions, CrudDialogView as DialogView, type DrawerSize, CrudDrawerView as DrawerView, type EnumOption, FORM_EVENTS, type Field, FieldBuilder, type FieldColSpanContext, type FieldDef, type FieldInput, type FieldOverride, FieldType, type FilterRule, type FormHandle, type FormLayout, type FormLayoutHint, type FormOnChangeFn, type FormPresentationContext, type FormPresentationMode, type FormSection, type FormTab, NativeFormView as FormView, type FormViewOptions, type FormatterFn, type GridCellContext, type GridData, type GridHandle, type GridOnChangeFn, HydraAdapter, type ItemFormatterFn, type LoadOption, type OnChangeFn, CrudPageView as PageView, type ResolvedViewMode, type ResourceConfig, type ResourceEmptyState, type ResourceFilterDescriptor, type ResourceFilterRule, type ResourceFormDetail, type ResourceGridDetail, type ResourceLoadOption, type ResourceLoadOptions, type ResourcePermissions, type ResourceRouting, type ResourceRowActions, ResourceSchemaProvider, type ResourceSchemaProviderProps, type ResourceSchemaResolution, type ResourceSchemaResolver, type ResourceSortDescriptor, type ResourceStore, type ResourceStoreFactory, type ResourceStoreOptions, ResourceStoreProvider, type ResourceStoreProviderProps, type ResourceToolbar, type ResourceToolbarAction, type ResourceToolbarActionVariant, type ResourceToolbarContext, type ResourceToolbarItems, RestAdapter, type SmartCrudFieldContract, type SmartCrudFieldOperation, type SmartCrudFieldPatch, type SmartCrudHydraFieldContract, type SmartCrudHydraFieldDirective, type SmartCrudManualField, type SmartCrudManualFieldContract, type SmartCrudOperation, SmartCrudPage, SmartCrudRolesProvider, type SummaryCalculateContext, type SummaryFormat, type SummaryItem, type SummaryTextContext, type SummaryType, ToolbarSelect, type ToolbarSelectOption, type ToolbarSelectProps, type ValidationRule, buildFieldColSpanContext, buildFields, checkboxField, computeSummaryValue, createCrudEvents, crudRoute, currencyField, dateField, datetimeField, defineFieldContract, defineFields, defineResource, entityField, enumField, fileField, formatSummaryValue, identityField, imageField, isLongTextField, isShortField, noneField, numberField, parseDrawerWidthPx, passwordField, resolveDrawerLayoutBucket, resolveDrawerSize, resolveDrawerWidth, resolveFieldColSpan, resolveFieldsColSpans, resolveSummaryText, resolveViewMode, selectField, switchField, textField, textareaField, useColumnPreset, useResourceStoreFactory, useSmartCrudRoles, validateFieldContract };

package/dist/index.d.mts

@@ -495,10 +495,23 @@ interface AuditEntry {
     after: unknown;
   }>;
 }
-interface AuditTrailConfig {
+type AuditFieldLabelResolver = (field: string) => string;
+interface AuditTrailConfig<T extends DataRecord$1 = DataRecord$1> {
   enabled: boolean;
   apiUrl: string | ((id: string | number) => string);
+  /** Custom entry renderer. Receives resolved field labels via context in the panel. */
   renderEntry?: (entry: AuditEntry) => ReactNode;
+  /**
+   * Maps API field keys to display labels. When omitted, CrudPage falls back to
+   * matching grid field labels from the active resource schema.
+   */
+  fieldLabels?: Record<string, string> | ((field: string) => string | undefined);
+  /** One-line context shown under the drawer title for the selected row. */
+  recordSubtitle?: (row: T) => string | undefined;
+  /** Drawer width token. Default `sm` (480px) — read-only secondary panel. */
+  drawerSize?: CrudDrawerSize;
+  /** Adds a row-menu action that opens the audit drawer. Default true. */
+  rowAction?: boolean;
 }
 //#endregion
 //#region packages/crud/crud/fieldOperationSemantics.d.ts
@@ -1149,13 +1162,19 @@ interface AuditTrailPanelProps {
   renderEntry?: (entry: AuditEntry) => ReactNode;
   visible: boolean;
   onClose: () => void;
+  recordSubtitle?: string;
+  resolveFieldLabel: AuditFieldLabelResolver;
+  drawerSize?: CrudDrawerSize;
 }
 declare function AuditTrailPanel({
   url,
   renderEntry,
   visible,
-  onClose
-}: AuditTrailPanelProps): React.JSX.Element | null;
+  onClose,
+  recordSubtitle,
+  resolveFieldLabel,
+  drawerSize
+}: AuditTrailPanelProps): React.JSX.Element;
 //#endregion
 //#region packages/crud/field/FieldBuilders.d.ts
 /**
@@ -1936,4 +1955,4 @@ declare function ResourceStoreProvider({
 }: ResourceStoreProviderProps): React.JSX.Element;
 declare function useResourceStoreFactory(): ResourceStoreFactory;
 //#endregion
-export { type AuditEntry, type AuditTrailConfig, AuditTrailPanel, type AuditTrailPanelProps, type BackendAdapter, type BulkAction, type ColSpan, type ColumnPreset, ColumnPresetSelector, type ColumnPresetState, CrudDialogShell, CrudDrawerShell, type CrudDrawerSize, type CrudDrawerViewEvents, type CrudDrawerViewOptions, CrudFormShell, type CrudFormShellProps, CrudPage, CrudPageShell, type CrudPageViewEvents, type CrudPageViewOptions, type CrudViewMode, type CrudViewModeConfig, DATA_GRID_EVENTS, DEFAULT_DRAWER_SIZE, DEFAULT_DRAWER_WIDTH, DRAWER_WIDTHS, type DataGridSelectionChangedEvent, type DataGridSummaryItem, NativeDataGridView as DataGridView, type DataGridViewOptions, type DataRecord, type DetailSummaryOptions, CrudDialogView as DialogView, type DrawerSize, CrudDrawerView as DrawerView, type EnumOption, FORM_EVENTS, type Field, FieldBuilder, type FieldColSpanContext, type FieldDef, type FieldInput, type FieldOverride, FieldType, type FilterRule, type FormHandle, type FormLayout, type FormLayoutHint, type FormOnChangeFn, type FormPresentationContext, type FormPresentationMode, type FormSection, type FormTab, NativeFormView as FormView, type FormViewOptions, type FormatterFn, type GridCellContext, type GridData, type GridHandle, type GridOnChangeFn, HydraAdapter, type ItemFormatterFn, type LoadOption, type OnChangeFn, CrudPageView as PageView, type ResolvedViewMode, type ResourceConfig, type ResourceEmptyState, type ResourceFilterDescriptor, type ResourceFilterRule, type ResourceFormDetail, type ResourceGridDetail, type ResourceLoadOption, type ResourceLoadOptions, type ResourcePermissions, type ResourceRouting, type ResourceRowActions, ResourceSchemaProvider, type ResourceSchemaProviderProps, type ResourceSchemaResolution, type ResourceSchemaResolver, type ResourceSortDescriptor, type ResourceStore, type ResourceStoreFactory, type ResourceStoreOptions, ResourceStoreProvider, type ResourceStoreProviderProps, type ResourceToolbar, type ResourceToolbarAction, type ResourceToolbarActionVariant, type ResourceToolbarContext, type ResourceToolbarItems, RestAdapter, type SmartCrudFieldContract, type SmartCrudFieldOperation, type SmartCrudFieldPatch, type SmartCrudHydraFieldContract, type SmartCrudHydraFieldDirective, type SmartCrudManualField, type SmartCrudManualFieldContract, type SmartCrudOperation, SmartCrudPage, SmartCrudRolesProvider, type SummaryCalculateContext, type SummaryFormat, type SummaryItem, type SummaryTextContext, type SummaryType, ToolbarSelect, type ToolbarSelectOption, type ToolbarSelectProps, type ValidationRule, buildFieldColSpanContext, buildFields, checkboxField, computeSummaryValue, createCrudEvents, crudRoute, currencyField, dateField, datetimeField, defineFieldContract, defineFields, defineResource, entityField, enumField, fileField, formatSummaryValue, identityField, imageField, isLongTextField, isShortField, noneField, numberField, parseDrawerWidthPx, passwordField, resolveDrawerLayoutBucket, resolveDrawerSize, resolveDrawerWidth, resolveFieldColSpan, resolveFieldsColSpans, resolveSummaryText, resolveViewMode, selectField, switchField, textField, textareaField, useColumnPreset, useResourceStoreFactory, useSmartCrudRoles, validateFieldContract };
+export { type AuditEntry, type AuditFieldLabelResolver, type AuditTrailConfig, AuditTrailPanel, type AuditTrailPanelProps, type BackendAdapter, type BulkAction, type ColSpan, type ColumnPreset, ColumnPresetSelector, type ColumnPresetState, CrudDialogShell, CrudDrawerShell, type CrudDrawerSize, type CrudDrawerViewEvents, type CrudDrawerViewOptions, CrudFormShell, type CrudFormShellProps, CrudPage, CrudPageShell, type CrudPageViewEvents, type CrudPageViewOptions, type CrudViewMode, type CrudViewModeConfig, DATA_GRID_EVENTS, DEFAULT_DRAWER_SIZE, DEFAULT_DRAWER_WIDTH, DRAWER_WIDTHS, type DataGridSelectionChangedEvent, type DataGridSummaryItem, NativeDataGridView as DataGridView, type DataGridViewOptions, type DataRecord, type DetailSummaryOptions, CrudDialogView as DialogView, type DrawerSize, CrudDrawerView as DrawerView, type EnumOption, FORM_EVENTS, type Field, FieldBuilder, type FieldColSpanContext, type FieldDef, type FieldInput, type FieldOverride, FieldType, type FilterRule, type FormHandle, type FormLayout, type FormLayoutHint, type FormOnChangeFn, type FormPresentationContext, type FormPresentationMode, type FormSection, type FormTab, NativeFormView as FormView, type FormViewOptions, type FormatterFn, type GridCellContext, type GridData, type GridHandle, type GridOnChangeFn, HydraAdapter, type ItemFormatterFn, type LoadOption, type OnChangeFn, CrudPageView as PageView, type ResolvedViewMode, type ResourceConfig, type ResourceEmptyState, type ResourceFilterDescriptor, type ResourceFilterRule, type ResourceFormDetail, type ResourceGridDetail, type ResourceLoadOption, type ResourceLoadOptions, type ResourcePermissions, type ResourceRouting, type ResourceRowActions, ResourceSchemaProvider, type ResourceSchemaProviderProps, type ResourceSchemaResolution, type ResourceSchemaResolver, type ResourceSortDescriptor, type ResourceStore, type ResourceStoreFactory, type ResourceStoreOptions, ResourceStoreProvider, type ResourceStoreProviderProps, type ResourceToolbar, type ResourceToolbarAction, type ResourceToolbarActionVariant, type ResourceToolbarContext, type ResourceToolbarItems, RestAdapter, type SmartCrudFieldContract, type SmartCrudFieldOperation, type SmartCrudFieldPatch, type SmartCrudHydraFieldContract, type SmartCrudHydraFieldDirective, type SmartCrudManualField, type SmartCrudManualFieldContract, type SmartCrudOperation, SmartCrudPage, SmartCrudRolesProvider, type SummaryCalculateContext, type SummaryFormat, type SummaryItem, type SummaryTextContext, type SummaryType, ToolbarSelect, type ToolbarSelectOption, type ToolbarSelectProps, type ValidationRule, buildFieldColSpanContext, buildFields, checkboxField, computeSummaryValue, createCrudEvents, crudRoute, currencyField, dateField, datetimeField, defineFieldContract, defineFields, defineResource, entityField, enumField, fileField, formatSummaryValue, identityField, imageField, isLongTextField, isShortField, noneField, numberField, parseDrawerWidthPx, passwordField, resolveDrawerLayoutBucket, resolveDrawerSize, resolveDrawerWidth, resolveFieldColSpan, resolveFieldsColSpans, resolveSummaryText, resolveViewMode, selectField, switchField, textField, textareaField, useColumnPreset, useResourceStoreFactory, useSmartCrudRoles, validateFieldContract };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Route, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { createPortal } from "react-dom";
-import { AppDialog, AppDropdown, Button, ConfirmDialog, DatePicker, DateRangePicker, Drawer, EmptyState, IconButton, Skeleton } from "@nubitio/ui";
+import { AppDialog, AppDropdown, Badge, Button, ConfirmDialog, DatePicker, DateRangePicker, Drawer, EmptyState, IconButton, Skeleton, Timeline, TimelineItem } from "@nubitio/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createCrudEvents, createScopedEventBus, getCoreCurrency, getCoreLocale, getCoreTimezone, useCoreHttpClient, useCoreRuntime, useCoreTranslation, useEvents, useMercureSubscription } from "@nubitio/core";
 import { useDropzone } from "react-dropzone";
@@ -5286,12 +5286,61 @@ function useCrudPage(resource, externalFormRef) {
 }
 //#endregion
 //#region packages/crud/crud/AuditTrailPanel.tsx
-const ACTION_COLORS = {
-	create: "#2e7d32",
-	update: "#1565c0",
-	delete: "#c62828"
+const ACTION_BADGE = {
+	create: "success",
+	update: "info",
+	delete: "danger"
 };
-function DefaultEntryRenderer({ entry }) {
+const ACTION_TONE = {
+	create: "success",
+	update: "info",
+	delete: "danger"
+};
+function formatAuditValue(value, yesLabel, noLabel) {
+	if (value == null || value === "") return "—";
+	if (typeof value === "boolean") return value ? yesLabel : noLabel;
+	if (typeof value === "object") try {
+		return JSON.stringify(value);
+	} catch {
+		return String(value);
+	}
+	return String(value);
+}
+function DefaultEntryContent({ entry, resolveFieldLabel, yesLabel, noLabel }) {
+	const changeKeys = Object.keys(entry.changes);
+	if (changeKeys.length === 0) return /* @__PURE__ */ jsx(Fragment, {});
+	return /* @__PURE__ */ jsx("ul", {
+		className: "nb-audit-trail__changes",
+		children: changeKeys.map((field) => {
+			const { before, after } = entry.changes[field];
+			return /* @__PURE__ */ jsxs("li", {
+				className: "nb-audit-trail__change",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "nb-audit-trail__field",
+					children: resolveFieldLabel(field)
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "nb-audit-trail__diff",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "nb-audit-trail__value nb-audit-trail__value--before",
+							children: formatAuditValue(before, yesLabel, noLabel)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "nb-audit-trail__arrow",
+							"aria-hidden": "true",
+							children: "→"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "nb-audit-trail__value nb-audit-trail__value--after",
+							children: formatAuditValue(after, yesLabel, noLabel)
+						})
+					]
+				})]
+			}, field);
+		})
+	});
+}
+function DefaultEntryRenderer({ entry, resolveFieldLabel, yesLabel, noLabel }) {
 	const { t } = useCoreTranslation();
 	const date = new Date(entry.timestamp);
 	const formatted = Number.isNaN(date.getTime()) ? entry.timestamp : date.toLocaleString(getCoreLocale(), { timeZone: getCoreTimezone() });
@@ -5300,177 +5349,159 @@ function DefaultEntryRenderer({ entry }) {
 		update: t("auditTrail.action.update"),
 		delete: t("auditTrail.action.delete")
 	};
-	const changeKeys = Object.keys(entry.changes);
-	return /* @__PURE__ */ jsxs("li", {
-		style: {
-			borderBottom: "1px solid #e0e0e0",
-			padding: "10px 0",
-			listStyle: "none"
-		},
-		children: [/* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				alignItems: "center",
-				gap: 8,
-				marginBottom: 4
-			},
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					style: {
-						fontSize: 12,
-						color: "#757575"
-					},
-					children: formatted
-				}),
-				/* @__PURE__ */ jsx("span", {
-					style: {
-						fontSize: 12,
-						color: "#424242"
-					},
-					children: entry.user
-				}),
-				/* @__PURE__ */ 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__ */ 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__ */ jsxs("li", {
-					style: {
-						fontSize: 12,
-						color: "#616161"
-					},
-					children: [
-						/* @__PURE__ */ jsxs("strong", { children: [field, ":"] }),
-						" ",
-						/* @__PURE__ */ jsx("span", {
-							style: { color: "#c62828" },
-							children: String(before ?? "—")
-						}),
-						" → ",
-						/* @__PURE__ */ jsx("span", {
-							style: { color: "#2e7d32" },
-							children: String(after ?? "—")
-						})
-					]
-				}, field);
+	return /* @__PURE__ */ jsx(TimelineItem, {
+		status: "complete",
+		tone: ACTION_TONE[entry.action],
+		title: /* @__PURE__ */ jsxs("span", {
+			className: "nb-audit-trail__meta",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "nb-audit-trail__user",
+				children: entry.user
+			}), /* @__PURE__ */ jsx(Badge, {
+				variant: ACTION_BADGE[entry.action],
+				size: "sm",
+				pill: true,
+				children: actionLabels[entry.action]
+			})]
+		}),
+		timestamp: formatted,
+		dateTime: entry.timestamp,
+		children: /* @__PURE__ */ jsx(DefaultEntryContent, {
+			entry,
+			resolveFieldLabel,
+			yesLabel,
+			noLabel
+		})
+	});
+}
+function AuditTrailSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "nb-audit-trail__skeleton",
+		"aria-busy": "true",
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, {
+				variant: "rect",
+				height: 72
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				variant: "rect",
+				height: 72
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				variant: "rect",
+				height: 72
 			})
-		})]
+		]
 	});
 }
-function AuditTrailPanel({ url, renderEntry, visible, onClose }) {
+function AuditTrailPanel({ url, renderEntry, visible, onClose, recordSubtitle, resolveFieldLabel, drawerSize = "sm" }) {
 	const { t } = useCoreTranslation();
 	const httpClient = useCoreHttpClient();
 	const [fetchState, setFetchState] = useState({ status: "idle" });
-	useEffect(() => {
-		if (!visible || url === null) {
+	const yesLabel = t("common.yes");
+	const noLabel = t("common.no");
+	const loadEntries = useCallback(() => {
+		if (url === null) {
 			setFetchState({ status: "idle" });
 			return;
 		}
-		let cancelled = false;
 		setFetchState({ status: "loading" });
 		httpClient.get(url).then((response) => {
-			if (!cancelled) setFetchState({
+			setFetchState({
 				status: "success",
 				entries: response.data
 			});
 		}).catch(() => {
-			if (!cancelled) setFetchState({ status: "error" });
+			setFetchState({ status: "error" });
 		});
-		return () => {
-			cancelled = true;
-		};
-	}, [
-		httpClient,
-		url,
-		visible
-	]);
-	if (!visible) return null;
-	return /* @__PURE__ */ jsxs("aside", {
-		className: "nb-audit-trail-panel",
-		style: {
-			border: "1px solid #e0e0e0",
-			borderRadius: 4,
-			padding: "12px 16px",
-			backgroundColor: "#fafafa",
-			minWidth: 280
-		},
-		children: [/* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "space-between",
-				marginBottom: 12
-			},
-			children: [/* @__PURE__ */ jsx("strong", {
-				style: { fontSize: 14 },
-				children: t("auditTrail.title")
-			}), /* @__PURE__ */ 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__ */ jsx("p", {
-			style: {
-				fontSize: 13,
-				color: "#757575",
-				margin: 0
-			},
-			children: t("auditTrail.selectRecord")
-		}) : fetchState.status === "loading" ? /* @__PURE__ */ jsx("p", {
-			style: {
-				fontSize: 13,
-				color: "#757575",
-				margin: 0
-			},
-			children: t("auditTrail.loading")
-		}) : fetchState.status === "error" ? /* @__PURE__ */ jsx("p", {
-			style: {
-				fontSize: 13,
-				color: "#c62828",
-				margin: 0
-			},
-			children: t("auditTrail.error")
-		}) : fetchState.status === "success" ? fetchState.entries.length === 0 ? /* @__PURE__ */ jsx("p", {
-			style: {
-				fontSize: 13,
-				color: "#757575",
-				margin: 0
-			},
-			children: t("auditTrail.empty")
-		}) : /* @__PURE__ */ jsx("ul", {
-			style: {
-				margin: 0,
-				padding: 0
-			},
-			children: fetchState.entries.map((entry) => renderEntry ? /* @__PURE__ */ jsx(React.Fragment, { children: renderEntry(entry) }, String(entry.id)) : /* @__PURE__ */ jsx(DefaultEntryRenderer, { entry }, String(entry.id)))
-		}) : null]
+	}, [httpClient, url]);
+	useEffect(() => {
+		if (!visible) {
+			setFetchState({ status: "idle" });
+			return;
+		}
+		loadEntries();
+	}, [loadEntries, visible]);
+	const drawerTitle = /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { children: t("auditTrail.title") }), recordSubtitle && /* @__PURE__ */ jsx("p", {
+		className: "nb-audit-trail__subtitle",
+		children: recordSubtitle
+	})] });
+	const body = (() => {
+		if (url === null) return /* @__PURE__ */ jsx(EmptyState, {
+			fill: true,
+			icon: "cursor-click",
+			title: t("auditTrail.selectRecord"),
+			description: t("auditTrail.selectRecordHint"),
+			size: "sm"
+		});
+		if (fetchState.status === "loading") return /* @__PURE__ */ jsx(AuditTrailSkeleton, {});
+		if (fetchState.status === "error") return /* @__PURE__ */ jsx("div", {
+			className: "nb-audit-trail__error",
+			children: /* @__PURE__ */ jsx(EmptyState, {
+				fill: true,
+				variant: "danger",
+				icon: "warning-circle",
+				title: t("auditTrail.error"),
+				size: "sm",
+				action: /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					onClick: loadEntries,
+					children: t("auditTrail.retry")
+				})
+			})
+		});
+		if (fetchState.status === "success" && fetchState.entries.length === 0) return /* @__PURE__ */ jsx(EmptyState, {
+			fill: true,
+			icon: "clock-counter-clockwise",
+			title: t("auditTrail.empty"),
+			description: t("auditTrail.emptyHint"),
+			size: "sm"
+		});
+		if (fetchState.status === "success") return /* @__PURE__ */ jsx(Timeline, {
+			variant: "log",
+			"aria-label": t("auditTrail.title"),
+			children: fetchState.entries.map((entry) => renderEntry ? /* @__PURE__ */ jsx(React.Fragment, { children: renderEntry(entry) }, String(entry.id)) : /* @__PURE__ */ jsx(DefaultEntryRenderer, {
+				entry,
+				resolveFieldLabel,
+				yesLabel,
+				noLabel
+			}, String(entry.id)))
+		});
+		return null;
+	})();
+	return /* @__PURE__ */ jsx(Drawer, {
+		isOpen: visible,
+		onClose,
+		title: drawerTitle,
+		width: resolveDrawerWidth({ drawerSize }),
+		side: "right",
+		scrim: "subtle",
+		closeLabel: t("auditTrail.closeButton"),
+		"aria-label": t("auditTrail.title"),
+		className: "nb-audit-trail-drawer",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "nb-audit-trail",
+			children: body
+		})
 	});
 }
 //#endregion
+//#region packages/crud/crud/AuditTrail.ts
+function createAuditFieldLabelResolver(config, fields) {
+	const fieldLabelByName = new Map(fields.map((field) => [field.name, field.label || field.name]));
+	return (field) => {
+		const fromConfig = config?.fieldLabels;
+		if (fromConfig) {
+			if (typeof fromConfig === "function") {
+				const resolved = fromConfig(field);
+				if (resolved) return resolved;
+			} else if (fromConfig[field]) return fromConfig[field];
+		}
+		return fieldLabelByName.get(field) ?? field;
+	};
+}
+//#endregion
 //#region packages/crud/crud/dialogStore.ts
 function initialDialogState() {
 	return {
@@ -5818,13 +5849,30 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 		if (hasAuditTrail) {
 			const first = rows[0];
 			if (first != null) setSelectedRowId(first["id"] ?? first["ID"] ?? null);
+			else setSelectedRowId(null);
 		}
 	};
+	const selectedRow = selectedRows[0] ?? null;
 	const auditUrl = useMemo(() => {
 		if (!resolvedResource.auditTrail?.enabled || selectedRowId == null) return null;
 		const { apiUrl } = resolvedResource.auditTrail;
 		return typeof apiUrl === "function" ? apiUrl(selectedRowId) : `${apiUrl}${selectedRowId}`;
 	}, [resolvedResource.auditTrail, selectedRowId]);
+	const resolveAuditFieldLabel = useMemo(() => createAuditFieldLabelResolver(resolvedResource.auditTrail, routeAwareGridFields), [resolvedResource.auditTrail, routeAwareGridFields]);
+	const auditRecordSubtitle = useMemo(() => {
+		if (!resolvedResource.auditTrail?.recordSubtitle || selectedRow == null) return void 0;
+		return resolvedResource.auditTrail.recordSubtitle(selectedRow);
+	}, [resolvedResource.auditTrail, selectedRow]);
+	const openAuditTrail = useCallback((row) => {
+		if (row != null) {
+			const id = row["id"] ?? row["ID"] ?? null;
+			if (id != null) {
+				setSelectedRowId(id);
+				setSelectedRows([row]);
+			}
+		}
+		setAuditOpen(true);
+	}, []);
 	const executeBulkAction = useCallback(async (action) => {
 		await action.onAction(selectionState.selectedIds);
 		selectionState.clearSelection();
@@ -5838,7 +5886,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 		else executeBulkAction(action);
 	}, [executeBulkAction]);
 	const toolbar = useMemo(() => {
-		return resolveResourceToolbar(resolvedResource, {
+		const base = resolveResourceToolbar(resolvedResource, {
 			resource: resolvedResource,
 			selectedRow: selectedRows[0],
 			selectedRows,
@@ -5846,14 +5894,48 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 			formRef,
 			events,
 			emit
-		});
+		}) ?? {};
+		if (!hasAuditTrail) return base;
+		return {
+			...base,
+			utility: [...base.utility ?? [], {
+				key: "audit-trail",
+				text: t("crudPage.auditTrailButton"),
+				icon: "ph-clock-counter-clockwise",
+				hint: t("auditTrail.toolbarHint"),
+				disabled: selectedRowId == null,
+				onClick: () => openAuditTrail()
+			}]
+		};
 	}, [
 		emit,
 		events,
 		formRef,
 		gridRef,
+		hasAuditTrail,
+		openAuditTrail,
 		resolvedResource,
-		selectedRows
+		selectedRowId,
+		selectedRows,
+		t
+	]);
+	const rowActions = useMemo(() => {
+		const base = resolvedResource.rowActions;
+		if (!hasAuditTrail || resolvedResource.auditTrail?.rowAction === false) return base;
+		const auditAction = (row) => ({
+			key: "audit-trail",
+			text: t("auditTrail.rowAction"),
+			icon: "ph-clock-counter-clockwise",
+			onClick: () => openAuditTrail(row)
+		});
+		if (typeof base === "function") return (row) => [...base(row), auditAction(row)];
+		return (row) => [...base ?? [], auditAction(row)];
+	}, [
+		hasAuditTrail,
+		openAuditTrail,
+		resolvedResource.auditTrail?.rowAction,
+		resolvedResource.rowActions,
+		t
 	]);
 	/** Preset selector rendered as a toolbar slot via `beforeToolbar`. */
 	const renderPresetSelector = hasPresets ? () => /* @__PURE__ */ jsx(ColumnPresetSelector, {
@@ -5866,7 +5948,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 	}) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		id: "wrapper",
-		className: [auditOpen && "wrapper--with-audit", viewMode.mode === "page" && dialogIsOpen && "wrapper--with-page"].filter(Boolean).join(" ") || void 0,
+		className: [viewMode.mode === "page" && dialogIsOpen && "wrapper--with-page"].filter(Boolean).join(" ") || void 0,
 		children: [
 			(resolvedResource.bulkActions?.length ?? 0) > 0 && selectionState.hasSelection && /* @__PURE__ */ jsxs("div", {
 				className: "nb-bulk-toolbar",
@@ -5883,16 +5965,6 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 					children: action.label
 				}, action.key))]
 			}),
-			hasAuditTrail && /* @__PURE__ */ jsx("div", {
-				className: "nb-audit-trail-toolbar",
-				style: { marginBottom: 8 },
-				children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => setAuditOpen((prev) => !prev),
-					"aria-pressed": auditOpen,
-					children: t("crudPage.auditTrailButton")
-				})
-			}),
 			/* @__PURE__ */ jsx(NativeDataGridView, {
 				ref: gridRef,
 				id: resolvedResource.id,
@@ -5917,7 +5989,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 				mode: resolvedResource.mode,
 				stateStoringEnabled: resolvedResource.stateStoring,
 				toolbar,
-				rowActions: resolvedResource.rowActions,
+				rowActions,
 				onAdd: requestNew,
 				onEdit: requestEdit,
 				onView: requestView,
@@ -5990,7 +6062,10 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 				url: auditUrl,
 				renderEntry: resolvedResource.auditTrail.renderEntry,
 				visible: auditOpen,
-				onClose: () => setAuditOpen(false)
+				onClose: () => setAuditOpen(false),
+				recordSubtitle: auditRecordSubtitle,
+				resolveFieldLabel: resolveAuditFieldLabel,
+				drawerSize: resolvedResource.auditTrail?.drawerSize
 			}),
 			/* @__PURE__ */ jsx(ConfirmDialog, {
 				open: confirmState.open,

package/dist/style.css

@@ -3276,8 +3276,7 @@ html[data-density=compact] .nb-datagrid .nb-badge {
 
 #wrapper.wrapper--with-page > .data-grid-view,
 #wrapper.wrapper--with-page > .view.datagrid-list,
-#wrapper.wrapper--with-page > .nb-bulk-toolbar,
-#wrapper.wrapper--with-page > .nb-audit-trail-toolbar {
+#wrapper.wrapper--with-page > .nb-bulk-toolbar {
   display: none;
 }
 
@@ -3292,6 +3291,99 @@ html[data-density=compact] .nb-crud-page-shell__footer {
   gap: var(--space-1);
   padding: var(--space-2) var(--space-3);
 }
+.nb-audit-trail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-height: 0;
+}
+
+.nb-audit-trail__subtitle {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm, 0.8125rem);
+  line-height: 1.4;
+  margin: calc(var(--space-1) * -1) 0 0;
+}
+
+.nb-audit-trail__meta {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.nb-audit-trail__user {
+  color: var(--text-primary);
+  font-size: var(--font-size-sm, 0.8125rem);
+  font-weight: 500;
+}
+
+.nb-audit-trail__changes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nb-audit-trail__change {
+  background: var(--surface-2);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md, 6px);
+  display: grid;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-3);
+}
+
+.nb-audit-trail__field {
+  color: var(--text-primary);
+  font-size: var(--font-size-sm, 0.8125rem);
+  font-weight: 600;
+}
+
+.nb-audit-trail__diff {
+  align-items: center;
+  color: var(--text-secondary);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: var(--font-size-sm, 0.8125rem);
+  gap: var(--space-2);
+}
+
+.nb-audit-trail__value {
+  font-variant-numeric: tabular-nums;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.nb-audit-trail__value--before {
+  color: var(--danger-color);
+  text-decoration: line-through;
+  text-decoration-color: color-mix(in srgb, var(--danger-color) 55%, transparent);
+}
+
+.nb-audit-trail__value--after {
+  color: var(--success-color);
+  font-weight: 500;
+}
+
+.nb-audit-trail__arrow {
+  color: var(--text-tertiary);
+  flex: 0 0 auto;
+}
+
+.nb-audit-trail__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.nb-audit-trail__error {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
 .nb-smart-crud-fallback {
   display: flex;
   flex-direction: column;

package/package.json

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