@abinnovision/payloadcms-mcpx 2.0.0-beta.9 → 2.0.0

package/dist/admin/capability-matrix.mjs

@@ -1,87 +1,96 @@
 "use client";
-import { CAPABILITIES_FIELD } from "../capabilities.mjs";
-import { CAPABILITY_OPERATIONS, capabilityPaths, cellPath, toolPath } from "../api-keys/capability-matrix.mjs";
-import { buildToggleActions, columnState, rowState, toolsState } from "./capability-toggles.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckboxInput, FieldDescription, FieldLabel, useForm, useFormFields } from "@payloadcms/ui";
+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 { 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 NOT_EXPOSED = "The plugin config does not expose this.";
 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}__toggle:hover { text-decoration: underline; }
-.${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);
+	border-radius: var(--style-radius-s);
+	background: var(--theme-input-bg);
+}
+.${BASE_CLASS}__segments .btn { border: 0; border-radius: 0; white-space: nowrap; }
+.${BASE_CLASS}__segments .btn + .btn { border-inline-start: 1px solid var(--theme-elevation-150); }
+.${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}__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"
-	},
-	rowButton: {
-		padding: 0,
-		border: 0,
-		background: "none",
-		color: "inherit",
-		font: "inherit",
-		cursor: "pointer",
-		textAlign: "start",
-		textDecoration: "none"
-	},
-	hint: {
-		display: "block",
-		color: "var(--theme-elevation-400)"
-	},
-	cell: {
-		padding: CELL_PADDING,
-		verticalAlign: "middle",
-		textAlign: "center"
-	},
-	lastCell: { paddingInlineEnd: EDGE_PADDING },
-	dash: {
-		color: "var(--theme-elevation-400)",
-		cursor: "help"
-	}
-};
 const Box = ({ label, onChange, readOnly, state }) => /*#__PURE__*/ jsx(CheckboxInput, {
 	checked: state === "on",
 	name: label,
@@ -89,200 +98,300 @@ const Box = ({ label, onChange, readOnly, state }) => /*#__PURE__*/ jsx(Checkbox
 	partialChecked: state === "mixed",
 	readOnly
 });
-const LABEL_WIDTH = "calc(var(--base) * 9)";
+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"
+}, ...ACCESS_CHAIN.map((operation) => ({
+	id: operation.id,
+	label: operation.label,
+	title: operation.description
+}))];
+const ARROW_STEPS = {
+	ArrowDown: 1,
+	ArrowLeft: -1,
+	ArrowRight: 1,
+	ArrowUp: -1
+};
+const Segments = ({ included = [], label, onSelect, options, readOnly, selected }) => {
+	const focusable = options.some((option) => option.id === selected) ? selected : options[0]?.id;
+	const onKeyDown = (event) => {
+		const step = ARROW_STEPS[event.key];
+		if (readOnly || step === void 0) return;
+		event.preventDefault();
+		const radios = [...event.currentTarget.querySelectorAll("[role=\"radio\"]")];
+		const current = radios.findIndex((radio) => radio === document.activeElement);
+		const next = Math.min(Math.max(current + step, 0), radios.length - 1);
+		const option = options[next];
+		if (option) {
+			radios[next]?.focus();
+			onSelect(option.id);
+		}
+	};
+	return /*#__PURE__*/ jsx("div", {
+		"aria-label": label,
+		className: `${BASE_CLASS}__segments`,
+		onKeyDown,
+		role: "radiogroup",
+		children: options.map((option) => {
+			const checked = option.id === selected;
+			return /*#__PURE__*/ jsx(Button, {
+				buttonStyle: checked ? "primary" : included.includes(option.id) ? "pill" : "transparent",
+				disabled: readOnly,
+				extraButtonProps: {
+					"aria-checked": checked,
+					role: "radio",
+					tabIndex: option.id === focusable ? 0 : -1,
+					title: option.title
+				},
+				margin: false,
+				onClick: () => {
+					onSelect(option.id);
+				},
+				size: "small",
+				children: option.label
+			}, option.id);
+		})
+	});
+};
+const includedBelow = (options, level) => {
+	const selected = options.findIndex((option) => option.id === 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) * 11)";
 const OPERATION_WIDTH = "calc(var(--base) * 3.5)";
-const Columns = ({ count }) => /*#__PURE__*/ jsxs("colgroup", { children: [/*#__PURE__*/ jsx("col", { style: { width: LABEL_WIDTH } }), Array.from({ length: count }, (_, index) => /*#__PURE__*/ jsx("col", { style: { width: OPERATION_WIDTH } }, index))] });
-const cellStyle = (isLast) => isLast ? {
-	...styles.cell,
-	...styles.lastCell
-} : styles.cell;
-const Dash = () => /*#__PURE__*/ jsx("span", {
-	"aria-label": NOT_EXPOSED,
-	style: styles.dash,
-	title: NOT_EXPOSED,
-	children: "—"
+const ACCESS_WIDTH = "calc(var(--base) * 13)";
+const DELETE_WIDTH = "calc(var(--base) * 4)";
+const LiveBadge = () => /*#__PURE__*/ jsx("span", {
+	className: `${BASE_CLASS}__badge`,
+	title: LIVE_WRITE,
+	children: /*#__PURE__*/ jsxs(Pill, {
+		pillStyle: "warning",
+		size: "small",
+		children: [/*#__PURE__*/ jsx("span", {
+			"aria-hidden": "true",
+			children: "Live"
+		}), /*#__PURE__*/ jsx("span", {
+			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 columns = CAPABILITY_OPERATIONS.filter((operation) => rows.some((row) => row[operation.id]));
-	return /*#__PURE__*/ jsx("section", {
-		style: styles.section,
-		children: /*#__PURE__*/ jsxs("table", {
-			style: styles.table,
-			children: [
-				/*#__PURE__*/ jsx(Columns, { count: columns.length }),
-				/*#__PURE__*/ jsxs("thead", {
-					style: styles.head,
-					children: [/*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsx("th", {
-						scope: "col",
-						style: {
-							...styles.headTitle,
-							...styles.topStart
-						},
-						children: namespace.title
-					}), columns.map((operation, column) => /*#__PURE__*/ jsx("th", {
-						scope: "col",
-						style: column === columns.length - 1 ? {
-							...styles.headOperation,
-							...styles.topEnd
-						} : styles.headOperation,
-						title: operation.description,
-						children: operation.label
-					}, operation.id))] }), /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsx("th", {
-						scope: "row",
-						style: {
-							...styles.headLabel,
-							...styles.rule
+	const withDelete = rows.some((row) => row.delete);
+	const allOptions = accessOptions(rows);
+	const allLevel = allAccessLevel(matrix, path, namespace.id, values);
+	const entries = namespace.title.toLowerCase();
+	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("td", {
+					className: `${BASE_CLASS}__start`,
+					children: /*#__PURE__*/ jsx(Segments, {
+						included: includedBelow(options, level),
+						label: `Access for ${name}`,
+						onSelect: (next) => {
+							toggle({
+								kind: "access",
+								namespace: namespace.id,
+								fieldName: row.fieldName,
+								level: next
+							});
 						},
-						children: "All"
-					}), columns.map((operation, column) => {
-						const state = columnState(matrix, path, namespace.id, operation.id, values);
-						return /*#__PURE__*/ jsx("td", {
-							style: {
-								...cellStyle(column === columns.length - 1),
-								...styles.rule
-							},
-							children: /*#__PURE__*/ jsx(Box, {
-								label: `${operation.label} every ${namespace.title.toLowerCase()} entry`,
-								onChange: () => {
-									toggle({
-										kind: "column",
-										namespace: namespace.id,
-										operation: operation.id,
-										value: state !== "on"
-									});
-								},
-								readOnly,
-								state
-							})
-						}, operation.id);
-					})] })]
+						options,
+						readOnly,
+						selected: level
+					})
 				}),
-				/*#__PURE__*/ jsx("tbody", { children: rows.map((row) => {
-					const state = rowState(path, namespace.id, row, values);
-					return /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsxs("th", {
-						scope: "row",
-						style: styles.rowHeader,
-						children: [/*#__PURE__*/ jsx("button", {
-							className: `${BASE_CLASS}__toggle`,
-							disabled: readOnly,
-							onClick: () => {
+				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: "row",
+									kind: "deleteMode",
 									namespace: namespace.id,
 									fieldName: row.fieldName,
-									value: state !== "on"
+									mode: nextDeleteMode(mode)
 								});
 							},
-							style: styles.rowButton,
-							title: `Toggle every capability for ${row.label}`,
-							type: "button",
-							children: row.label
-						}), row.hint ? /*#__PURE__*/ jsx("span", {
-							style: styles.hint,
-							children: row.hint
-						}) : null]
-					}), columns.map((operation, column) => /*#__PURE__*/ jsx("td", {
-						style: cellStyle(column === columns.length - 1),
-						children: row[operation.id] ? /*#__PURE__*/ jsx(Box, {
-							label: `${operation.label} ${row.label}`,
-							onChange: () => {
+							readOnly,
+							state: deleteBoxState(mode)
+						}), mode === "off" ? null : /*#__PURE__*/ jsx(ApprovalToggle, {
+							label: `Approval for deleting ${name}`,
+							locked: !row.deleteUnattended,
+							onToggle: () => {
 								toggle({
-									kind: "cell",
+									kind: "deleteMode",
 									namespace: namespace.id,
 									fieldName: row.fieldName,
-									operation: operation.id,
-									value: values[cellPath(path, namespace.id, row.fieldName, operation.id)] !== true
+									mode: mode === "trash" ? "approve" : "trash"
 								});
 							},
-							readOnly,
-							state: values[cellPath(path, namespace.id, row.fieldName, operation.id)] === true ? "on" : "off"
-						}) : /*#__PURE__*/ jsx(Dash, {})
-					}, operation.id))] }, row.fieldName);
-				}) })
-			]
+							pressed: mode !== "trash",
+							readOnly
+						})]
+					}) : 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, { count: 1 }),
-				/*#__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: {
-							...cellStyle(true),
-							...styles.rule
-						},
-						children: /*#__PURE__*/ jsx(Box, {
-							label: "Enable every tool",
-							onChange: () => {
-								toggle({
-									kind: "tools",
-									value: toolState !== "on"
-								});
-							},
-							readOnly,
-							state: toolState
-						})
-					})] })]
-				}),
-				/*#__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: cellStyle(true),
-					children: /*#__PURE__*/ jsx(Box, {
-						label: `Enable ${tool.name}`,
-						onChange: () => {
-							toggle({
-								kind: "tool",
-								name: tool.name,
-								value: values[toolPath(path, tool.name)] !== true
-							});
-						},
-						readOnly,
-						state: values[toolPath(path, tool.name)] === true ? "on" : "off"
-					})
-				})] }, tool.name)) })
-			]
+	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, a
-* column per operation and a bulk toggle in each column header. The nested
-* checkbox fields back every cell, so the stored document is unaffected.
+* What an API key may do, as one table per namespace: a row per entity with
+* 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 }) => {
 	const { dispatchFields, setModified } = useForm();
 	const paths = useMemo(() => capabilityPaths(matrix, path), [matrix, path]);
@@ -308,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]
+			})]
 		})]
 	});
 };