@abinnovision/payloadcms-mcpx 2.0.0-beta.18 → 2.0.0-beta.20

package/dist/admin/capability-matrix.mjs

@@ -1,16 +1,69 @@
 "use client";
-import { CAPABILITIES_FIELD } from "../capabilities.mjs";
-import { CAPABILITY_OPERATIONS, STORED_OPERATIONS, capabilityPaths, toolPath } from "../api-keys/capability-matrix.mjs";
+import { ACCESS_CHAIN, CAPABILITIES_FIELD } from "../capabilities.mjs";
+import { capabilityPaths, toolPath } from "../api-keys/capability-matrix.mjs";
+import { translateStatic } from "../i18n.mjs";
 import { accessLevelOf, accessLevelsOf, allAccessLevel, allDeleteMode, buildToggleActions, deleteModeOf, toolsState } from "./capability-toggles.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, CheckboxInput, FieldDescription, FieldLabel, Pill, useForm, useFormFields } from "@payloadcms/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, CheckboxInput, FieldDescription, FieldLabel, Pill, useConfig, useForm, useFormFields, useTranslation } from "@payloadcms/ui";
 import { useCallback, useMemo } from "react";
 //#region src/admin/capability-matrix.tsx
 const BASE_CLASS = "mcpx-capabilities";
 const LIVE_WRITE = "Writes go live immediately.";
+const cx = (...names) => names.filter(Boolean).join(" ");
 const SHEET = `
 .${BASE_CLASS} tbody tr:hover { background: var(--theme-elevation-50); }
-.${BASE_CLASS} section:last-of-type { margin-bottom: 0; }
+.${BASE_CLASS}__sections {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--base) calc(var(--base) * 2);
+	align-items: flex-start;
+}
+.${BASE_CLASS}__table {
+	table-layout: fixed;
+	width: auto;
+	border-collapse: separate;
+	border-spacing: 0;
+	text-align: left;
+}
+.${BASE_CLASS}__table thead { background: var(--theme-elevation-50); }
+.${BASE_CLASS}__table th,
+.${BASE_CLASS}__table td {
+	padding: calc(var(--base) * 0.6);
+	vertical-align: middle;
+	font-weight: normal;
+	text-align: center;
+}
+.${BASE_CLASS}__table thead th { color: var(--theme-elevation-400); }
+.${BASE_CLASS}__table .${BASE_CLASS}__head { white-space: nowrap; }
+.${BASE_CLASS}__table .${BASE_CLASS}__start { text-align: start; }
+.${BASE_CLASS}__table .${BASE_CLASS}__row,
+.${BASE_CLASS}__table .${BASE_CLASS}__title {
+	padding-inline-start: calc(var(--base) * 0.8);
+	text-align: inherit;
+}
+.${BASE_CLASS}__table .${BASE_CLASS}__row { word-break: break-word; }
+.${BASE_CLASS}__table thead .${BASE_CLASS}__row { color: var(--theme-elevation-500); }
+.${BASE_CLASS}__table .${BASE_CLASS}__title {
+	font-size: 0.8em;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+}
+.${BASE_CLASS}__table td:last-child { padding-inline-end: calc(var(--base) * 0.8); }
+.${BASE_CLASS}__table thead tr:first-child th:first-child { border-start-start-radius: var(--style-radius-s); }
+.${BASE_CLASS}__table thead tr:first-child th:last-child { border-start-end-radius: var(--style-radius-s); }
+.${BASE_CLASS}__table thead tr:last-child > * { border-bottom: 1px solid var(--theme-border-color); }
+.${BASE_CLASS}__hint { display: block; color: var(--theme-elevation-400); }
+.${BASE_CLASS}__badge {
+	display: inline-flex;
+	margin-inline-start: calc(var(--base) * 0.4);
+	vertical-align: middle;
+	cursor: help;
+}
+.${BASE_CLASS}__delete {
+	display: inline-flex;
+	align-items: center;
+	gap: calc(var(--base) * 0.4);
+}
 .${BASE_CLASS}__segments {
 	display: inline-flex;
 	border: 1px solid var(--theme-elevation-150);
@@ -22,82 +75,22 @@ const SHEET = `
 .${BASE_CLASS}__segments .btn:first-child { border-start-start-radius: inherit; border-end-start-radius: inherit; }
 .${BASE_CLASS}__segments .btn:last-child { border-start-end-radius: inherit; border-end-end-radius: inherit; }
 .${BASE_CLASS}__segments .btn--style-transparent { --hover-bg: var(--theme-elevation-100); }
-.${BASE_CLASS}__segments .${BASE_CLASS}__danger { --bg-color: var(--theme-error-500); --hover-bg: var(--theme-error-600); }
+.${BASE_CLASS}__shield {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: calc(var(--base) * 0.2);
+	border: 0;
+	border-radius: var(--style-radius-s);
+	background: transparent;
+	color: var(--theme-elevation-800);
+	line-height: 0;
+	cursor: pointer;
+}
+.${BASE_CLASS}__shield:hover:not(:disabled) { background: var(--theme-elevation-100); }
+.${BASE_CLASS}__shield:disabled { cursor: not-allowed; opacity: 0.6; }
+.${BASE_CLASS}__shield.${BASE_CLASS}__danger { color: var(--theme-error-500); }
 `;
-const CELL_PADDING = "calc(var(--base) * 0.6)";
-const EDGE_PADDING = "calc(var(--base) * 0.8)";
-const styles = {
-	section: { marginBottom: "var(--base)" },
-	table: {
-		tableLayout: "fixed",
-		width: "auto",
-		borderCollapse: "separate",
-		borderSpacing: 0,
-		textAlign: "left"
-	},
-	head: { background: "var(--theme-elevation-50)" },
-	headTitle: {
-		padding: `${CELL_PADDING} ${CELL_PADDING} ${CELL_PADDING} ${EDGE_PADDING}`,
-		verticalAlign: "middle",
-		fontSize: "0.8em",
-		letterSpacing: "0.08em",
-		textTransform: "uppercase",
-		color: "var(--theme-elevation-400)",
-		fontWeight: "normal"
-	},
-	headOperation: {
-		padding: CELL_PADDING,
-		verticalAlign: "middle",
-		color: "var(--theme-elevation-400)",
-		fontWeight: "normal",
-		textAlign: "center",
-		whiteSpace: "nowrap"
-	},
-	headLabel: {
-		padding: `${CELL_PADDING} ${CELL_PADDING} ${CELL_PADDING} ${EDGE_PADDING}`,
-		verticalAlign: "middle",
-		color: "var(--theme-elevation-500)",
-		fontWeight: "normal"
-	},
-	rule: { borderBottom: "1px solid var(--theme-border-color)" },
-	topStart: { borderStartStartRadius: "var(--style-radius-s)" },
-	topEnd: { borderStartEndRadius: "var(--style-radius-s)" },
-	rowHeader: {
-		padding: `${CELL_PADDING} ${CELL_PADDING} ${CELL_PADDING} ${EDGE_PADDING}`,
-		verticalAlign: "middle",
-		fontWeight: "normal",
-		wordBreak: "break-word"
-	},
-	hint: {
-		display: "block",
-		color: "var(--theme-elevation-400)"
-	},
-	badge: {
-		display: "inline-flex",
-		marginInlineStart: "calc(var(--base) * 0.4)",
-		verticalAlign: "middle",
-		cursor: "help"
-	},
-	visuallyHidden: {
-		position: "absolute",
-		width: "1px",
-		height: "1px",
-		overflow: "hidden",
-		clip: "rect(0 0 0 0)",
-		whiteSpace: "nowrap"
-	},
-	cell: {
-		padding: CELL_PADDING,
-		verticalAlign: "middle",
-		textAlign: "center"
-	},
-	controlCell: {
-		padding: CELL_PADDING,
-		verticalAlign: "middle",
-		textAlign: "start"
-	},
-	lastCell: { paddingInlineEnd: EDGE_PADDING }
-};
 const Box = ({ label, onChange, readOnly, state }) => /*#__PURE__*/ jsx(CheckboxInput, {
 	checked: state === "on",
 	name: label,
@@ -105,33 +98,17 @@ const Box = ({ label, onChange, readOnly, state }) => /*#__PURE__*/ jsx(Checkbox
 	partialChecked: state === "mixed",
 	readOnly
 });
-const descriptionOf = (operation) => STORED_OPERATIONS.find((candidate) => candidate.id === operation)?.description;
+const deleteBoxState = (mode) => mode === void 0 ? "mixed" : mode === "off" ? "off" : "on";
+const nextDeleteMode = (mode) => mode === "off" || mode === void 0 ? "approve" : "off";
 const ACCESS_OPTIONS = [{
 	id: "none",
 	label: "None",
 	title: "No access"
-}, ...CAPABILITY_OPERATIONS.filter((operation) => operation.id !== "delete").map((operation) => ({
+}, ...ACCESS_CHAIN.map((operation) => ({
 	id: operation.id,
 	label: operation.label,
 	title: operation.description
 }))];
-const DELETE_OPTIONS = [
-	{
-		id: "off",
-		label: "Off",
-		title: "No delete"
-	},
-	{
-		id: "approve",
-		label: "Approval",
-		title: descriptionOf("delete")
-	},
-	{
-		id: "trash",
-		label: "Trash",
-		title: descriptionOf("deleteUnattended")
-	}
-];
 const ARROW_STEPS = {
 	ArrowDown: 1,
 	ArrowLeft: -1,
@@ -162,7 +139,6 @@ const Segments = ({ included = [], label, onSelect, options, readOnly, selected
 			const checked = option.id === selected;
 			return /*#__PURE__*/ jsx(Button, {
 				buttonStyle: checked ? "primary" : included.includes(option.id) ? "pill" : "transparent",
-				className: checked && option.id === "trash" ? `${BASE_CLASS}__danger` : "",
 				disabled: readOnly,
 				extraButtonProps: {
 					"aria-checked": checked,
@@ -185,21 +161,12 @@ const includedBelow = (options, level) => {
 	return selected < 1 ? [] : options.slice(1, selected).map((option) => option.id);
 };
 const accessOptions = (rows) => ACCESS_OPTIONS.filter((option) => rows.some((row) => accessLevelsOf(row).includes(option.id)));
-const LABEL_WIDTH = "calc(var(--base) * 9)";
+const LABEL_WIDTH = "calc(var(--base) * 11)";
 const OPERATION_WIDTH = "calc(var(--base) * 3.5)";
 const ACCESS_WIDTH = "calc(var(--base) * 13)";
-const DELETE_WIDTH = "calc(var(--base) * 10)";
-const Columns = ({ widths }) => /*#__PURE__*/ jsxs("colgroup", { children: [/*#__PURE__*/ jsx("col", { style: { width: LABEL_WIDTH } }), widths.map((width, index) => /*#__PURE__*/ jsx("col", { style: { width } }, index))] });
-const lastCellStyle = {
-	...styles.cell,
-	...styles.lastCell
-};
-const controlStyle = (isLast) => isLast ? {
-	...styles.controlCell,
-	...styles.lastCell
-} : styles.controlCell;
+const DELETE_WIDTH = "calc(var(--base) * 4)";
 const LiveBadge = () => /*#__PURE__*/ jsx("span", {
-	style: styles.badge,
+	className: `${BASE_CLASS}__badge`,
 	title: LIVE_WRITE,
 	children: /*#__PURE__*/ jsxs(Pill, {
 		pillStyle: "warning",
@@ -208,230 +175,221 @@ const LiveBadge = () => /*#__PURE__*/ jsx("span", {
 			"aria-hidden": "true",
 			children: "Live"
 		}), /*#__PURE__*/ jsx("span", {
-			style: styles.visuallyHidden,
+			className: "sr-only",
 			children: LIVE_WRITE
 		})]
 	})
 });
+const APPROVED_ALWAYS = "Always approved: the plugin config does not allow unattended deletes";
+const ApprovalToggle = ({ label, locked = false, onToggle, pressed, readOnly }) => {
+	const title = locked ? APPROVED_ALWAYS : pressed ? "A person approves each delete" : "Each delete runs without approval";
+	return /*#__PURE__*/ jsxs("button", {
+		"aria-pressed": pressed,
+		className: cx(`${BASE_CLASS}__shield`, !pressed && `${BASE_CLASS}__danger`),
+		disabled: readOnly || locked,
+		onClick: onToggle,
+		title,
+		type: "button",
+		children: [/*#__PURE__*/ jsxs("svg", {
+			"aria-hidden": "true",
+			fill: "none",
+			height: "16",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "2",
+			viewBox: "0 0 24 24",
+			width: "16",
+			children: [/*#__PURE__*/ jsx("path", { d: "M12 3l8 3v6c0 4.5-3.2 8-8 9-4.8-1-8-4.5-8-9V6z" }), pressed ? /*#__PURE__*/ jsx("path", { d: "M9 12l2 2 4-4" }) : null]
+		}), /*#__PURE__*/ jsx("span", {
+			className: "sr-only",
+			children: `${label}: ${title}`
+		})]
+	});
+};
+const MatrixTable = ({ all, children, heads, start = false, title, widths }) => /*#__PURE__*/ jsx("section", { children: /*#__PURE__*/ jsxs("table", {
+	className: `${BASE_CLASS}__table`,
+	children: [
+		/*#__PURE__*/ jsxs("colgroup", { children: [/*#__PURE__*/ jsx("col", { style: { width: LABEL_WIDTH } }), widths.map((width, index) => /*#__PURE__*/ jsx("col", { style: { width } }, index))] }),
+		/*#__PURE__*/ jsxs("thead", { children: [/*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsx("th", {
+			className: `${BASE_CLASS}__title`,
+			scope: "col",
+			children: title
+		}), heads.map((head) => /*#__PURE__*/ jsx("th", {
+			className: `${BASE_CLASS}__head${start ? ` ${BASE_CLASS}__start` : ""}`,
+			scope: "col",
+			children: head
+		}, head))] }), /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsx("th", {
+			className: `${BASE_CLASS}__row`,
+			scope: "row",
+			children: "All"
+		}), all] })] }),
+		/*#__PURE__*/ jsx("tbody", { children })
+	]
+}) });
 const NamespaceTable = ({ matrix, namespace, path, readOnly, toggle, values }) => {
 	const rows = matrix[namespace.id];
 	const withDelete = rows.some((row) => row.delete);
 	const allOptions = accessOptions(rows);
 	const allLevel = allAccessLevel(matrix, path, namespace.id, values);
 	const entries = namespace.title.toLowerCase();
-	return /*#__PURE__*/ jsx("section", {
-		style: styles.section,
-		children: /*#__PURE__*/ jsxs("table", {
-			style: styles.table,
-			children: [
-				/*#__PURE__*/ jsx(Columns, { widths: withDelete ? [ACCESS_WIDTH, DELETE_WIDTH] : [ACCESS_WIDTH] }),
-				/*#__PURE__*/ jsxs("thead", {
-					style: styles.head,
-					children: [/*#__PURE__*/ jsxs("tr", { children: [
-						/*#__PURE__*/ jsx("th", {
-							scope: "col",
-							style: {
-								...styles.headTitle,
-								...styles.topStart
-							},
-							children: namespace.title
-						}),
-						/*#__PURE__*/ jsx("th", {
-							scope: "col",
-							style: {
-								...styles.headOperation,
-								textAlign: "start",
-								...withDelete ? {} : styles.topEnd
-							},
-							children: "Access"
-						}),
-						withDelete ? /*#__PURE__*/ jsx("th", {
-							scope: "col",
-							style: {
-								...styles.headOperation,
-								textAlign: "start",
-								...styles.topEnd
-							},
-							children: "Delete"
-						}) : null
-					] }), /*#__PURE__*/ jsxs("tr", { children: [
-						/*#__PURE__*/ jsx("th", {
-							scope: "row",
-							style: {
-								...styles.headLabel,
-								...styles.rule
-							},
-							children: "All"
-						}),
-						/*#__PURE__*/ jsx("td", {
-							style: {
-								...controlStyle(!withDelete),
-								...styles.rule
-							},
-							children: /*#__PURE__*/ jsx(Segments, {
-								included: includedBelow(allOptions, allLevel),
-								label: `Access for every ${entries} entry`,
-								onSelect: (level) => {
-									toggle({
-										kind: "access",
-										namespace: namespace.id,
-										level
-									});
-								},
-								options: allOptions,
-								readOnly,
-								selected: allLevel
-							})
-						}),
-						withDelete ? /*#__PURE__*/ jsx("td", {
-							style: {
-								...controlStyle(true),
-								...styles.rule
-							},
-							children: /*#__PURE__*/ jsx(Segments, {
-								label: `Delete for every ${entries} entry`,
-								onSelect: (mode) => {
-									toggle({
-										kind: "deleteMode",
-										namespace: namespace.id,
-										mode
-									});
-								},
-								options: DELETE_OPTIONS.filter((option) => option.id !== "trash"),
-								readOnly,
-								selected: allDeleteMode(matrix, path, namespace.id, values)
-							})
-						}) : null
-					] })]
-				}),
-				/*#__PURE__*/ jsx("tbody", { children: rows.map((row) => {
-					const options = accessOptions([row]);
-					const level = accessLevelOf(path, namespace.id, row, values);
-					return /*#__PURE__*/ jsxs("tr", { children: [
-						/*#__PURE__*/ jsxs("th", {
-							scope: "row",
-							style: styles.rowHeader,
-							children: [row.label, row.live ? /*#__PURE__*/ jsx(LiveBadge, {}) : null]
-						}),
-						/*#__PURE__*/ jsx("td", {
-							style: controlStyle(!withDelete),
-							children: /*#__PURE__*/ jsx(Segments, {
-								included: includedBelow(options, level),
-								label: `Access for ${row.label}`,
-								onSelect: (next) => {
-									toggle({
-										kind: "access",
-										namespace: namespace.id,
-										fieldName: row.fieldName,
-										level: next
-									});
-								},
-								options,
-								readOnly,
-								selected: level
-							})
-						}),
-						withDelete ? /*#__PURE__*/ jsx("td", {
-							style: controlStyle(true),
-							children: row.delete ? /*#__PURE__*/ jsx(Segments, {
-								label: `Delete for ${row.label}`,
-								onSelect: (mode) => {
-									toggle({
-										kind: "deleteMode",
-										namespace: namespace.id,
-										fieldName: row.fieldName,
-										mode
-									});
-								},
-								options: DELETE_OPTIONS.filter((option) => option.id !== "trash" || row.deleteUnattended),
-								readOnly,
-								selected: deleteModeOf(path, namespace.id, row, values)
-							}) : null
-						}) : null
-					] }, row.fieldName);
-				}) })
-			]
-		})
-	});
-};
-const ToolsTable = ({ matrix, path, readOnly, toggle, values }) => {
-	const toolState = toolsState(matrix, path, values);
-	return /*#__PURE__*/ jsx("section", {
-		style: styles.section,
-		children: /*#__PURE__*/ jsxs("table", {
-			style: styles.table,
-			children: [
-				/*#__PURE__*/ jsx(Columns, { widths: [OPERATION_WIDTH] }),
-				/*#__PURE__*/ jsxs("thead", {
-					style: styles.head,
-					children: [/*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsx("th", {
-						scope: "col",
-						style: {
-							...styles.headTitle,
-							...styles.topStart
-						},
-						children: "Tools"
-					}), /*#__PURE__*/ jsx("th", {
-						scope: "col",
-						style: {
-							...styles.headOperation,
-							...styles.topEnd
-						},
-						children: "Enabled"
-					})] }), /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsx("th", {
-						scope: "row",
-						style: {
-							...styles.headLabel,
-							...styles.rule
-						},
-						children: "All"
-					}), /*#__PURE__*/ jsx("td", {
-						style: {
-							...lastCellStyle,
-							...styles.rule
-						},
-						children: /*#__PURE__*/ jsx(Box, {
-							label: "Enable every tool",
-							onChange: () => {
-								toggle({
-									kind: "tools",
-									value: toolState !== "on"
-								});
-							},
-							readOnly,
-							state: toolState
+	const { i18n } = useTranslation();
+	const { getEntityConfig } = useConfig();
+	const nameOf = (row) => translateStatic(namespace.id === "collections" ? getEntityConfig({ collectionSlug: row.slug }).labels.plural : getEntityConfig({ globalSlug: row.slug }).label, i18n) ?? row.slug;
+	const allDelete = allDeleteMode(matrix, path, namespace.id, values);
+	return /*#__PURE__*/ jsx(MatrixTable, {
+		all: /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx("td", {
+			className: `${BASE_CLASS}__start`,
+			children: /*#__PURE__*/ jsx(Segments, {
+				included: includedBelow(allOptions, allLevel),
+				label: `Access for every ${entries} entry`,
+				onSelect: (level) => {
+					toggle({
+						kind: "access",
+						namespace: namespace.id,
+						level
+					});
+				},
+				options: allOptions,
+				readOnly,
+				selected: allLevel
+			})
+		}), withDelete ? /*#__PURE__*/ jsx("td", {
+			className: `${BASE_CLASS}__start`,
+			children: /*#__PURE__*/ jsx(Box, {
+				label: `Delete for every ${entries} entry`,
+				onChange: () => {
+					toggle({
+						kind: "deleteMode",
+						namespace: namespace.id,
+						mode: nextDeleteMode(allDelete)
+					});
+				},
+				readOnly,
+				state: deleteBoxState(allDelete)
+			})
+		}) : null] }),
+		heads: withDelete ? ["Access", "Delete"] : ["Access"],
+		start: true,
+		title: namespace.title,
+		widths: withDelete ? [ACCESS_WIDTH, DELETE_WIDTH] : [ACCESS_WIDTH],
+		children: rows.map((row) => {
+			const options = accessOptions([row]);
+			const level = accessLevelOf(path, namespace.id, row, values);
+			const mode = deleteModeOf(path, namespace.id, row, values);
+			const name = nameOf(row);
+			return /*#__PURE__*/ jsxs("tr", { children: [
+				/*#__PURE__*/ jsxs("th", {
+					className: `${BASE_CLASS}__row`,
+					scope: "row",
+					children: [
+						name,
+						row.live ? /*#__PURE__*/ jsx(LiveBadge, {}) : null,
+						name === row.slug ? null : /*#__PURE__*/ jsx("span", {
+							className: `${BASE_CLASS}__hint`,
+							children: row.slug
 						})
-					})] })]
+					]
 				}),
-				/*#__PURE__*/ jsx("tbody", { children: matrix.tools.map((tool) => /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsxs("th", {
-					scope: "row",
-					style: styles.rowHeader,
-					children: [tool.name, /*#__PURE__*/ jsx("span", {
-						style: styles.hint,
-						children: tool.description
-					})]
-				}), /*#__PURE__*/ jsx("td", {
-					style: lastCellStyle,
-					children: /*#__PURE__*/ jsx(Box, {
-						label: `Enable ${tool.name}`,
-						onChange: () => {
+				/*#__PURE__*/ jsx("td", {
+					className: `${BASE_CLASS}__start`,
+					children: /*#__PURE__*/ jsx(Segments, {
+						included: includedBelow(options, level),
+						label: `Access for ${name}`,
+						onSelect: (next) => {
 							toggle({
-								kind: "tool",
-								name: tool.name,
-								value: values[toolPath(path, tool.name)] !== true
+								kind: "access",
+								namespace: namespace.id,
+								fieldName: row.fieldName,
+								level: next
 							});
 						},
+						options,
 						readOnly,
-						state: values[toolPath(path, tool.name)] === true ? "on" : "off"
+						selected: level
 					})
-				})] }, tool.name)) })
-			]
+				}),
+				withDelete ? /*#__PURE__*/ jsx("td", {
+					className: `${BASE_CLASS}__start`,
+					children: row.delete ? /*#__PURE__*/ jsxs("span", {
+						className: `${BASE_CLASS}__delete`,
+						children: [/*#__PURE__*/ jsx(Box, {
+							label: `Delete ${name}`,
+							onChange: () => {
+								toggle({
+									kind: "deleteMode",
+									namespace: namespace.id,
+									fieldName: row.fieldName,
+									mode: nextDeleteMode(mode)
+								});
+							},
+							readOnly,
+							state: deleteBoxState(mode)
+						}), mode === "off" ? null : /*#__PURE__*/ jsx(ApprovalToggle, {
+							label: `Approval for deleting ${name}`,
+							locked: !row.deleteUnattended,
+							onToggle: () => {
+								toggle({
+									kind: "deleteMode",
+									namespace: namespace.id,
+									fieldName: row.fieldName,
+									mode: mode === "trash" ? "approve" : "trash"
+								});
+							},
+							pressed: mode !== "trash",
+							readOnly
+						})]
+					}) : null
+				}) : null
+			] }, row.fieldName);
+		})
+	});
+};
+const ToolsTable = ({ matrix, path, readOnly, toggle, values }) => {
+	const toolState = toolsState(matrix, path, values);
+	return /*#__PURE__*/ jsx(MatrixTable, {
+		all: /*#__PURE__*/ jsx("td", { children: /*#__PURE__*/ jsx(Box, {
+			label: "Enable every tool",
+			onChange: () => {
+				toggle({
+					kind: "tools",
+					value: toolState !== "on"
+				});
+			},
+			readOnly,
+			state: toolState
+		}) }),
+		heads: ["Enabled"],
+		title: "Tools",
+		widths: [OPERATION_WIDTH],
+		children: matrix.tools.map((tool) => {
+			const granted = values[toolPath(path, tool.name)] === true;
+			return /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsxs("th", {
+				className: `${BASE_CLASS}__row`,
+				scope: "row",
+				children: [tool.name, /*#__PURE__*/ jsx("span", {
+					className: `${BASE_CLASS}__hint`,
+					children: tool.description
+				})]
+			}), /*#__PURE__*/ jsx("td", { children: /*#__PURE__*/ jsx(Box, {
+				label: `Enable ${tool.name}`,
+				onChange: () => {
+					toggle({
+						kind: "tool",
+						name: tool.name,
+						value: !granted
+					});
+				},
+				readOnly,
+				state: granted ? "on" : "off"
+			}) })] }, tool.name);
 		})
 	});
 };
 /**
 * What an API key may do, as one table per namespace: a row per entity with
-* segmented Access and Delete controls, and an "All" row that sets every row.
+* an Access control and a Delete checkbox with an approval shield, and an
+* "All" row that sets every row.
 * The nested checkbox fields back every control, so the stored document is
 * unaffected.
 */ const McpxCapabilityMatrix = ({ field, matrix, path = CAPABILITIES_FIELD, readOnly = false, withinTab = false }) => {
@@ -459,45 +417,38 @@ const ToolsTable = ({ matrix, path, readOnly, toggle, values }) => {
 		title: "Globals"
 	}].filter((namespace) => matrix[namespace.id].length > 0);
 	return /*#__PURE__*/ jsxs("div", {
-		className: [
-			"field-type",
-			"group-field",
-			"group-field--top-level",
-			withinTab && "group-field--within-tab",
-			BASE_CLASS
-		].filter(Boolean).join(" "),
+		className: cx("field-type", "group-field", "group-field--top-level", withinTab && "group-field--within-tab", BASE_CLASS),
 		children: [/*#__PURE__*/ jsx("style", { children: SHEET }), /*#__PURE__*/ jsxs("div", {
 			className: "group-field__wrap",
-			children: [
-				/*#__PURE__*/ jsx("div", {
-					className: "group-field__header",
-					children: /*#__PURE__*/ jsxs("header", { children: [/*#__PURE__*/ jsx("h3", {
-						className: "group-field__title",
-						children: /*#__PURE__*/ jsx(FieldLabel, {
-							as: "span",
-							label: "Capabilities"
-						})
-					}), typeof field?.admin?.description === "string" ? /*#__PURE__*/ jsx(FieldDescription, {
-						description: field.admin.description,
-						path
-					}) : null] })
-				}),
-				namespaces.map((namespace) => /*#__PURE__*/ jsx(NamespaceTable, {
+			children: [/*#__PURE__*/ jsx("div", {
+				className: "group-field__header",
+				children: /*#__PURE__*/ jsxs("header", { children: [withinTab ? null : /*#__PURE__*/ jsx("h3", {
+					className: "group-field__title",
+					children: /*#__PURE__*/ jsx(FieldLabel, {
+						as: "span",
+						label: "Capabilities"
+					})
+				}), typeof field?.admin?.description === "string" ? /*#__PURE__*/ jsx(FieldDescription, {
+					description: field.admin.description,
+					path
+				}) : null] })
+			}), /*#__PURE__*/ jsxs("div", {
+				className: `${BASE_CLASS}__sections`,
+				children: [namespaces.map((namespace) => /*#__PURE__*/ jsx(NamespaceTable, {
 					matrix,
 					namespace,
 					path,
 					readOnly,
 					toggle,
 					values
-				}, namespace.id)),
-				matrix.tools.length > 0 ? /*#__PURE__*/ jsx(ToolsTable, {
+				}, namespace.id)), matrix.tools.length > 0 ? /*#__PURE__*/ jsx(ToolsTable, {
 					matrix,
 					path,
 					readOnly,
 					toggle,
 					values
-				}) : null
-			]
+				}) : null]
+			})]
 		})]
 	});
 };