@bison-lab/payload-core 3.12.0 → 3.14.0

package/dist/admin.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { a as colorDocFromState, i as SYSTEM_COLOR_KEYS, n as pageEditorLooks, r as pageEditorTokens, s as stateFromColorDoc } from "./looks-BbL309kO.mjs";
-import { ArrayField, CheckboxInput, FieldDescription, FieldError, FieldLabel, fieldBaseClass, useConfig, useField, useForm, useFormFields } from "@payloadcms/ui";
+import { ArrayField, CheckboxInput, FieldDescription, FieldError, FieldLabel, fieldBaseClass, useAuth, useConfig, useField, useForm, useFormFields, useRowLabel } from "@payloadcms/ui";
 import { GREY_SCALES, SHADE_STEPS, contrastForeground, contrastRatio, createColorScale, deriveDarkPalette, deriveLightPalette, hexToHSL, hslToString, includedShadeSteps, isThemeHex, presetHints, setColorScaleInclude } from "@bison-lab/tokens";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1010,15 +1010,19 @@ function deleteLibraryColor(doc, key, replacement) {
 	return next;
 }
 //#endregion
+//#region src/theme/color-usages.ts
+/** Theme-store REST path. LibraryField calls `/api/globals/theme` + this. */
+const COLOR_USAGES_PATH = "/color-usages";
+//#endregion
 //#region src/admin/library-field.tsx
 function slugify(value) {
 	return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
 }
 /**
-* Custom colors: the same scale controls as system colors. A row that is
-* not referenced on a page deletes immediately. Rewriting in-use tokens
-* (`rewriteColorToken`) waits on a site usage lookup — Theme cannot see
-* page assignments by itself.
+* Custom colors: the same scale controls as system colors. Unused: the
+* Theme store's color-usages endpoint returns nothing and the row is
+* gone. In use: pick a live replacement; confirm rewrites stored tokens
+* then drops the row. Success and Destructive stay off that list.
 */
 const LibraryField = ({ field, path, readOnly }) => {
 	const dataPath = typeof field.admin?.custom?.dataPath === "string" ? field.admin.custom.dataPath : path;
@@ -1027,14 +1031,21 @@ const LibraryField = ({ field, path, readOnly }) => {
 		hasRows: true
 	});
 	const { getDataByPath } = useForm();
+	const { config } = useConfig();
 	const rows = asLibraryRows(value).length > 0 ? asLibraryRows(value) : asLibraryRows(getDataByPath?.(dataPath));
 	const [adding, setAdding] = useState(false);
 	const [name, setName] = useState("");
 	const [hex, setHex] = useState("");
 	const [sourceStep, setSourceStep] = useState(500);
+	const [replacing, setReplacing] = useState(null);
+	const [replacement, setReplacement] = useState("");
+	const [busy, setBusy] = useState(false);
 	function write(next) {
 		setValue(next);
 	}
+	function usagesUrl(key) {
+		return `${config.serverURL ?? ""}${config.routes?.api ?? "/api"}/globals/theme${COLOR_USAGES_PATH}?key=${encodeURIComponent(key)}`;
+	}
 	function add() {
 		const key = slugify(name);
 		if (!key || !isThemeHex(hex) || rows.some((row) => row.key === key)) return;
@@ -1048,9 +1059,42 @@ const LibraryField = ({ field, path, readOnly }) => {
 		setSourceStep(500);
 		setAdding(false);
 	}
-	function remove(row) {
-		write(deleteLibraryColor({ colors: { library: rows } }, row.key ?? "").colors?.library ?? []);
+	async function remove(row) {
+		const key = row.key ?? "";
+		const response = await fetch(usagesUrl(key), { credentials: "include" });
+		if (!response.ok) return;
+		const usages = (await response.json()).usages ?? [];
+		if (usages.length === 0) {
+			write(deleteLibraryColor({ colors: { library: rows } }, key).colors?.library ?? []);
+			return;
+		}
+		setReplacement("");
+		setReplacing({
+			row,
+			usages
+		});
+	}
+	async function confirmReplace() {
+		if (!replacing || !replacement || busy) return;
+		const key = replacing.row.key ?? "";
+		setBusy(true);
+		try {
+			if (!(await fetch(usagesUrl(key), {
+				method: "POST",
+				credentials: "include",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					key,
+					replacement
+				})
+			})).ok) return;
+			write(deleteLibraryColor({ colors: { library: rows } }, key, replacement).colors?.library ?? []);
+			setReplacing(null);
+		} finally {
+			setBusy(false);
+		}
 	}
+	const replacementOptions = replacing ? pageEditorLooks({ colors: { library: rows.filter((row) => row.key !== replacing.row.key) } }) : [];
 	return /* @__PURE__ */ jsxs("div", {
 		className: "field-type bl-library",
 		children: [
@@ -1136,6 +1180,69 @@ const LibraryField = ({ field, path, readOnly }) => {
 					]
 				})
 			}) }) : null,
+			replacing ? /* @__PURE__ */ jsx(ThemePortal, { children: /* @__PURE__ */ jsx("div", {
+				className: "bl-library__modal",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": "bl-library-replace-title",
+				onClick: (event) => {
+					if (event.target === event.currentTarget && !busy) setReplacing(null);
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "bl-library__panel",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "bl-library__panel-head",
+							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h2", {
+								id: "bl-library-replace-title",
+								children: ["Replace ", replacing.row.label ?? replacing.row.key]
+							}), /* @__PURE__ */ jsx("p", { children: replacing.usages.length === 1 ? "1 document uses this color. Pick a replacement at the same step." : `${replacing.usages.length} documents use this color. Pick a replacement at the same step.` })] }), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setReplacing(null),
+								"aria-label": "Close",
+								disabled: busy,
+								children: "×"
+							})]
+						}),
+						/* @__PURE__ */ jsx("ul", {
+							className: "bl-library__usages",
+							children: replacing.usages.map((usage, index) => /* @__PURE__ */ jsxs("li", { children: [
+								usage.collection ?? usage.global,
+								usage.id != null ? ` #${usage.id}` : "",
+								" · ",
+								usage.path,
+								" · ",
+								usage.token
+							] }, `${usage.collection ?? usage.global}-${usage.id ?? ""}-${usage.path}-${index}`))
+						}),
+						/* @__PURE__ */ jsxs("label", { children: ["Replacement", /* @__PURE__ */ jsxs("select", {
+							value: replacement,
+							onChange: (event) => setReplacement(event.target.value),
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "",
+								children: "Select a color…"
+							}), replacementOptions.map((option) => /* @__PURE__ */ jsx("option", {
+								value: option.value,
+								children: option.label
+							}, option.value))]
+						})] }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "bl-library__actions",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setReplacing(null),
+								disabled: busy,
+								children: "Cancel"
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								disabled: !replacement || busy,
+								onClick: () => void confirmReplace(),
+								children: "Replace and delete"
+							})]
+						})
+					]
+				})
+			}) }) : null,
 			/* @__PURE__ */ jsx("div", {
 				className: "bl-library__list",
 				children: rows.map((row, index) => /* @__PURE__ */ jsx(ColorScaleCard, {
@@ -1152,7 +1259,7 @@ const LibraryField = ({ field, path, readOnly }) => {
 						};
 						write(copy);
 					},
-					onDelete: readOnly ? void 0 : () => remove(row),
+					onDelete: readOnly ? void 0 : () => void remove(row),
 					readOnly
 				}, row.key ?? index))
 			})
@@ -1173,6 +1280,8 @@ const CSS$3 = `
 .bl-library__panel p{margin:.5rem 0 0;color:#475569;font-size:14px}
 .bl-library__panel label{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem;font-size:13px;font-weight:600}
 .bl-library__panel input,.bl-library__panel select{min-height:2.25rem;border:1px solid #cbd5e1;border-radius:8px;padding:.35rem .5rem;background:#fff;color:#0f172a}
+.bl-library__usages{margin:1rem 0 0;padding-left:1.1rem;color:#475569;font-size:13px;font-weight:400}
+.bl-library__usages li{margin:.25rem 0}
 .bl-library__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:1rem}
 .bl-library__actions button:last-child{border:0;background:#0f172a;color:#fff;font-weight:600}
 .bl-library__actions button:last-child:disabled{opacity:.4;cursor:not-allowed}
@@ -2406,6 +2515,159 @@ const LookField = ({ field, path, readOnly }) => {
 	});
 };
 //#endregion
+//#region src/features/types.ts
+const FEATURES_SLUG = "features";
+const FEATURE_GROUPS = [
+	"pages",
+	"media",
+	"theme",
+	"users"
+];
+const FEATURE_GROUP_LABELS = {
+	pages: "Pages",
+	media: "Media",
+	theme: "Theme",
+	users: "Users"
+};
+/**
+* Package catalogue. Features itself is not a row — that screen is
+* Developer-only in code. Empty Global falls back to these defaults.
+*/
+const PACKAGE_FEATURES = [
+	{
+		slug: "content",
+		label: "Content",
+		group: "pages",
+		defaultReleased: true
+	},
+	{
+		slug: "publish",
+		label: "Publish",
+		group: "pages",
+		defaultReleased: true
+	},
+	{
+		slug: "api-tab",
+		label: "API tab",
+		group: "pages",
+		defaultReleased: false
+	},
+	{
+		slug: "media",
+		label: "Media",
+		group: "media",
+		defaultReleased: true
+	},
+	{
+		slug: "theme-colors",
+		label: "Colors",
+		group: "theme",
+		defaultReleased: true
+	},
+	{
+		slug: "theme-typography",
+		label: "Typography",
+		group: "theme",
+		defaultReleased: true
+	},
+	{
+		slug: "theme-appearance",
+		label: "Appearance",
+		group: "theme",
+		defaultReleased: true
+	},
+	{
+		slug: "theme-identity",
+		label: "Identity",
+		group: "theme",
+		defaultReleased: true
+	},
+	{
+		slug: "brand-assets",
+		label: "Brand assets",
+		group: "theme",
+		defaultReleased: true
+	},
+	{
+		slug: "users",
+		label: "Users",
+		group: "users",
+		defaultReleased: true
+	},
+	{
+		slug: "roles",
+		label: "Roles",
+		group: "users",
+		defaultReleased: true
+	}
+];
+function isFeatureGroupId(value) {
+	return typeof value === "string" && FEATURE_GROUPS.includes(value);
+}
+function isFeatureSlug(value) {
+	return typeof value === "string" && /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/.test(value);
+}
+//#endregion
+//#region src/features/matrix.ts
+const MISSING_PACKAGE_FEATURES_MESSAGE = "Features must include Content, Publish, API tab, Media, Theme screens, Brand assets, Users, and Roles.";
+function featureCatalogue(extras = []) {
+	return [...PACKAGE_FEATURES.map((feature) => ({ ...feature })), ...extras.map((extra) => ({
+		slug: extra.slug,
+		label: extra.label,
+		group: extra.group ?? "users",
+		defaultReleased: extra.defaultReleased ?? false
+	}))];
+}
+function defaultFeaturesFieldValue(extras = []) {
+	return featureCatalogue(extras).map((feature) => ({
+		id: feature.slug,
+		slug: feature.slug,
+		label: feature.label,
+		group: feature.group,
+		released: feature.defaultReleased
+	}));
+}
+function parseFeaturesMatrix(value) {
+	if (!Array.isArray(value) || value.length === 0) return {
+		ok: false,
+		message: MISSING_PACKAGE_FEATURES_MESSAGE
+	};
+	const rows = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const item of value) {
+		if (!item || typeof item !== "object") continue;
+		const slug = "slug" in item ? item.slug : void 0;
+		if (!isFeatureSlug(slug) || seen.has(slug)) continue;
+		seen.add(slug);
+		const pack = PACKAGE_FEATURES.find((feature) => feature.slug === slug);
+		const label = "label" in item && typeof item.label === "string" ? item.label : pack?.label ?? slug;
+		const group = "group" in item && isFeatureGroupId(item.group) ? item.group : pack?.group ?? "users";
+		rows.push({
+			id: slug,
+			slug,
+			label,
+			group,
+			released: Boolean("released" in item && item.released)
+		});
+	}
+	if (PACKAGE_FEATURES.some((feature) => !seen.has(feature.slug))) return {
+		ok: false,
+		message: MISSING_PACKAGE_FEATURES_MESSAGE
+	};
+	return {
+		ok: true,
+		rows
+	};
+}
+function featureGroupLabel(group) {
+	return isFeatureGroupId(group) ? FEATURE_GROUP_LABELS[group] : group;
+}
+function packageFeatureLabel(slug, extras = []) {
+	const pack = PACKAGE_FEATURES.find((feature) => feature.slug === slug);
+	if (pack) return pack.label;
+	return extras.find((feature) => feature.slug === slug)?.label ?? slug;
+}
+//#endregion
 //#region src/roles/types.ts
 /**
 * The Roles Global a site's generated types will describe. Optional and
@@ -2424,108 +2686,352 @@ const ROLE_LABELS = {
 	designer: "Designer",
 	author: "Author"
 };
-const CAPABILITIES = [
-	"content",
-	"brand",
-	"publish",
-	"users"
+const THEME_FEATURE_SLUGS = [
+	"theme-colors",
+	"theme-typography",
+	"theme-appearance",
+	"theme-identity",
+	"brand-assets"
 ];
+const DEFAULT_ROLE_GRANTS = {
+	developer: [],
+	admin: [
+		"content",
+		"publish",
+		"media",
+		"users",
+		"roles"
+	],
+	designer: [
+		"content",
+		"media",
+		...THEME_FEATURE_SLUGS,
+		"users",
+		"roles"
+	],
+	author: ["content", "media"]
+};
 function isRole(value) {
 	return typeof value === "string" && ROLES.includes(value);
 }
+/** Lowercase slug from a letters-and-spaces name: `designer`, `the-designer`. */
+function isRoleSlug(value) {
+	return typeof value === "string" && /^[a-z]+(-[a-z]+)*$/.test(value);
+}
+/** Strip digits and punctuation as the name is typed. Trailing space stays. */
+function sanitizeRoleNameInput(value) {
+	return value.replace(/[^A-Za-z ]/g, "").replace(/ {2,}/g, " ");
+}
+function roleLabel(role, label) {
+	const trimmed = typeof label === "string" ? label.trim() : "";
+	if (trimmed) return trimmed;
+	return isRole(role) ? ROLE_LABELS[role] : role;
+}
+function defaultGrantsForRole(role, extraGrants) {
+	if (isRole(role)) return [...DEFAULT_ROLE_GRANTS[role]];
+	return extraGrants ? [...extraGrants] : [];
+}
 //#endregion
 //#region src/roles/matrix.ts
+const ROLES_SLUG = "roles";
 /**
-* Default rank and ticks. Brand is Designer only. The API tab is not a
-* column — it is locked to Developer in `isDeveloper`.
+* Default rank and grants. Developer is implicit (empty grants). Brand
+* screens default to Designer. The API tab is not granted until released.
 */
-const DEFAULT_ROLE_MATRIX = [
-	{
-		role: "developer",
-		content: true,
-		brand: true,
-		publish: true,
-		users: true
-	},
-	{
-		role: "admin",
-		content: true,
-		brand: false,
-		publish: true,
-		users: true
-	},
-	{
-		role: "designer",
-		content: false,
-		brand: true,
-		publish: false,
-		users: false
-	},
-	{
-		role: "author",
-		content: true,
-		brand: false,
-		publish: false,
-		users: false
-	}
-];
-const DEVELOPER_DESCRIPTION = "Everything Admin can do, plus the document API tab.";
-const CAPABILITY_LABELS = {
-	content: "Content",
-	brand: "Brand",
-	publish: "Publish",
-	users: "Users"
-};
-function defaultRolesFieldValue() {
-	return DEFAULT_ROLE_MATRIX.map((row) => ({
+const DEFAULT_ROLE_MATRIX = ROLES.map((role) => ({
+	role,
+	grants: defaultGrantsForRole(role)
+}));
+const DEVELOPER_DESCRIPTION = "Everything, including features not released for assignment.";
+const MISSING_SEED_ROLES_MESSAGE = "Roles must include Developer, Admin, Designer, and Author.";
+const DUPLICATE_ROLE_SLUG_MESSAGE = "Each role needs a unique slug.";
+function uniqueSlugs(values) {
+	const slugs = [];
+	for (const value of values) if (typeof value === "string" && isFeatureSlug(value) && !slugs.includes(value)) slugs.push(value);
+	return slugs;
+}
+/** Read stored grants, or rebuild them from the old capability ticks. */
+function grantsFromStoredRole(item) {
+	if ("grants" in item && Array.isArray(item.grants)) return uniqueSlugs(item.grants);
+	const grants = [];
+	if ("content" in item && item.content) grants.push("content", "media");
+	if ("publish" in item && item.publish) grants.push("publish");
+	if ("users" in item && item.users) grants.push("users", "roles");
+	if ("brand" in item && item.brand) grants.push(...THEME_FEATURE_SLUGS);
+	return uniqueSlugs(grants);
+}
+function seedRoleRows(extras = []) {
+	return [...DEFAULT_ROLE_MATRIX.map((row) => ({
+		...row,
+		grants: [...row.grants],
+		label: isRole(row.role) ? ROLE_LABELS[row.role] : row.role
+	})), ...extras.map((extra) => ({
+		role: extra.role,
+		label: extra.label,
+		grants: extra.grants ? [...extra.grants] : []
+	}))];
+}
+function defaultRolesFieldValue(extras = []) {
+	return seedRoleRows(extras).map((row) => ({
 		id: row.role,
 		...row
 	}));
 }
+function readRoleRow(item) {
+	const role = "role" in item ? item.role : void 0;
+	if (typeof role !== "string" || role.trim() === "") return { error: DUPLICATE_ROLE_SLUG_MESSAGE };
+	if (!isRoleSlug(role)) return { error: DUPLICATE_ROLE_SLUG_MESSAGE };
+	return {
+		id: role,
+		role,
+		label: roleLabel(role, "label" in item && typeof item.label === "string" ? item.label : void 0),
+		grants: grantsFromStoredRole(item)
+	};
+}
+function parseRolesMatrix(value) {
+	if (!Array.isArray(value)) return {
+		ok: false,
+		message: MISSING_SEED_ROLES_MESSAGE
+	};
+	const rows = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const item of value) {
+		if (!item || typeof item !== "object") continue;
+		const role = "role" in item ? item.role : void 0;
+		if (typeof role !== "string" || role.trim() === "") continue;
+		const parsed = readRoleRow(item);
+		if ("error" in parsed) return {
+			ok: false,
+			message: parsed.error
+		};
+		if (seen.has(parsed.role)) return {
+			ok: false,
+			message: DUPLICATE_ROLE_SLUG_MESSAGE
+		};
+		seen.add(parsed.role);
+		rows.push(parsed);
+	}
+	if (ROLES.some((role) => !seen.has(role))) return {
+		ok: false,
+		message: MISSING_SEED_ROLES_MESSAGE
+	};
+	return {
+		ok: true,
+		rows
+	};
+}
 function roleSelectOptions(matrix = DEFAULT_ROLE_MATRIX) {
 	return matrix.map((row) => ({
-		label: ROLE_LABELS[row.role],
+		label: roleLabel(row.role, row.label),
 		value: row.role
 	}));
 }
-/** Capability copy only. Developer names the API tab; nothing about MCP or seed. */
+/** Grant copy only. Developer names the unreleased catalogue; nothing about MCP or seed. */
 function roleDescription(role, matrix = DEFAULT_ROLE_MATRIX) {
 	if (role === "developer") return DEVELOPER_DESCRIPTION;
 	const row = matrix.find((entry) => entry.role === role);
 	if (!row) return "No capabilities";
-	return CAPABILITIES.filter((capability) => row[capability]).map((capability) => CAPABILITY_LABELS[capability]).join(", ") || "No capabilities";
+	return row.grants.map((slug) => packageFeatureLabel(slug)).join(", ") || "No capabilities";
+}
+/**
+* Seed grants and package labels come back; extra rows stay as they are.
+*/
+function resetRolesMatrix(current) {
+	const extras = [];
+	if (Array.isArray(current)) for (const item of current) {
+		if (!item || typeof item !== "object") continue;
+		const parsed = readRoleRow(item);
+		if ("error" in parsed || isRole(parsed.role)) continue;
+		extras.push(parsed);
+	}
+	return [...defaultRolesFieldValue(), ...extras];
 }
 //#endregion
 //#region src/admin/roles-matrix-field.tsx
-const HIDE_ROW_CHROME = `.bl-roles-matrix .array-field__add-row,.bl-roles-matrix .array-actions__add,.bl-roles-matrix .array-actions__remove,.bl-roles-matrix .array-actions__duplicate,.bl-roles-matrix .array-actions__copy{display:none}.bl-roles-matrix__toolbar{display:flex;justify-content:flex-end;margin-block-end:.75rem}.bl-roles-matrix__reset{min-height:2.25rem;padding:.35rem .9rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}`;
+const HIDE_ROW_CHROME = `.bl-roles-matrix .array-actions__add,.bl-roles-matrix .array-actions__duplicate,.bl-roles-matrix .array-actions__copy{display:none}.bl-roles-matrix .array-field__add-row{display:none}.bl-roles-matrix--hide-developer .array-field__row:has([data-role-seed="developer"]),.bl-roles-matrix--hide-developer .collapsible:has([data-role-seed="developer"]){display:none}.bl-roles-matrix__toolbar{display:flex;justify-content:flex-end;gap:.5rem;margin-block-end:.75rem}.bl-roles-matrix__reset,.bl-roles-matrix__add{min-height:2.25rem;padding:.35rem .9rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}body.bl-roles-matrix-seed-menu .array-actions__remove{display:none}`;
+function seedRoleFromTrigger(trigger) {
+	let node = trigger.parentElement;
+	while (node) {
+		const slugs = node.querySelectorAll("[data-role-slug]");
+		if (slugs.length === 1) return isRole(slugs[0]?.getAttribute("data-role-seed") || slugs[0]?.getAttribute("data-role-slug"));
+		if (slugs.length > 1) return false;
+		node = node.parentElement;
+	}
+	return false;
+}
+function viewerIsDeveloper(user) {
+	if (!user || typeof user !== "object" || !("roles" in user)) return false;
+	const roles = user.roles;
+	return Array.isArray(roles) && roles.includes("developer");
+}
 /**
-* Payload's array field: drag rank stays, add/remove go away. Reset writes
-* the package seed back onto the field.
+* Payload's array field: drag rank stays, add is for custom rows, seed
+* rows have no remove. Developer stays in the saved array and is shown
+* only to a Developer. Reset restores seed ticks and package labels.
 */
 const RolesMatrixField = (props) => {
-	const { setValue } = useField({ path: props.path });
+	const { setValue, value } = useField({ path: props.path });
+	const { user } = useAuth();
+	const hideDeveloper = !viewerIsDeveloper(user);
+	const rootRef = useRef(null);
+	const seedMenu = useRef(false);
+	const onClickCapture = useCallback((event) => {
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		const trigger = target.closest(".array-actions__button");
+		if (trigger) {
+			const owner = trigger.closest(".array-field");
+			seedMenu.current = owner !== null && owner === rootRef.current?.querySelector(".array-field") && seedRoleFromTrigger(trigger);
+			document.body.classList.toggle("bl-roles-matrix-seed-menu", seedMenu.current);
+			return;
+		}
+		if (!target.closest(".array-actions__remove")) return;
+		if (!seedMenu.current) return;
+		event.preventDefault();
+		event.stopPropagation();
+	}, []);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "bl-roles-matrix",
+		className: ["bl-roles-matrix", hideDeveloper && "bl-roles-matrix--hide-developer"].filter(Boolean).join(" "),
+		ref: rootRef,
+		onClickCapture,
 		children: [
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-roles-matrix",
 				precedence: "default",
 				children: HIDE_ROW_CHROME
 			}),
-			/* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
 				className: "bl-roles-matrix__toolbar",
-				children: /* @__PURE__ */ jsx("button", {
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "bl-roles-matrix__add",
+					onClick: () => rootRef.current?.querySelector(".array-field__add-row")?.click(),
+					children: "Add Role"
+				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
 					className: "bl-roles-matrix__reset",
-					onClick: () => setValue(defaultRolesFieldValue()),
+					onClick: () => setValue(resetRolesMatrix(value)),
 					children: "Reset to defaults"
-				})
+				})]
 			}),
 			/* @__PURE__ */ jsx(ArrayField, { ...props })
 		]
 	});
 };
 //#endregion
+//#region src/admin/roles-row-label.tsx
+/**
+* Array row header. Shows the current display name, not “Role 01”.
+*/
+function RolesRowLabel() {
+	const { data } = useRowLabel();
+	const role = typeof data.role === "string" ? data.role : "";
+	const seed = typeof data.seed === "string" && data.seed ? data.seed : isRole(role) ? role : "";
+	const label = roleLabel(role, data.label) || "Role";
+	return /* @__PURE__ */ jsx("span", {
+		"data-role-slug": role,
+		"data-role-seed": seed,
+		children: label
+	});
+}
+//#endregion
+//#region src/admin/role-slug-field.tsx
+/**
+* Seed slugs stay read-only. A custom row's slug is typed here.
+*/
+const RoleSlugField = ({ field, path, readOnly }) => {
+	const { value, setValue, showError, errorMessage } = useField({ path });
+	const locked = Boolean(readOnly) || isRole(value);
+	const required = Boolean(field.required);
+	const id = `field-${path.replace(/\./g, "__")}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			fieldBaseClass,
+			"text",
+			locked && "read-only"
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: id,
+				label: field.label,
+				required
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: `${fieldBaseClass}__wrap`,
+				children: [/* @__PURE__ */ jsx(FieldError, {
+					message: errorMessage,
+					path,
+					showError
+				}), /* @__PURE__ */ jsx("input", {
+					id,
+					"data-role-slug": value ?? "",
+					type: "text",
+					autoComplete: "off",
+					spellCheck: false,
+					readOnly: locked,
+					disabled: locked,
+					value: value ?? "",
+					onChange: (event) => {
+						if (!locked) setValue(event.target.value);
+					}
+				})]
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				description: field.admin?.description,
+				path
+			})
+		]
+	});
+};
+//#endregion
+//#region src/admin/role-name-field.tsx
+/**
+* Role name. Letters and spaces only, so the hidden slug stays
+* `the-greatest-designer` from `The Greatest Designer`.
+*/
+const RoleNameField = ({ field, path, readOnly }) => {
+	const { value, setValue, showError, errorMessage } = useField({ path });
+	const required = Boolean(field.required);
+	const id = `field-${path.replace(/\./g, "__")}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			fieldBaseClass,
+			"text",
+			readOnly && "read-only"
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: id,
+				label: field.label,
+				required
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: `${fieldBaseClass}__wrap`,
+				children: [/* @__PURE__ */ jsx(FieldError, {
+					message: errorMessage,
+					path,
+					showError
+				}), /* @__PURE__ */ jsx("input", {
+					id,
+					type: "text",
+					autoComplete: "off",
+					spellCheck: false,
+					readOnly: Boolean(readOnly),
+					disabled: Boolean(readOnly),
+					value: value ?? "",
+					onChange: (event) => {
+						if (!readOnly) setValue(sanitizeRoleNameInput(event.target.value));
+					}
+				})]
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				description: field.admin?.description,
+				path
+			})
+		]
+	});
+};
+//#endregion
 //#region src/admin/roles-field.tsx
 const GRID_CSS = `.bl-roles__grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));margin-block:.35rem 0}.bl-roles__option{display:flex;flex-direction:column;gap:.25rem;padding:.65rem .75rem;border:1px solid var(--theme-elevation-150,#e2e8f0);border-radius:8px}.bl-roles__option.is-checked{border-color:var(--theme-elevation-400,#94a3b8)}.bl-roles__option.is-included{opacity:.7}.bl-roles__what{font-size:.8rem;line-height:1.35;color:var(--theme-elevation-500,#64748b)}`;
 function optionValue(option) {
@@ -2534,17 +3040,36 @@ function optionValue(option) {
 function optionLabel(option) {
 	return typeof option === "string" ? option : String(option.label);
 }
+function useOfferedRoles(fallback) {
+	const { config } = useConfig();
+	const [live, setLive] = useState(null);
+	const api = config?.routes?.api;
+	const serverURL = config?.serverURL ?? "";
+	useEffect(() => {
+		if (!api) return;
+		let cancelled = false;
+		fetch(`${serverURL}${api}/globals/${ROLES_SLUG}?depth=0`, { credentials: "include" }).then((response) => response.ok ? response.json() : null).then((doc) => {
+			if (cancelled || !doc) return;
+			const parsed = parseRolesMatrix(doc.roles);
+			if (parsed.ok) setLive(roleSelectOptions(parsed.rows));
+		}).catch(() => void 0);
+		return () => {
+			cancelled = true;
+		};
+	}, [api, serverURL]);
+	return live ?? fallback;
+}
 /**
 * Users Roles checklist. Order and labels come from the field options (the
-* Roles Global, or the seed). Copy is `roleDescription`. Developer is
-* exclusive; Admin does not swallow Designer.
+* Roles Global, or the seed plus extras). Copy is `roleDescription`.
+* Developer is exclusive; a custom role does not clear Designer.
 */
 const RolesField = ({ field, path: pathFromProps, readOnly, validate }) => {
 	const { admin: { description } = {}, label, localized, options = [], required } = field;
-	const offered = (options.length ? options : roleSelectOptions()).map((option) => ({
+	const offered = useOfferedRoles((options.length ? options : roleSelectOptions()).map((option) => ({
 		value: optionValue(option),
 		label: optionLabel(option)
-	}));
+	})));
 	const { disabled, errorMessage, path, setValue, showError, value } = useField({
 		potentiallyStalePath: pathFromProps,
 		validate: useCallback((value, validationOptions) => {
@@ -2607,7 +3132,7 @@ const RolesField = ({ field, path: pathFromProps, readOnly, validate }) => {
 					className: "bl-roles__grid",
 					role: "group",
 					children: offered.map((option) => {
-						const role = isRole(option.value) ? option.value : null;
+						const role = option.value;
 						if (!role) return null;
 						const included = exclusive !== null && role !== exclusive;
 						const checked = selected.includes(role);
@@ -2620,7 +3145,7 @@ const RolesField = ({ field, path: pathFromProps, readOnly, validate }) => {
 							children: [/* @__PURE__ */ jsx(CheckboxInput, {
 								checked,
 								id: `${path}-${role}`,
-								label: option.label || ROLE_LABELS[role],
+								label: option.label || roleLabel(role),
 								onToggle: () => toggle(role),
 								readOnly: locked || included
 							}), /* @__PURE__ */ jsx("span", {
@@ -2639,6 +3164,169 @@ const RolesField = ({ field, path: pathFromProps, readOnly, validate }) => {
 	});
 };
 //#endregion
-export { AppearanceField, ColorField, ColorScaleField, ContrastReport, FontField, GreyScaleField, HiddenSaveButton, IdentityFallback, LibraryField, LookField, PairingField, PublishChild, RolesField, RolesMatrixField, SectionHeading, ThemeDocumentControls, ThemeSaveButton };
+//#region src/admin/roles-grants-field.tsx
+const LIST_CSS$1 = `.bl-role-grants{margin-block:.2rem 0;font-size:16px}.bl-role-grants__group{margin-block:.75rem 0}.bl-role-grants__group-title{font-size:13px;letter-spacing:.02em;color:var(--theme-elevation-400,#94a3b8);font-weight:650;margin-block-end:.25rem}.bl-role-grants__row{display:flex;align-items:center;gap:.65rem;padding:.35rem 0}.bl-role-grants__row.is-implicit{opacity:.85}.bl-role-grants input{inline-size:1.15rem;block-size:1.15rem}.bl-role-grants input:disabled{cursor:default}.bl-role-grants__note{margin-block:.35rem 0;font-size:13px;color:var(--theme-elevation-500,#64748b)}`;
+function asGrants(value) {
+	if (!Array.isArray(value)) return [];
+	return value.filter((entry) => typeof entry === "string");
+}
+function rolePathFromGrants(path) {
+	return path.replace(/\.grants$/, ".role");
+}
+/**
+* Released catalogue rows as ticks. Unreleased features do not appear,
+* except on Developer: every catalogue row is shown granted and locked
+* so a new Feature is visibly included.
+*/
+const RolesGrantsField = (props) => {
+	const { setValue, value } = useField({ path: props.path });
+	const { value: role } = useField({ path: rolePathFromGrants(props.path) });
+	const { config } = useConfig();
+	const [catalogue, setCatalogue] = useState(defaultFeaturesFieldValue());
+	const api = config?.routes?.api;
+	const serverURL = config?.serverURL ?? "";
+	const implicitAll = role === "developer";
+	useEffect(() => {
+		if (!api) return;
+		let cancelled = false;
+		fetch(`${serverURL}${api}/globals/${FEATURES_SLUG}?depth=0`, { credentials: "include" }).then((response) => response.ok ? response.json() : null).then((doc) => {
+			if (cancelled || !doc) return;
+			const parsed = parseFeaturesMatrix(doc.features);
+			if (parsed.ok) setCatalogue(parsed.rows);
+		}).catch(() => void 0);
+		return () => {
+			cancelled = true;
+		};
+	}, [api, serverURL]);
+	const grants = asGrants(value);
+	const shown = implicitAll ? catalogue : catalogue.filter((row) => row.released);
+	function toggle(slug, checked) {
+		if (implicitAll) return;
+		const next = new Set(grants);
+		if (checked) next.add(slug);
+		else next.delete(slug);
+		setValue([...next]);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bl-role-grants",
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-role-grants",
+				precedence: "default",
+				children: LIST_CSS$1
+			}),
+			implicitAll ? /* @__PURE__ */ jsx("p", {
+				className: "bl-role-grants__note",
+				children: "Always granted, including features not yet released."
+			}) : null,
+			FEATURE_GROUPS.map((group) => {
+				const members = shown.filter((row) => (row.group ?? "users") === group);
+				if (members.length === 0) return null;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "bl-role-grants__group",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "bl-role-grants__group-title",
+						children: featureGroupLabel(group)
+					}), members.map((row) => /* @__PURE__ */ jsxs("label", {
+						className: ["bl-role-grants__row", implicitAll && "is-implicit"].filter(Boolean).join(" "),
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							"aria-label": `${row.label || row.slug}`,
+							checked: implicitAll || grants.includes(row.slug),
+							disabled: implicitAll,
+							onChange: (event) => toggle(row.slug, event.target.checked)
+						}), /* @__PURE__ */ jsx("span", { children: row.label || row.slug })]
+					}, row.slug))]
+				}, group);
+			})
+		]
+	});
+};
+//#endregion
+//#region src/admin/features-matrix-field.tsx
+const LIST_CSS = `.bl-features{margin-block:.35rem 0;font-size:16px}.bl-features__group{margin-block:1rem 0}.bl-features__group-title{font-size:14px;letter-spacing:.02em;color:var(--theme-elevation-400,#94a3b8);font-weight:650;margin-block-end:.35rem}.bl-features__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--theme-elevation-150,#e2e8f0)}.bl-features__row:last-child{border-bottom:0}.bl-features input{inline-size:1.15rem;block-size:1.15rem}`;
+function asRows(value) {
+	return Array.isArray(value) ? value : [];
+}
+function FeatureReleaseRow({ path, index, row, rows, setRows }) {
+	const { setValue: setReleased } = useField({ path: `${path}.${index}.released` });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bl-features__row",
+		children: [/* @__PURE__ */ jsx("span", { children: row.label || row.slug }), /* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			"aria-label": `Release ${row.label || row.slug}`,
+			checked: Boolean(row.released),
+			onChange: (event) => {
+				const released = event.target.checked;
+				setReleased(released);
+				setRows(rows.map((entry) => entry.slug === row.slug ? {
+					...entry,
+					released
+				} : entry));
+			}
+		})]
+	});
+}
+/**
+* One release switch per catalogue row, grouped. Off hides the tick on
+* Roles; Developer still has the feature.
+*
+* Writes both the array value and each row's `released` checkbox path.
+* Payload still registers those child fields; toggling only the parent
+* array leaves them false and Save stores the old flags.
+*/
+const FeaturesMatrixField = (props) => {
+	const { setValue, value } = useField({ path: props.path });
+	const { config } = useConfig();
+	const api = config?.routes?.api;
+	const serverURL = config?.serverURL ?? "";
+	useEffect(() => {
+		if (!api || asRows(value).length > 0) return;
+		let cancelled = false;
+		fetch(`${serverURL}${api}/globals/${FEATURES_SLUG}?depth=0`, { credentials: "include" }).then((response) => response.ok ? response.json() : null).then((doc) => {
+			if (cancelled || !doc) return;
+			const incoming = asRows(doc.features);
+			if (incoming.length > 0) setValue(incoming, true);
+		}).catch(() => void 0);
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		api,
+		serverURL,
+		setValue,
+		value
+	]);
+	const rows = asRows(value);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bl-features",
+		children: [/* @__PURE__ */ jsx("style", {
+			href: "bl-features",
+			precedence: "default",
+			children: LIST_CSS
+		}), FEATURE_GROUPS.map((group) => {
+			const members = rows.map((row, index) => ({
+				row,
+				index
+			})).filter(({ row }) => (row.group ?? "users") === group);
+			if (members.length === 0) return null;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "bl-features__group",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "bl-features__group-title",
+					children: featureGroupLabel(group)
+				}), members.map(({ row, index }) => /* @__PURE__ */ jsx(FeatureReleaseRow, {
+					path: props.path,
+					index,
+					row,
+					rows,
+					setRows: (next) => setValue(next)
+				}, row.slug))]
+			}, group);
+		})]
+	});
+};
+//#endregion
+export { AppearanceField, ColorField, ColorScaleField, ContrastReport, FeaturesMatrixField, FontField, GreyScaleField, HiddenSaveButton, IdentityFallback, LibraryField, LookField, PairingField, PublishChild, RoleNameField, RoleSlugField, RolesField, RolesGrantsField, RolesMatrixField, RolesRowLabel, SectionHeading, ThemeDocumentControls, ThemeSaveButton };
 
 //# sourceMappingURL=admin.mjs.map