@questpie/admin 3.0.2 → 3.0.4

package/dist/client/components/history-sidebar.mjs

@@ -1,160 +1,511 @@
-import { useTranslation } from "../i18n/hooks.mjs";
+import { useResolveText, useTranslation } from "../i18n/hooks.mjs";
+import { cn, formatLabel } from "../lib/utils.mjs";
 import { Button } from "./ui/button.mjs";
 import { Badge } from "./ui/badge.mjs";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./ui/sheet.mjs";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs.mjs";
+import { Separator } from "./ui/separator.mjs";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion.mjs";
+import { Skeleton } from "./ui/skeleton.mjs";
+import { EmptyState } from "./ui/empty-state.mjs";
+import { ScrollFade } from "./ui/scroll-fade.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
-import * as React from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/components/history-sidebar.tsx
-function formatRelativeTime(date) {
+const VERSION_META_KEYS = new Set([
+	"id",
+	"versionId",
+	"versionNumber",
+	"versionOperation",
+	"versionStage",
+	"versionFromStage",
+	"versionUserId",
+	"versionCreatedAt"
+]);
+function formatRelativeTime(date, locale) {
 	const diff = (/* @__PURE__ */ new Date()).getTime() - date.getTime();
-	const seconds = Math.floor(diff / 1e3);
-	const minutes = Math.floor(seconds / 60);
+	const absSeconds = Math.max(0, Math.floor(Math.abs(diff) / 1e3));
+	const minutes = Math.floor(absSeconds / 60);
 	const hours = Math.floor(minutes / 60);
 	const days = Math.floor(hours / 24);
-	if (days > 0) return `${days}d ago`;
-	if (hours > 0) return `${hours}h ago`;
-	if (minutes > 0) return `${minutes}m ago`;
-	return "just now";
+	const formatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+	if (days > 0) return formatter.format(-days, "day");
+	if (hours > 0) return formatter.format(-hours, "hour");
+	if (minutes > 0) return formatter.format(-minutes, "minute");
+	return formatter.format(0, "second");
 }
 function getActionConfig(action) {
 	switch (action) {
 		case "create": return {
+			badge: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
 			color: "bg-emerald-500",
-			icon: "ph:plus",
-			variant: "success"
+			icon: "ph:plus"
 		};
 		case "update": return {
+			badge: "border-blue-500/30 bg-blue-500/10 text-blue-700 dark:text-blue-300",
 			color: "bg-blue-500",
-			icon: "ph:pencil-simple",
-			variant: "info"
+			icon: "ph:pencil-simple"
 		};
 		case "delete": return {
+			badge: "border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-300",
 			color: "bg-red-500",
-			icon: "ph:trash",
-			variant: "error"
+			icon: "ph:trash"
 		};
 		case "transition": return {
+			badge: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
 			color: "bg-amber-500",
-			icon: "ph:arrows-left-right",
-			variant: "warning"
+			icon: "ph:arrows-left-right"
 		};
 		default: return {
+			badge: "border-border bg-muted text-muted-foreground",
 			color: "bg-gray-500",
-			icon: "ph:clock-counter-clockwise",
-			variant: "default"
+			icon: "ph:clock-counter-clockwise"
 		};
 	}
 }
-function formatChangeValue(value) {
-	if (value === null || value === void 0) return "—";
-	if (typeof value === "boolean") return value ? "true" : "false";
-	if (typeof value === "object") try {
-		const str$1 = JSON.stringify(value, null, 2);
-		return str$1.length > 120 ? `${str$1.slice(0, 120)}…` : str$1;
+function isObjectRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function normalizeForCompare(value) {
+	if (value instanceof Date) return value.toISOString();
+	if (Array.isArray(value)) return value.map(normalizeForCompare);
+	if (isObjectRecord(value)) {
+		const sorted = {};
+		for (const key of Object.keys(value).sort()) sorted[key] = normalizeForCompare(value[key]);
+		return sorted;
+	}
+	return value;
+}
+function stringifyComparable(value) {
+	try {
+		return JSON.stringify(normalizeForCompare(value));
 	} catch {
 		return String(value);
 	}
-	const str = String(value);
-	return str.length > 120 ? `${str.slice(0, 120)}…` : str;
 }
-function ChangeDiff(t0) {
-	const $ = c(11);
-	const { changes } = t0;
+function valuesEqual(a, b) {
+	return stringifyComparable(a) === stringifyComparable(b);
+}
+function isEmptyValue(value) {
+	if (value === null || value === void 0 || value === "") return true;
+	if (Array.isArray(value)) return value.length === 0;
+	if (isObjectRecord(value)) return Object.keys(value).length === 0;
+	return false;
+}
+function toPrettyJson(value) {
+	try {
+		return JSON.stringify(value, null, 2);
+	} catch {
+		return String(value);
+	}
+}
+function summarizeObject(value) {
+	for (const key of [
+		"_title",
+		"title",
+		"name",
+		"label",
+		"email",
+		"filename",
+		"id"
+	]) {
+		const candidate = value[key];
+		if (typeof candidate === "string" || typeof candidate === "number" || typeof candidate === "boolean") return String(candidate);
+	}
+	return null;
+}
+function extractRichText(value) {
+	const parts = [];
+	function visit(node) {
+		if (parts.join(" ").length > 180) return;
+		if (Array.isArray(node)) {
+			for (const child of node) visit(child);
+			return;
+		}
+		if (!isObjectRecord(node)) return;
+		const text = node.text;
+		if (typeof text === "string" && text.trim()) parts.push(text.trim());
+		if ("content" in node) visit(node.content);
+	}
+	visit(value);
+	const summary = parts.join(" ").replace(/\s+/g, " ").trim();
+	return summary ? truncate(summary, 180) : null;
+}
+function summarizeObjectArray(value) {
+	const labels = value.map((item) => isObjectRecord(item) ? summarizeObject(item) : null).filter((item) => !!item);
+	if (labels.length === 0) return null;
+	return labels.length === value.length ? truncate(labels.join(", "), 180) : null;
+}
+function summarizeBlocks(value) {
+	const blockNames = value.map((item) => {
+		if (!isObjectRecord(item)) return null;
+		const type = item.blockType ?? item.block ?? item.type ?? item._type ?? item.name;
+		return typeof type === "string" ? formatLabel(type) : null;
+	}).filter((item) => !!item);
+	if (blockNames.length === 0) return null;
+	return truncate([...new Set(blockNames)].join(", "), 180);
+}
+function truncate(value, max = 160) {
+	return value.length > max ? `${value.slice(0, max)}...` : value;
+}
+function resolveSelectValue({ field, value, resolveText }) {
+	const options = field?.metadata?.options;
+	if (!Array.isArray(options)) return null;
+	return (Array.isArray(value) ? value : [value]).map((item) => {
+		const option = options.find((candidate) => valuesEqual(candidate.value, item));
+		return option ? resolveText(option.label, String(option.value)) : String(item);
+	}).join(", ");
+}
+function formatFieldValue({ field, value, t, resolveText }) {
+	if (isEmptyValue(value)) return { summary: "-" };
+	const type = field?.metadata?.type;
+	if (type === "select") {
+		const selectLabel = resolveSelectValue({
+			field,
+			value,
+			resolveText
+		});
+		if (selectLabel) return { summary: selectLabel };
+	}
+	if (value instanceof Date) return { summary: value.toLocaleString() };
+	if (typeof value === "boolean") return { summary: value ? t("common.yes") : t("common.no") };
+	if (typeof value === "number") return { summary: String(value) };
+	if (typeof value === "string") {
+		if (type === "date" || type === "datetime" || type === "time") {
+			const date = new Date(value);
+			if (!Number.isNaN(date.getTime())) return { summary: date.toLocaleString() };
+		}
+		return value.length > 160 ? {
+			summary: truncate(value),
+			detail: value
+		} : { summary: value };
+	}
+	if (Array.isArray(value)) {
+		if (value.length === 0) return { summary: "-" };
+		if (value.every((item) => !isObjectRecord(item) && !Array.isArray(item))) {
+			const summary = value.map((item) => String(item)).join(", ");
+			return summary.length > 160 ? {
+				summary: truncate(summary),
+				detail: toPrettyJson(value)
+			} : { summary };
+		}
+		const objectSummary = summarizeObjectArray(value);
+		if (objectSummary) return {
+			summary: objectSummary,
+			detail: toPrettyJson(value)
+		};
+		const blockSummary = type === "blocks" ? summarizeBlocks(value) : null;
+		return {
+			summary: type === "blocks" && blockSummary ? `${t("history.blocksCount", { count: value.length })}: ${blockSummary}` : type === "blocks" ? t("history.blocksCount", { count: value.length }) : t("history.itemsCount", { count: value.length }),
+			detail: toPrettyJson(value)
+		};
+	}
+	if (typeof value === "object") {
+		if (type === "richText") {
+			const richTextSummary = extractRichText(value);
+			if (richTextSummary) return {
+				summary: richTextSummary,
+				detail: toPrettyJson(value)
+			};
+		}
+		const record = value;
+		const objectSummary = summarizeObject(record);
+		if (objectSummary) return {
+			summary: objectSummary,
+			detail: toPrettyJson(value)
+		};
+		return {
+			summary: t("history.objectWithKeys", { count: Object.keys(record).length }),
+			detail: toPrettyJson(value)
+		};
+	}
+	return { summary: String(value) };
+}
+function ValuePreview(t0) {
+	const $ = c(12);
+	const { field, value, t, resolveText } = t0;
+	let t1;
+	if ($[0] !== field || $[1] !== resolveText || $[2] !== t || $[3] !== value) {
+		t1 = formatFieldValue({
+			field,
+			value,
+			t,
+			resolveText
+		});
+		$[0] = field;
+		$[1] = resolveText;
+		$[2] = t;
+		$[3] = value;
+		$[4] = t1;
+	} else t1 = $[4];
+	const formatted = t1;
+	let t2;
+	if ($[5] !== formatted.summary) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "text-foreground text-xs leading-relaxed text-pretty break-words",
+			children: formatted.summary
+		});
+		$[5] = formatted.summary;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== formatted.detail) {
+		t3 = formatted.detail && /* @__PURE__ */ jsx(ScrollFade, {
+			orientation: "both",
+			fadeSize: 16,
+			children: /* @__PURE__ */ jsx("pre", {
+				"data-scroll-fade-target": true,
+				className: "control-surface text-muted-foreground h-auto max-h-36 overflow-auto p-2 font-mono text-[0.6875rem] leading-relaxed whitespace-pre-wrap",
+				children: formatted.detail
+			})
+		});
+		$[7] = formatted.detail;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 space-y-2",
+			children: [t2, t3]
+		});
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+function getDiffKind(from, to) {
+	if (isEmptyValue(from) && !isEmptyValue(to)) return "added";
+	if (!isEmptyValue(from) && isEmptyValue(to)) return "removed";
+	return "changed";
+}
+function getDiffKindConfig(kind) {
+	switch (kind) {
+		case "added": return {
+			icon: "ph:plus",
+			labelKey: "history.changeAdded",
+			className: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+		};
+		case "removed": return {
+			icon: "ph:minus",
+			labelKey: "history.changeRemoved",
+			className: "border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-300"
+		};
+		default: return {
+			icon: "ph:arrows-left-right",
+			labelKey: "history.changeChanged",
+			className: "border-blue-500/30 bg-blue-500/10 text-blue-700 dark:text-blue-300"
+		};
+	}
+}
+function VersionDiffPanel(t0) {
+	const $ = c(24);
+	const { previousVersion, changes, fields } = t0;
 	const { t } = useTranslation();
-	const entries = Object.entries(changes);
-	const [expanded, setExpanded] = React.useState(false);
-	if (entries.length === 0) return null;
-	const t1 = "mt-2";
+	const resolveText = useResolveText();
+	const previousNumber = previousVersion?.versionNumber;
+	if (changes.length === 0) {
+		let t1$1;
+		if ($[0] !== t) {
+			t1$1 = t("history.noFieldChanges");
+			$[0] = t;
+			$[1] = t1$1;
+		} else t1$1 = $[1];
+		let t2$1;
+		if ($[2] !== t1$1) {
+			t2$1 = /* @__PURE__ */ jsx(EmptyState, {
+				title: t1$1,
+				iconName: "ph:git-diff",
+				height: "h-32",
+				className: "panel-surface"
+			});
+			$[2] = t1$1;
+			$[3] = t2$1;
+		} else t2$1 = $[3];
+		return t2$1;
+	}
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:git-diff",
+			className: "size-3.5"
+		});
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[0] !== expanded) {
-		t2 = () => setExpanded(!expanded);
-		$[0] = expanded;
-		$[1] = t2;
-	} else t2 = $[1];
-	const t3 = expanded ? "ph:caret-down" : "ph:caret-right";
+	if ($[5] !== previousNumber || $[6] !== t) {
+		t2 = previousNumber ? t("history.diffAgainstVersion", { number: previousNumber }) : t("history.initialSnapshot");
+		$[5] = previousNumber;
+		$[6] = t;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex items-center gap-2 text-xs text-pretty",
+			children: [t1, /* @__PURE__ */ jsx("span", { children: t2 })]
+		});
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
 	let t4;
-	if ($[2] !== t3) {
-		t4 = /* @__PURE__ */ jsx(Icon, {
-			icon: t3,
-			className: "size-3"
+	if ($[10] !== changes || $[11] !== fields || $[12] !== resolveText || $[13] !== t) {
+		let t5$1;
+		if ($[15] !== fields || $[16] !== resolveText || $[17] !== t) {
+			t5$1 = (change) => {
+				const field = fields?.[change.name];
+				const kind = getDiffKindConfig(change.kind);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "item-surface border-border-subtle bg-surface-low px-3 py-3",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-start justify-between gap-3",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-foreground truncate text-sm font-medium text-balance",
+									children: change.label
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-muted-foreground font-mono text-[0.6875rem]",
+									children: change.name
+								})]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex shrink-0 flex-wrap justify-end gap-1.5",
+								children: [/* @__PURE__ */ jsxs(Badge, {
+									variant: "outline",
+									className: cn(kind.className),
+									children: [/* @__PURE__ */ jsx(Icon, {
+										icon: kind.icon,
+										className: "size-2.5"
+									}), t(kind.labelKey)]
+								}), /* @__PURE__ */ jsx(Badge, {
+									variant: "outline",
+									children: change.type
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsx(Separator, { className: "my-3" }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "text-muted-foreground mb-2 flex items-center gap-1.5 text-[0.6875rem] font-medium uppercase",
+										children: [/* @__PURE__ */ jsx(Icon, {
+											icon: "ph:minus",
+											className: "size-3"
+										}), t("history.before")]
+									}), /* @__PURE__ */ jsx(ValuePreview, {
+										field,
+										value: change.from,
+										t,
+										resolveText
+									})]
+								}),
+								/* @__PURE__ */ jsx(Separator, {
+									orientation: "vertical",
+									className: "hidden sm:block",
+									"aria-hidden": true
+								}),
+								/* @__PURE__ */ jsx(Separator, {
+									className: "sm:hidden",
+									"aria-hidden": true
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "text-muted-foreground mb-2 flex items-center gap-1.5 text-[0.6875rem] font-medium uppercase",
+										children: [/* @__PURE__ */ jsx(Icon, {
+											icon: "ph:plus",
+											className: "size-3"
+										}), t("history.after")]
+									}), /* @__PURE__ */ jsx(ValuePreview, {
+										field,
+										value: change.to,
+										t,
+										resolveText
+									})]
+								})
+							]
+						})
+					]
+				}, change.name);
+			};
+			$[15] = fields;
+			$[16] = resolveText;
+			$[17] = t;
+			$[18] = t5$1;
+		} else t5$1 = $[18];
+		t4 = changes.map(t5$1);
+		$[10] = changes;
+		$[11] = fields;
+		$[12] = resolveText;
+		$[13] = t;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[19] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: "space-y-2",
+			children: t4
 		});
-		$[2] = t3;
-		$[3] = t4;
-	} else t4 = $[3];
-	const t5 = expanded ? t("history.hideChanges") : t("history.showChanges", { count: entries.length });
+		$[19] = t4;
+		$[20] = t5;
+	} else t5 = $[20];
 	let t6;
-	if ($[4] !== t2 || $[5] !== t4 || $[6] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1 text-xs transition-colors",
-			onClick: t2,
-			children: [t4, t5]
+	if ($[21] !== t3 || $[22] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [t3, t5]
 		});
-		$[4] = t2;
-		$[5] = t4;
-		$[6] = t5;
-		$[7] = t6;
-	} else t6 = $[7];
-	const t7 = expanded && /* @__PURE__ */ jsx("div", {
-		className: "mt-1.5 space-y-1.5 text-xs",
-		children: entries.map(_temp)
-	});
-	let t8;
-	if ($[8] !== t6 || $[9] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
-			className: t1,
-			children: [t6, t7]
+		$[21] = t3;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
+	return t6;
+}
+function HistoryListSkeleton(t0) {
+	const $ = c(2);
+	const { rows: t1 } = t0;
+	const rows = t1 === void 0 ? 4 : t1;
+	let t2;
+	if ($[0] !== rows) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "space-y-4 py-2",
+			"aria-busy": "true",
+			children: Array.from({ length: rows }, _temp)
 		});
-		$[8] = t6;
-		$[9] = t7;
-		$[10] = t8;
-	} else t8 = $[10];
-	return t8;
+		$[0] = rows;
+		$[1] = t2;
+	} else t2 = $[1];
+	return t2;
 }
-function _temp(t0) {
-	const [field, t1] = t0;
-	const { from, to } = t1;
+function _temp(_, index) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "bg-muted rounded border px-2 py-1.5",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-foreground font-medium",
-			children: field
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "mt-0.5 flex flex-col gap-0.5",
-			children: [/* @__PURE__ */ jsxs("span", {
-				className: "text-red-600 dark:text-red-400",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "opacity-50",
-					children: "- "
-				}), formatChangeValue(from)]
-			}), /* @__PURE__ */ jsxs("span", {
-				className: "text-emerald-600 dark:text-emerald-400",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "opacity-50",
-					children: "+ "
-				}), formatChangeValue(to)]
+		className: "flex gap-3",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "mt-1 size-7 shrink-0 rounded-full" }), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1 space-y-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-4 w-28"
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-3 w-40"
 			})]
 		})]
-	}, field);
+	}, index);
 }
 function ActivityTimeline(t0) {
-	const $ = c(11);
+	const $ = c(13);
 	const { entries, isLoading } = t0;
-	const { t } = useTranslation();
+	const { locale, t } = useTranslation();
 	if (isLoading) {
 		let t1$1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t1$1 = /* @__PURE__ */ jsx("div", {
-				className: "text-muted-foreground flex items-center justify-center py-12",
-				children: /* @__PURE__ */ jsx(Icon, {
-					icon: "ph:spinner-gap",
-					className: "size-5 animate-spin"
-				})
-			});
+			t1$1 = /* @__PURE__ */ jsx(HistoryListSkeleton, {});
 			$[0] = t1$1;
 		} else t1$1 = $[0];
 		return t1$1;
@@ -168,9 +519,10 @@ function ActivityTimeline(t0) {
 		} else t1$1 = $[2];
 		let t2$1;
 		if ($[3] !== t1$1) {
-			t2$1 = /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground py-6 text-center text-sm",
-				children: t1$1
+			t2$1 = /* @__PURE__ */ jsx(EmptyState, {
+				title: t1$1,
+				iconName: "ph:clock-counter-clockwise",
+				height: "h-48"
 			});
 			$[3] = t1$1;
 			$[4] = t2$1;
@@ -178,9 +530,9 @@ function ActivityTimeline(t0) {
 		return t2$1;
 	}
 	let t1;
-	if ($[5] !== entries) {
+	if ($[5] !== entries || $[6] !== locale) {
 		let t2$1;
-		if ($[7] !== entries.length) {
+		if ($[8] !== entries.length || $[9] !== locale) {
 			t2$1 = (entry, index) => {
 				const config = getActionConfig(entry.action);
 				const date = new Date(entry.createdAt);
@@ -190,53 +542,112 @@ function ActivityTimeline(t0) {
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col items-center",
 						children: [/* @__PURE__ */ jsx("div", { className: `mt-1.5 size-2.5 shrink-0 rounded-full ${config.color}` }), !isLast && /* @__PURE__ */ jsx("div", { className: "bg-border min-h-4 w-px flex-1" })]
-					}), /* @__PURE__ */ jsxs("div", {
+					}), /* @__PURE__ */ jsx("div", {
 						className: "min-w-0 flex-1 pb-4",
-						children: [/* @__PURE__ */ jsxs("div", {
+						children: /* @__PURE__ */ jsxs("div", {
 							className: "flex items-start justify-between gap-2",
 							children: [/* @__PURE__ */ jsx("p", {
 								className: "text-sm leading-snug",
 								children: entry.title
 							}), /* @__PURE__ */ jsx("span", {
 								className: "text-muted-foreground shrink-0 text-xs whitespace-nowrap",
-								children: formatRelativeTime(date)
+								children: formatRelativeTime(date, locale)
 							})]
-						}), entry.changes && Object.keys(entry.changes).length > 0 && /* @__PURE__ */ jsx(ChangeDiff, { changes: entry.changes })]
+						})
 					})]
 				}, entry.id);
 			};
-			$[7] = entries.length;
-			$[8] = t2$1;
-		} else t2$1 = $[8];
+			$[8] = entries.length;
+			$[9] = locale;
+			$[10] = t2$1;
+		} else t2$1 = $[10];
 		t1 = entries.map(t2$1);
 		$[5] = entries;
-		$[6] = t1;
-	} else t1 = $[6];
+		$[6] = locale;
+		$[7] = t1;
+	} else t1 = $[7];
 	let t2;
-	if ($[9] !== t1) {
+	if ($[11] !== t1) {
 		t2 = /* @__PURE__ */ jsx("div", {
 			className: "space-y-0",
 			children: t1
 		});
-		$[9] = t1;
-		$[10] = t2;
-	} else t2 = $[10];
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
 	return t2;
 }
 function VersionsList(t0) {
-	const $ = c(22);
-	const { versions, isLoading, isReverting, onRevert } = t0;
-	const { t } = useTranslation();
+	const $ = c(41);
+	const { versions, fields, isLoading, isReverting, onRevert } = t0;
+	const { formatDate, locale, t } = useTranslation();
+	const resolveText = useResolveText();
 	let t1;
 	if ($[0] !== versions) {
 		t1 = [...versions].sort(_temp2);
 		$[0] = versions;
 		$[1] = t1;
 	} else t1 = $[1];
-	const sortedVersions = t1;
+	const sortedAscVersions = t1;
 	let t2;
-	if ($[2] !== t) {
-		t2 = function operationLabel$1(operation) {
+	if ($[2] !== sortedAscVersions) {
+		t2 = [...sortedAscVersions].sort(_temp3);
+		$[2] = sortedAscVersions;
+		$[3] = t2;
+	} else t2 = $[3];
+	const sortedVersions = t2;
+	let t3;
+	bb0: {
+		if (fields && Object.keys(fields).length > 0) {
+			t3 = fields;
+			break bb0;
+		}
+		let inferred;
+		if ($[4] !== versions) {
+			inferred = {};
+			for (const version of versions) for (const key of Object.keys(version)) {
+				if (VERSION_META_KEYS.has(key)) continue;
+				inferred[key] = {
+					name: key,
+					metadata: {
+						type: "unknown",
+						label: formatLabel(key)
+					}
+				};
+			}
+			$[4] = versions;
+			$[5] = inferred;
+		} else inferred = $[5];
+		t3 = inferred;
+	}
+	const fieldsForDiff = t3;
+	let byKey;
+	if ($[6] !== fieldsForDiff || $[7] !== resolveText || $[8] !== sortedAscVersions) {
+		byKey = /* @__PURE__ */ new Map();
+		for (let index = 0; index < sortedAscVersions.length; index = index + 1) {
+			const version_0 = sortedAscVersions[index];
+			const previousVersion = sortedAscVersions[index - 1];
+			const key_0 = getVersionKey(version_0, index);
+			byKey.set(key_0, {
+				key: key_0,
+				previousVersion,
+				changes: buildVersionDiff({
+					version: version_0,
+					previousVersion,
+					fields: fieldsForDiff,
+					resolveText
+				})
+			});
+		}
+		$[6] = fieldsForDiff;
+		$[7] = resolveText;
+		$[8] = sortedAscVersions;
+		$[9] = byKey;
+	} else byKey = $[9];
+	const versionDetails = byKey;
+	let t4;
+	if ($[10] !== t) {
+		t4 = function operationLabel$1(operation) {
 			switch (operation) {
 				case "create": return t("version.operationCreate");
 				case "delete": return t("version.operationDelete");
@@ -244,252 +655,351 @@ function VersionsList(t0) {
 				default: return operation || t("version.operationUnknown");
 			}
 		};
-		$[2] = t;
-		$[3] = t2;
-	} else t2 = $[3];
-	const operationLabel = t2;
-	const formatDate = _temp3;
-	if (isLoading) {
-		let t3$1;
-		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-			t3$1 = /* @__PURE__ */ jsx("div", {
-				className: "text-muted-foreground flex items-center justify-center py-12",
-				children: /* @__PURE__ */ jsx(Icon, {
-					icon: "ph:spinner-gap",
-					className: "size-5 animate-spin"
-				})
+		$[10] = t;
+		$[11] = t4;
+	} else t4 = $[11];
+	const operationLabel = t4;
+	let t5;
+	if ($[12] !== formatDate) {
+		t5 = (value) => {
+			if (!value) return "-";
+			const date = new Date(value);
+			if (Number.isNaN(date.getTime())) return "-";
+			return formatDate(date, {
+				dateStyle: "medium",
+				timeStyle: "short"
 			});
-			$[4] = t3$1;
-		} else t3$1 = $[4];
-		return t3$1;
+		};
+		$[12] = formatDate;
+		$[13] = t5;
+	} else t5 = $[13];
+	const formatDateTime = t5;
+	if (isLoading) {
+		let t6$1;
+		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+			t6$1 = /* @__PURE__ */ jsx(HistoryListSkeleton, {});
+			$[14] = t6$1;
+		} else t6$1 = $[14];
+		return t6$1;
 	}
 	if (sortedVersions.length === 0) {
-		let t3$1;
-		if ($[5] !== t) {
-			t3$1 = t("version.empty");
-			$[5] = t;
-			$[6] = t3$1;
-		} else t3$1 = $[6];
-		let t4$1;
-		if ($[7] !== t3$1) {
-			t4$1 = /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground py-6 text-center text-sm",
-				children: t3$1
+		let t6$1;
+		if ($[15] !== t) {
+			t6$1 = t("version.empty");
+			$[15] = t;
+			$[16] = t6$1;
+		} else t6$1 = $[16];
+		let t7$1;
+		if ($[17] !== t6$1) {
+			t7$1 = /* @__PURE__ */ jsx(EmptyState, {
+				title: t6$1,
+				iconName: "ph:clock-counter-clockwise",
+				height: "h-48"
 			});
-			$[7] = t3$1;
-			$[8] = t4$1;
-		} else t4$1 = $[8];
-		return t4$1;
+			$[17] = t6$1;
+			$[18] = t7$1;
+		} else t7$1 = $[18];
+		return t7$1;
 	}
-	let t3;
-	if ($[9] !== isReverting || $[10] !== onRevert || $[11] !== operationLabel || $[12] !== sortedVersions || $[13] !== t) {
-		let t4$1;
-		if ($[15] !== isReverting || $[16] !== onRevert || $[17] !== operationLabel || $[18] !== t) {
-			t4$1 = (version, index) => {
-				const canRevert = typeof version.versionId === "string" || typeof version.versionNumber === "number";
-				return /* @__PURE__ */ jsx("div", {
-					className: "border p-3",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex items-start justify-between gap-3",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "min-w-0",
+	let t6;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = [];
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== fieldsForDiff || $[21] !== formatDateTime || $[22] !== isReverting || $[23] !== locale || $[24] !== onRevert || $[25] !== operationLabel || $[26] !== sortedVersions || $[27] !== t || $[28] !== versionDetails) {
+		let t8$1;
+		if ($[30] !== fieldsForDiff || $[31] !== formatDateTime || $[32] !== isReverting || $[33] !== locale || $[34] !== onRevert || $[35] !== operationLabel || $[36] !== t || $[37] !== versionDetails) {
+			t8$1 = (version_1, index_0) => {
+				const key_1 = getVersionKey(version_1, index_0);
+				const details = versionDetails.get(key_1);
+				const changes = details?.changes ?? [];
+				const visibleChangedFields = changes.slice(0, 3);
+				const remainingChangedFields = Math.max(0, changes.length - visibleChangedFields.length);
+				const changedPreview = visibleChangedFields.map(_temp4).join(", ");
+				const date_0 = version_1.versionCreatedAt ? new Date(version_1.versionCreatedAt) : null;
+				const canRevert = typeof version_1.versionId === "string" || typeof version_1.versionNumber === "number";
+				const action = getActionConfig(version_1.versionOperation ?? "");
+				return /* @__PURE__ */ jsxs(AccordionItem, {
+					value: key_1,
+					className: "px-0",
+					children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+						className: "min-h-20 items-start px-3 py-3 hover:no-underline",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-1 flex-col gap-2",
 							children: [
 								/* @__PURE__ */ jsxs("div", {
-									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ jsx(Badge, {
-										variant: "secondary",
-										children: t("version.label", { number: version.versionNumber ?? "-" })
-									}), /* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-sm",
-										children: operationLabel(version.versionOperation)
-									})]
-								}),
-								/* @__PURE__ */ jsxs("p", {
-									className: "text-muted-foreground mt-1 text-xs",
+									className: "flex flex-wrap items-center gap-2",
 									children: [
-										t("version.createdAt"),
-										":",
-										" ",
-										formatDate(version.versionCreatedAt)
+										/* @__PURE__ */ jsx(Badge, {
+											variant: "secondary",
+											className: "tabular-nums",
+											children: t("version.label", { number: version_1.versionNumber ?? "-" })
+										}),
+										/* @__PURE__ */ jsxs(Badge, {
+											variant: "outline",
+											className: cn(action.badge),
+											children: [/* @__PURE__ */ jsx(Icon, {
+												icon: action.icon,
+												className: "size-2.5"
+											}), operationLabel(version_1.versionOperation)]
+										}),
+										version_1.versionStage && /* @__PURE__ */ jsxs(Badge, {
+											variant: "outline",
+											children: [
+												t("history.stage"),
+												": ",
+												version_1.versionStage
+											]
+										}),
+										/* @__PURE__ */ jsx(Badge, {
+											variant: "outline",
+											className: "tabular-nums",
+											children: t("history.changedFields", { count: changes.length })
+										})
 									]
 								}),
-								/* @__PURE__ */ jsxs("p", {
-									className: "text-muted-foreground text-xs",
+								/* @__PURE__ */ jsxs("div", {
+									className: "text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs",
 									children: [
-										t("version.user"),
-										": ",
-										version.versionUserId || "-"
+										/* @__PURE__ */ jsx("span", {
+											className: "tabular-nums",
+											children: date_0 ? formatDateTime(version_1.versionCreatedAt) : "-"
+										}),
+										date_0 && /* @__PURE__ */ jsx("span", {
+											className: "tabular-nums",
+											children: formatRelativeTime(date_0, locale)
+										}),
+										/* @__PURE__ */ jsxs("span", { children: [
+											t("version.user"),
+											":",
+											" ",
+											version_1.versionUserId || t("history.systemUser")
+										] })
 									]
+								}),
+								/* @__PURE__ */ jsxs("p", {
+									className: "text-muted-foreground truncate text-xs text-pretty",
+									children: [changedPreview || t("history.noFieldChanges"), remainingChangedFields > 0 && ` + ${t("history.moreFields", { count: remainingChangedFields })}`]
 								})
 							]
-						}), onRevert && /* @__PURE__ */ jsx(Button, {
-							variant: "outline",
-							size: "sm",
-							disabled: !canRevert || isReverting,
-							onClick: () => {
-								onRevert(version);
-							},
-							children: t("version.revert")
-						})]
-					})
-				}, version.versionId ?? `${version.versionNumber ?? "unknown"}-${index}`);
+						})
+					}), /* @__PURE__ */ jsxs(AccordionContent, {
+						className: "px-3 pt-0 pb-3",
+						children: [
+							/* @__PURE__ */ jsx(Separator, { className: "mb-3" }),
+							/* @__PURE__ */ jsx("div", {
+								className: "space-y-3",
+								children: /* @__PURE__ */ jsx(VersionDiffPanel, {
+									previousVersion: details?.previousVersion,
+									changes,
+									fields: fieldsForDiff
+								})
+							}),
+							onRevert && /* @__PURE__ */ jsx("div", {
+								className: "mt-3 flex justify-end",
+								children: /* @__PURE__ */ jsx(Button, {
+									variant: "outline",
+									size: "sm",
+									disabled: !canRevert || isReverting,
+									onClick: () => {
+										onRevert(version_1);
+									},
+									children: t("version.revert")
+								})
+							})
+						]
+					})]
+				}, key_1);
 			};
-			$[15] = isReverting;
-			$[16] = onRevert;
-			$[17] = operationLabel;
-			$[18] = t;
-			$[19] = t4$1;
-		} else t4$1 = $[19];
-		t3 = sortedVersions.map(t4$1);
-		$[9] = isReverting;
-		$[10] = onRevert;
-		$[11] = operationLabel;
-		$[12] = sortedVersions;
-		$[13] = t;
-		$[14] = t3;
-	} else t3 = $[14];
-	let t4;
-	if ($[20] !== t3) {
-		t4 = /* @__PURE__ */ jsx("div", {
-			className: "space-y-2",
-			children: t3
+			$[30] = fieldsForDiff;
+			$[31] = formatDateTime;
+			$[32] = isReverting;
+			$[33] = locale;
+			$[34] = onRevert;
+			$[35] = operationLabel;
+			$[36] = t;
+			$[37] = versionDetails;
+			$[38] = t8$1;
+		} else t8$1 = $[38];
+		t7 = sortedVersions.map(t8$1);
+		$[20] = fieldsForDiff;
+		$[21] = formatDateTime;
+		$[22] = isReverting;
+		$[23] = locale;
+		$[24] = onRevert;
+		$[25] = operationLabel;
+		$[26] = sortedVersions;
+		$[27] = t;
+		$[28] = versionDetails;
+		$[29] = t7;
+	} else t7 = $[29];
+	let t8;
+	if ($[39] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Accordion, {
+			defaultValue: t6,
+			className: "panel-surface bg-card",
+			children: t7
 		});
-		$[20] = t3;
-		$[21] = t4;
-	} else t4 = $[21];
-	return t4;
+		$[39] = t7;
+		$[40] = t8;
+	} else t8 = $[40];
+	return t8;
+}
+function _temp4(change) {
+	return change.label;
 }
-function _temp3(value) {
-	if (!value) return "-";
-	const date = new Date(value);
-	if (Number.isNaN(date.getTime())) return "-";
-	return date.toLocaleString();
+function _temp3(a_0, b_0) {
+	const aNum_0 = a_0.versionNumber ?? 0;
+	return (b_0.versionNumber ?? 0) - aNum_0;
 }
 function _temp2(a, b) {
-	const aNum = a.versionNumber ?? 0;
-	return (b.versionNumber ?? 0) - aNum;
+	return (a.versionNumber ?? 0) - (b.versionNumber ?? 0);
+}
+function getVersionKey(version, index) {
+	if (version.versionId) return version.versionId;
+	if (typeof version.versionNumber === "number") return `version-${version.versionNumber}`;
+	return `version-${version.versionCreatedAt ?? index}`;
+}
+function shouldIncludeField(field) {
+	if (field?.metadata?.writeOnly) return false;
+	return field?.access?.read?.allowed !== false;
+}
+function buildVersionDiff({ version, previousVersion, fields, resolveText }) {
+	const changes = [];
+	for (const [name, field] of Object.entries(fields)) {
+		if (!shouldIncludeField(field)) continue;
+		const from = previousVersion?.[name];
+		const to = version[name];
+		if (valuesEqual(from, to)) continue;
+		if (!previousVersion && isEmptyValue(to)) continue;
+		changes.push({
+			name,
+			label: resolveText(field.metadata?.label, formatLabel(name)),
+			type: field.metadata?.type ?? "unknown",
+			kind: getDiffKind(from, to),
+			from,
+			to
+		});
+	}
+	return changes;
 }
 function HistorySidebar(t0) {
-	const $ = c(27);
-	const { open, onOpenChange, auditEntries, isLoadingAudit: t1, versions, isLoadingVersions: t2, isReverting: t3, onRevert, showVersionsTab: t4 } = t0;
-	const isLoadingAudit = t1 === void 0 ? false : t1;
-	const isLoadingVersions = t2 === void 0 ? false : t2;
-	const isReverting = t3 === void 0 ? false : t3;
-	const showVersionsTab = t4 === void 0 ? false : t4;
-	const { t } = useTranslation();
-	let t5;
-	if ($[0] !== t) {
-		t5 = t("history.title");
-		$[0] = t;
-		$[1] = t5;
-	} else t5 = $[1];
+	const $ = c(31);
+	const { open, onOpenChange, auditEntries: t1, isLoadingAudit: t2, versions, fields, isLoadingVersions: t3, isReverting: t4, onRevert, showVersionsTab: t5 } = t0;
 	let t6;
-	if ($[2] !== t5) {
-		t6 = /* @__PURE__ */ jsx(SheetTitle, { children: t5 });
-		$[2] = t5;
-		$[3] = t6;
-	} else t6 = $[3];
+	if ($[0] !== t1) {
+		t6 = t1 === void 0 ? [] : t1;
+		$[0] = t1;
+		$[1] = t6;
+	} else t6 = $[1];
+	const auditEntries = t6;
+	const isLoadingAudit = t2 === void 0 ? false : t2;
+	const isLoadingVersions = t3 === void 0 ? false : t3;
+	const isReverting = t4 === void 0 ? false : t4;
+	const showVersionsTab = t5 === void 0 ? false : t5;
+	const { t } = useTranslation();
 	let t7;
-	if ($[4] !== t) {
-		t7 = t("history.description");
-		$[4] = t;
-		$[5] = t7;
-	} else t7 = $[5];
+	if ($[2] !== showVersionsTab || $[3] !== t) {
+		t7 = showVersionsTab ? t("version.history") : t("history.title");
+		$[2] = showVersionsTab;
+		$[3] = t;
+		$[4] = t7;
+	} else t7 = $[4];
 	let t8;
-	if ($[6] !== t7) {
-		t8 = /* @__PURE__ */ jsx(SheetDescription, { children: t7 });
-		$[6] = t7;
-		$[7] = t8;
-	} else t8 = $[7];
+	if ($[5] !== t7) {
+		t8 = /* @__PURE__ */ jsx(SheetTitle, { children: t7 });
+		$[5] = t7;
+		$[6] = t8;
+	} else t8 = $[6];
 	let t9;
-	if ($[8] !== t6 || $[9] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(SheetHeader, {
+	if ($[7] !== showVersionsTab || $[8] !== t) {
+		t9 = showVersionsTab ? t("history.versionDescription") : t("history.description");
+		$[7] = showVersionsTab;
+		$[8] = t;
+		$[9] = t9;
+	} else t9 = $[9];
+	let t10;
+	if ($[10] !== t9) {
+		t10 = /* @__PURE__ */ jsx(SheetDescription, { children: t9 });
+		$[10] = t9;
+		$[11] = t10;
+	} else t10 = $[11];
+	let t11;
+	if ($[12] !== t10 || $[13] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(SheetHeader, {
 			className: "border-b px-6 py-5",
-			children: [t6, t8]
+			children: [t8, t10]
 		});
-		$[8] = t6;
-		$[9] = t8;
-		$[10] = t9;
-	} else t9 = $[10];
-	let t10;
-	if ($[11] !== auditEntries || $[12] !== isLoadingAudit || $[13] !== isLoadingVersions || $[14] !== isReverting || $[15] !== onRevert || $[16] !== showVersionsTab || $[17] !== t || $[18] !== versions) {
-		t10 = showVersionsTab ? /* @__PURE__ */ jsxs(Tabs, {
-			defaultValue: "activity",
-			className: "flex min-h-0 flex-1 flex-col",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "px-6 pt-3",
-					children: /* @__PURE__ */ jsxs(TabsList, {
-						variant: "line",
-						children: [/* @__PURE__ */ jsx(TabsTrigger, {
-							value: "activity",
-							children: t("history.tabActivity")
-						}), /* @__PURE__ */ jsx(TabsTrigger, {
-							value: "versions",
-							children: t("history.tabVersions")
-						})]
-					})
-				}),
-				/* @__PURE__ */ jsx(TabsContent, {
-					value: "activity",
-					className: "flex-1 overflow-y-auto px-6 py-4",
-					children: /* @__PURE__ */ jsx(ActivityTimeline, {
-						entries: auditEntries,
-						isLoading: isLoadingAudit
-					})
-				}),
-				/* @__PURE__ */ jsx(TabsContent, {
-					value: "versions",
-					className: "flex-1 overflow-y-auto px-6 py-4",
-					children: /* @__PURE__ */ jsx(VersionsList, {
-						versions: versions ?? [],
-						isLoading: isLoadingVersions,
-						isReverting,
-						onRevert
-					})
+		$[12] = t10;
+		$[13] = t8;
+		$[14] = t11;
+	} else t11 = $[14];
+	let t12;
+	if ($[15] !== auditEntries || $[16] !== fields || $[17] !== isLoadingAudit || $[18] !== isLoadingVersions || $[19] !== isReverting || $[20] !== onRevert || $[21] !== showVersionsTab || $[22] !== versions) {
+		t12 = showVersionsTab ? /* @__PURE__ */ jsx(ScrollFade, {
+			orientation: "vertical",
+			className: "min-h-0 flex-1",
+			children: /* @__PURE__ */ jsx("div", {
+				"data-scroll-fade-target": true,
+				className: "h-full overflow-y-auto px-6 py-4",
+				children: /* @__PURE__ */ jsx(VersionsList, {
+					versions: versions ?? [],
+					fields,
+					isLoading: isLoadingVersions,
+					isReverting,
+					onRevert
+				})
+			})
+		}) : /* @__PURE__ */ jsx(ScrollFade, {
+			orientation: "vertical",
+			className: "min-h-0 flex-1",
+			children: /* @__PURE__ */ jsx("div", {
+				"data-scroll-fade-target": true,
+				className: "h-full overflow-y-auto px-6 py-4",
+				children: /* @__PURE__ */ jsx(ActivityTimeline, {
+					entries: auditEntries,
+					isLoading: isLoadingAudit
 				})
-			]
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "flex-1 overflow-y-auto px-6 py-4",
-			children: /* @__PURE__ */ jsx(ActivityTimeline, {
-				entries: auditEntries,
-				isLoading: isLoadingAudit
 			})
 		});
-		$[11] = auditEntries;
-		$[12] = isLoadingAudit;
-		$[13] = isLoadingVersions;
-		$[14] = isReverting;
-		$[15] = onRevert;
-		$[16] = showVersionsTab;
-		$[17] = t;
-		$[18] = versions;
-		$[19] = t10;
-	} else t10 = $[19];
-	let t11;
-	if ($[20] !== t10 || $[21] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(SheetContent, {
+		$[15] = auditEntries;
+		$[16] = fields;
+		$[17] = isLoadingAudit;
+		$[18] = isLoadingVersions;
+		$[19] = isReverting;
+		$[20] = onRevert;
+		$[21] = showVersionsTab;
+		$[22] = versions;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] !== t11 || $[25] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(SheetContent, {
 			side: "right",
-			className: "qa-history-sidebar flex flex-col p-0 sm:max-w-xl",
-			children: [t9, t10]
+			animated: false,
+			showOverlay: false,
+			className: "qa-history-sidebar flex flex-col p-0 sm:max-w-2xl",
+			children: [t11, t12]
 		});
-		$[20] = t10;
-		$[21] = t9;
-		$[22] = t11;
-	} else t11 = $[22];
-	let t12;
-	if ($[23] !== onOpenChange || $[24] !== open || $[25] !== t11) {
-		t12 = /* @__PURE__ */ jsx(Sheet, {
+		$[24] = t11;
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== onOpenChange || $[28] !== open || $[29] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Sheet, {
 			open,
 			onOpenChange,
-			children: t11
+			modal: false,
+			children: t13
 		});
-		$[23] = onOpenChange;
-		$[24] = open;
-		$[25] = t11;
-		$[26] = t12;
-	} else t12 = $[26];
-	return t12;
+		$[27] = onOpenChange;
+		$[28] = open;
+		$[29] = t13;
+		$[30] = t14;
+	} else t14 = $[30];
+	return t14;
 }
 
 //#endregion