@bison-lab/payload-core 3.13.0 → 3.15.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, useRowLabel } 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";
@@ -2515,6 +2515,153 @@ 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: "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, 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
@@ -2533,75 +2680,90 @@ 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: `editor`, `site-editor`. Empty and punctuation are out. */
+/** Lowercase slug from a letters-and-spaces name: `designer`, `the-designer`. */
 function isRoleSlug(value) {
-	return typeof value === "string" && /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/.test(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.
 */
-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 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.";
-const CAPABILITY_LABELS = {
-	content: "Content",
-	brand: "Brand",
-	publish: "Publish",
-	users: "Users"
-};
+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) => ({ ...extra }))];
+	})), ...extras.map((extra) => ({
+		role: extra.role,
+		label: extra.label,
+		grants: extra.grants ? [...extra.grants] : []
+	}))];
 }
 function defaultRolesFieldValue(extras = []) {
 	return seedRoleRows(extras).map((row) => ({
@@ -2617,10 +2779,7 @@ function readRoleRow(item) {
 		id: role,
 		role,
 		label: roleLabel(role, "label" in item && typeof item.label === "string" ? item.label : void 0),
-		content: Boolean("content" in item && item.content),
-		brand: Boolean("brand" in item && item.brand),
-		publish: Boolean("publish" in item && item.publish),
-		users: Boolean("users" in item && item.users)
+		grants: grantsFromStoredRole(item)
 	};
 }
 function parseRolesMatrix(value) {
@@ -2632,6 +2791,8 @@ function parseRolesMatrix(value) {
 	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,
@@ -2659,15 +2820,15 @@ function roleSelectOptions(matrix = DEFAULT_ROLE_MATRIX) {
 		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 ticks and package labels come back; extra rows stay as they are.
+* Seed grants and package labels come back; extra rows stay as they are.
 */
 function resetRolesMatrix(current) {
 	const extras = [];
@@ -2681,57 +2842,71 @@ function resetRolesMatrix(current) {
 }
 //#endregion
 //#region src/admin/roles-matrix-field.tsx
-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__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}body.bl-roles-matrix-seed-menu .array-actions__remove{display:none}`;
+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-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 is for custom rows, seed
-* rows have no remove. Reset restores seed ticks and package labels.
+* 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, 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: 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();
-		}, []),
+		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(resetRolesMatrix(value)),
 					children: "Reset to defaults"
-				})
+				})]
 			}),
 			/* @__PURE__ */ jsx(ArrayField, { ...props })
 		]
@@ -2745,9 +2920,11 @@ const RolesMatrixField = (props) => {
 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
 	});
 }
@@ -2801,8 +2978,56 @@ const RoleSlugField = ({ field, path, readOnly }) => {
 	});
 };
 //#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$1 = `.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)}`;
+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) {
 	return typeof option === "string" ? option : String(option.value);
 }
@@ -2881,7 +3106,7 @@ const RolesField = ({ field, path: pathFromProps, readOnly, validate }) => {
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-roles",
 				precedence: "default",
-				children: GRID_CSS$1
+				children: GRID_CSS
 			}),
 			/* @__PURE__ */ jsx(FieldLabel, {
 				as: "span",
@@ -2933,135 +3158,169 @@ const RolesField = ({ field, path: pathFromProps, readOnly, validate }) => {
 	});
 };
 //#endregion
-//#region src/features/types.ts
+//#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");
+}
 /**
-* Package catalogue. Locked rows cannot be turned off. Empty Global falls
-* back to the named capability (Content → Pages/Media, Brand → Theme /
-* Brand assets, Users → Users/Roles/Features).
+* 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 PACKAGE_FEATURES = [
-	{
-		slug: "pages",
-		label: "Pages",
-		fallback: "content",
-		locked: false
-	},
-	{
-		slug: "media",
-		label: "Media",
-		fallback: "content",
-		locked: false
-	},
-	{
-		slug: "theme",
-		label: "Theme",
-		fallback: "brand",
-		locked: false
-	},
-	{
-		slug: "brand-assets",
-		label: "Brand assets",
-		fallback: "brand",
-		locked: false
-	},
-	{
-		slug: "users",
-		label: "Users",
-		fallback: "users",
-		locked: true
-	},
-	{
-		slug: "roles",
-		label: "Roles",
-		fallback: "users",
-		locked: true
-	},
-	{
-		slug: "features",
-		label: "Features",
-		fallback: "users",
-		locked: true
+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]);
 	}
-];
-function isLockedFeature(slug, locked) {
-	if (locked === true) return true;
-	return PACKAGE_FEATURES.find((feature) => feature.slug === slug)?.locked === true;
-}
+	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 GRID_CSS = `.bl-features{margin-block:.35rem 0;overflow:auto}.bl-features table{width:100%;border-collapse:collapse;font:inherit}.bl-features th,.bl-features td{padding:.45rem .6rem;border-bottom:1px solid var(--theme-elevation-150,#e2e8f0);text-align:center;white-space:nowrap}.bl-features th:first-child,.bl-features td:first-child{text-align:left;font-weight:600}.bl-features th{font-size:.8rem;color:var(--theme-elevation-500,#64748b)}.bl-features input{inline-size:1rem;block-size:1rem}`;
+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));
+			}
+		})]
+	});
+}
 /**
-* Feature × role grid. Columns come from the Roles Global (or the seed).
-* Locked rows and Developer cannot be cleared.
+* 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 [columns, setColumns] = useState(roleSelectOptions(seedRoleRows()));
 	const api = config?.routes?.api;
 	const serverURL = config?.serverURL ?? "";
 	useEffect(() => {
-		if (!api) return;
+		if (!api || asRows(value).length > 0) return;
 		let cancelled = false;
-		fetch(`${serverURL}${api}/globals/${ROLES_SLUG}?depth=0`, { credentials: "include" }).then((response) => response.ok ? response.json() : null).then((doc) => {
+		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 = parseRolesMatrix(doc.roles);
-			if (parsed.ok) setColumns(roleSelectOptions(parsed.rows));
+			const incoming = asRows(doc.features);
+			if (incoming.length > 0) setValue(incoming, true);
 		}).catch(() => void 0);
 		return () => {
 			cancelled = true;
 		};
-	}, [api, serverURL]);
+	}, [
+		api,
+		serverURL,
+		setValue,
+		value
+	]);
 	const rows = asRows(value);
-	function toggle(slug, role, checked) {
-		if (role === "developer") return;
-		setValue(rows.map((row) => {
-			if (row.slug !== slug || isLockedFeature(row.slug, row.locked)) return row;
-			const roles = new Set(row.roles ?? []);
-			if (checked) roles.add(role);
-			else roles.delete(role);
-			roles.add("developer");
-			return {
-				...row,
-				roles: [...roles]
-			};
-		}));
-	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: "bl-features",
 		children: [/* @__PURE__ */ jsx("style", {
 			href: "bl-features",
 			precedence: "default",
-			children: GRID_CSS
-		}), /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
-			scope: "col",
-			children: "Feature"
-		}), columns.map((column) => /* @__PURE__ */ jsx("th", {
-			scope: "col",
-			children: column.label
-		}, column.value))] }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
-			const locked = isLockedFeature(row.slug, row.locked);
-			return /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
-				scope: "row",
-				children: row.label || row.slug
-			}), columns.map((column) => {
-				const disabled = locked || column.value === "developer";
-				const checked = column.value === "developer" || locked || Boolean(row.roles?.includes(column.value));
-				return /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					"aria-label": `${row.label || row.slug} · ${column.label}`,
-					checked,
-					disabled,
-					onChange: (event) => toggle(row.slug, column.value, event.target.checked)
-				}) }, column.value);
-			})] }, row.slug);
-		}) })] })]
+			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, RoleSlugField, RolesField, RolesMatrixField, RolesRowLabel, SectionHeading, ThemeDocumentControls, ThemeSaveButton };
+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