@10x-media/undo-redo 0.1.0-beta.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @10x-media/undo-redo
+
+## 0.1.0-beta.0
+
+### Minor Changes
+
+- Add client-side undo/redo controls to every collection and global edit view. Form-state snapshots are captured on debounced field changes and restored through the form's `REPLACE_STATE` action, covering text edits and array/blocks row additions, deletions and moves. Keyboard shortcuts are `Ctrl+Z` / `Ctrl+Shift+Z` (and `Ctrl+Y`) outside text-editing surfaces. History is in-memory per editor session and independent of Payload versions and drafts.
+
+- Extract the undo/redo logic into a `useUndoRedo` hook, exported from `@10x-media/undo-redo/client`. It owns the history, the capture debounce, the saved-state baseline and the keyboard chords, and returns `canUndo`, `canRedo`, `undo`, `redo`, `jumpTo` plus what the history inspector needs, so a host can pair `autoMount: false` with its own controls instead of restyling ours. `UndoRedoControls` is now presentation over the same hook. Shortcut targeting reads the form element from Payload's form context rather than from the controls' own DOM node, so the rule holds wherever the hook is called.
+
+### Patch Changes
+
+- Stop the history from recording a JSON field while its text does not parse. Payload keeps the raw editor text in form state as a string there, and renders the editor from `JSON.stringify(value)`, so restoring that string showed it escaped inside quotes instead of as the text the editor had. A capture taken while the text is broken now carries the field's last restorable value forward, so entries only ever describe states the form can be put back into: breaking the JSON alone records nothing, undo restores the last value that parsed, and redo never re-breaks it. The debug overlay stops reporting the field as a change that is forever pending.
+
+- Stop polymorphic relationship and upload fields from producing history entries nobody asked for. Payload hands react-select's option objects straight to form state for a `relationTo` array, so the value carries `label` and `allowEdit` next to the reference, and those move on their own: a label refreshes when the related document is saved, `allowEdit` appears once permissions resolve, and the server merge after a save replaces the whole option with the bare reference. The last one appended an entry identical to the one before it, costing an extra undo to get past. Comparison now reduces such values to `relationTo` and `value`, which is the same line Payload's own change detection draws.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 10x Media GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+![Banner](./assets/banner.jpg)
+
+# @10x-media/undo-redo
+
+Client-side undo/redo for Payload v3 admin forms. Snapshots the document form state as the editor works and steps back and forth through it, independent of Payload's document versions: nothing reaches the server until the editor saves.
+
+[![npm](https://img.shields.io/npm/v/@10x-media/undo-redo?style=flat-square)](https://www.npmjs.com/package/@10x-media/undo-redo)
+
+Part of the [@10x-media Payload plugins](https://github.com/10x-media/payload-plugins) collection. In beta: published under the `beta` dist-tag until a stable 1.0.
+
+## Features
+
+- **Controls on every edit view**, collections and globals, mounted before the document controls. Placement is overridable.
+- **Keyboard**: `Ctrl/Cmd+Z` and `Ctrl/Cmd+Shift+Z` (plus `Ctrl/Cmd+Y`), skipped inside inputs and Lexical, which own their native undo. Rebindable; tooltips render whatever is bound, in the platform's own notation.
+- **Every field type**, including array and blocks row additions, deletions and moves, restoring deleted rows with their subfield state, and conditionally hidden fields with their whole subtree.
+- **Scoped exclusions**: per collection, per global, per field via `admin.custom`, per field type, or by path pattern (`list.*.readingTime`).
+- **Payload's own fields excluded by default** (`_status`, `createdAt`, `sessions` and the rest of auth), so undo never unpublishes a document or disturbs auth state.
+- **Truthful save state**: the saved document is tracked as a baseline, so undoing back onto it reports the form clean rather than merely unchanged since load.
+- **Debug overlay** listing every entry, the paths it changed, and pending edits, with click-to-restore.
+- **Typed translations** with per-key overrides via `@10x-media/undo-redo/i18n`.
+
+## Quick start
+
+```bash
+pnpm add @10x-media/undo-redo
+```
+
+```ts
+// payload.config.ts
+import { buildConfig } from 'payload'
+import { undoRedo } from '@10x-media/undo-redo'
+
+export default buildConfig({
+  plugins: [undoRedo({})],
+})
+```
+
+Run `payload generate:importmap`. Undo/redo is on for every collection and global; `collections` and `globals` are opt-*out* maps.
+
+## Documentation
+
+Full documentation at [docs.10xmedia.de](https://docs.10xmedia.de/undo-redo):
+
+- [Overview](https://docs.10xmedia.de/undo-redo)
+- [Quick start](https://docs.10xmedia.de/undo-redo/quick-start)
+- [Configuration](https://docs.10xmedia.de/undo-redo/configuration)
+- [What is tracked](https://docs.10xmedia.de/undo-redo/what-is-tracked)
+- [Keyboard shortcuts](https://docs.10xmedia.de/undo-redo/shortcuts)
+- [Debugging](https://docs.10xmedia.de/undo-redo/debugging)
+- [i18n](https://docs.10xmedia.de/undo-redo/i18n)
+
+## License
+
+[MIT](./LICENSE). Copyright 10x Media GmbH.

package/dist/client/HistoryDebugOverlay.d.ts

@@ -0,0 +1,30 @@
+import { UndoHistory } from "../history/historyCore.js";
+import { FormState } from "payload";
+import React from "react";
+//#region src/client/HistoryDebugOverlay.d.ts
+interface HistoryDebugOverlayProps {
+  /**
+   * The live history object. Read during render rather than held in state: the
+   * owning component re-renders this overlay whenever it mutates.
+   */
+  history: UndoHistory;
+  /** Live form state, used to show edits not yet captured into an entry. */
+  fields: FormState | null;
+  /** Monotonic counter of captures and restores, shown as a liveness signal. */
+  revision: number;
+  /** False under autosave, where the saved baseline is deliberately not tracked. */
+  tracksSavedState: boolean;
+  onClose: () => void;
+  onJump: (index: number) => void;
+}
+/**
+ * Developer overlay listing every history entry with the paths it changed,
+ * which entry is current, and any pending edits still inside the capture
+ * debounce. Rendered only when the plugin runs with `debug: true`. Clicking an
+ * entry restores it, which makes stepping through a suspect sequence far
+ * cheaper than repeatedly pressing undo.
+ */
+declare const HistoryDebugOverlay: React.FC<HistoryDebugOverlayProps>;
+//#endregion
+export { HistoryDebugOverlay, HistoryDebugOverlayProps };
+//# sourceMappingURL=HistoryDebugOverlay.d.ts.map

package/dist/client/HistoryDebugOverlay.js

@@ -0,0 +1,201 @@
+"use client";
+import { deepEqual, diffComparable, isAtSavedState, projectComparable } from "../history/historyCore.js";
+import { keys } from "../translations/keys.js";
+import { useTranslation } from "../translations/useTranslation.js";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import "./historyDebugOverlay.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/HistoryDebugOverlay.tsx
+const baseClass = "undo-redo-debug";
+/** Longest rendered form of a value before it is elided in the diff table. */
+const MAX_VALUE_CHARS = 120;
+/**
+* One-line rendering of an arbitrary form value. Rich text and other deep
+* objects collapse to a truncated JSON string: the overlay answers "did this
+* path change and roughly to what", not "what is the full document".
+*/
+const formatValue = (value) => {
+	if (value === void 0) return "∅";
+	if (value === null) return "null";
+	if (typeof value === "string") return value === "" ? "''" : value;
+	let text;
+	try {
+		text = JSON.stringify(value) ?? String(value);
+	} catch {
+		text = String(value);
+	}
+	return text.length > MAX_VALUE_CHARS ? `${text.slice(0, MAX_VALUE_CHARS)}…` : text;
+};
+/** Row ids shortened to their last segment so moves stay readable in one line. */
+const formatRowIds = (ids) => ids === void 0 ? "∅" : `[${ids.map((id) => id?.slice(-4) ?? "?").join(", ")}]`;
+const DiffRows = ({ diffs }) => /* @__PURE__ */ jsx("table", {
+	className: `${baseClass}__diff`,
+	children: /* @__PURE__ */ jsx("tbody", { children: diffs.map((diff) => /* @__PURE__ */ jsxs("tr", { children: [
+		/* @__PURE__ */ jsxs("td", {
+			className: `${baseClass}__path`,
+			children: [diff.path, diff.presence ? /* @__PURE__ */ jsx("span", {
+				className: `${baseClass}__presence`,
+				children: diff.presence
+			}) : null]
+		}),
+		/* @__PURE__ */ jsx("td", {
+			className: `${baseClass}__from`,
+			children: diff.fromRowIds || diff.toRowIds ? formatRowIds(diff.fromRowIds) : formatValue(diff.from)
+		}),
+		/* @__PURE__ */ jsx("td", {
+			className: `${baseClass}__arrow`,
+			"aria-hidden": "true",
+			children: "→"
+		}),
+		/* @__PURE__ */ jsx("td", {
+			className: `${baseClass}__to`,
+			children: diff.fromRowIds || diff.toRowIds ? formatRowIds(diff.toRowIds) : formatValue(diff.to)
+		})
+	] }, diff.path)) })
+});
+/**
+* Developer overlay listing every history entry with the paths it changed,
+* which entry is current, and any pending edits still inside the capture
+* debounce. Rendered only when the plugin runs with `debug: true`. Clicking an
+* entry restores it, which makes stepping through a suspect sequence far
+* cheaper than repeatedly pressing undo.
+*/
+const HistoryDebugOverlay = ({ history, fields, revision, tracksSavedState, onClose, onJump }) => {
+	const { t } = useTranslation();
+	/** Entry id, not index: the cap evicts from the front and shifts indexes. */
+	const [expanded, setExpanded] = useState(null);
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => setMounted(true), []);
+	useEffect(() => {
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [onClose]);
+	if (!mounted) return null;
+	const pending = fields ? diffComparable(history.stack[history.index]?.comparable ?? {}, projectComparable(history, fields)) : [];
+	const copy = () => {
+		const payload = history.stack.map((entry, index) => ({
+			index,
+			current: index === history.index,
+			changed: diffComparable(history.stack[index - 1]?.comparable ?? {}, entry.comparable)
+		}));
+		navigator.clipboard?.writeText(JSON.stringify(payload, null, 2));
+	};
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: baseClass,
+		role: "dialog",
+		"aria-label": t(keys.debugTitle),
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: `${baseClass}__header`,
+			children: [
+				/* @__PURE__ */ jsx("strong", {
+					className: `${baseClass}__title`,
+					children: t(keys.debugTitle)
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: `${baseClass}__meta`,
+					children: [
+						history.stack.length === 0 ? 0 : history.index + 1,
+						"/",
+						history.stack.length,
+						" ·",
+						" ",
+						!tracksSavedState ? "autosave, no baseline" : history.savedComparable ? isAtSavedState(history) ? "clean" : "unsaved" : "no baseline",
+						" ",
+						"· rev ",
+						revision
+					]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					className: `${baseClass}__action`,
+					onClick: copy,
+					type: "button",
+					children: t(keys.debugCopy)
+				}),
+				/* @__PURE__ */ jsx("button", {
+					"aria-label": t(keys.debugClose),
+					className: `${baseClass}__action`,
+					onClick: onClose,
+					type: "button",
+					children: "✕"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: `${baseClass}__body`,
+			children: [
+				history.stack.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: `${baseClass}__empty`,
+					children: t(keys.debugEmpty)
+				}) : null,
+				history.stack.map((entry, index) => {
+					const changed = diffComparable(history.stack[index - 1]?.comparable ?? {}, entry.comparable);
+					const isCurrent = index === history.index;
+					const isOpen = expanded === entry.id;
+					const isSaved = history.savedComparable !== null && deepEqual(entry.comparable, history.savedComparable);
+					return /* @__PURE__ */ jsxs("section", {
+						className: `${baseClass}__entry${isCurrent ? ` ${baseClass}__entry--current` : ""}`,
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: `${baseClass}__entryHead`,
+							children: [/* @__PURE__ */ jsxs("button", {
+								"aria-expanded": isOpen,
+								className: `${baseClass}__toggle`,
+								onClick: () => setExpanded(isOpen ? null : entry.id),
+								type: "button",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: `${baseClass}__caret`,
+										"aria-hidden": "true",
+										children: isOpen ? "▾" : "▸"
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: `${baseClass}__index`,
+										children: ["#", index]
+									}),
+									isSaved ? /* @__PURE__ */ jsx("span", {
+										className: `${baseClass}__saved`,
+										title: "matches the persisted document",
+										children: "saved"
+									}) : null,
+									/* @__PURE__ */ jsx("span", {
+										className: `${baseClass}__summary`,
+										children: index === 0 ? t(keys.debugOriginal) : changed.map((diff) => diff.path).join(", ") || "(no visible change)"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: `${baseClass}__count`,
+										children: changed.length
+									})
+								]
+							}), /* @__PURE__ */ jsx("button", {
+								className: `${baseClass}__jump`,
+								disabled: isCurrent,
+								onClick: () => onJump(index),
+								type: "button",
+								children: "restore"
+							})]
+						}), isOpen && changed.length > 0 ? /* @__PURE__ */ jsx(DiffRows, { diffs: changed }) : null]
+					}, entry.id);
+				}),
+				pending.length > 0 ? /* @__PURE__ */ jsxs("section", {
+					className: `${baseClass}__entry ${baseClass}__entry--pending`,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: `${baseClass}__entryHead`,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: `${baseClass}__summary`,
+							children: t(keys.debugPending)
+						}), /* @__PURE__ */ jsx("span", {
+							className: `${baseClass}__count`,
+							children: pending.length
+						})]
+					}), /* @__PURE__ */ jsx(DiffRows, { diffs: pending })]
+				}) : null
+			]
+		})]
+	}), document.body);
+};
+//#endregion
+export { HistoryDebugOverlay };
+
+//# sourceMappingURL=HistoryDebugOverlay.js.map

package/dist/client/HistoryDebugOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistoryDebugOverlay.js","names":[],"sources":["../../src/client/HistoryDebugOverlay.tsx"],"sourcesContent":["'use client'\nimport type { FormState } from 'payload'\nimport type React from 'react'\nimport { useEffect, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport {\n\ttype ComparableDiff,\n\tdeepEqual,\n\tdiffComparable,\n\tisAtSavedState,\n\tprojectComparable,\n\ttype UndoHistory,\n} from '../history/historyCore'\nimport { keys } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport './historyDebugOverlay.css'\n\nconst baseClass = 'undo-redo-debug'\n\n/** Longest rendered form of a value before it is elided in the diff table. */\nconst MAX_VALUE_CHARS = 120\n\n/**\n * One-line rendering of an arbitrary form value. Rich text and other deep\n * objects collapse to a truncated JSON string: the overlay answers \"did this\n * path change and roughly to what\", not \"what is the full document\".\n */\nconst formatValue = (value: unknown): string => {\n\tif (value === undefined) return '∅'\n\tif (value === null) return 'null'\n\tif (typeof value === 'string') return value === '' ? \"''\" : value\n\tlet text: string\n\ttry {\n\t\ttext = JSON.stringify(value) ?? String(value)\n\t} catch {\n\t\ttext = String(value)\n\t}\n\treturn text.length > MAX_VALUE_CHARS ? `${text.slice(0, MAX_VALUE_CHARS)}…` : text\n}\n\n/** Row ids shortened to their last segment so moves stay readable in one line. */\nconst formatRowIds = (ids: (string | undefined)[] | undefined): string =>\n\tids === undefined ? '∅' : `[${ids.map((id) => id?.slice(-4) ?? '?').join(', ')}]`\n\nconst DiffRows: React.FC<{ diffs: ComparableDiff[] }> = ({ diffs }) => (\n\t<table className={`${baseClass}__diff`}>\n\t\t<tbody>\n\t\t\t{diffs.map((diff) => (\n\t\t\t\t<tr key={diff.path}>\n\t\t\t\t\t<td className={`${baseClass}__path`}>\n\t\t\t\t\t\t{diff.path}\n\t\t\t\t\t\t{diff.presence ? (\n\t\t\t\t\t\t\t<span className={`${baseClass}__presence`}>{diff.presence}</span>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td className={`${baseClass}__from`}>\n\t\t\t\t\t\t{diff.fromRowIds || diff.toRowIds\n\t\t\t\t\t\t\t? formatRowIds(diff.fromRowIds)\n\t\t\t\t\t\t\t: formatValue(diff.from)}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td className={`${baseClass}__arrow`} aria-hidden=\"true\">\n\t\t\t\t\t\t→\n\t\t\t\t\t</td>\n\t\t\t\t\t<td className={`${baseClass}__to`}>\n\t\t\t\t\t\t{diff.fromRowIds || diff.toRowIds ? formatRowIds(diff.toRowIds) : formatValue(diff.to)}\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t))}\n\t\t</tbody>\n\t</table>\n)\n\nexport interface HistoryDebugOverlayProps {\n\t/**\n\t * The live history object. Read during render rather than held in state: the\n\t * owning component re-renders this overlay whenever it mutates.\n\t */\n\thistory: UndoHistory\n\t/** Live form state, used to show edits not yet captured into an entry. */\n\tfields: FormState | null\n\t/** Monotonic counter of captures and restores, shown as a liveness signal. */\n\trevision: number\n\t/** False under autosave, where the saved baseline is deliberately not tracked. */\n\ttracksSavedState: boolean\n\tonClose: () => void\n\tonJump: (index: number) => void\n}\n\n/**\n * Developer overlay listing every history entry with the paths it changed,\n * which entry is current, and any pending edits still inside the capture\n * debounce. Rendered only when the plugin runs with `debug: true`. Clicking an\n * entry restores it, which makes stepping through a suspect sequence far\n * cheaper than repeatedly pressing undo.\n */\nexport const HistoryDebugOverlay: React.FC<HistoryDebugOverlayProps> = ({\n\thistory,\n\tfields,\n\trevision,\n\ttracksSavedState,\n\tonClose,\n\tonJump,\n}) => {\n\tconst { t } = useTranslation()\n\t/** Entry id, not index: the cap evicts from the front and shifts indexes. */\n\tconst [expanded, setExpanded] = useState<number | null>(null)\n\tconst [mounted, setMounted] = useState(false)\n\n\t// Portals need a DOM target, which does not exist during the server render.\n\tuseEffect(() => setMounted(true), [])\n\n\tuseEffect(() => {\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') onClose()\n\t\t}\n\t\tdocument.addEventListener('keydown', onKeyDown)\n\t\treturn () => document.removeEventListener('keydown', onKeyDown)\n\t}, [onClose])\n\n\tif (!mounted) return null\n\n\t// Projected through the history's own settings, not extracted raw: otherwise\n\t// a path the host opted out of, or one holding a value no restore could put\n\t// back, shows up here as a change that is forever \"pending\", since it is\n\t// never going to be captured.\n\tconst pending = fields\n\t\t? diffComparable(\n\t\t\t\thistory.stack[history.index]?.comparable ?? {},\n\t\t\t\tprojectComparable(history, fields)\n\t\t\t)\n\t\t: []\n\n\tconst copy = () => {\n\t\tconst payload = history.stack.map((entry, index) => ({\n\t\t\tindex,\n\t\t\tcurrent: index === history.index,\n\t\t\tchanged: diffComparable(history.stack[index - 1]?.comparable ?? {}, entry.comparable),\n\t\t}))\n\t\tvoid navigator.clipboard?.writeText(JSON.stringify(payload, null, 2))\n\t}\n\n\treturn createPortal(\n\t\t<div className={baseClass} role=\"dialog\" aria-label={t(keys.debugTitle)}>\n\t\t\t<header className={`${baseClass}__header`}>\n\t\t\t\t<strong className={`${baseClass}__title`}>{t(keys.debugTitle)}</strong>\n\t\t\t\t<span className={`${baseClass}__meta`}>\n\t\t\t\t\t{history.stack.length === 0 ? 0 : history.index + 1}/{history.stack.length} ·{' '}\n\t\t\t\t\t{!tracksSavedState\n\t\t\t\t\t\t? 'autosave, no baseline'\n\t\t\t\t\t\t: history.savedComparable\n\t\t\t\t\t\t\t? isAtSavedState(history)\n\t\t\t\t\t\t\t\t? 'clean'\n\t\t\t\t\t\t\t\t: 'unsaved'\n\t\t\t\t\t\t\t: 'no baseline'}{' '}\n\t\t\t\t\t· rev {revision}\n\t\t\t\t</span>\n\t\t\t\t<button className={`${baseClass}__action`} onClick={copy} type=\"button\">\n\t\t\t\t\t{t(keys.debugCopy)}\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\taria-label={t(keys.debugClose)}\n\t\t\t\t\tclassName={`${baseClass}__action`}\n\t\t\t\t\tonClick={onClose}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t>\n\t\t\t\t\t✕\n\t\t\t\t</button>\n\t\t\t</header>\n\n\t\t\t<div className={`${baseClass}__body`}>\n\t\t\t\t{history.stack.length === 0 ? (\n\t\t\t\t\t<p className={`${baseClass}__empty`}>{t(keys.debugEmpty)}</p>\n\t\t\t\t) : null}\n\n\t\t\t\t{history.stack.map((entry, index) => {\n\t\t\t\t\tconst changed = diffComparable(\n\t\t\t\t\t\thistory.stack[index - 1]?.comparable ?? {},\n\t\t\t\t\t\tentry.comparable\n\t\t\t\t\t)\n\t\t\t\t\tconst isCurrent = index === history.index\n\t\t\t\t\tconst isOpen = expanded === entry.id\n\t\t\t\t\t// Compared by value, so more than one entry can read as saved,\n\t\t\t\t\t// which is correct: they hold the same form state.\n\t\t\t\t\tconst isSaved =\n\t\t\t\t\t\thistory.savedComparable !== null && deepEqual(entry.comparable, history.savedComparable)\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<section\n\t\t\t\t\t\t\tclassName={`${baseClass}__entry${isCurrent ? ` ${baseClass}__entry--current` : ''}`}\n\t\t\t\t\t\t\tkey={entry.id}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className={`${baseClass}__entryHead`}>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\taria-expanded={isOpen}\n\t\t\t\t\t\t\t\t\tclassName={`${baseClass}__toggle`}\n\t\t\t\t\t\t\t\t\tonClick={() => setExpanded(isOpen ? null : entry.id)}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className={`${baseClass}__caret`} aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t{isOpen ? '▾' : '▸'}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className={`${baseClass}__index`}>#{index}</span>\n\t\t\t\t\t\t\t\t\t{isSaved ? (\n\t\t\t\t\t\t\t\t\t\t<span className={`${baseClass}__saved`} title=\"matches the persisted document\">\n\t\t\t\t\t\t\t\t\t\t\tsaved\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t<span className={`${baseClass}__summary`}>\n\t\t\t\t\t\t\t\t\t\t{index === 0\n\t\t\t\t\t\t\t\t\t\t\t? t(keys.debugOriginal)\n\t\t\t\t\t\t\t\t\t\t\t: changed.map((diff) => diff.path).join(', ') || '(no visible change)'}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className={`${baseClass}__count`}>{changed.length}</span>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclassName={`${baseClass}__jump`}\n\t\t\t\t\t\t\t\t\tdisabled={isCurrent}\n\t\t\t\t\t\t\t\t\tonClick={() => onJump(index)}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\trestore\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{isOpen && changed.length > 0 ? <DiffRows diffs={changed} /> : null}\n\t\t\t\t\t\t</section>\n\t\t\t\t\t)\n\t\t\t\t})}\n\n\t\t\t\t{pending.length > 0 ? (\n\t\t\t\t\t<section className={`${baseClass}__entry ${baseClass}__entry--pending`}>\n\t\t\t\t\t\t<div className={`${baseClass}__entryHead`}>\n\t\t\t\t\t\t\t<span className={`${baseClass}__summary`}>{t(keys.debugPending)}</span>\n\t\t\t\t\t\t\t<span className={`${baseClass}__count`}>{pending.length}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<DiffRows diffs={pending} />\n\t\t\t\t\t</section>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</div>,\n\t\tdocument.body\n\t)\n}\n"],"mappings":"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"}

package/dist/client/UndoRedoControls.d.ts

@@ -0,0 +1,18 @@
+import { ControlsClientProps } from "../plugin/options.js";
+import React from "react";
+//#region src/client/UndoRedoControls.d.ts
+/**
+ * Every setting is optional so the component stays usable when a host mounts it
+ * by hand (`autoMount: false`) rather than through the plugin, which always
+ * passes a fully resolved set.
+ */
+type UndoRedoControlsProps = Partial<ControlsClientProps>;
+/**
+ * Undo/redo buttons for the document edit view. Thin presentation over
+ * `useUndoRedo`, which owns the history: a host that wants different markup can
+ * call that hook directly instead of restyling this.
+ */
+declare const UndoRedoControls: React.FC<UndoRedoControlsProps>;
+//#endregion
+export { UndoRedoControls, UndoRedoControlsProps };
+//# sourceMappingURL=UndoRedoControls.d.ts.map

package/dist/client/UndoRedoControls.js

@@ -0,0 +1,155 @@
+"use client";
+import { keys } from "../translations/keys.js";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
+import { HistoryDebugOverlay } from "./HistoryDebugOverlay.js";
+import { formatShortcut, isMacPlatform } from "./formatShortcut.js";
+import { useUndoRedo } from "./useUndoRedo.js";
+import { useEffect, useMemo, useState } from "react";
+import { Button, useFormProcessing } from "@payloadcms/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./undoRedoControls.css";
+//#region src/client/UndoRedoControls.tsx
+const baseClass = "undo-redo-controls";
+/**
+* Resolved after mount rather than during render: the server render has no
+* `navigator`, so deciding there would either hydrate into a mismatch or lock
+* every user to the non-mac notation. The value only feeds tooltip text, which
+* nobody can hover before the first paint.
+*/
+const useIsMac = () => {
+	const [isMac, setIsMac] = useState(false);
+	useEffect(() => setIsMac(isMacPlatform()), []);
+	return isMac;
+};
+const UndoIcon = () => /* @__PURE__ */ jsxs("svg", {
+	width: "18",
+	height: "18",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ jsx("path", { d: "M3 7v6h6" }), /* @__PURE__ */ jsx("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })]
+});
+const RedoIcon = () => /* @__PURE__ */ jsxs("svg", {
+	width: "18",
+	height: "18",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ jsx("path", { d: "M21 7v6h-6" }), /* @__PURE__ */ jsx("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13" })]
+});
+const HistoryIcon = () => /* @__PURE__ */ jsxs("svg", {
+	width: "18",
+	height: "18",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }),
+		/* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+		/* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })
+	]
+});
+/**
+* Undo/redo buttons for the document edit view. Thin presentation over
+* `useUndoRedo`, which owns the history: a host that wants different markup can
+* call that hook directly instead of restyling this.
+*/
+const UndoRedoControls = (props) => {
+	const { debug = false } = props;
+	const { canRedo, canUndo, chords, fields, history, jumpTo, redo, revision, tracksSavedState, undo } = useUndoRedo(props);
+	const processing = useFormProcessing();
+	const { t } = useTranslation$1();
+	const isMac = useIsMac();
+	const [overlayOpen, setOverlayOpen] = useState(false);
+	/**
+	* Button labels, and the same labels with the bound chord appended for the
+	* tooltip. Only the first chord is shown: the rest are aliases for the same
+	* action, and listing them turns a hint into something to read.
+	*
+	* The shortcut stays out of the accessible name on purpose, since a screen
+	* reader announces `⇧⌘Z` as punctuation rather than as a key combination.
+	*/
+	const labels = useMemo(() => {
+		const withChord = (label, chord) => {
+			const hint = chord ? formatShortcut(chord, isMac) : "";
+			return hint ? `${label} (${hint})` : label;
+		};
+		const undoLabel = t(keys.undo);
+		const redoLabel = t(keys.redo);
+		return {
+			redo: redoLabel,
+			redoTooltip: withChord(redoLabel, chords?.redo[0]),
+			undo: undoLabel,
+			undoTooltip: withChord(undoLabel, chords?.undo[0])
+		};
+	}, [
+		chords,
+		isMac,
+		t
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: baseClass,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				buttonStyle: "subtle",
+				className: `${baseClass}__button ${baseClass}__undo`,
+				disabled: !canUndo || processing,
+				extraButtonProps: { "aria-label": labels.undo },
+				margin: false,
+				onClick: undo,
+				tooltip: labels.undoTooltip,
+				children: /* @__PURE__ */ jsx(UndoIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				buttonStyle: "subtle",
+				className: `${baseClass}__button ${baseClass}__redo`,
+				disabled: !canRedo || processing,
+				extraButtonProps: { "aria-label": labels.redo },
+				margin: false,
+				onClick: redo,
+				tooltip: labels.redoTooltip,
+				children: /* @__PURE__ */ jsx(RedoIcon, {})
+			}),
+			debug ? /* @__PURE__ */ jsx(Button, {
+				buttonStyle: "subtle",
+				className: [
+					`${baseClass}__button`,
+					`${baseClass}__debug`,
+					overlayOpen ? `${baseClass}__button--active` : ""
+				].filter(Boolean).join(" "),
+				extraButtonProps: {
+					"aria-expanded": overlayOpen,
+					"aria-label": t(keys.debug)
+				},
+				margin: false,
+				onClick: () => setOverlayOpen((open) => !open),
+				tooltip: t(keys.debugTooltip),
+				children: /* @__PURE__ */ jsx(HistoryIcon, {})
+			}) : null,
+			debug && overlayOpen ? /* @__PURE__ */ jsx(HistoryDebugOverlay, {
+				fields,
+				history,
+				onClose: () => setOverlayOpen(false),
+				onJump: jumpTo,
+				revision,
+				tracksSavedState
+			}) : null
+		]
+	});
+};
+//#endregion
+export { UndoRedoControls };
+
+//# sourceMappingURL=UndoRedoControls.js.map

package/dist/client/UndoRedoControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UndoRedoControls.js","names":["useTranslation"],"sources":["../../src/client/UndoRedoControls.tsx"],"sourcesContent":["'use client'\nimport { Button, useFormProcessing } from '@payloadcms/ui'\nimport type React from 'react'\nimport { useEffect, useMemo, useState } from 'react'\n\nimport type { ControlsClientProps } from '../plugin/options'\nimport { keys } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport { formatShortcut, isMacPlatform } from './formatShortcut'\nimport { HistoryDebugOverlay } from './HistoryDebugOverlay'\nimport { useUndoRedo } from './useUndoRedo'\nimport './undoRedoControls.css'\n\nconst baseClass = 'undo-redo-controls'\n\n/**\n * Resolved after mount rather than during render: the server render has no\n * `navigator`, so deciding there would either hydrate into a mismatch or lock\n * every user to the non-mac notation. The value only feeds tooltip text, which\n * nobody can hover before the first paint.\n */\nconst useIsMac = (): boolean => {\n\tconst [isMac, setIsMac] = useState(false)\n\tuseEffect(() => setIsMac(isMacPlatform()), [])\n\treturn isMac\n}\n\nconst UndoIcon: React.FC = () => (\n\t<svg\n\t\twidth=\"18\"\n\t\theight=\"18\"\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke=\"currentColor\"\n\t\tstrokeWidth=\"2\"\n\t\tstrokeLinecap=\"round\"\n\t\tstrokeLinejoin=\"round\"\n\t\taria-hidden=\"true\"\n\t>\n\t\t<path d=\"M3 7v6h6\" />\n\t\t<path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\" />\n\t</svg>\n)\n\nconst RedoIcon: React.FC = () => (\n\t<svg\n\t\twidth=\"18\"\n\t\theight=\"18\"\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke=\"currentColor\"\n\t\tstrokeWidth=\"2\"\n\t\tstrokeLinecap=\"round\"\n\t\tstrokeLinejoin=\"round\"\n\t\taria-hidden=\"true\"\n\t>\n\t\t<path d=\"M21 7v6h-6\" />\n\t\t<path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\" />\n\t</svg>\n)\n\nconst HistoryIcon: React.FC = () => (\n\t<svg\n\t\twidth=\"18\"\n\t\theight=\"18\"\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke=\"currentColor\"\n\t\tstrokeWidth=\"2\"\n\t\tstrokeLinecap=\"round\"\n\t\tstrokeLinejoin=\"round\"\n\t\taria-hidden=\"true\"\n\t>\n\t\t<path d=\"M3 12a9 9 0 1 0 3-6.7L3 8\" />\n\t\t<path d=\"M3 3v5h5\" />\n\t\t<path d=\"M12 7v5l3 2\" />\n\t</svg>\n)\n\n/**\n * Every setting is optional so the component stays usable when a host mounts it\n * by hand (`autoMount: false`) rather than through the plugin, which always\n * passes a fully resolved set.\n */\nexport type UndoRedoControlsProps = Partial<ControlsClientProps>\n\n/**\n * Undo/redo buttons for the document edit view. Thin presentation over\n * `useUndoRedo`, which owns the history: a host that wants different markup can\n * call that hook directly instead of restyling this.\n */\nexport const UndoRedoControls: React.FC<UndoRedoControlsProps> = (props) => {\n\tconst { debug = false } = props\n\tconst {\n\t\tcanRedo,\n\t\tcanUndo,\n\t\tchords,\n\t\tfields,\n\t\thistory,\n\t\tjumpTo,\n\t\tredo,\n\t\trevision,\n\t\ttracksSavedState,\n\t\tundo,\n\t} = useUndoRedo(props)\n\tconst processing = useFormProcessing()\n\tconst { t } = useTranslation()\n\tconst isMac = useIsMac()\n\tconst [overlayOpen, setOverlayOpen] = useState(false)\n\n\t/**\n\t * Button labels, and the same labels with the bound chord appended for the\n\t * tooltip. Only the first chord is shown: the rest are aliases for the same\n\t * action, and listing them turns a hint into something to read.\n\t *\n\t * The shortcut stays out of the accessible name on purpose, since a screen\n\t * reader announces `⇧⌘Z` as punctuation rather than as a key combination.\n\t */\n\tconst labels = useMemo(() => {\n\t\tconst withChord = (label: string, chord: string | undefined) => {\n\t\t\tconst hint = chord ? formatShortcut(chord, isMac) : ''\n\t\t\treturn hint ? `${label} (${hint})` : label\n\t\t}\n\t\tconst undoLabel = t(keys.undo)\n\t\tconst redoLabel = t(keys.redo)\n\t\treturn {\n\t\t\tredo: redoLabel,\n\t\t\tredoTooltip: withChord(redoLabel, chords?.redo[0]),\n\t\t\tundo: undoLabel,\n\t\t\tundoTooltip: withChord(undoLabel, chords?.undo[0]),\n\t\t}\n\t}, [chords, isMac, t])\n\n\treturn (\n\t\t<div className={baseClass}>\n\t\t\t<Button\n\t\t\t\tbuttonStyle=\"subtle\"\n\t\t\t\tclassName={`${baseClass}__button ${baseClass}__undo`}\n\t\t\t\tdisabled={!canUndo || processing}\n\t\t\t\t// Button's own `aria-label` prop is also written to `title`, and the\n\t\t\t\t// native title tooltip then covers Payload's. Going through\n\t\t\t\t// `extraButtonProps`, which is spread last, sets the accessible name\n\t\t\t\t// without the title.\n\t\t\t\textraButtonProps={{ 'aria-label': labels.undo }}\n\t\t\t\tmargin={false}\n\t\t\t\tonClick={undo}\n\t\t\t\ttooltip={labels.undoTooltip}\n\t\t\t>\n\t\t\t\t<UndoIcon />\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tbuttonStyle=\"subtle\"\n\t\t\t\tclassName={`${baseClass}__button ${baseClass}__redo`}\n\t\t\t\tdisabled={!canRedo || processing}\n\t\t\t\textraButtonProps={{ 'aria-label': labels.redo }}\n\t\t\t\tmargin={false}\n\t\t\t\tonClick={redo}\n\t\t\t\ttooltip={labels.redoTooltip}\n\t\t\t>\n\t\t\t\t<RedoIcon />\n\t\t\t</Button>\n\t\t\t{debug ? (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonStyle=\"subtle\"\n\t\t\t\t\tclassName={[\n\t\t\t\t\t\t`${baseClass}__button`,\n\t\t\t\t\t\t`${baseClass}__debug`,\n\t\t\t\t\t\toverlayOpen ? `${baseClass}__button--active` : '',\n\t\t\t\t\t]\n\t\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t\t.join(' ')}\n\t\t\t\t\textraButtonProps={{ 'aria-expanded': overlayOpen, 'aria-label': t(keys.debug) }}\n\t\t\t\t\tmargin={false}\n\t\t\t\t\tonClick={() => setOverlayOpen((open) => !open)}\n\t\t\t\t\ttooltip={t(keys.debugTooltip)}\n\t\t\t\t>\n\t\t\t\t\t<HistoryIcon />\n\t\t\t\t</Button>\n\t\t\t) : null}\n\t\t\t{debug && overlayOpen ? (\n\t\t\t\t<HistoryDebugOverlay\n\t\t\t\t\tfields={fields}\n\t\t\t\t\thistory={history}\n\t\t\t\t\tonClose={() => setOverlayOpen(false)}\n\t\t\t\t\tonJump={jumpTo}\n\t\t\t\t\trevision={revision}\n\t\t\t\t\ttracksSavedState={tracksSavedState}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</div>\n\t)\n}\n"],"mappings":"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"}