les-revisions 1.0.0

package/dist/_chunks/App-CYbCF5EG.mjs

@@ -0,0 +1,726 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useFetchClient, Page, Layouts, BackButton, useNotification } from "@strapi/strapi/admin";
+import { useNavigate, Routes, Route } from "react-router-dom";
+import { Flex, EmptyStateLayout, Table, Thead, Tr, Th, Typography, VisuallyHidden, Tbody, Td, Badge, IconButton, Status, Box, Button, Checkbox, Modal, DesignSystemProvider } from "@strapi/design-system";
+import { useTheme } from "styled-components";
+import { useState, useEffect, useCallback } from "react";
+import { useIntl } from "react-intl";
+import { Stack, Clock, ArrowRight, ArrowLeft, Eye, ArrowClockwise, Trash } from "@strapi/icons";
+import { P as PLUGIN_ID } from "./index-BYJMXObQ.mjs";
+const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
+const API_BASE = `/${PLUGIN_ID}`;
+const API_ROUTES = {
+  contentTypes: `${API_BASE}/content-types`,
+  entries: `${API_BASE}/entries`,
+  revisions: `${API_BASE}/revisions`,
+  compare: `${API_BASE}/revisions/compare`,
+  config: `${API_BASE}/config`
+};
+const PLUGIN_ROUTES = {
+  home: `/plugins/${PLUGIN_ID}`,
+  entries: `/plugins/${PLUGIN_ID}/entries`,
+  history: `/plugins/${PLUGIN_ID}/history`,
+  compare: `/plugins/${PLUGIN_ID}/compare`
+};
+const HomePage = () => {
+  const navigate = useNavigate();
+  const { get } = useFetchClient();
+  const { formatMessage } = useIntl();
+  const [contentTypes, setContentTypes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const { data } = await get(API_ROUTES.contentTypes);
+        setContentTypes(data);
+      } catch (err) {
+        setError(err?.message || "Failed to load content types");
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, [get]);
+  if (loading) return /* @__PURE__ */ jsx(Page.Loading, {});
+  if (error) return /* @__PURE__ */ jsx(Page.Error, {});
+  const totalRevisions = contentTypes.reduce((sum, ct) => sum + ct.revisionCount, 0);
+  const avgPerType = contentTypes.length > 0 ? Math.round(totalRevisions / contentTypes.length) : 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: formatMessage({ id: getTranslation("page.home.title") }) }),
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title: formatMessage({ id: getTranslation("page.home.title") }),
+        subtitle: formatMessage({ id: getTranslation("page.home.subtitle") })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Layouts.Content, { children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 4, marginBottom: 6, children: [
+        /* @__PURE__ */ jsx(
+          StatCard,
+          {
+            icon: /* @__PURE__ */ jsx(Stack, { width: "2.4rem", height: "2.4rem" }),
+            iconBg: "primary100",
+            value: contentTypes.length,
+            label: formatMessage({ id: getTranslation("stats.contentTypes") })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StatCard,
+          {
+            icon: /* @__PURE__ */ jsx(Clock, { width: "2.4rem", height: "2.4rem" }),
+            iconBg: "success100",
+            value: totalRevisions,
+            label: formatMessage({ id: getTranslation("stats.totalRevisions") })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StatCard,
+          {
+            icon: /* @__PURE__ */ jsx(Clock, { width: "2.4rem", height: "2.4rem" }),
+            iconBg: "warning100",
+            value: avgPerType,
+            label: formatMessage({ id: getTranslation("stats.avgPerType") })
+          }
+        )
+      ] }),
+      contentTypes.length === 0 ? /* @__PURE__ */ jsx(
+        EmptyStateLayout,
+        {
+          content: formatMessage({ id: getTranslation("page.home.empty") })
+        }
+      ) : /* @__PURE__ */ jsxs(Table, { colCount: 4, rowCount: contentTypes.length + 1, children: [
+        /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.contentType") }) }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.uid") }) }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.revisions") }) }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: formatMessage({ id: getTranslation("table.actions") }) }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Tbody, { children: contentTypes.map((ct) => /* @__PURE__ */ jsxs(
+          Tr,
+          {
+            cursor: "pointer",
+            onClick: () => navigate(
+              `${PLUGIN_ROUTES.entries}?contentType=${encodeURIComponent(ct.uid)}`
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: ct.info.displayName }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: ct.uid }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Badge, { active: ct.revisionCount > 0, children: ct.revisionCount }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  label: formatMessage({ id: getTranslation("action.viewEntries") }),
+                  variant: "ghost",
+                  onClick: () => navigate(
+                    `${PLUGIN_ROUTES.entries}?contentType=${encodeURIComponent(ct.uid)}`
+                  ),
+                  children: /* @__PURE__ */ jsx(ArrowRight, {})
+                }
+              ) }) })
+            ]
+          },
+          ct.uid
+        )) })
+      ] })
+    ] })
+  ] });
+};
+const StatCard = ({
+  icon,
+  iconBg,
+  value,
+  label
+}) => /* @__PURE__ */ jsxs(
+  Flex,
+  {
+    flex: "1",
+    shadow: "tableShadow",
+    hasRadius: true,
+    padding: 6,
+    background: "neutral0",
+    gap: 4,
+    alignItems: "center",
+    children: [
+      /* @__PURE__ */ jsx(Flex, { background: iconBg, hasRadius: true, padding: 3, justifyContent: "center", alignItems: "center", children: icon }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", children: value }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: label })
+      ] })
+    ]
+  }
+);
+const EntriesPage = () => {
+  const navigate = useNavigate();
+  const { get } = useFetchClient();
+  const { formatMessage } = useIntl();
+  const params = new URLSearchParams(window.location.search);
+  const contentType = params.get("contentType") || "";
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const fetchEntries = useCallback(async () => {
+    if (!contentType) return;
+    setLoading(true);
+    try {
+      const { data: result } = await get(API_ROUTES.entries, {
+        params: { contentType, page, pageSize: 25 }
+      });
+      setData(result);
+    } catch {
+      setData(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [get, contentType, page]);
+  useEffect(() => {
+    fetchEntries();
+  }, [fetchEntries]);
+  if (loading) return /* @__PURE__ */ jsx(Page.Loading, {});
+  const displayName = contentType.split(".").pop() || contentType;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: formatMessage(
+      { id: getTranslation("page.entries.title") },
+      { contentType: displayName }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title: formatMessage(
+          { id: getTranslation("page.entries.title") },
+          { contentType: displayName }
+        ),
+        subtitle: formatMessage(
+          { id: getTranslation("page.entries.subtitle") }
+        ),
+        navigationAction: /* @__PURE__ */ jsx(BackButton, { disabled: false, fallback: PLUGIN_ROUTES.home })
+      }
+    ),
+    /* @__PURE__ */ jsx(Layouts.Content, { children: !data || data.results.length === 0 ? /* @__PURE__ */ jsx(
+      EmptyStateLayout,
+      {
+        content: formatMessage({ id: getTranslation("page.entries.empty") })
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Table, { colCount: 4, rowCount: data.results.length + 1, children: [
+        /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.entry") }) }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.versions") }) }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.lastModified") }) }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: formatMessage({ id: getTranslation("table.actions") }) }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Tbody, { children: data.results.map((entry) => /* @__PURE__ */ jsxs(
+          Tr,
+          {
+            cursor: "pointer",
+            onClick: () => navigate(
+              `${PLUGIN_ROUTES.history}?contentType=${encodeURIComponent(contentType)}&documentId=${entry.documentId}`
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, children: [
+                /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+                  /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: entry.entryTitle }),
+                  !entry.exists && /* @__PURE__ */ jsx(Status, { variant: "danger", size: "S", children: /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", children: formatMessage({ id: getTranslation("entry.deleted") }) }) })
+                ] }),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: entry.documentId })
+              ] }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Badge, { active: entry.count > 0, children: entry.count }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral800", children: new Date(entry.lastModified).toLocaleDateString() }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  label: formatMessage({ id: getTranslation("action.viewRevisions") }),
+                  variant: "ghost",
+                  onClick: () => navigate(
+                    `${PLUGIN_ROUTES.history}?contentType=${encodeURIComponent(contentType)}&documentId=${entry.documentId}`
+                  ),
+                  children: /* @__PURE__ */ jsx(ArrowRight, {})
+                }
+              ) }) })
+            ]
+          },
+          entry.documentId
+        )) })
+      ] }),
+      data.pagination.pageCount > 1 && /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "center", alignItems: "center", gap: 4, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            size: "S",
+            disabled: page <= 1,
+            onClick: () => setPage((p) => Math.max(1, p - 1)),
+            startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+            children: formatMessage({ id: getTranslation("pagination.previous") })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral600", children: [
+          page,
+          " / ",
+          data.pagination.pageCount
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            size: "S",
+            disabled: page >= data.pagination.pageCount,
+            onClick: () => setPage((p) => p + 1),
+            endIcon: /* @__PURE__ */ jsx(ArrowRight, {}),
+            children: formatMessage({ id: getTranslation("pagination.next") })
+          }
+        )
+      ] }) })
+    ] }) })
+  ] });
+};
+const CHANGE_TYPE_VARIANT = {
+  create: "success",
+  update: "warning",
+  delete: "danger"
+};
+const RevisionHistoryPage = () => {
+  const navigate = useNavigate();
+  const { get, post, del } = useFetchClient();
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const params = new URLSearchParams(window.location.search);
+  const contentType = params.get("contentType") || "";
+  const documentId = params.get("documentId") || "";
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const [snapshotModal, setSnapshotModal] = useState(null);
+  const fetchRevisions = useCallback(async () => {
+    if (!contentType || !documentId) return;
+    setLoading(true);
+    try {
+      const { data: result } = await get(API_ROUTES.revisions, {
+        params: { contentType, documentId, page, pageSize: 25 }
+      });
+      setData(result);
+    } catch {
+      setData(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [get, contentType, documentId, page]);
+  useEffect(() => {
+    fetchRevisions();
+  }, [fetchRevisions]);
+  const toggleSelection = (docId) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(docId)) {
+        next.delete(docId);
+      } else {
+        if (next.size >= 2) {
+          const first = next.values().next().value;
+          if (first) next.delete(first);
+        }
+        next.add(docId);
+      }
+      return next;
+    });
+  };
+  const handleRestore = async (revisionDocId) => {
+    if (!window.confirm(formatMessage({ id: getTranslation("confirm.restore") }))) return;
+    try {
+      await post(`${API_ROUTES.revisions}/${revisionDocId}/restore`);
+      toggleNotification({
+        type: "success",
+        message: formatMessage({ id: getTranslation("notification.restore.success") })
+      });
+      await fetchRevisions();
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({ id: getTranslation("notification.restore.error") })
+      });
+    }
+  };
+  const handleDelete = async (revisionDocId) => {
+    if (!window.confirm(formatMessage({ id: getTranslation("confirm.delete") }))) return;
+    try {
+      await del(`${API_ROUTES.revisions}/${revisionDocId}`);
+      toggleNotification({
+        type: "success",
+        message: formatMessage({ id: getTranslation("notification.delete.success") })
+      });
+      setSelected((prev) => {
+        const next = new Set(prev);
+        next.delete(revisionDocId);
+        return next;
+      });
+      await fetchRevisions();
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({ id: getTranslation("notification.delete.error") })
+      });
+    }
+  };
+  const handleCompare = () => {
+    if (selected.size !== 2) return;
+    const [rev1, rev2] = Array.from(selected);
+    navigate(
+      `${PLUGIN_ROUTES.compare}?rev1=${rev1}&rev2=${rev2}&contentType=${encodeURIComponent(contentType)}&documentId=${documentId}`
+    );
+  };
+  if (loading) return /* @__PURE__ */ jsx(Page.Loading, {});
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: formatMessage({ id: getTranslation("page.history.title") }) }),
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title: formatMessage({ id: getTranslation("page.history.title") }),
+        subtitle: formatMessage(
+          { id: getTranslation("page.history.subtitle") },
+          { count: data?.pagination.total ?? 0 }
+        ),
+        navigationAction: /* @__PURE__ */ jsx(
+          BackButton,
+          {
+            disabled: false,
+            fallback: `${PLUGIN_ROUTES.entries}?contentType=${encodeURIComponent(contentType)}`
+          }
+        ),
+        primaryAction: /* @__PURE__ */ jsxs(Button, { disabled: selected.size !== 2, onClick: handleCompare, children: [
+          formatMessage({ id: getTranslation("action.compare") }),
+          selected.size > 0 && ` (${selected.size}/2)`
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Layouts.Content, { children: [
+      !data || data.results.length === 0 ? /* @__PURE__ */ jsx(
+        EmptyStateLayout,
+        {
+          content: formatMessage({ id: getTranslation("page.history.empty") })
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Table, { colCount: 6, rowCount: data.results.length + 1, children: [
+          /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: formatMessage({ id: getTranslation("select.compare.hint") }) }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.version") }) }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.changeType") }) }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.changedBy") }) }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.date") }) }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: formatMessage({ id: getTranslation("table.actions") }) }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Tbody, { children: data.results.map((rev, index) => {
+            const isLatest = index === 0;
+            const isSelected = selected.has(rev.documentId);
+            const variant = CHANGE_TYPE_VARIANT[rev.changeType] || "warning";
+            return /* @__PURE__ */ jsxs(Tr, { children: [
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isSelected,
+                  onCheckedChange: () => toggleSelection(rev.documentId)
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+                /* @__PURE__ */ jsxs(Typography, { textColor: "neutral800", fontWeight: "bold", children: [
+                  "v",
+                  rev.version
+                ] }),
+                isLatest && /* @__PURE__ */ jsx(Badge, { active: true, children: formatMessage({ id: getTranslation("badge.latest") }) })
+              ] }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Status, { variant, size: "S", children: /* @__PURE__ */ jsx(Typography, { tag: "span", variant: "omega", fontWeight: "bold", children: formatMessage({ id: getTranslation(`badge.${rev.changeType}`) }) }) }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: rev.changedByName || rev.changedByEmail || "—" }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: new Date(rev.createdAt).toLocaleString() }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "flex-end", gap: 1, children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    label: formatMessage({ id: getTranslation("action.viewSnapshot") }),
+                    variant: "ghost",
+                    onClick: () => setSnapshotModal(rev),
+                    children: /* @__PURE__ */ jsx(Eye, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    label: formatMessage({ id: getTranslation("action.restore") }),
+                    variant: "ghost",
+                    onClick: () => handleRestore(rev.documentId),
+                    children: /* @__PURE__ */ jsx(ArrowClockwise, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    label: formatMessage({ id: getTranslation("action.delete") }),
+                    variant: "ghost",
+                    onClick: () => handleDelete(rev.documentId),
+                    children: /* @__PURE__ */ jsx(Trash, {})
+                  }
+                )
+              ] }) })
+            ] }, rev.documentId);
+          }) })
+        ] }),
+        data.pagination.pageCount > 1 && /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "center", alignItems: "center", gap: 4, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "S",
+              disabled: page <= 1,
+              onClick: () => setPage((p) => Math.max(1, p - 1)),
+              startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+              children: formatMessage({ id: getTranslation("pagination.previous") })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral600", children: [
+            page,
+            " / ",
+            data.pagination.pageCount
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "S",
+              disabled: page >= data.pagination.pageCount,
+              onClick: () => setPage((p) => p + 1),
+              endIcon: /* @__PURE__ */ jsx(ArrowRight, {}),
+              children: formatMessage({ id: getTranslation("pagination.next") })
+            }
+          )
+        ] }) })
+      ] }),
+      snapshotModal && /* @__PURE__ */ jsx(Modal.Root, { open: !!snapshotModal, onOpenChange: () => setSnapshotModal(null), children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
+        /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsxs(Modal.Title, { children: [
+          "Snapshot — v",
+          snapshotModal.version
+        ] }) }),
+        /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            padding: 4,
+            background: "neutral100",
+            hasRadius: true,
+            style: {
+              maxHeight: "60vh",
+              overflow: "auto",
+              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+              fontSize: "13px",
+              lineHeight: "1.6",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word"
+            },
+            children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral800", children: JSON.stringify(snapshotModal.snapshot, null, 2) })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+          /* @__PURE__ */ jsx(Modal.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", children: formatMessage({ id: getTranslation("action.close") }) }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: () => {
+                handleRestore(snapshotModal.documentId);
+                setSnapshotModal(null);
+              },
+              children: formatMessage({ id: getTranslation("action.restore") })
+            }
+          )
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+const DIFF_VARIANT = {
+  added: "success",
+  removed: "danger",
+  changed: "warning"
+};
+const VALUE_BG_TOKENS = {
+  added: { old: "transparent", new: "success100" },
+  removed: { old: "danger100", new: "transparent" },
+  changed: { old: "warning100", new: "primary100" }
+};
+const ComparePage = () => {
+  const { get } = useFetchClient();
+  const { formatMessage } = useIntl();
+  const params = new URLSearchParams(window.location.search);
+  const rev1 = params.get("rev1") || "";
+  const rev2 = params.get("rev2") || "";
+  const contentType = params.get("contentType") || "";
+  const documentId = params.get("documentId") || "";
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!rev1 || !rev2) return;
+    const fetchComparison = async () => {
+      setLoading(true);
+      try {
+        const { data: result } = await get(API_ROUTES.compare, {
+          params: { rev1, rev2 }
+        });
+        setData(result);
+      } catch (err) {
+        setError(
+          err?.response?.data?.error?.message || err?.message || "Comparison failed"
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchComparison();
+  }, [get, rev1, rev2]);
+  if (loading) return /* @__PURE__ */ jsx(Page.Loading, {});
+  if (error) return /* @__PURE__ */ jsx(Page.Error, {});
+  const v1 = data?.revision1?.version ?? "?";
+  const v2 = data?.revision2?.version ?? "?";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: formatMessage({ id: getTranslation("page.compare.title") }) }),
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title: formatMessage({ id: getTranslation("page.compare.title") }),
+        subtitle: formatMessage(
+          { id: getTranslation("page.compare.subtitle") },
+          { v1, v2 }
+        ),
+        navigationAction: /* @__PURE__ */ jsx(
+          BackButton,
+          {
+            disabled: false,
+            fallback: `${PLUGIN_ROUTES.history}?contentType=${encodeURIComponent(contentType)}&documentId=${documentId}`
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(Layouts.Content, { children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 4, marginBottom: 6, children: [
+        /* @__PURE__ */ jsx(
+          RevisionCard,
+          {
+            label: `v${v1}`,
+            name: data?.revision1?.changedByName || data?.revision1?.changedByEmail || "—",
+            date: data?.revision1?.createdAt,
+            changeType: data?.revision1?.changeType
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RevisionCard,
+          {
+            label: `v${v2}`,
+            name: data?.revision2?.changedByName || data?.revision2?.changedByEmail || "—",
+            date: data?.revision2?.createdAt,
+            changeType: data?.revision2?.changeType
+          }
+        )
+      ] }),
+      !data?.diff || data.diff.length === 0 ? /* @__PURE__ */ jsx(
+        EmptyStateLayout,
+        {
+          content: formatMessage({ id: getTranslation("page.compare.no-diff") })
+        }
+      ) : /* @__PURE__ */ jsxs(Table, { colCount: 4, rowCount: data.diff.length + 1, children: [
+        /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.path") }) }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: getTranslation("table.type") }) }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsxs(Typography, { variant: "sigma", textColor: "neutral600", children: [
+            formatMessage({ id: getTranslation("table.oldValue") }),
+            " (v",
+            v1,
+            ")"
+          ] }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsxs(Typography, { variant: "sigma", textColor: "neutral600", children: [
+            formatMessage({ id: getTranslation("table.newValue") }),
+            " (v",
+            v2,
+            ")"
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Tbody, { children: data.diff.map((entry, index) => {
+          const variant = DIFF_VARIANT[entry.type] || "warning";
+          return /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: entry.path }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Status, { variant, size: "S", children: /* @__PURE__ */ jsx(Typography, { tag: "span", variant: "omega", fontWeight: "bold", children: formatMessage({ id: getTranslation(`diff.${entry.type}`) }) }) }) }),
+            /* @__PURE__ */ jsx(Td, { style: { verticalAlign: "top" }, children: /* @__PURE__ */ jsx(ValueCell, { value: entry.oldValue, type: entry.type, side: "old" }) }),
+            /* @__PURE__ */ jsx(Td, { style: { verticalAlign: "top" }, children: /* @__PURE__ */ jsx(ValueCell, { value: entry.newValue, type: entry.type, side: "new" }) })
+          ] }, index);
+        }) })
+      ] })
+    ] })
+  ] });
+};
+const RevisionCard = ({
+  label,
+  name,
+  date,
+  changeType
+}) => {
+  const { formatMessage } = useIntl();
+  const variant = changeType ? DIFF_VARIANT[changeType] || "warning" : "warning";
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      flex: "1",
+      shadow: "tableShadow",
+      hasRadius: true,
+      padding: 6,
+      background: "neutral0",
+      direction: "column",
+      gap: 3,
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", children: label }),
+          changeType && /* @__PURE__ */ jsx(Status, { variant, size: "S", children: /* @__PURE__ */ jsx(Typography, { tag: "span", variant: "omega", fontWeight: "bold", children: formatMessage({ id: getTranslation(`badge.${changeType}`) }) }) })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: name }),
+        date && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: new Date(date).toLocaleString() })
+      ]
+    }
+  );
+};
+const ValueCell = ({
+  value,
+  type,
+  side
+}) => {
+  if (value === void 0) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral400", children: "—" });
+  }
+  const tokens = VALUE_BG_TOKENS[type] || VALUE_BG_TOKENS.changed;
+  const bgToken = tokens[side] || "transparent";
+  const formatted = typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      padding: 2,
+      hasRadius: true,
+      background: bgToken !== "transparent" ? bgToken : void 0,
+      style: {
+        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+        fontSize: "12px",
+        lineHeight: "1.5",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        maxHeight: "220px",
+        overflow: "auto"
+      },
+      children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral800", children: formatted })
+    }
+  );
+};
+const App = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(DesignSystemProvider, { theme, children: /* @__PURE__ */ jsxs(Routes, { children: [
+    /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(HomePage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "entries", element: /* @__PURE__ */ jsx(EntriesPage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "history", element: /* @__PURE__ */ jsx(RevisionHistoryPage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "compare", element: /* @__PURE__ */ jsx(ComparePage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
+  ] }) });
+};
+export {
+  App
+};