@dloizides/ui-access-admin 1.2.2 → 1.4.0

package/dist/index.js

@@ -169,12 +169,25 @@ var ACCESS_ADMIN_I18N = {
   usersUpdateSuccess: "accessAdmin.users.updateSuccess",
   usersUpdateFailed: "accessAdmin.users.updateFailed",
   usersResetSuccess: "accessAdmin.users.resetSuccess",
-  usersResetFailed: "accessAdmin.users.resetFailed"
+  usersResetFailed: "accessAdmin.users.resetFailed",
+  usersFieldBlockedReason: "accessAdmin.users.fieldBlockedReason",
+  usersBlockedReasonPlaceholder: "accessAdmin.users.blockedReasonPlaceholder",
+  usersBlockedReasonHint: "accessAdmin.users.blockedReasonHint",
+  permissionsHeading: "accessAdmin.permissions.heading",
+  permissionsNote: "accessAdmin.permissions.note",
+  permissionsColPermission: "accessAdmin.permissions.colPermission",
+  permissionsGranted: "accessAdmin.permissions.granted",
+  permissionsNotGranted: "accessAdmin.permissions.notGranted",
+  permissionsCellLabel: "accessAdmin.permissions.cellLabel",
+  permissionsReadOnlyHint: "accessAdmin.permissions.readOnlyHint",
+  permissionsRoleCount: "accessAdmin.permissions.roleCount",
+  permissionsEmpty: "accessAdmin.permissions.empty"
 };
 var ACCESS_ADMIN_TEST_IDS = {
   linkPanel: "access-link-panel",
   accountPanel: "account-link-panel",
-  usersPanel: "user-management-panel"
+  usersPanel: "user-management-panel",
+  permissionMatrix: "permission-matrix"
 };
 
 // src/expiry/expiryPolicy.ts
@@ -319,7 +332,7 @@ var AccessLinkPanel = ({
 }) => {
   const { t } = uiFeedback.useUi();
   const palette = useAccessAdminPalette();
-  const styles = react.useMemo(() => buildStyles(palette), [palette]);
+  const styles2 = react.useMemo(() => buildStyles(palette), [palette]);
   const state = useCapabilityLinkMint({
     subject,
     policy,
@@ -347,16 +360,16 @@ var AccessLinkPanel = ({
       onResult(t(ACCESS_ADMIN_I18N.copyFailed, subject.displayName), "error" /* Error */);
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.panel, testID: testIDPrefix, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.heading, children: t(ACCESS_ADMIN_I18N.panelHeading, subject.displayName) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.note, children: t(ACCESS_ADMIN_I18N.panelNote) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.warning, testID: `${testIDPrefix}-capability-warning`, children: t(ACCESS_ADMIN_I18N.capabilityWarning) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.note, testID: `${testIDPrefix}-expiry-preview`, children: t(ACCESS_ADMIN_I18N.expiryPreview, expiryDate) }),
-    state.minted !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.revealBox, testID: `${testIDPrefix}-minted`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.revealTitle, children: t(ACCESS_ADMIN_I18N.mintedTitle, subject.displayName) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.note, children: t(ACCESS_ADMIN_I18N.mintedHint) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { selectable: true, style: styles.url, testID: `${testIDPrefix}-minted-url`, children: mintedUrl }),
-      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.actions, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.panel, testID: testIDPrefix, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.heading, children: t(ACCESS_ADMIN_I18N.panelHeading, subject.displayName) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.note, children: t(ACCESS_ADMIN_I18N.panelNote) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.warning, testID: `${testIDPrefix}-capability-warning`, children: t(ACCESS_ADMIN_I18N.capabilityWarning) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.note, testID: `${testIDPrefix}-expiry-preview`, children: t(ACCESS_ADMIN_I18N.expiryPreview, expiryDate) }),
+    state.minted !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.revealBox, testID: `${testIDPrefix}-minted`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.revealTitle, children: t(ACCESS_ADMIN_I18N.mintedTitle, subject.displayName) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.note, children: t(ACCESS_ADMIN_I18N.mintedHint) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { selectable: true, style: styles2.url, testID: `${testIDPrefix}-minted-url`, children: mintedUrl }),
+      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.actions, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           uiButtons.Button,
           {
@@ -390,13 +403,13 @@ var AccessLinkPanel = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.note, children: t(ACCESS_ADMIN_I18N.emailNote) })
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.note, children: t(ACCESS_ADMIN_I18N.emailNote) })
     ] }) : null,
-    linksFailed ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.warning, testID: `${testIDPrefix}-load-error`, children: t(ACCESS_ADMIN_I18N.liveLoadError) }) : null,
-    !linksFailed && liveLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.liveBox, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.subheading, children: t(ACCESS_ADMIN_I18N.liveHeading, String(liveLinks.length)) }),
-      liveLinks.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.liveRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.liveMeta, children: t(
+    linksFailed ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.warning, testID: `${testIDPrefix}-load-error`, children: t(ACCESS_ADMIN_I18N.liveLoadError) }) : null,
+    !linksFailed && liveLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.liveBox, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.subheading, children: t(ACCESS_ADMIN_I18N.liveHeading, String(liveLinks.length)) }),
+      liveLinks.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.liveRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.liveMeta, children: t(
           ACCESS_ADMIN_I18N.liveMeta,
           formatLinkDate(link.createdAt, ""),
           formatLinkDate(link.expiresAt, t(ACCESS_ADMIN_I18N.expiresNever))
@@ -404,8 +417,8 @@ var AccessLinkPanel = ({
         renderLinkActions === void 0 ? null : renderLinkActions(link)
       ] }, link.id))
     ] }) : null,
-    !linksFailed && liveLinks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.note, testID: `${testIDPrefix}-no-live`, children: t(ACCESS_ADMIN_I18N.noLive) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.actions, children: [
+    !linksFailed && liveLinks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.note, testID: `${testIDPrefix}-no-live`, children: t(ACCESS_ADMIN_I18N.noLive) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.actions, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         uiButtons.Button,
         {
@@ -551,7 +564,7 @@ var AccountLinkPanel = ({
 }) => {
   const { t } = uiFeedback.useUi();
   const palette = useAccessAdminPalette();
-  const styles = react.useMemo(() => buildStyles2(palette), [palette]);
+  const styles2 = react.useMemo(() => buildStyles2(palette), [palette]);
   const state = useSubjectAccountLink({
     subject,
     boundAccountId,
@@ -566,9 +579,9 @@ var AccountLinkPanel = ({
     [accounts, bindings, subject, unnamedLabel]
   );
   const selectedLabel = options.find((option) => option.value === state.selectedAccountId)?.label ?? "";
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.panel, testID: testIDPrefix, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.heading, children: t(ACCESS_ADMIN_I18N.accountPanelHeading, subject.displayName) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.note, children: t(ACCESS_ADMIN_I18N.accountPanelNote) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.panel, testID: testIDPrefix, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.heading, children: t(ACCESS_ADMIN_I18N.accountPanelHeading, subject.displayName) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.note, children: t(ACCESS_ADMIN_I18N.accountPanelNote) }),
     options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       uiForms.SelectControl,
       {
@@ -581,8 +594,8 @@ var AccountLinkPanel = ({
         testID: `${testIDPrefix}-picker`,
         value: state.selectedAccountId ?? ""
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.note, testID: `${testIDPrefix}-no-accounts`, children: t(ACCESS_ADMIN_I18N.accountNone) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.actions, children: [
+    ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.note, testID: `${testIDPrefix}-no-accounts`, children: t(ACCESS_ADMIN_I18N.accountNone) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.actions, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         uiButtons.Button,
         {
@@ -675,6 +688,18 @@ function roleOptions(assignableRoles) {
 function tenantValueToId(value) {
   return value === NO_TENANT_VALUE ? null : value;
 }
+function isBlocking(wasActive, active) {
+  return wasActive && !active;
+}
+function isBlockReasonMissing(wasActive, active, blockedReason) {
+  return isBlocking(wasActive, active) && blockedReason.trim() === "";
+}
+function buildEditPatch(input) {
+  const patch = { displayName: input.displayName.trim(), role: input.role, active: input.active };
+  if (isBlocking(input.wasActive, input.active)) patch.blockedReason = input.blockedReason.trim();
+  if (input.tenantId !== void 0) patch.tenantId = input.tenantId;
+  return patch;
+}
 var ACTIONS_GAP = 8;
 function buildUserColumns({
   t,
@@ -730,7 +755,7 @@ function buildUserColumns({
             variant: "secondary"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        onReset !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
           uiButtons.Button,
           {
             accessibilityHint: t(ACCESS_ADMIN_I18N.usersResetHint),
@@ -741,7 +766,7 @@ function buildUserColumns({
             testID: `${testIDPrefix}-reset-${user.id}`,
             variant: "secondary"
           }
-        )
+        ) : null
       ] })
     }
   ];
@@ -913,6 +938,7 @@ var EditUserModal = ({
   const [role, setRole] = react.useState("");
   const [tenantValue, setTenantValue] = react.useState(NO_TENANT_VALUE);
   const [active, setActive] = react.useState(true);
+  const [blockedReason, setBlockedReason] = react.useState("");
   const [submitting, setSubmitting] = react.useState(false);
   const userId = user?.id;
   react.useEffect(() => {
@@ -921,28 +947,36 @@ var EditUserModal = ({
     setRole(user.roles[0] ?? "");
     setTenantValue(user.tenantId ?? NO_TENANT_VALUE);
     setActive(user.active);
+    setBlockedReason(user.blockedReason ?? "");
     setSubmitting(false);
   }, [visible, userId, user]);
-  const canSubmit = !submitting && displayName.trim() !== "" && role !== "";
+  const wasActive = user?.active ?? true;
+  const canSubmit = !submitting && displayName.trim() !== "" && role !== "" && !isBlockReasonMissing(wasActive, active, blockedReason);
   const handleSubmit = async () => {
     if (user === null) return;
     setSubmitting(true);
-    const patch = {
-      displayName: displayName.trim(),
+    const patch = buildEditPatch({
+      displayName,
       role,
-      active
-    };
-    if (isPlatformAdmin) patch.tenantId = tenantValueToId(tenantValue);
+      wasActive,
+      active,
+      blockedReason,
+      tenantId: isPlatformAdmin ? tenantValueToId(tenantValue) : void 0
+    });
     const ok = await onSubmit(user.id, patch);
     setSubmitting(false);
     if (ok) onCancel();
   };
+  const submitIfReady = () => {
+    if (canSubmit) void handleSubmit();
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(uiLayout.ModalShell, { onCancel, title: t(ACCESS_ADMIN_I18N.usersEditTitle), visible, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: modalFormStyles.body, testID: testIDPrefix, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       uiForms.FormField,
       {
         label: t(ACCESS_ADMIN_I18N.usersFieldDisplayName),
         onChangeText: setDisplayName,
+        onSubmitEditing: submitIfReady,
         placeholder: t(ACCESS_ADMIN_I18N.usersDisplayNamePlaceholder),
         required: true,
         testID: `${testIDPrefix}-display-name`,
@@ -983,6 +1017,19 @@ var EditUserModal = ({
         value: active
       }
     ),
+    active ? null : /* @__PURE__ */ jsxRuntime.jsx(
+      uiForms.FormField,
+      {
+        accessibilityHint: t(ACCESS_ADMIN_I18N.usersBlockedReasonHint),
+        label: t(ACCESS_ADMIN_I18N.usersFieldBlockedReason),
+        onChangeText: setBlockedReason,
+        onSubmitEditing: submitIfReady,
+        placeholder: t(ACCESS_ADMIN_I18N.usersBlockedReasonPlaceholder),
+        required: wasActive,
+        testID: `${testIDPrefix}-blocked-reason`,
+        value: blockedReason
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: modalFormStyles.actions, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         uiButtons.Button,
@@ -1075,6 +1122,8 @@ var ResetPasswordModal = ({
     ] })
   ] }) });
 };
+var MISSING_CREATE = "createUser is not provided";
+var MISSING_RESET = "resetPassword is not provided";
 function useUserManagement(api, t) {
   const [users, setUsers] = react.useState([]);
   const [loading, setLoading] = react.useState(true);
@@ -1116,7 +1165,7 @@ function useUserManagement(api, t) {
   );
   const create = react.useCallback(
     (input) => runWrite(
-      () => api.createUser(input),
+      () => api.createUser ? api.createUser(input) : Promise.reject(new Error(MISSING_CREATE)),
       ACCESS_ADMIN_I18N.usersCreateSuccess,
       ACCESS_ADMIN_I18N.usersCreateFailed
     ),
@@ -1132,7 +1181,7 @@ function useUserManagement(api, t) {
   );
   const resetPassword = react.useCallback(
     (id, password) => runWrite(
-      () => api.resetPassword(id, password),
+      () => api.resetPassword ? api.resetPassword(id, password) : Promise.reject(new Error(MISSING_RESET)),
       ACCESS_ADMIN_I18N.usersResetSuccess,
       ACCESS_ADMIN_I18N.usersResetFailed
     ),
@@ -1164,7 +1213,7 @@ var UserManagementPanel = ({
   testID = ACCESS_ADMIN_TEST_IDS.usersPanel
 }) => {
   const palette = useAccessAdminPalette();
-  const styles = react.useMemo(() => buildStyles3(palette), [palette]);
+  const styles2 = react.useMemo(() => buildStyles3(palette), [palette]);
   const controller = useUserManagement(api, t);
   const [query, setQuery] = react.useState("");
   const [openModal, setOpenModal] = react.useState("none" /* None */);
@@ -1182,18 +1231,26 @@ var UserManagementPanel = ({
     setOpenModal("reset" /* Reset */);
   };
   const closeModal = () => setOpenModal("none" /* None */);
+  const canCreate = api.createUser !== void 0;
+  const canReset = api.resetPassword !== void 0;
   const columns = react.useMemo(
-    () => buildUserColumns({ t, tenants, testIDPrefix: testID, onEdit: openEdit, onReset: openReset }),
-    [t, tenants, testID]
+    () => buildUserColumns({
+      t,
+      tenants,
+      testIDPrefix: testID,
+      onEdit: openEdit,
+      onReset: canReset ? openReset : void 0
+    }),
+    [t, tenants, testID, canReset]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.panel, testID, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.panel, testID, children: [
     /* @__PURE__ */ jsxRuntime.jsx(uiFeedback.ToastHost, { subscribe: controller.toastSubscribe, toastTestID: `${testID}-toast` }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.heading, children: t(ACCESS_ADMIN_I18N.usersHeading) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.note, children: t(ACCESS_ADMIN_I18N.usersNote) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.heading, children: t(ACCESS_ADMIN_I18N.usersHeading) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.note, children: t(ACCESS_ADMIN_I18N.usersNote) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       uiTables.FilterBar,
       {
-        actions: /* @__PURE__ */ jsxRuntime.jsx(
+        actions: canCreate ? /* @__PURE__ */ jsxRuntime.jsx(
           uiButtons.Button,
           {
             accessibilityHint: t(ACCESS_ADMIN_I18N.usersCreateHint),
@@ -1202,11 +1259,11 @@ var UserManagementPanel = ({
             onPress: () => setOpenModal("create" /* Create */),
             testID: `${testID}-create`
           }
-        ),
+        ) : void 0,
         resultsCount: visibleUsers.length,
         resultsLabel: t(ACCESS_ADMIN_I18N.usersResultsLabel),
         testID: `${testID}-filter-bar`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.search, children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.search, children: /* @__PURE__ */ jsxRuntime.jsx(
           uiForms.FormField,
           {
             accessibilityLabel: t(ACCESS_ADMIN_I18N.usersSearchLabel),
@@ -1221,8 +1278,8 @@ var UserManagementPanel = ({
         ) })
       }
     ),
-    controller.loadFailed ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.errorBox, testID: `${testID}-load-error`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.warning, children: t(ACCESS_ADMIN_I18N.usersLoadError) }),
+    controller.loadFailed ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.errorBox, testID: `${testID}-load-error`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.warning, children: t(ACCESS_ADMIN_I18N.usersLoadError) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         uiButtons.Button,
         {
@@ -1247,7 +1304,7 @@ var UserManagementPanel = ({
         zebra: true
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    canCreate ? /* @__PURE__ */ jsxRuntime.jsx(
       CreateUserModal,
       {
         assignableRoles,
@@ -1259,7 +1316,7 @@ var UserManagementPanel = ({
         testIDPrefix: `${testID}-create-modal`,
         visible: openModal === "create" /* Create */
       }
-    ),
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       EditUserModal,
       {
@@ -1274,7 +1331,7 @@ var UserManagementPanel = ({
         visible: openModal === "edit" /* Edit */
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    canReset ? /* @__PURE__ */ jsxRuntime.jsx(
       ResetPasswordModal,
       {
         onCancel: closeModal,
@@ -1284,7 +1341,7 @@ var UserManagementPanel = ({
         user: activeUser,
         visible: openModal === "reset" /* Reset */
       }
-    )
+    ) : null
   ] });
 };
 var buildStyles3 = (c) => reactNative.StyleSheet.create({
@@ -1304,16 +1361,128 @@ var buildStyles3 = (c) => reactNative.StyleSheet.create({
   warning: { color: c.danger, fontSize: FONT_SM3, fontWeight: "600" }
 });
 
+// src/PermissionMatrix/permissionMatrixModel.ts
+function buildPermissionMatrix(roles, permissions, grants) {
+  return roles.map((role) => {
+    const held = new Set(grants[role.id] ?? []);
+    const cells = permissions.map((permission) => ({ permission, granted: held.has(permission.id) }));
+    return { role, cells, grantedCount: cells.filter((cell) => cell.granted).length };
+  });
+}
+function grantStatusLabel(granted, t) {
+  return granted ? t(ACCESS_ADMIN_I18N.permissionsGranted) : t(ACCESS_ADMIN_I18N.permissionsNotGranted);
+}
+function cellAccessibilityLabel(role, permission, granted, t) {
+  return t(ACCESS_ADMIN_I18N.permissionsCellLabel, role.label, permission.label, grantStatusLabel(granted, t));
+}
+var SPACE_XS4 = 4;
+var SPACE_SM5 = 8;
+var SPACE_MD5 = 12;
+var RADIUS = 8;
+var MAX_WIDTH = 1200;
+var LABEL_COLUMN_WIDTH = 280;
+var ROLE_COLUMN_WIDTH = 140;
+var HEADING_SIZE = 18;
+var BODY_SIZE = 14;
+var LINE_HEIGHT = 20;
+var styles = reactNative.StyleSheet.create({
+  root: { alignSelf: "center", gap: SPACE_MD5, maxWidth: MAX_WIDTH, width: "100%" },
+  heading: { fontSize: HEADING_SIZE, fontWeight: "600", lineHeight: LINE_HEIGHT + SPACE_XS4 },
+  body: { fontSize: BODY_SIZE, lineHeight: LINE_HEIGHT },
+  strong: { fontSize: BODY_SIZE, fontWeight: "600", lineHeight: LINE_HEIGHT },
+  list: { gap: SPACE_MD5 },
+  card: { borderRadius: RADIUS, borderWidth: reactNative.StyleSheet.hairlineWidth, gap: SPACE_SM5, padding: SPACE_MD5 },
+  stackRow: { flexDirection: "row", flexWrap: "wrap", gap: SPACE_SM5, justifyContent: "space-between" },
+  stackLabel: { flexBasis: 0, flexGrow: 1, minWidth: 0 },
+  tableRow: { borderBottomWidth: reactNative.StyleSheet.hairlineWidth, flexDirection: "row" },
+  labelCell: { padding: SPACE_SM5, width: LABEL_COLUMN_WIDTH },
+  roleCell: { padding: SPACE_SM5, width: ROLE_COLUMN_WIDTH }
+});
+var statusColor = (granted, palette) => granted ? palette.textPrimary : palette.textSecondary;
+var StackedMatrix = ({ columns, palette, t, testID }) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.list, children: columns.map(({ role, cells, grantedCount }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  reactNative.View,
+  {
+    style: [styles.card, { backgroundColor: palette.panelSurface, borderColor: palette.border }],
+    testID: `${testID}-role-${role.id}`,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.strong, { color: palette.textPrimary }], children: role.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.body, { color: palette.textSecondary }], children: t(ACCESS_ADMIN_I18N.permissionsRoleCount, String(grantedCount), String(cells.length)) }),
+      cells.map(({ permission, granted }) => /* @__PURE__ */ jsxRuntime.jsxs(
+        reactNative.View,
+        {
+          accessibilityHint: t(ACCESS_ADMIN_I18N.permissionsReadOnlyHint),
+          accessibilityLabel: cellAccessibilityLabel(role, permission, granted, t),
+          accessible: true,
+          style: styles.stackRow,
+          testID: `${testID}-cell-${role.id}-${permission.id}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.body, styles.stackLabel, { color: palette.textPrimary }], children: permission.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [granted ? styles.strong : styles.body, { color: statusColor(granted, palette) }], children: grantStatusLabel(granted, t) })
+          ]
+        },
+        permission.id
+      ))
+    ]
+  },
+  role.id
+)) });
+var TableMatrix = ({ columns, permissions, palette, t, testID }) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, testID: `${testID}-table`, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.card, { backgroundColor: palette.panelSurface, borderColor: palette.border }], children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.tableRow, { borderColor: palette.border }], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.strong, styles.labelCell, { color: palette.textPrimary }], children: t(ACCESS_ADMIN_I18N.permissionsColPermission) }),
+    columns.map(({ role }) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.strong, styles.roleCell, { color: palette.textPrimary }], children: role.label }, role.id))
+  ] }),
+  permissions.map((permission, index) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.tableRow, { borderColor: palette.border }], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.body, styles.labelCell, { color: palette.textPrimary }], children: permission.label }),
+    columns.map(({ role, cells }) => {
+      const granted = cells[index]?.granted === true;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          accessibilityHint: t(ACCESS_ADMIN_I18N.permissionsReadOnlyHint),
+          accessibilityLabel: cellAccessibilityLabel(role, permission, granted, t),
+          style: [granted ? styles.strong : styles.body, styles.roleCell, { color: statusColor(granted, palette) }],
+          testID: `${testID}-cell-${role.id}-${permission.id}`,
+          children: grantStatusLabel(granted, t)
+        },
+        role.id
+      );
+    })
+  ] }, permission.id))
+] }) });
+var PermissionMatrix = ({
+  roles,
+  permissions,
+  grants,
+  t,
+  testID = ACCESS_ADMIN_TEST_IDS.permissionMatrix
+}) => {
+  const palette = useAccessAdminPalette();
+  const { width } = reactNative.useWindowDimensions();
+  const columns = react.useMemo(() => buildPermissionMatrix(roles, permissions, grants), [roles, permissions, grants]);
+  const isWide = width >= uiLayout.LAYOUT_COLLAPSE_BREAKPOINT;
+  const isEmpty = roles.length === 0 || permissions.length === 0;
+  const partProps = { columns, permissions, palette, t, testID };
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.root, testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", style: [styles.heading, { color: palette.textPrimary }], children: t(ACCESS_ADMIN_I18N.permissionsHeading) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.body, { color: palette.textSecondary }], children: t(ACCESS_ADMIN_I18N.permissionsNote) }),
+    isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.body, { color: palette.textSecondary }], testID: `${testID}-empty`, children: t(ACCESS_ADMIN_I18N.permissionsEmpty) }) : null,
+    !isEmpty && isWide ? /* @__PURE__ */ jsxRuntime.jsx(TableMatrix, { ...partProps }) : null,
+    !isEmpty && !isWide ? /* @__PURE__ */ jsxRuntime.jsx(StackedMatrix, { ...partProps }) : null
+  ] });
+};
+
 exports.ACCESS_ADMIN_I18N = ACCESS_ADMIN_I18N;
 exports.ACCESS_ADMIN_TEST_IDS = ACCESS_ADMIN_TEST_IDS;
 exports.AccessLinkPanel = AccessLinkPanel;
 exports.AccessResultTone = AccessResultTone;
 exports.AccountLinkPanel = AccountLinkPanel;
+exports.PermissionMatrix = PermissionMatrix;
 exports.UserManagementPanel = UserManagementPanel;
 exports.accountDisplayLabel = accountDisplayLabel;
 exports.activeLinksForSubject = activeLinksForSubject;
 exports.buildAccountOptions = buildAccountOptions;
 exports.buildCapabilityLinkMailto = buildCapabilityLinkMailto;
+exports.buildPermissionMatrix = buildPermissionMatrix;
 exports.capabilityExpiryDate = capabilityExpiryDate;
 exports.capabilityExpiryDays = capabilityExpiryDays;
 exports.daysUntilAnchor = daysUntilAnchor;