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

package/README.md

@@ -145,7 +145,7 @@ each one is readable, writable and publishable. A key cannot go past it.
 Each key carries one checkbox per exposed entity and operation (`read`, `write`, `publish`,
 `delete`, `deleteUnattended`), and
 one per custom tool. The admin panel shows them as a matrix with a row per entity, an Access
-control (None, Read, Write, Publish) and a Delete control (Off, Approval, Trash). Each access level
+control (None, Read, Write, Publish) and a Delete checkbox with an approval shield. Each access level
 includes the ones before it, and a level the config does not expose has no segment. `publish`
 exists only where the config exposes `write` and `publish` on an entity with drafts, and counts
 only when `write` is ticked as well. `write` counts only when `read` is ticked, so a key never
@@ -154,7 +154,7 @@ immediately.
 `delete` exists only where the config sets `delete: true` on a collection, and counts only when
 `read` is ticked as well. Setting access to None clears it. A delete runs only after the key's user
 approved it on the key's edit view, except where the config sets `delete: "unattended"` and the
-key's Delete control is set to Trash: there the document moves to trash at once. See
+key's approval shield is off: there the document moves to trash at once. See
 [deleting](./docs/concepts.md#deleting).
 
 `tools/list` follows the key. A tool the key cannot use is not listed, and each `collection` and

package/dist/admin/capability-matrix.d.mts

@@ -26,7 +26,8 @@ interface McpxCapabilityMatrixProps {
 }
 /**
  * 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.
  */

package/dist/admin/capability-matrix.mjs

@@ -1,16 +1,16 @@
 "use client";
 import { CAPABILITIES_FIELD } from "../capabilities.mjs";
-import { CAPABILITY_OPERATIONS, STORED_OPERATIONS, capabilityPaths, toolPath } from "../api-keys/capability-matrix.mjs";
+import { CAPABILITY_OPERATIONS, 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 { 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 SHEET = `
 .${BASE_CLASS} tbody tr:hover { background: var(--theme-elevation-50); }
-.${BASE_CLASS} section:last-of-type { margin-bottom: 0; }
 .${BASE_CLASS}__segments {
 	display: inline-flex;
 	border: 1px solid var(--theme-elevation-150);
@@ -22,12 +22,31 @@ 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)" },
+	sections: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "var(--base) calc(var(--base) * 2)",
+		alignItems: "flex-start"
+	},
 	table: {
 		tableLayout: "fixed",
 		width: "auto",
@@ -96,7 +115,12 @@ const styles = {
 		verticalAlign: "middle",
 		textAlign: "start"
 	},
-	lastCell: { paddingInlineEnd: EDGE_PADDING }
+	lastCell: { paddingInlineEnd: EDGE_PADDING },
+	deleteControls: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "calc(var(--base) * 0.4)"
+	}
 };
 const Box = ({ label, onChange, readOnly, state }) => /*#__PURE__*/ jsx(CheckboxInput, {
 	checked: state === "on",
@@ -105,7 +129,6 @@ 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 ACCESS_OPTIONS = [{
 	id: "none",
 	label: "None",
@@ -115,23 +138,6 @@ const ACCESS_OPTIONS = [{
 	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 +168,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,10 +190,10 @@ 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 DELETE_WIDTH = "calc(var(--base) * 4)";
 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,
@@ -213,225 +218,275 @@ const LiveBadge = () => /*#__PURE__*/ jsx("span", {
 		})]
 	})
 });
+const APPROVED_ALWAYS = "Always approved: the plugin config does not allow unattended deletes";
+const ApprovalToggle = ({ label, locked = false, onToggle, operation, pressed, readOnly }) => {
+	const title = locked ? APPROVED_ALWAYS : pressed ? `A person approves each ${operation}` : `Each ${operation} runs without approval`;
+	return /*#__PURE__*/ jsxs("button", {
+		"aria-pressed": pressed,
+		className: [`${BASE_CLASS}__shield`, !pressed && `${BASE_CLASS}__danger`].filter(Boolean).join(" "),
+		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", {
+			style: styles.visuallyHidden,
+			children: `${label}: ${title}`
+		})]
+	});
+};
 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", {
+	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("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: "Tools"
-					}), /*#__PURE__*/ jsx("th", {
+						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: "Enabled"
-					})] }), /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsx("th", {
+						children: "Delete"
+					}) : null
+				] }), /*#__PURE__*/ jsxs("tr", { children: [
+					/*#__PURE__*/ jsx("th", {
 						scope: "row",
 						style: {
 							...styles.headLabel,
 							...styles.rule
 						},
 						children: "All"
-					}), /*#__PURE__*/ jsx("td", {
+					}),
+					/*#__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: {
-							...lastCellStyle,
+							...controlStyle(true),
 							...styles.rule
 						},
 						children: /*#__PURE__*/ jsx(Box, {
-							label: "Enable every tool",
+							label: `Delete for every ${entries} entry`,
 							onChange: () => {
 								toggle({
-									kind: "tools",
-									value: toolState !== "on"
+									kind: "deleteMode",
+									namespace: namespace.id,
+									mode: allDelete === "off" || allDelete === void 0 ? "approve" : "off"
+								});
+							},
+							readOnly,
+							state: allDelete === void 0 ? "mixed" : allDelete === "off" ? "off" : "on"
+						})
+					}) : null
+				] })]
+			}),
+			/*#__PURE__*/ jsx("tbody", { 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", {
+						scope: "row",
+						style: styles.rowHeader,
+						children: [
+							name,
+							row.live ? /*#__PURE__*/ jsx(LiveBadge, {}) : null,
+							name === row.slug ? null : /*#__PURE__*/ jsx("span", {
+								style: styles.hint,
+								children: row.slug
+							})
+						]
+					}),
+					/*#__PURE__*/ jsx("td", {
+						style: controlStyle(!withDelete),
+						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
 								});
 							},
+							options,
 							readOnly,
-							state: toolState
+							selected: level
 						})
-					})] })]
-				}),
-				/*#__PURE__*/ jsx("tbody", { children: matrix.tools.map((tool) => /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsxs("th", {
+					}),
+					withDelete ? /*#__PURE__*/ jsx("td", {
+						style: controlStyle(true),
+						children: row.delete ? /*#__PURE__*/ jsxs("span", {
+							style: styles.deleteControls,
+							children: [/*#__PURE__*/ jsx(Box, {
+								label: `Delete ${name}`,
+								onChange: () => {
+									toggle({
+										kind: "deleteMode",
+										namespace: namespace.id,
+										fieldName: row.fieldName,
+										mode: mode === "off" ? "approve" : "off"
+									});
+								},
+								readOnly,
+								state: mode === "off" ? "off" : "on"
+							}), 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"
+									});
+								},
+								operation: "delete",
+								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", { 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.rowHeader,
-					children: [tool.name, /*#__PURE__*/ jsx("span", {
-						style: styles.hint,
-						children: tool.description
-					})]
+					style: {
+						...styles.headLabel,
+						...styles.rule
+					},
+					children: "All"
 				}), /*#__PURE__*/ jsx("td", {
-					style: lastCellStyle,
+					style: {
+						...lastCellStyle,
+						...styles.rule
+					},
 					children: /*#__PURE__*/ jsx(Box, {
-						label: `Enable ${tool.name}`,
+						label: "Enable every tool",
 						onChange: () => {
 							toggle({
-								kind: "tool",
-								name: tool.name,
-								value: values[toolPath(path, tool.name)] !== true
+								kind: "tools",
+								value: toolState !== "on"
 							});
 						},
 						readOnly,
-						state: values[toolPath(path, tool.name)] === true ? "on" : "off"
+						state: toolState
 					})
-				})] }, tool.name)) })
-			]
-		})
-	});
+				})] })]
+			}),
+			/*#__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: () => {
+						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)) })
+		]
+	}) });
 };
 /**
 * 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 }) => {
@@ -468,36 +523,35 @@ const ToolsTable = ({ matrix, path, readOnly, toggle, values }) => {
 		].filter(Boolean).join(" "),
 		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", {
+				style: styles.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]
+			})]
 		})]
 	});
 };

package/dist/api-keys/capability-matrix.d.mts

@@ -9,7 +9,7 @@ export interface CapabilityRow {
   /**
    * The slug, which is what MCP clients send and what refusals name.
    */
-  label: string;
+  slug: string;
   read: boolean;
   write: boolean;
   publish: boolean;

package/dist/api-keys/capability-matrix.mjs

@@ -2,8 +2,8 @@ import { CAPABILITIES_FIELD, canPublish, canWrite, isLiveWrite } from "../capabi
 //#region src/api-keys/capability-matrix.ts
 /**
 * The group's `admin.description`, rendered by the matrix in Payload's
-* description slot. It explains how to read the segmented controls.
-*/ const CAPABILITIES_DESCRIPTION = "What this key may do. Each level includes the ones before it, and a missing segment means the plugin config does not expose it.";
+* description slot. It explains how to read the controls.
+*/ const CAPABILITIES_DESCRIPTION = "What this key may do. Each level includes the ones before it, and a missing segment means the plugin config does not expose it. A shield means this key's user approves each call.";
 /**
 * The operations a collection or global can expose. The generated checkboxes
 * and the matrix segments share this wording. `requires` names the
@@ -34,7 +34,7 @@ import { CAPABILITIES_FIELD, canPublish, canWrite, isLiveWrite } from "../capabi
 	}
 ];
 /**
-* Stored as a checkbox of its own but drawn as the Trash segment of the Delete
+* Stored as a checkbox of its own but drawn as the approval shield of the Delete
 * control.
 */ const DELETE_UNATTENDED = {
 	id: "deleteUnattended",
@@ -48,7 +48,7 @@ import { CAPABILITIES_FIELD, canPublish, canWrite, isLiveWrite } from "../capabi
 */ const STORED_OPERATIONS = [...CAPABILITY_OPERATIONS, DELETE_UNATTENDED];
 const toRow = (entity) => ({
 	fieldName: entity.fieldName,
-	label: entity.slug,
+	slug: entity.slug,
 	read: entity.read,
 	write: canWrite(entity),
 	publish: canPublish(entity),

package/dist/api-keys/collection.mjs

@@ -1,4 +1,4 @@
-import { createCapabilityFields, createConfirmationFields, createKeyFields, withSetupGuideTab } from "./fields.mjs";
+import { createCapabilityFields, createConfirmationFields, createKeyFields, withKeyTabs } from "./fields.mjs";
 import { generateApiKey, hashApiKey } from "./key.mjs";
 //#region src/api-keys/collection.ts
 /**
@@ -37,22 +37,18 @@ import { generateApiKey, hashApiKey } from "./key.mjs";
 			delete: ownKeysOnly
 		},
 		hooks: { beforeChange: [keyBeforeChange] },
-		fields: [...createConfirmationFields(options), ...withSetupGuideTab([
-			{
-				name: "user",
-				type: "relationship",
-				relationTo: userCollection,
-				required: true,
-				access: {
-					create: () => false,
-					update: () => false
-				},
-				defaultValue: ({ req }) => isUser({ req }) ? req.user?.id : void 0,
-				admin: { description: "The user this key acts as." }
+		fields: [...createConfirmationFields(options), ...withKeyTabs([{
+			name: "user",
+			type: "relationship",
+			relationTo: userCollection,
+			required: true,
+			access: {
+				create: () => false,
+				update: () => false
 			},
-			...createKeyFields(),
-			...createCapabilityFields(options)
-		], options)]
+			defaultValue: ({ req }) => isUser({ req }) ? req.user?.id : void 0,
+			admin: { description: "The user this key acts as." }
+		}, ...createKeyFields()], createCapabilityFields(options), options)]
 	};
 };
 //#endregion

package/dist/api-keys/fields.mjs

@@ -96,34 +96,40 @@ const SETUP_GUIDE_FIELD = "setupGuide";
 	}
 }] : [];
 /**
-* Wraps the key fields and the setup guide in unnamed tabs, so wide snippets
-* get the full form width. Named tabs would nest the data and move
-* `capabilities` off the document root, which capability resolution reads.
+* Wraps the key fields, the capabilities and the setup guide in unnamed tabs,
+* so wide tables and snippets get the full form width. Named tabs would nest
+* the data and move `capabilities` off the document root, which capability
+* resolution reads.
 *
 * The guide tab only shows on update: on create there is no key to hand out.
-*/ const withSetupGuideTab = (keyFields, options) => {
-	if (!options.setupGuide) return keyFields;
+*/ const withKeyTabs = (keyFields, capabilityFields, options) => {
+	const tabs = [{
+		label: "Key",
+		fields: keyFields
+	}];
+	if (capabilityFields.length > 0) tabs.push({
+		label: "Capabilities",
+		fields: capabilityFields
+	});
+	if (options.setupGuide) tabs.push({
+		label: "Connect a client",
+		admin: { condition: (_data, _siblingData, { operation }) => operation === "update" },
+		fields: [{
+			name: SETUP_GUIDE_FIELD,
+			type: "ui",
+			admin: {
+				disableListColumn: true,
+				components: { Field: {
+					path: "@abinnovision/payloadcms-mcpx/admin",
+					exportName: "McpxSetupGuide",
+					clientProps: { endpointPath: options.endpointPath }
+				} }
+			}
+		}]
+	});
 	return [{
 		type: "tabs",
-		tabs: [{
-			label: "Key",
-			fields: keyFields
-		}, {
-			label: "Connect a client",
-			admin: { condition: (_data, _siblingData, { operation }) => operation === "update" },
-			fields: [{
-				name: SETUP_GUIDE_FIELD,
-				type: "ui",
-				admin: {
-					disableListColumn: true,
-					components: { Field: {
-						path: "@abinnovision/payloadcms-mcpx/admin",
-						exportName: "McpxSetupGuide",
-						clientProps: { endpointPath: options.endpointPath }
-					} }
-				}
-			}]
-		}]
+		tabs
 	}];
 };
 /**
@@ -140,7 +146,7 @@ const SETUP_GUIDE_FIELD = "setupGuide";
 	const entityGroups = (rows) => rows.map((row) => ({
 		name: row.fieldName,
 		type: "group",
-		label: row.label,
+		label: row.slug,
 		fields: STORED_OPERATIONS.filter((operation) => row[operation.id]).map((operation) => checkbox(operation.id, operation.description))
 	}));
 	const collectionGroups = entityGroups(matrix.collections);
@@ -174,7 +180,7 @@ const SETUP_GUIDE_FIELD = "setupGuide";
 				exportName: "McpxCapabilityMatrix",
 				clientProps: {
 					matrix,
-					withinTab: options.setupGuide
+					withinTab: true
 				}
 			} }
 		},
@@ -182,4 +188,4 @@ const SETUP_GUIDE_FIELD = "setupGuide";
 	}];
 };
 //#endregion
-export { createCapabilityFields, createConfirmationFields, createKeyFields, withSetupGuideTab };
+export { createCapabilityFields, createConfirmationFields, createKeyFields, withKeyTabs };

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@abinnovision/payloadcms-mcpx",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.19",
   "description": "Payload CMS plugin exposing a fixed, schema-aware MCP tool surface with draft-only writes and per-API-key capabilities.",
   "keywords": [
     "payload",