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

package/README.md

@@ -82,7 +82,7 @@ claude mcp add --transport http payload http://localhost:3000/api/mcpx \
 
 Claude Desktop and the MCP Inspector are covered in
 [`docs/integration.md`](./docs/integration.md#connecting-other-clients). Saved keys also have a
-"Connect a client" tab with ready-to-paste snippets.
+"Connect a client" button that opens ready-to-paste snippets.
 
 ## Options
 
@@ -96,7 +96,7 @@ Claude Desktop and the MCP Inspector are covered in
 | `globals`                    | `{}`                                      | Globals to expose, with `read`, `write` and `publish`.                                                                                            |
 | `userCollection`             | `config.admin.user`, then `users`         | Auth collection whose users the keys act as.                                                                                                      |
 | `apiKeys.slug`               | `mcpx-api-keys`                           | Slug of the key collection.                                                                                                                       |
-| `apiKeys.setupGuide`         | `true`                                    | Add the "Connect a client" tab to saved keys.                                                                                                     |
+| `apiKeys.setupGuide`         | `true`                                    | Add the "Connect a client" button to saved keys.                                                                                                  |
 | `apiKeys.overrideCollection` | none                                      | Function that receives the key collection and returns it.                                                                                         |
 | `endpoint.path`              | `/mcpx`                                   | Endpoint path below the API route.                                                                                                                |
 | `limits.maxLimit`            | `25`                                      | Highest `limit` a client may pass to a list tool.                                                                                                 |

package/dist/admin/capability-matrix.mjs

@@ -1,16 +1,69 @@
 "use client";
-import { CAPABILITIES_FIELD } from "../capabilities.mjs";
-import { CAPABILITY_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 { 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}__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);
@@ -38,90 +91,6 @@ const SHEET = `
 .${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 = {
-	sections: {
-		display: "flex",
-		flexWrap: "wrap",
-		gap: "var(--base) calc(var(--base) * 2)",
-		alignItems: "flex-start"
-	},
-	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 },
-	deleteControls: {
-		display: "inline-flex",
-		alignItems: "center",
-		gap: "calc(var(--base) * 0.4)"
-	}
-};
 const Box = ({ label, onChange, readOnly, state }) => /*#__PURE__*/ jsx(CheckboxInput, {
 	checked: state === "on",
 	name: label,
@@ -129,11 +98,13 @@ const Box = ({ label, onChange, readOnly, state }) => /*#__PURE__*/ jsx(Checkbox
 	partialChecked: state === "mixed",
 	readOnly
 });
+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
@@ -194,17 +165,8 @@ 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) * 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,
-	...styles.lastCell
-};
-const controlStyle = (isLast) => isLast ? {
-	...styles.controlCell,
-	...styles.lastCell
-} : styles.controlCell;
 const LiveBadge = () => /*#__PURE__*/ jsx("span", {
-	style: styles.badge,
+	className: `${BASE_CLASS}__badge`,
 	title: LIVE_WRITE,
 	children: /*#__PURE__*/ jsxs(Pill, {
 		pillStyle: "warning",
@@ -213,17 +175,17 @@ 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, operation, pressed, readOnly }) => {
-	const title = locked ? APPROVED_ALWAYS : pressed ? `A person approves each ${operation}` : `Each ${operation} runs without approval`;
+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: [`${BASE_CLASS}__shield`, !pressed && `${BASE_CLASS}__danger`].filter(Boolean).join(" "),
+		className: cx(`${BASE_CLASS}__shield`, !pressed && `${BASE_CLASS}__danger`),
 		disabled: readOnly || locked,
 		onClick: onToggle,
 		title,
@@ -240,11 +202,31 @@ const ApprovalToggle = ({ label, locked = false, onToggle, operation, pressed, r
 			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,
+			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);
@@ -255,233 +237,154 @@ const NamespaceTable = ({ matrix, namespace, path, readOnly, toggle, values }) =
 	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: 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
+	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
 						})
-					}),
-					withDelete ? /*#__PURE__*/ jsx("td", {
-						style: {
-							...controlStyle(true),
-							...styles.rule
+					]
+				}),
+				/*#__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: /*#__PURE__*/ jsx(Box, {
-							label: `Delete for every ${entries} entry`,
+						options,
+						readOnly,
+						selected: level
+					})
+				}),
+				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,
-									mode: allDelete === "off" || allDelete === void 0 ? "approve" : "off"
+									fieldName: row.fieldName,
+									mode: nextDeleteMode(mode)
 								});
 							},
 							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) => {
+							state: deleteBoxState(mode)
+						}), mode === "off" ? null : /*#__PURE__*/ jsx(ApprovalToggle, {
+							label: `Approval for deleting ${name}`,
+							locked: !row.deleteUnattended,
+							onToggle: () => {
 								toggle({
-									kind: "access",
+									kind: "deleteMode",
 									namespace: namespace.id,
 									fieldName: row.fieldName,
-									level: next
+									mode: mode === "trash" ? "approve" : "trash"
 								});
 							},
-							options,
-							readOnly,
-							selected: level
-						})
-					}),
-					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
+							pressed: mode !== "trash",
+							readOnly
+						})]
 					}) : null
-				] }, row.fieldName);
-			}) })
-		]
-	}) });
+				}) : 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.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
-					})
-				})] })]
-			}),
-			/*#__PURE__*/ jsx("tbody", { children: matrix.tools.map((tool) => /*#__PURE__*/ jsxs("tr", { children: [/*#__PURE__*/ jsxs("th", {
+	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",
-				style: styles.rowHeader,
 				children: [tool.name, /*#__PURE__*/ jsx("span", {
-					style: styles.hint,
+					className: `${BASE_CLASS}__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)) })
-		]
-	}) });
+			}), /*#__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
@@ -514,13 +417,7 @@ 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", {
@@ -536,7 +433,7 @@ const ToolsTable = ({ matrix, path, readOnly, toggle, values }) => {
 					path
 				}) : null] })
 			}), /*#__PURE__*/ jsxs("div", {
-				style: styles.sections,
+				className: `${BASE_CLASS}__sections`,
 				children: [namespaces.map((namespace) => /*#__PURE__*/ jsx(NamespaceTable, {
 					matrix,
 					namespace,