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

package/dist/admin/capability-toggles.mjs

@@ -1,73 +1,110 @@
-import { CAPABILITY_OPERATIONS, cellPath, toolPath } from "../api-keys/capability-matrix.mjs";
+import { ACCESS_CHAIN, STORED_OPERATIONS, requiresOf } from "../capabilities.mjs";
+import { cellPath, rowOperations, toolPath } from "../api-keys/capability-matrix.mjs";
 //#region src/admin/capability-toggles.ts
-const stateOf = (paths, values) => {
-	if (paths.length === 0) return "off";
-	const granted = paths.filter((path) => values[path] === true).length;
+/**
+* How far a key may go with an entity. Each level includes the ones before it.
+*/ const ACCESS_LEVELS = ["none", ...ACCESS_CHAIN.map(({ id }) => id)];
+const toolGranted = (values, basePath, name) => values[toolPath(basePath, name)] === true;
+const cellGranted = (values, basePath, namespace, row, operation) => values[cellPath(basePath, namespace, row.fieldName, operation)] === true;
+/**
+* One value per stored operation.
+*/ const byOperation = (valueOf) => Object.fromEntries(STORED_OPERATIONS.map(({ id }) => [id, valueOf(id)]));
+const toolsState = (matrix, basePath, values) => {
+	const granted = matrix.tools.filter((tool) => toolGranted(values, basePath, tool.name)).length;
 	if (granted === 0) return "off";
-	return granted === paths.length ? "on" : "mixed";
+	return granted === matrix.tools.length ? "on" : "mixed";
 };
 /**
-* Whether a column's bulk toggle reads as on, off or indeterminate. Cells the
-* config does not expose are ignored: two granted cells and one dash read as on.
-*/ const columnState = (matrix, basePath, namespace, operation, values) => stateOf(matrix[namespace].filter((row) => row[operation]).map((row) => cellPath(basePath, namespace, row.fieldName, operation)), values);
+* The levels a row offers: none, then each operation the config exposes.
+*/ const accessLevelsOf = (row) => ACCESS_LEVELS.filter((level) => level === "none" || row[level]);
 /**
-* Whether an entity's row toggle reads as on, off or indeterminate, over the
-* operations the config exposes for that row.
-*/ const rowState = (basePath, namespace, row, values) => stateOf(CAPABILITY_OPERATIONS.filter((operation) => row[operation.id]).map((operation) => cellPath(basePath, namespace, row.fieldName, operation.id)), values);
-const toolsState = (matrix, basePath, values) => stateOf(matrix.tools.map((tool) => toolPath(basePath, tool.name)), values);
+* The highest level whose flags are all granted, counting only operations the
+* config exposes. A write without a read reads as none, as on the server.
+*/ const accessLevelOf = (basePath, namespace, row, values) => {
+	let reached = "none";
+	for (const { id } of ACCESS_CHAIN) {
+		if (!row[id] || !cellGranted(values, basePath, namespace, row, id)) break;
+		reached = id;
+	}
+	return reached;
+};
+/**
+* The delete mode a row's stored flags read as.
+*/ const deleteModeOf = (basePath, namespace, row, values) => {
+	const granted = (operation) => cellGranted(values, basePath, namespace, row, operation);
+	if (!granted("read") || !granted("delete")) return "off";
+	return row.deleteUnattended && granted("deleteUnattended") ? "trash" : "approve";
+};
+const prerequisitesOf = (operation) => {
+	const required = requiresOf(operation);
+	return required ? [required, ...prerequisitesOf(required)] : [];
+};
 const reconcile = (next, touched) => {
-	if (touched.has("publish") && next.publish) return {
-		...next,
-		write: true
-	};
-	if (touched.has("write") && !next.write) return {
-		...next,
-		publish: false
-	};
-	return next;
+	const result = { ...next };
+	for (const operation of touched) if (result[operation]) for (const required of prerequisitesOf(operation)) result[required] = true;
+	else for (const { id } of STORED_OPERATIONS) if (prerequisitesOf(id).includes(operation)) result[id] = false;
+	return result;
 };
 const rowActions = (basePath, namespace, row, values, changes) => {
-	const current = {
-		read: values[cellPath(basePath, namespace, row.fieldName, "read")] === true,
-		write: values[cellPath(basePath, namespace, row.fieldName, "write")] === true,
-		publish: values[cellPath(basePath, namespace, row.fieldName, "publish")] === true
-	};
+	const current = byOperation((operation) => cellGranted(values, basePath, namespace, row, operation));
 	const touched = /* @__PURE__ */ new Set();
 	const next = { ...current };
-	for (const operation of CAPABILITY_OPERATIONS) {
+	for (const operation of rowOperations(row)) {
 		const change = changes[operation.id];
-		if (change !== void 0 && row[operation.id]) {
+		if (change !== void 0) {
 			next[operation.id] = change;
 			touched.add(operation.id);
 		}
 	}
 	const reconciled = reconcile(next, touched);
-	return CAPABILITY_OPERATIONS.filter((operation) => row[operation.id] && reconciled[operation.id] !== current[operation.id]).map((operation) => ({
+	return rowOperations(row).filter((operation) => reconciled[operation.id] !== current[operation.id]).map((operation) => ({
 		type: "UPDATE",
 		path: cellPath(basePath, namespace, row.fieldName, operation.id),
 		value: reconciled[operation.id]
 	}));
 };
+const grantsOf = (level) => {
+	const rank = ACCESS_LEVELS.indexOf(level);
+	return Object.fromEntries(ACCESS_CHAIN.map(({ id }, i) => [id, rank > i]));
+};
 /**
-* The form-state updates one click implies, as literal actions. Every toggle
-* (cell, row, column or tool) comes through here, so the publish rule applies
-* to bulk grants too.
+* The form-state updates one click implies, as literal actions. Every click
+* comes through here, so the dependency rules apply to the "All" controls too:
+* picking Write ticks read, and lowering access to none clears delete.
 *
-* Only cells whose value changes get an action, so a bulk toggle that changes
-* nothing does not mark the form modified.
+* Only cells whose value changes get an action, so a click that changes
+* nothing does not mark the form modified. A level above a row's ceiling
+* grants what the row exposes and no more.
 */ const buildToggleActions = (matrix, basePath, values, intent) => {
-	if (intent.kind === "tool" || intent.kind === "tools") return matrix.tools.filter((tool) => intent.kind === "tools" || tool.name === intent.name).filter((tool) => values[toolPath(basePath, tool.name)] === true !== intent.value).map((tool) => ({
+	if (intent.kind === "tool" || intent.kind === "tools") return matrix.tools.filter((tool) => intent.kind === "tools" || tool.name === intent.name).filter((tool) => toolGranted(values, basePath, tool.name) !== intent.value).map((tool) => ({
 		type: "UPDATE",
 		path: toolPath(basePath, tool.name),
 		value: intent.value
 	}));
-	const rows = matrix[intent.namespace].filter((row) => intent.kind === "column" || row.fieldName === intent.fieldName);
-	const changes = intent.kind === "row" ? {
-		read: intent.value,
-		write: intent.value,
-		publish: intent.value
-	} : { [intent.operation]: intent.value };
+	const rows = matrix[intent.namespace].filter((row) => intent.fieldName === void 0 || row.fieldName === intent.fieldName);
+	const changes = intent.kind === "access" ? grantsOf(intent.level) : {
+		delete: intent.mode !== "off",
+		deleteUnattended: intent.mode === "trash"
+	};
 	return rows.flatMap((row) => rowActions(basePath, intent.namespace, row, values, changes));
 };
+const firstNoop = (candidates, matrix, basePath, values, intentOf) => candidates.find((candidate) => buildToggleActions(matrix, basePath, values, intentOf(candidate)).length === 0);
+/**
+* The level a namespace's "All" control shows: the one that would change
+* nothing if picked, so rows capped below it still count. `undefined` while
+* the rows differ.
+*/ const allAccessLevel = (matrix, basePath, namespace, values) => firstNoop(ACCESS_LEVELS, matrix, basePath, values, (level) => ({
+	kind: "access",
+	namespace,
+	level
+}));
+/**
+* The delete mode the "All" control shows, by the same rule. It offers no
+* trash, so a row that trashes directly reads as mixed.
+*/ const allDeleteMode = (matrix, basePath, namespace, values) => firstNoop(["off", "approve"], matrix, basePath, values, (mode) => ({
+	kind: "deleteMode",
+	namespace,
+	mode
+}));
 //#endregion
-export { buildToggleActions, columnState, rowState, toolsState };
+export { accessLevelOf, accessLevelsOf, allAccessLevel, allDeleteMode, buildToggleActions, deleteModeOf, toolsState };

package/dist/admin/confirmations-panel.mjs

@@ -0,0 +1,232 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@payloadcms/ui";
+//#region src/admin/confirmations-panel.tsx
+/**
+* The element id of a call's row, which the page scrolls to.
+*/ const confirmationRowId = (handle) => `mcpx-confirmation-${handle}`;
+const CELL_PADDING = "calc(var(--base) * 0.4) calc(var(--base) * 0.6)";
+const styles = {
+	panel: {
+		marginBottom: "var(--base)",
+		padding: "calc(var(--base) * 0.75)",
+		border: "1px solid var(--theme-elevation-150)",
+		borderRadius: "3px",
+		background: "var(--theme-elevation-50)"
+	},
+	heading: { margin: 0 },
+	lead: {
+		margin: "calc(var(--base) * 0.25) 0 calc(var(--base) * 0.75)",
+		color: "var(--theme-elevation-500)"
+	},
+	group: { marginBottom: "calc(var(--base) * 0.75)" },
+	groupHeading: { margin: "0 0 calc(var(--base) * 0.25)" },
+	table: {
+		width: "100%",
+		borderCollapse: "collapse",
+		textAlign: "left"
+	},
+	head: {
+		padding: CELL_PADDING,
+		color: "var(--theme-elevation-400)",
+		fontWeight: "normal",
+		borderBottom: "1px solid var(--theme-border-color)"
+	},
+	cell: {
+		padding: CELL_PADDING,
+		verticalAlign: "middle",
+		borderBottom: "1px solid var(--theme-elevation-100)"
+	},
+	highlighted: { background: "var(--theme-elevation-100)" },
+	muted: { color: "var(--theme-elevation-500)" },
+	status: {
+		display: "block",
+		color: "var(--theme-elevation-500)",
+		fontSize: "0.85em"
+	},
+	permanent: {
+		color: "var(--theme-error-500)",
+		fontWeight: 600
+	},
+	actions: {
+		display: "flex",
+		gap: "calc(var(--base) * 0.25)",
+		justifyContent: "flex-end"
+	},
+	footer: {
+		display: "flex",
+		gap: "calc(var(--base) * 0.5)"
+	}
+};
+const HEADS = [
+	"Collection",
+	"Document",
+	"Effect",
+	"Reason"
+];
+const groupsOf = (confirmations) => {
+	const groups = /* @__PURE__ */ new Map();
+	for (const confirmation of confirmations) {
+		const entries = groups.get(confirmation.group) ?? [];
+		entries.push(confirmation);
+		groups.set(confirmation.group, entries);
+	}
+	return [...groups];
+};
+const DecisionButtons = ({ approve, busy, onDecide, reject, small = false }) => /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(Button, {
+	buttonStyle: "primary",
+	disabled: busy,
+	margin: false,
+	onClick: () => {
+		onDecide("approved");
+	},
+	size: small ? "small" : "medium",
+	type: "button",
+	children: approve
+}), /*#__PURE__*/ jsx(Button, {
+	buttonStyle: "secondary",
+	disabled: busy,
+	margin: false,
+	onClick: () => {
+		onDecide("rejected");
+	},
+	size: small ? "small" : "medium",
+	type: "button",
+	children: reject
+})] });
+const approveAllLabel = (confirmations) => {
+	const permanent = confirmations.filter((confirmation) => confirmation.summary.permanent).length;
+	return permanent === 0 ? `Approve all (${String(confirmations.length)})` : `Approve all (${String(confirmations.length)}, ${String(permanent)} permanent)`;
+};
+const Row = ({ busy, confirmation, onDecide }) => {
+	const { handle, highlighted, summary } = confirmation;
+	const cell = highlighted ? {
+		...styles.cell,
+		...styles.highlighted
+	} : styles.cell;
+	const name = summary.title ?? summary.id ?? "Unreadable";
+	return /*#__PURE__*/ jsxs("tr", {
+		"aria-current": highlighted ? "true" : void 0,
+		id: confirmationRowId(handle),
+		children: [
+			/*#__PURE__*/ jsx("td", {
+				style: cell,
+				children: summary.label
+			}),
+			/*#__PURE__*/ jsxs("td", {
+				style: cell,
+				children: [
+					summary.href ? /*#__PURE__*/ jsx("a", {
+						href: summary.href,
+						rel: "noreferrer",
+						target: "_blank",
+						children: name
+					}) : name,
+					summary.title && summary.id ? /*#__PURE__*/ jsxs("span", {
+						style: styles.muted,
+						children: [
+							" (",
+							summary.id,
+							")"
+						]
+					}) : null,
+					summary.status ? /*#__PURE__*/ jsx("span", {
+						style: styles.status,
+						children: summary.status
+					}) : null
+				]
+			}),
+			/*#__PURE__*/ jsx("td", {
+				style: cell,
+				children: summary.permanent ? /*#__PURE__*/ jsx("span", {
+					style: styles.permanent,
+					children: "Permanent"
+				}) : "Moves to trash"
+			}),
+			/*#__PURE__*/ jsx("td", {
+				style: cell,
+				children: summary.reason ? /*#__PURE__*/ jsxs("span", { children: [/*#__PURE__*/ jsx("span", {
+					style: styles.muted,
+					children: "The client wrote: "
+				}), summary.reason] }) : /*#__PURE__*/ jsx("span", {
+					style: styles.muted,
+					children: "No reason given"
+				})
+			}),
+			/*#__PURE__*/ jsx("td", {
+				style: cell,
+				children: /*#__PURE__*/ jsx("div", {
+					style: styles.actions,
+					children: /*#__PURE__*/ jsx(DecisionButtons, {
+						approve: "Approve",
+						busy,
+						onDecide: (decision) => {
+							onDecide([handle], decision);
+						},
+						reject: "Reject",
+						small: true
+					})
+				})
+			})
+		]
+	});
+};
+/**
+* The calls of an API key waiting for its user's decision, grouped by tool.
+* Renders nothing when none is waiting.
+*/ const ConfirmationsPanel = ({ busy, confirmations, onDecide }) => {
+	if (confirmations.length === 0) return null;
+	const handles = confirmations.map((confirmation) => confirmation.handle);
+	return /*#__PURE__*/ jsxs("section", {
+		className: "field-type",
+		style: styles.panel,
+		children: [
+			/*#__PURE__*/ jsx("h3", {
+				style: styles.heading,
+				children: "Waiting for your approval"
+			}),
+			/*#__PURE__*/ jsx("p", {
+				style: styles.lead,
+				children: "A client using this key asked for these calls. Approving runs nothing: the client runs approved calls with runConfirmed. Each call expires 15 minutes after it was requested."
+			}),
+			groupsOf(confirmations).map(([group, entries]) => /*#__PURE__*/ jsxs("div", {
+				style: styles.group,
+				children: [/*#__PURE__*/ jsx("h4", {
+					style: styles.groupHeading,
+					children: group
+				}), /*#__PURE__*/ jsxs("table", {
+					style: styles.table,
+					children: [/*#__PURE__*/ jsx("thead", { children: /*#__PURE__*/ jsxs("tr", { children: [HEADS.map((head) => /*#__PURE__*/ jsx("th", {
+						scope: "col",
+						style: styles.head,
+						children: head
+					}, head)), /*#__PURE__*/ jsx("th", {
+						scope: "col",
+						style: styles.head,
+						children: /*#__PURE__*/ jsx("span", {
+							className: "sr-only",
+							children: "Decision"
+						})
+					})] }) }), /*#__PURE__*/ jsx("tbody", { children: entries.map((confirmation) => /*#__PURE__*/ jsx(Row, {
+						busy,
+						confirmation,
+						onDecide
+					}, confirmation.handle)) })]
+				})]
+			}, group)),
+			/*#__PURE__*/ jsx("div", {
+				style: styles.footer,
+				children: /*#__PURE__*/ jsx(DecisionButtons, {
+					approve: approveAllLabel(confirmations),
+					busy,
+					onDecide: (decision) => {
+						onDecide(handles, decision);
+					},
+					reject: "Reject all"
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ConfirmationsPanel, confirmationRowId };

package/dist/admin/confirmations.d.mts

@@ -0,0 +1,15 @@
+import React from "react";
+//#region src/admin/confirmations.d.ts
+interface McpxConfirmationsProps {
+  /**
+   * Endpoint path below the API route, from the plugin options.
+   */
+  endpointPath: string;
+}
+/**
+ * The calls waiting for approval on the API key edit view. Reads and decides
+ * through the plugin's endpoints, never through the key's form, so a decision
+ * does not mark the key modified. Renders nothing while none is waiting.
+ */
+export declare const McpxConfirmations: React.FC<McpxConfirmationsProps>;
+//#endregion

package/dist/admin/confirmations.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { CONFIRMATIONS_PATH } from "../api-keys/confirmation-view.mjs";
+import { ConfirmationsPanel, confirmationRowId } from "./confirmations-panel.mjs";
+import { endpointUrl } from "./endpoint-url.mjs";
+import { jsx } from "react/jsx-runtime";
+import { toast, useConfig, useDocumentInfo } from "@payloadcms/ui";
+import { useCallback, useEffect, useState } from "react";
+//#region src/admin/confirmations.tsx
+/**
+* The calls waiting for approval on the API key edit view. Reads and decides
+* through the plugin's endpoints, never through the key's form, so a decision
+* does not mark the key modified. Renders nothing while none is waiting.
+*/ const McpxConfirmations = ({ endpointPath }) => {
+	const { id } = useDocumentInfo();
+	const { config } = useConfig();
+	const [confirmations, setConfirmations] = useState([]);
+	const [busy, setBusy] = useState(false);
+	const [version, setVersion] = useState(0);
+	const url = `${endpointUrl(config.serverURL, config.routes.api, endpointPath)}${CONFIRMATIONS_PATH}`;
+	useEffect(() => {
+		if (id === void 0) return;
+		let active = true;
+		const params = new URLSearchParams({ key: String(id) });
+		const highlight = new URLSearchParams(window.location.search).get("confirmation");
+		if (highlight !== null) params.set("confirmation", highlight);
+		fetch(`${url}?${params.toString()}`, { credentials: "include" }).then(async (response) => response.ok ? await response.json() : { confirmations: [] }).then((body) => {
+			if (active) setConfirmations(body.confirmations);
+		}).catch(() => void 0);
+		return () => {
+			active = false;
+		};
+	}, [
+		id,
+		url,
+		version
+	]);
+	const highlighted = confirmations.find((entry) => entry.highlighted)?.handle;
+	useEffect(() => {
+		if (highlighted !== void 0) document.getElementById(confirmationRowId(highlighted))?.scrollIntoView({ block: "center" });
+	}, [highlighted]);
+	const decide = useCallback((handles, decision) => {
+		setBusy(true);
+		fetch(url, {
+			method: "POST",
+			credentials: "include",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({
+				key: id,
+				handles,
+				decision
+			})
+		}).then(async (response) => {
+			if (!response.ok) {
+				const body = await response.json().catch(() => ({}));
+				toast.error(body.error ?? "The decision could not be saved.");
+			}
+		}).catch(() => {
+			toast.error("The decision could not be saved.");
+		}).finally(() => {
+			setBusy(false);
+			setVersion((current) => current + 1);
+		});
+	}, [id, url]);
+	return /*#__PURE__*/ jsx(ConfirmationsPanel, {
+		busy,
+		confirmations,
+		onDecide: decide
+	});
+};
+//#endregion
+export { McpxConfirmations };

package/dist/admin/endpoint-url.mjs

@@ -0,0 +1,7 @@
+//#region src/admin/endpoint-url.ts
+/**
+* The plugin endpoint's URL below the API route, without a doubled slash
+* after the origin.
+*/ const endpointUrl = (origin, apiRoute, endpointPath) => `${origin.replace(/\/+$/, "")}${apiRoute}${endpointPath}`;
+//#endregion
+export { endpointUrl };

package/dist/admin/index.d.mts

@@ -1,3 +1,4 @@
 import { McpxCapabilityMatrix } from "./capability-matrix.mjs";
+import { McpxConfirmations } from "./confirmations.mjs";
 import { McpxSetupGuide } from "./setup-guide.mjs";
-export { McpxCapabilityMatrix, McpxSetupGuide };
+export { McpxCapabilityMatrix, McpxConfirmations, McpxSetupGuide };

package/dist/admin/index.mjs

@@ -1,3 +1,4 @@
 import { McpxCapabilityMatrix } from "./capability-matrix.mjs";
+import { McpxConfirmations } from "./confirmations.mjs";
 import { McpxSetupGuide } from "./setup-guide.mjs";
-export { McpxCapabilityMatrix, McpxSetupGuide };
+export { McpxCapabilityMatrix, McpxConfirmations, McpxSetupGuide };

package/dist/admin/setup-guide.d.mts

@@ -1,13 +1,15 @@
 import React from "react";
 //#region src/admin/setup-guide.d.ts
 interface McpxSetupGuideProps {
-  /** Endpoint path below the API route, from the plugin options. */
+  /**
+   * Endpoint path below the API route, from the plugin options.
+   */
   endpointPath: string;
 }
 /**
- * Per-key connection instructions on the API key edit view. Renders nothing
- * until the document is saved, because before that there is no key to hand to
- * a client.
+ * Per-key connection instructions on the API key edit view, opened from a
+ * button next to the document controls. Renders nothing until the document is
+ * saved, because before that there is no key to hand to a client.
  */
 export declare const McpxSetupGuide: React.FC<McpxSetupGuideProps>;
 //#endregion

package/dist/admin/setup-guide.mjs

@@ -1,7 +1,8 @@
 "use client";
+import { endpointUrl } from "./endpoint-url.mjs";
 import { buildSetupGuide } from "../api-keys/setup-guide.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CopyToClipboard, useConfig, useDocumentInfo, useFormFields } from "@payloadcms/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Banner, Button, CopyToClipboard, Drawer, formatDrawerSlug, useConfig, useDocumentInfo, useEditDepth, useFormFields, useModal } from "@payloadcms/ui";
 import { useEffect, useState } from "react";
 //#region src/admin/setup-guide.tsx
 const asString = (value) => typeof value === "string" ? value : void 0;
@@ -13,7 +14,6 @@ const useOrigin = (serverUrl) => {
 	return origin;
 };
 const styles = {
-	lead: { marginBottom: "calc(var(--base) * 0.75)" },
 	section: { marginBottom: "calc(var(--base) * 0.75)" },
 	sectionHeader: {
 		display: "flex",
@@ -36,45 +36,63 @@ const styles = {
 		wordBreak: "break-all"
 	}
 };
-/**
-* Per-key connection instructions on the API key edit view. Renders nothing
-* until the document is saved, because before that there is no key to hand to
-* a client.
-*/ const McpxSetupGuide = ({ endpointPath }) => {
-	const { id } = useDocumentInfo();
+const SetupGuideContent = ({ endpointPath }) => {
 	const { config } = useConfig();
 	const apiKey = useFormFields(([fields]) => fields["apiKey"]?.value);
 	const label = useFormFields(([fields]) => fields["label"]?.value);
 	const origin = useOrigin(config.serverURL);
-	if (id === void 0) return null;
 	const sections = buildSetupGuide({
-		endpointUrl: `${origin.replace(/\/+$/, "")}${config.routes.api}${endpointPath}`,
+		endpointUrl: endpointUrl(origin, config.routes.api, endpointPath),
 		apiKey: asString(apiKey),
 		label: asString(label)
 	});
-	return /*#__PURE__*/ jsxs("div", {
-		className: "field-type",
-		children: [/*#__PURE__*/ jsx("p", {
-			style: styles.lead,
-			children: "Every snippet below contains this key in full. Treat it like a password."
-		}), sections.map((section) => /*#__PURE__*/ jsxs("section", {
-			style: styles.section,
-			children: [
-				/*#__PURE__*/ jsxs("div", {
-					style: styles.sectionHeader,
-					children: [/*#__PURE__*/ jsx("strong", { children: section.title }), /*#__PURE__*/ jsx(CopyToClipboard, { value: section.snippet })]
-				}),
-				section.description ? /*#__PURE__*/ jsx("p", {
-					style: styles.description,
-					children: section.description
-				}) : null,
-				/*#__PURE__*/ jsx("pre", {
-					style: styles.snippet,
-					children: section.snippet
-				})
-			]
-		}, section.id))]
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(Banner, {
+		type: "warning",
+		children: "Every snippet below contains this key in full. Treat it like a password."
+	}), sections.map((section) => /*#__PURE__*/ jsxs("section", {
+		style: styles.section,
+		children: [
+			/*#__PURE__*/ jsxs("div", {
+				style: styles.sectionHeader,
+				children: [/*#__PURE__*/ jsx("strong", { children: section.title }), /*#__PURE__*/ jsx(CopyToClipboard, { value: section.snippet })]
+			}),
+			section.description ? /*#__PURE__*/ jsx("p", {
+				style: styles.description,
+				children: section.description
+			}) : null,
+			/*#__PURE__*/ jsx("pre", {
+				style: styles.snippet,
+				children: section.snippet
+			})
+		]
+	}, section.id))] });
+};
+/**
+* Per-key connection instructions on the API key edit view, opened from a
+* button next to the document controls. Renders nothing until the document is
+* saved, because before that there is no key to hand to a client.
+*/ const McpxSetupGuide = ({ endpointPath }) => {
+	const { id } = useDocumentInfo();
+	const { openModal } = useModal();
+	const drawerSlug = formatDrawerSlug({
+		slug: "mcpx-connect",
+		depth: useEditDepth()
 	});
+	if (id === void 0) return null;
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(Button, {
+		buttonStyle: "secondary",
+		margin: false,
+		onClick: () => {
+			openModal(drawerSlug);
+		},
+		size: "medium",
+		type: "button",
+		children: "Connect a client"
+	}), /*#__PURE__*/ jsx(Drawer, {
+		slug: drawerSlug,
+		title: "Connect a client",
+		children: /*#__PURE__*/ jsx(SetupGuideContent, { endpointPath })
+	})] });
 };
 //#endregion
 export { McpxSetupGuide };

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

@@ -1,19 +1,21 @@
+import { McpxEntityCapabilities } from "../types.mjs";
 import "../options.mjs";
+import "../capabilities.mjs";
 //#region src/api-keys/capability-matrix.d.ts
 /**
  * One entity's row. The booleans say what the plugin config exposes, not what
- * the key was granted. A `false` renders as a dash, so absence reads as a
- * refusal by config rather than a gap.
+ * the key was granted. A `false` leaves its segment out of the row's controls.
  */
-export interface CapabilityRow {
+export interface CapabilityRow extends McpxEntityCapabilities {
   fieldName: string;
-  /** The slug, which is what MCP clients send and what refusals name. */
-  label: string;
-  read: boolean;
-  write: boolean;
-  publish: boolean;
-  /** Said only where a row departs from what its column header promises. */
-  hint?: string;
+  /**
+   * The slug, which is what MCP clients send and what refusals name.
+   */
+  slug: string;
+  /**
+   * Writes go live immediately, as the entity keeps no drafts.
+   */
+  live?: boolean;
 }
 interface CapabilityTool {
   name: string;