strapi-cms-audit-log 1.1.0

package/dist/admin/App-ou5hy99f.mjs

@@ -0,0 +1,1266 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useFetchClient, Page, Layouts, BackButton, useNotification, useQueryParams, useRBAC, SearchInput, Pagination, ConfirmDialog } from "@strapi/strapi/admin";
+import { useParams, useNavigate, Routes, Route } from "react-router-dom";
+import { g as getTranslation, P as PLUGIN_ID, a as PERMISSIONS } from "./index-DdmY-p3Q.mjs";
+import { Box, Flex, Typography, Button, Badge, Divider, Grid, Field, SingleSelect, SingleSelectOption, Combobox, ComboboxOption, TextInput, DatePicker, EmptyStateLayout, Table, Thead, Tr, Th, VisuallyHidden, Tbody, Td, IconButton, Dialog } from "@strapi/design-system";
+import { useIntl } from "react-intl";
+import * as React from "react";
+import { CaretUp, CaretDown, Cross, Eye, Trash } from "@strapi/icons";
+const ACTION_COLORS = {
+  create: { background: "success100", text: "success600" },
+  update: { background: "primary100", text: "primary600" },
+  delete: { background: "danger100", text: "danger600" },
+  publish: { background: "success100", text: "success600" },
+  unpublish: { background: "warning100", text: "warning600" },
+  // Security actions. Green for a granted access, red for a refused one, and
+  // warning amber for the changes that alter who is able to do either — a role
+  // edit is not a failure, but it is the row a reviewer should stop on.
+  "login.success": { background: "success100", text: "success600" },
+  "login.failed": { background: "danger100", text: "danger600" },
+  logout: { background: "neutral150", text: "neutral700" },
+  "access.denied": { background: "danger100", text: "danger600" },
+  "admin.user.create": { background: "warning100", text: "warning600" },
+  "admin.user.update": { background: "warning100", text: "warning600" },
+  "admin.user.delete": { background: "danger100", text: "danger600" },
+  "admin.role.create": { background: "warning100", text: "warning600" },
+  "admin.role.update": { background: "warning100", text: "warning600" },
+  "admin.role.delete": { background: "danger100", text: "danger600" },
+  "admin.permission.create": { background: "warning100", text: "warning600" },
+  "admin.permission.update": { background: "warning100", text: "warning600" },
+  "admin.permission.delete": { background: "danger100", text: "danger600" },
+  "media.create": { background: "success100", text: "success600" },
+  "media.update": { background: "primary100", text: "primary600" },
+  "media.delete": { background: "danger100", text: "danger600" },
+  "media-folder.create": { background: "success100", text: "success600" },
+  "media-folder.update": { background: "primary100", text: "primary600" },
+  "media-folder.delete": { background: "danger100", text: "danger600" }
+};
+const actionColor = (action) => ACTION_COLORS[action] ?? { background: "neutral150", text: "neutral700" };
+const shortContentTypeName = (uid) => {
+  const parts = uid.split(".");
+  return parts.length > 1 ? parts[parts.length - 1] : uid;
+};
+const formatValue = (value, maxLength = 220) => {
+  if (value === null) return "null";
+  if (value === void 0) return "empty";
+  if (typeof value === "boolean") return value ? "true" : "false";
+  if (typeof value === "string") {
+    return value.length > maxLength ? `${value.slice(0, maxLength)}…` : value || '""';
+  }
+  if (typeof value === "number") return String(value);
+  try {
+    const json = JSON.stringify(value, null, 2);
+    return json.length > maxLength ? `${json.slice(0, maxLength)}…` : json;
+  } catch {
+    return String(value);
+  }
+};
+const isStructured = (value) => value !== null && typeof value === "object";
+const formatDate = (value, locale = "en") => {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "-";
+  return new Intl.DateTimeFormat(locale, {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(date);
+};
+const formatUser = (log) => log.userName ?? log.userEmail ?? (log.userId ? `#${log.userId}` : log.source);
+const stringify = (value) => {
+  if (value === null || value === void 0) return "null";
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return "/* value could not be serialised */";
+  }
+};
+const JsonViewer = ({ value, label, defaultOpen = false, maxHeight = "420px" }) => {
+  const { formatMessage } = useIntl();
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+  const json = React.useMemo(() => stringify(value), [value]);
+  const lineCount = React.useMemo(() => json.split("\n").length, [json]);
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h3", children: label }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          size: "S",
+          startIcon: isOpen ? /* @__PURE__ */ jsx(CaretUp, {}) : /* @__PURE__ */ jsx(CaretDown, {}),
+          onClick: () => setIsOpen((open) => !open),
+          children: isOpen ? formatMessage({ id: getTranslation("json.hide"), defaultMessage: "Hide" }) : formatMessage(
+            { id: getTranslation("json.show"), defaultMessage: "Show ({count} lines)" },
+            { count: lineCount }
+          )
+        }
+      )
+    ] }),
+    isOpen ? /* @__PURE__ */ jsx(
+      Box,
+      {
+        background: "neutral100",
+        hasRadius: true,
+        padding: 4,
+        style: { maxHeight, overflow: "auto" },
+        borderColor: "neutral200",
+        children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            tag: "pre",
+            variant: "pi",
+            style: {
+              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+              whiteSpace: "pre",
+              margin: 0
+            },
+            children: json
+          }
+        )
+      }
+    ) : null
+  ] });
+};
+const ChangeRow = ({ path, from, to }) => {
+  const { formatMessage } = useIntl();
+  const structured = isStructured(from) || isStructured(to);
+  return /* @__PURE__ */ jsxs(Box, { paddingTop: 4, paddingBottom: 4, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: path }),
+    /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+      /* @__PURE__ */ jsxs(Box, { background: "danger100", hasRadius: true, padding: 3, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "danger600", children: formatMessage({ id: getTranslation("changes.before"), defaultMessage: "Before" }) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { tag: "p", style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: formatValue(from) }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { background: "success100", hasRadius: true, padding: 3, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "success600", children: formatMessage({ id: getTranslation("changes.after"), defaultMessage: "After" }) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { tag: "p", style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: formatValue(to) }) })
+      ] })
+    ] }) }),
+    structured ? /* @__PURE__ */ jsx(Box, { paddingTop: 3, children: /* @__PURE__ */ jsx(
+      JsonViewer,
+      {
+        label: formatMessage(
+          { id: getTranslation("changes.raw"), defaultMessage: "Raw value for {path}" },
+          { path }
+        ),
+        value: { from, to }
+      }
+    ) }) : null
+  ] });
+};
+const ChangeViewer = ({ changes }) => {
+  const { formatMessage } = useIntl();
+  const entries = React.useMemo(
+    () => Object.entries(changes ?? {}).sort(([a], [b]) => a.split(".").length - b.split(".").length || a.localeCompare(b)),
+    [changes]
+  );
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage({
+      id: getTranslation("changes.empty"),
+      defaultMessage: "No field-level changes were recorded for this operation. This is expected for creates and deletes, and for updates that re-saved a document without modifying it."
+    }) });
+  }
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: formatMessage({ id: getTranslation("changes.title"), defaultMessage: "Changes" }) }),
+      /* @__PURE__ */ jsx(Badge, { children: entries.length })
+    ] }),
+    entries.map(([path, change], index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      index > 0 ? /* @__PURE__ */ jsx(Divider, {}) : null,
+      /* @__PURE__ */ jsx(ChangeRow, { path, from: change?.from, to: change?.to })
+    ] }, path))
+  ] });
+};
+const STRUCTURAL_KEYS = /* @__PURE__ */ new Set(["id", "__component", "__temp_key__", "createdAt", "updatedAt"]);
+const isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const isWidgetArray = (value) => Array.isArray(value) && value.length > 0 && value.every((item) => isObject(item) && typeof item.__component === "string");
+const isEqual = (a, b) => {
+  if (a === b) return true;
+  if (a == null && b == null) return true;
+  if (a == null || b == null) return false;
+  if (a instanceof Date || b instanceof Date) {
+    const left = a instanceof Date ? a.getTime() : Date.parse(String(a));
+    const right = b instanceof Date ? b.getTime() : Date.parse(String(b));
+    return Number.isFinite(left) && Number.isFinite(right) && left === right;
+  }
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+    return a.every((item, index) => isEqual(item, b[index]));
+  }
+  if (isObject(a) && isObject(b)) {
+    const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+    for (const key of keys) {
+      if (STRUCTURAL_KEYS.has(key)) continue;
+      if (!isEqual(a[key], b[key])) return false;
+    }
+    return true;
+  }
+  return false;
+};
+const diffFields = (before, after, prefix = "") => {
+  const paths = [];
+  const keys = /* @__PURE__ */ new Set([...Object.keys(before ?? {}), ...Object.keys(after ?? {})]);
+  for (const key of keys) {
+    if (prefix === "" && STRUCTURAL_KEYS.has(key)) continue;
+    const left = before?.[key];
+    const right = after?.[key];
+    if (isEqual(left, right)) continue;
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (isObject(left) && isObject(right)) {
+      paths.push(...diffFields(left, right, path));
+    } else {
+      paths.push(path);
+    }
+  }
+  return paths;
+};
+const pairSlots = (before, after) => {
+  const length = Math.max(before.length, after.length);
+  const slots = [];
+  for (let index = 0; index < length; index += 1) {
+    const left = before[index] ?? null;
+    const right = after[index] ?? null;
+    let status;
+    if (!left) status = "added";
+    else if (!right) status = "removed";
+    else if (isEqual(left, right)) status = "unchanged";
+    else status = "changed";
+    const sameComponent = left && right && left.__component === right.__component;
+    slots.push({
+      index,
+      status,
+      component: right?.__component ?? left?.__component ?? "unknown",
+      // Only meaningful when the slot held one widget and now holds another —
+      // otherwise the header would repeat the same name twice.
+      replacedComponent: left && right && !sameComponent ? left.__component : null,
+      before: left,
+      after: right,
+      changedFields: status === "changed" ? diffFields(left, right) : []
+    });
+  }
+  return slots;
+};
+const extractWidgetZones = (before, after) => {
+  const zones = [];
+  const names = /* @__PURE__ */ new Set([...Object.keys(before ?? {}), ...Object.keys(after ?? {})]);
+  for (const name of names) {
+    const left = before?.[name];
+    const right = after?.[name];
+    if (!isWidgetArray(left) && !isWidgetArray(right)) continue;
+    const slots = pairSlots(
+      isWidgetArray(left) ? left : [],
+      isWidgetArray(right) ? right : []
+    );
+    zones.push({
+      name,
+      slots,
+      changedCount: slots.filter((slot) => slot.status !== "unchanged").length
+    });
+  }
+  return zones.sort((a, b) => a.name.localeCompare(b.name));
+};
+const widgetLabel = (component) => {
+  const name = component.includes(".") ? component.slice(component.indexOf(".") + 1) : component;
+  return name.split("-").filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+};
+const widgetRows = (widget, prefix = "") => {
+  if (!widget) return [];
+  const rows = [];
+  for (const [key, value] of Object.entries(widget)) {
+    if (prefix === "" && STRUCTURAL_KEYS.has(key)) continue;
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (isObject(value) && !(value instanceof Date)) {
+      const nested = widgetRows(value, path);
+      if (nested.length > 0) rows.push(...nested);
+      else rows.push({ path, value });
+      continue;
+    }
+    rows.push({ path, value });
+  }
+  return rows;
+};
+const STATUS_STYLE = {
+  changed: { background: "primary100", text: "primary600", border: "primary200" },
+  added: { background: "success100", text: "success600", border: "success200" },
+  removed: { background: "danger100", text: "danger600", border: "danger200" },
+  unchanged: { background: "neutral150", text: "neutral600", border: "neutral200" }
+};
+const COLLAPSE_AFTER_ROWS = 12;
+const WidgetCard = ({ side, widget, changedFields, emptyLabel }) => {
+  const { formatMessage } = useIntl();
+  const [showAll, setShowAll] = React.useState(false);
+  const rows = React.useMemo(() => widgetRows(widget), [widget]);
+  const changed = React.useMemo(() => new Set(changedFields), [changedFields]);
+  const isBefore = side === "before";
+  const tint = isBefore ? { background: "danger100", text: "danger600", border: "danger200" } : { background: "success100", text: "success600", border: "success200" };
+  const visible = showAll ? rows : rows.slice(0, COLLAPSE_AFTER_ROWS);
+  const hidden = rows.length - visible.length;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      background: tint.background,
+      hasRadius: true,
+      padding: 4,
+      borderColor: tint.border,
+      borderWidth: "1px",
+      borderStyle: "solid",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 2, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: tint.text, children: isBefore ? formatMessage({ id: getTranslation("widgets.before"), defaultMessage: "Before" }) : formatMessage({ id: getTranslation("widgets.after"), defaultMessage: "After" }) }),
+          rows.length > 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage(
+            { id: getTranslation("widgets.fieldCount"), defaultMessage: "{count} fields" },
+            { count: rows.length }
+          ) }) : null
+        ] }),
+        widget === null ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontStyle: "italic" }, children: emptyLabel }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+          visible.map(({ path, value }) => {
+            const isChanged = changed.has(path);
+            return /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", gap: 3, children: [
+              /* @__PURE__ */ jsx(Box, { style: { minWidth: "30%", maxWidth: "30%" }, children: /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "pi",
+                  fontWeight: isChanged ? "bold" : "regular",
+                  textColor: isChanged ? tint.text : "neutral600",
+                  style: { wordBreak: "break-word" },
+                  children: path
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "pi",
+                  tag: "p",
+                  fontWeight: isChanged ? "bold" : "regular",
+                  textColor: "neutral800",
+                  style: { whiteSpace: "pre-wrap", wordBreak: "break-word", margin: 0 },
+                  children: formatValue(value, 320)
+                }
+              ) })
+            ] }, path);
+          }),
+          hidden > 0 ? /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "S", onClick: () => setShowAll(true), children: formatMessage(
+            {
+              id: getTranslation("widgets.showAllFields"),
+              defaultMessage: "Show {count} more fields"
+            },
+            { count: hidden }
+          ) }) }) : null
+        ] })
+      ]
+    }
+  );
+};
+const WidgetSlotView = ({ slot }) => {
+  const { formatMessage } = useIntl();
+  const [isOpen, setIsOpen] = React.useState(slot.status !== "unchanged");
+  const style = STATUS_STYLE[slot.status];
+  const statusLabel = formatMessage({
+    id: getTranslation(`widgets.status.${slot.status}`),
+    defaultMessage: slot.status
+  });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      hasRadius: true,
+      background: "neutral0",
+      borderColor: style.border,
+      borderWidth: "1px",
+      borderStyle: "solid",
+      padding: 4,
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", gap: 3, children: [
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Badge, { children: `#${slot.index}` }),
+            /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h4", style: { wordBreak: "break-word" }, children: widgetLabel(slot.component) }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "pi",
+                textColor: "neutral500",
+                style: {
+                  fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
+                },
+                children: slot.component
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx(Badge, { backgroundColor: style.background, textColor: style.text, children: statusLabel }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "tertiary",
+                size: "S",
+                startIcon: isOpen ? /* @__PURE__ */ jsx(CaretUp, {}) : /* @__PURE__ */ jsx(CaretDown, {}),
+                onClick: () => setIsOpen((open) => !open),
+                children: isOpen ? formatMessage({ id: getTranslation("widgets.hide"), defaultMessage: "Hide" }) : formatMessage({ id: getTranslation("widgets.show"), defaultMessage: "Show" })
+              }
+            )
+          ] })
+        ] }),
+        slot.replacedComponent ? /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "warning600", children: formatMessage(
+          {
+            id: getTranslation("widgets.replaced"),
+            defaultMessage: "This slot previously held a different widget ({component})."
+          },
+          { component: slot.replacedComponent }
+        ) }) }) : null,
+        isOpen ? /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
+          slot.status !== "added" ? /* @__PURE__ */ jsx(
+            WidgetCard,
+            {
+              side: "before",
+              widget: slot.before,
+              changedFields: slot.changedFields,
+              emptyLabel: formatMessage({
+                id: getTranslation("widgets.noBefore"),
+                defaultMessage: "This widget did not exist before the change."
+              })
+            }
+          ) : null,
+          slot.status !== "removed" ? /* @__PURE__ */ jsx(
+            WidgetCard,
+            {
+              side: "after",
+              widget: slot.after,
+              changedFields: slot.changedFields,
+              emptyLabel: formatMessage({
+                id: getTranslation("widgets.noAfter"),
+                defaultMessage: "This widget was removed by the change."
+              })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            JsonViewer,
+            {
+              label: formatMessage(
+                { id: getTranslation("widgets.raw"), defaultMessage: "Raw JSON for slot {index}" },
+                { index: slot.index }
+              ),
+              value: { before: slot.before, after: slot.after }
+            }
+          )
+        ] }) }) : null
+      ]
+    }
+  );
+};
+const WidgetDiff = ({ before, after }) => {
+  const { formatMessage } = useIntl();
+  const [showUnchanged, setShowUnchanged] = React.useState(false);
+  const zones = React.useMemo(() => extractWidgetZones(before, after), [before, after]);
+  if (zones.length === 0) return null;
+  return (
+    // The component owns its card rather than being wrapped by the page: it
+    // renders nothing when there is no dynamic zone, and a caller-supplied
+    // wrapper would leave an empty card behind on every content type without one.
+    /* @__PURE__ */ jsxs(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 6, children: [
+      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 2, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: formatMessage({ id: getTranslation("widgets.title"), defaultMessage: "Widgets" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "S", onClick: () => setShowUnchanged((show) => !show), children: showUnchanged ? formatMessage({
+          id: getTranslation("widgets.hideUnchanged"),
+          defaultMessage: "Hide unchanged widgets"
+        }) : formatMessage({
+          id: getTranslation("widgets.showUnchanged"),
+          defaultMessage: "Show unchanged widgets"
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({
+        id: getTranslation("widgets.hint"),
+        defaultMessage: "Each changed widget is shown twice — once with the data it held before this operation, and once with the data it holds after. Fields that differ are highlighted in both copies."
+      }) }) }),
+      /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: zones.map((zone) => {
+        const visible = showUnchanged ? zone.slots : zone.slots.filter((slot) => slot.status !== "unchanged");
+        const hiddenCount = zone.slots.length - visible.length;
+        return /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, paddingBottom: 3, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: zone.name }),
+            /* @__PURE__ */ jsx(Badge, { children: formatMessage(
+              {
+                id: getTranslation("widgets.zoneSummary"),
+                defaultMessage: "{changed} changed of {total}"
+              },
+              { changed: zone.changedCount, total: zone.slots.length }
+            ) })
+          ] }),
+          visible.length === 0 ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage(
+            {
+              id: getTranslation("widgets.allUnchanged"),
+              defaultMessage: "No widget in this zone changed. {count} unchanged widgets are hidden."
+            },
+            { count: hiddenCount }
+          ) }) : /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: visible.map((slot) => /* @__PURE__ */ jsx(WidgetSlotView, { slot }, `${zone.name}-${slot.index}`)) })
+        ] }, zone.name);
+      }) })
+    ] })
+  );
+};
+const EMPTY_PAGINATION = { page: 1, pageSize: 20, pageCount: 0, total: 0 };
+const EMPTY_FILTERS = {
+  contentTypes: [],
+  users: [],
+  locales: [],
+  actions: [],
+  sources: [],
+  outcomes: []
+};
+const message = (error) => error?.response?.data?.error?.message ?? error?.message ?? "Something went wrong while loading audit logs.";
+const useAuditLogs = (search) => {
+  const { get } = useFetchClient();
+  const [data, setData] = React.useState([]);
+  const [pagination, setPagination] = React.useState(EMPTY_PAGINATION);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [refreshToken, setRefreshToken] = React.useState(0);
+  const refresh = React.useCallback(() => setRefreshToken((token) => token + 1), []);
+  React.useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const { data: response } = await get(
+          `/${PLUGIN_ID}/logs${search ? `?${search}` : ""}`
+        );
+        if (cancelled) return;
+        setData(response.results ?? []);
+        setPagination(response.pagination ?? EMPTY_PAGINATION);
+      } catch (err) {
+        if (cancelled) return;
+        setError(message(err));
+        setData([]);
+        setPagination(EMPTY_PAGINATION);
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [get, search, refreshToken]);
+  return { data, pagination, isLoading, error, refresh };
+};
+const useAuditFilterOptions = () => {
+  const { get } = useFetchClient();
+  const [options, setOptions] = React.useState(EMPTY_FILTERS);
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      try {
+        const { data } = await get(`/${PLUGIN_ID}/filters`);
+        if (!cancelled) setOptions(data.data ?? EMPTY_FILTERS);
+      } catch {
+        if (!cancelled) setOptions(EMPTY_FILTERS);
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [get]);
+  return { options, isLoading };
+};
+const useAuditLog = (id) => {
+  const { get } = useFetchClient();
+  const [data, setData] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    let cancelled = false;
+    if (!id) {
+      setError("Missing audit log id.");
+      setIsLoading(false);
+      return;
+    }
+    const load = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const { data: response } = await get(`/${PLUGIN_ID}/logs/${id}`);
+        if (!cancelled) setData(response.data);
+      } catch (err) {
+        if (!cancelled) {
+          setError(message(err));
+          setData(null);
+        }
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [get, id]);
+  return { data, isLoading, error };
+};
+const useDeleteAuditLog = () => {
+  const { del } = useFetchClient();
+  return React.useCallback(
+    async (id) => {
+      await del(`/${PLUGIN_ID}/logs/${id}`);
+    },
+    [del]
+  );
+};
+const MetaField = ({ label, value, mono = false }) => /* @__PURE__ */ jsxs(Grid.Item, { col: 4, s: 6, xs: 12, direction: "column", alignItems: "flex-start", gap: 1, children: [
+  /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }),
+  /* @__PURE__ */ jsx(
+    Typography,
+    {
+      textColor: "neutral800",
+      style: {
+        wordBreak: "break-word",
+        ...mono ? {
+          fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
+        } : {}
+      },
+      children: value ?? "-"
+    }
+  )
+] });
+const AuditLogDetails = () => {
+  const { formatMessage, locale } = useIntl();
+  const { id } = useParams();
+  const { data: log, isLoading, error } = useAuditLog(id);
+  if (isLoading) return /* @__PURE__ */ jsx(Page.Loading, {});
+  if (error || !log) {
+    return /* @__PURE__ */ jsx(Page.Error, { content: error ?? void 0 });
+  }
+  const colors = actionColor(log.action);
+  return /* @__PURE__ */ jsxs(Page.Main, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: formatMessage({ id: getTranslation("detail.title"), defaultMessage: "Audit Log" }) }),
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        navigationAction: /* @__PURE__ */ jsx(BackButton, { fallback: ".." }),
+        title: `${log.action} · ${log.contentTypeDisplayName || shortContentTypeName(log.contentType)}`,
+        subtitle: formatDate(log.createdAt, locale)
+      }
+    ),
+    /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+      /* @__PURE__ */ jsxs(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 6, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: formatMessage({ id: getTranslation("detail.overview"), defaultMessage: "Overview" }) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 5, children: [
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.action"),
+                defaultMessage: "Action"
+              }),
+              value: /* @__PURE__ */ jsx(Badge, { backgroundColor: colors.background, textColor: colors.text, children: log.action })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.outcome"),
+                defaultMessage: "Outcome"
+              }),
+              value: /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  backgroundColor: log.outcome === "failure" ? "danger100" : "success100",
+                  textColor: log.outcome === "failure" ? "danger600" : "success600",
+                  children: log.outcome ?? "success"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({ id: getTranslation("detail.user"), defaultMessage: "User" }),
+              value: formatUser(log)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.userEmail"),
+                defaultMessage: "User email"
+              }),
+              value: log.userEmail
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({ id: getTranslation("detail.date"), defaultMessage: "Date" }),
+              value: formatDate(log.createdAt, locale)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.contentType"),
+                defaultMessage: "Content type"
+              }),
+              value: log.contentType,
+              mono: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.documentId"),
+                defaultMessage: "Document ID"
+              }),
+              value: log.contentDocumentId,
+              mono: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.entryId"),
+                defaultMessage: "Entry ID"
+              }),
+              value: log.contentId,
+              mono: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.locale"),
+                defaultMessage: "Locale"
+              }),
+              value: log.locale
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.source"),
+                defaultMessage: "Source"
+              }),
+              value: log.source
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.ipAddress"),
+                defaultMessage: "IP address"
+              }),
+              value: log.ipAddress,
+              mono: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.requestId"),
+                defaultMessage: "Request ID"
+              }),
+              value: log.requestId,
+              mono: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaField,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.userAgent"),
+                defaultMessage: "User agent"
+              }),
+              value: log.userAgent,
+              mono: true
+            }
+          )
+        ] }) })
+      ] }),
+      log.metadata && Object.keys(log.metadata).length > 0 ? /* @__PURE__ */ jsxs(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 6, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: formatMessage({
+          id: getTranslation("detail.metadata"),
+          defaultMessage: "Event detail"
+        }) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Grid.Root, { gap: 5, children: Object.entries(log.metadata).map(([key, value]) => /* @__PURE__ */ jsx(
+          MetaField,
+          {
+            label: key,
+            value: value === null || value === void 0 ? "-" : typeof value === "object" ? JSON.stringify(value) : String(value),
+            mono: key === "path" || key === "attemptedEmail"
+          },
+          key
+        )) }) })
+      ] }) : null,
+      /* @__PURE__ */ jsx(WidgetDiff, { before: log.before, after: log.after }),
+      /* @__PURE__ */ jsx(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 6, children: /* @__PURE__ */ jsx(ChangeViewer, { changes: log.changes }) }),
+      /* @__PURE__ */ jsxs(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 6, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: formatMessage({
+          id: getTranslation("detail.snapshots"),
+          defaultMessage: "Raw snapshots"
+        }) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 2, paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({
+          id: getTranslation("detail.snapshotsHint"),
+          defaultMessage: "The document state either side of this operation, with configured sensitive fields removed. A missing snapshot means the state did not exist (a create has no before, a delete has no after) or storage for it is disabled in the plugin configuration."
+        }) }) }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+          /* @__PURE__ */ jsx(
+            JsonViewer,
+            {
+              label: formatMessage({
+                id: getTranslation("detail.before"),
+                defaultMessage: "Before"
+              }),
+              value: log.before
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(
+            JsonViewer,
+            {
+              label: formatMessage({ id: getTranslation("detail.after"), defaultMessage: "After" }),
+              value: log.after
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+};
+const ALL = "__all__";
+const FILTER_KEYS = [
+  "action",
+  "contentType",
+  "userId",
+  "locale",
+  "source",
+  "outcome",
+  "contentDocumentId",
+  "dateFrom",
+  "dateTo"
+];
+const toDate = (value) => {
+  if (!value) return void 0;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? void 0 : date;
+};
+const AuditLogFilters = ({ options, query, onChange, onClear }) => {
+  const { formatMessage } = useIntl();
+  const hasActiveFilter = FILTER_KEYS.some((key) => Boolean(query[key]));
+  const select = (key) => (value) => onChange({ [key]: value === ALL ? void 0 : String(value) });
+  const combo = (key) => (value) => onChange({ [key]: value ? String(value) : void 0 });
+  const dateChange = (key) => (date) => {
+    if (!date) {
+      onChange({ [key]: void 0 });
+      return;
+    }
+    const bounded = new Date(date);
+    if (key === "dateFrom") bounded.setHours(0, 0, 0, 0);
+    else bounded.setHours(23, 59, 59, 999);
+    onChange({ [key]: bounded.toISOString() });
+  };
+  return /* @__PURE__ */ jsxs(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 4, marginBottom: 4, children: [
+    /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { name: "action", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({ id: getTranslation("filters.action"), defaultMessage: "Action" }) }),
+        /* @__PURE__ */ jsxs(SingleSelect, { value: query.action ?? ALL, onChange: select("action"), children: [
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: ALL, children: formatMessage({ id: getTranslation("filters.all"), defaultMessage: "All" }) }),
+          options.actions.map((action) => /* @__PURE__ */ jsx(SingleSelectOption, { value: action, children: action }, action))
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { name: "contentType", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+          id: getTranslation("filters.contentType"),
+          defaultMessage: "Content type"
+        }) }),
+        /* @__PURE__ */ jsx(
+          Combobox,
+          {
+            value: query.contentType ?? "",
+            onChange: combo("contentType"),
+            onClear: () => onChange({ contentType: void 0 }),
+            placeholder: formatMessage({
+              id: getTranslation("filters.all"),
+              defaultMessage: "All"
+            }),
+            children: options.contentTypes.map(({ uid, displayName }) => /* @__PURE__ */ jsx(ComboboxOption, { value: uid, children: displayName || shortContentTypeName(uid) }, uid))
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { name: "userId", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({ id: getTranslation("filters.user"), defaultMessage: "User" }) }),
+        /* @__PURE__ */ jsx(
+          Combobox,
+          {
+            value: query.userId ?? "",
+            onChange: combo("userId"),
+            onClear: () => onChange({ userId: void 0 }),
+            placeholder: formatMessage({
+              id: getTranslation("filters.all"),
+              defaultMessage: "All"
+            }),
+            children: options.users.map(({ userId, label }) => /* @__PURE__ */ jsx(ComboboxOption, { value: userId, children: label }, userId))
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { name: "locale", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({ id: getTranslation("filters.locale"), defaultMessage: "Locale" }) }),
+        /* @__PURE__ */ jsxs(SingleSelect, { value: query.locale ?? ALL, onChange: select("locale"), children: [
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: ALL, children: formatMessage({ id: getTranslation("filters.all"), defaultMessage: "All" }) }),
+          options.locales.map((locale) => /* @__PURE__ */ jsx(SingleSelectOption, { value: locale, children: locale }, locale))
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { name: "source", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({ id: getTranslation("filters.source"), defaultMessage: "Source" }) }),
+        /* @__PURE__ */ jsxs(SingleSelect, { value: query.source ?? ALL, onChange: select("source"), children: [
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: ALL, children: formatMessage({ id: getTranslation("filters.all"), defaultMessage: "All" }) }),
+          options.sources.map((source) => /* @__PURE__ */ jsx(SingleSelectOption, { value: source, children: source }, source))
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { name: "outcome", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({ id: getTranslation("filters.outcome"), defaultMessage: "Outcome" }) }),
+        /* @__PURE__ */ jsxs(SingleSelect, { value: query.outcome ?? ALL, onChange: select("outcome"), children: [
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: ALL, children: formatMessage({ id: getTranslation("filters.all"), defaultMessage: "All" }) }),
+          options.outcomes.map((outcome) => /* @__PURE__ */ jsx(SingleSelectOption, { value: outcome, children: outcome }, outcome))
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { name: "contentDocumentId", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+          id: getTranslation("filters.documentId"),
+          defaultMessage: "Document ID"
+        }) }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            placeholder: formatMessage({
+              id: getTranslation("filters.documentIdPlaceholder"),
+              defaultMessage: "Exact document id"
+            }),
+            value: query.contentDocumentId ?? "",
+            onChange: (event) => onChange({ contentDocumentId: event.target.value || void 0 })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { name: "dateFrom", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({ id: getTranslation("filters.dateFrom"), defaultMessage: "From" }) }),
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            value: toDate(query.dateFrom),
+            onChange: dateChange("dateFrom"),
+            onClear: () => onChange({ dateFrom: void 0 }),
+            clearLabel: formatMessage({
+              id: getTranslation("filters.clearDate"),
+              defaultMessage: "Clear date"
+            })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(Field.Root, { name: "dateTo", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({ id: getTranslation("filters.dateTo"), defaultMessage: "To" }) }),
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            value: toDate(query.dateTo),
+            onChange: dateChange("dateTo"),
+            onClear: () => onChange({ dateTo: void 0 }),
+            clearLabel: formatMessage({
+              id: getTranslation("filters.clearDate"),
+              defaultMessage: "Clear date"
+            })
+          }
+        )
+      ] }) })
+    ] }),
+    hasActiveFilter ? /* @__PURE__ */ jsx(Flex, { paddingTop: 4, justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsx(Cross, {}), onClick: onClear, children: formatMessage({
+      id: getTranslation("filters.clear"),
+      defaultMessage: "Clear all filters"
+    }) }) }) : null
+  ] });
+};
+const COLUMNS = [
+  { key: "createdAt", label: "Date", sortable: true },
+  { key: "userName", label: "User", sortable: true },
+  { key: "action", label: "Action", sortable: true },
+  { key: "contentType", label: "Content type", sortable: true },
+  { key: "contentDocumentId", label: "Document ID", sortable: false },
+  { key: "locale", label: "Locale", sortable: true },
+  { key: "source", label: "Source", sortable: true },
+  { key: "outcome", label: "Outcome", sortable: true }
+];
+const SortIndicator = ({ direction }) => {
+  if (!direction) return null;
+  return direction === "asc" ? /* @__PURE__ */ jsx(CaretUp, {}) : /* @__PURE__ */ jsx(CaretDown, {});
+};
+const AuditLogTable = ({
+  logs,
+  sort,
+  onSortChange,
+  onView,
+  onDelete,
+  isLoading
+}) => {
+  const { formatMessage, locale } = useIntl();
+  const [sortField, sortDirection] = React.useMemo(() => {
+    const [field, direction] = (sort || "createdAt:desc").split(":");
+    return [field, direction === "asc" ? "asc" : "desc"];
+  }, [sort]);
+  const toggleSort = (key) => {
+    const direction = sortField === key && sortDirection === "desc" ? "asc" : "desc";
+    onSortChange(`${key}:${direction}`);
+  };
+  if (!isLoading && logs.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 8, children: /* @__PURE__ */ jsx(
+      EmptyStateLayout,
+      {
+        content: formatMessage({
+          id: getTranslation("list.empty"),
+          defaultMessage: "No audit logs match these filters. Records appear here as soon as content is created, updated, deleted, published or unpublished."
+        })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(Table, { colCount: COLUMNS.length + 1, rowCount: logs.length + 1, children: [
+    /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+      COLUMNS.map(({ key, label, sortable }) => /* @__PURE__ */ jsx(
+        Th,
+        {
+          action: sortable ? /* @__PURE__ */ jsx(SortIndicator, { direction: sortField === key ? sortDirection : null }) : void 0,
+          children: sortable ? /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "sigma",
+              tag: "button",
+              onClick: () => toggleSort(key),
+              style: { background: "none", border: 0, cursor: "pointer", padding: 0 },
+              children: formatMessage({ id: getTranslation(`list.column.${key}`), defaultMessage: label })
+            }
+          ) : /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: formatMessage({ id: getTranslation(`list.column.${key}`), defaultMessage: label }) })
+        },
+        key
+      )),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: formatMessage({ id: getTranslation("list.column.actions"), defaultMessage: "Actions" }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Tbody, { children: logs.map((log) => {
+      const colors = actionColor(log.action);
+      return /* @__PURE__ */ jsxs(Tr, { onClick: () => onView(log), style: { cursor: "pointer" }, children: [
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: formatDate(log.createdAt, locale) }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: formatUser(log) }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Badge, { backgroundColor: colors.background, textColor: colors.text, children: log.action }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", title: log.contentType, children: log.contentTypeDisplayName || shortContentTypeName(log.contentType) }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: log.contentDocumentId ?? "-" }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: log.locale ?? "-" }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: log.source }) }),
+        /* @__PURE__ */ jsx(Td, { children: log.outcome === "failure" ? /* @__PURE__ */ jsx(Badge, { backgroundColor: "danger100", textColor: "danger600", children: log.outcome }) : /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: log.outcome ?? "success" }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, justifyContent: "flex-end", onClick: (event) => event.stopPropagation(), children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: formatMessage({
+                id: getTranslation("list.view"),
+                defaultMessage: "View details"
+              }),
+              variant: "ghost",
+              onClick: () => onView(log),
+              children: /* @__PURE__ */ jsx(Eye, {})
+            }
+          ),
+          onDelete ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: formatMessage({
+                id: getTranslation("list.delete"),
+                defaultMessage: "Delete this record"
+              }),
+              variant: "ghost",
+              onClick: () => onDelete(log),
+              children: /* @__PURE__ */ jsx(Trash, {})
+            }
+          ) : null
+        ] }) })
+      ] }, log.id);
+    }) })
+  ] });
+};
+const toSearchParams = (query) => {
+  const params = new URLSearchParams();
+  for (const [key, value] of Object.entries(query)) {
+    if (value === void 0 || value === null || value === "") continue;
+    params.set(key, String(value));
+  }
+  return params.toString();
+};
+const AuditLogs = () => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const { toggleNotification } = useNotification();
+  const [{ query }, setQuery] = useQueryParams({ page: 1, pageSize: 20 });
+  const {
+    allowedActions: { canDelete },
+    isLoading: isLoadingPermissions
+  } = useRBAC(PERMISSIONS);
+  const search = React.useMemo(() => toSearchParams(query), [query]);
+  const { data, pagination, isLoading, error, refresh } = useAuditLogs(search);
+  const { options } = useAuditFilterOptions();
+  const deleteLog = useDeleteAuditLog();
+  const [pendingDelete, setPendingDelete] = React.useState(null);
+  const updateQuery = React.useCallback(
+    (patch) => {
+      setQuery({ ...patch, page: 1 });
+    },
+    [setQuery]
+  );
+  const clearFilters = React.useCallback(() => {
+    setQuery(
+      {
+        action: void 0,
+        contentType: void 0,
+        userId: void 0,
+        locale: void 0,
+        source: void 0,
+        outcome: void 0,
+        contentDocumentId: void 0,
+        dateFrom: void 0,
+        dateTo: void 0,
+        page: 1
+      },
+      "remove"
+    );
+  }, [setQuery]);
+  const confirmDelete = React.useCallback(async () => {
+    if (!pendingDelete) return;
+    try {
+      await deleteLog(pendingDelete.id);
+      toggleNotification({
+        type: "success",
+        message: formatMessage({
+          id: getTranslation("delete.success"),
+          defaultMessage: "Audit record deleted."
+        })
+      });
+      refresh();
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: getTranslation("delete.error"),
+          defaultMessage: "Could not delete this audit record."
+        })
+      });
+    } finally {
+      setPendingDelete(null);
+    }
+  }, [deleteLog, formatMessage, pendingDelete, refresh, toggleNotification]);
+  if (isLoadingPermissions) {
+    return /* @__PURE__ */ jsx(Page.Loading, {});
+  }
+  return /* @__PURE__ */ jsxs(Page.Main, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: formatMessage({ id: getTranslation("plugin.name"), defaultMessage: "Audit Logs" }) }),
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title: formatMessage({ id: getTranslation("plugin.name"), defaultMessage: "Audit Logs" }),
+        subtitle: formatMessage(
+          {
+            id: getTranslation("list.subtitle"),
+            defaultMessage: "{total, plural, =0 {No records} one {# record} other {# records}} of content changes"
+          },
+          { total: pagination.total }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Layouts.Action,
+      {
+        startActions: /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            label: formatMessage({
+              id: getTranslation("list.search"),
+              defaultMessage: "Search by document id, user, content type or request id"
+            })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(Layouts.Content, { children: [
+      /* @__PURE__ */ jsx(
+        AuditLogFilters,
+        {
+          options,
+          query,
+          onChange: updateQuery,
+          onClear: clearFilters
+        }
+      ),
+      error ? /* @__PURE__ */ jsx(Box, { background: "danger100", padding: 4, hasRadius: true, marginBottom: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: error }) }) : null,
+      isLoading ? /* @__PURE__ */ jsx(Page.Loading, {}) : /* @__PURE__ */ jsx(
+        AuditLogTable,
+        {
+          logs: data,
+          isLoading,
+          sort: String(query.sort ?? "createdAt:desc"),
+          onSortChange: (sort) => setQuery({ sort, page: 1 }),
+          onView: (log) => navigate(`${log.id}`),
+          onDelete: canDelete ? setPendingDelete : null
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(
+        Pagination.Root,
+        {
+          pageCount: pagination.pageCount,
+          total: pagination.total,
+          defaultPageSize: pagination.pageSize,
+          children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Pagination.PageSize, { options: ["10", "20", "50", "100"] }),
+            /* @__PURE__ */ jsx(Pagination.Links, {})
+          ] })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Dialog.Root,
+      {
+        open: pendingDelete !== null,
+        onOpenChange: (open) => {
+          if (!open) setPendingDelete(null);
+        },
+        children: /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: formatMessage({
+              id: getTranslation("delete.title"),
+              defaultMessage: "Delete audit record"
+            }),
+            onConfirm: confirmDelete,
+            onCancel: () => setPendingDelete(null),
+            children: formatMessage({
+              id: getTranslation("delete.confirm"),
+              defaultMessage: "Audit records are evidence of what happened to your content. Deleting one cannot be undone. Are you sure?"
+            })
+          }
+        )
+      }
+    )
+  ] });
+};
+const App = () => /* @__PURE__ */ jsx(Page.Protect, { permissions: PERMISSIONS.read, children: /* @__PURE__ */ jsxs(Routes, { children: [
+  /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(AuditLogs, {}) }),
+  /* @__PURE__ */ jsx(Route, { path: ":id", element: /* @__PURE__ */ jsx(AuditLogDetails, {}) }),
+  /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
+] }) });
+export {
+  App
+};