60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T1d22,'use client' import * as React from 'react' import { ShieldCheck } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { Checkbox } from '@/components/ui/checkbox' import { SectionCard } from '@/components/ui/section-card' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' export interface Role { id: string label: string } export interface Permission { id: string label: string } export interface PermissionGroup { resource: string permissions: Permission[] } export interface RoleMatrixProps { roles?: Role[] groups?: PermissionGroup[] /** permissionId -> array of granted roleIds. */ value?: Record onValueChange?: (value: Record) => void readOnly?: boolean className?: string } const defaultRoles: Role[] = [ { id: 'admin', label: 'Admin' }, { id: 'editor', label: 'Editor' }, { id: 'viewer', label: 'Viewer' }, ] const defaultGroups: PermissionGroup[] = [ { resource: 'Users', permissions: [ { id: 'users.create', label: 'Invite members' }, { id: 'users.read', label: 'View members' }, { id: 'users.update', label: 'Edit profiles & roles' }, { id: 'users.delete', label: 'Remove members' }, ], }, { resource: 'Billing', permissions: [ { id: 'billing.read', label: 'View invoices' }, { id: 'billing.manage', label: 'Change plan & seats' }, ], }, { resource: 'Content', permissions: [ { id: 'content.create', label: 'Create documents' }, { id: 'content.read', label: 'Read documents' }, { id: 'content.delete', label: 'Delete documents' }, ], }, ] const defaultGrants: Record = { 'users.create': ['admin'], 'users.read': ['admin', 'editor', 'viewer'], 'users.update': ['admin'], 'users.delete': ['admin'], 'billing.read': ['admin', 'editor'], 'billing.manage': ['admin'], 'content.create': ['admin', 'editor'], 'content.read': ['admin', 'editor', 'viewer'], 'content.delete': ['admin', 'editor'], } export function RoleMatrix({ roles = defaultRoles, groups = defaultGroups, value, onValueChange, readOnly = false, className, }: RoleMatrixProps) { // Internal working copy keeps the block self-contained; consumers can pass // value/onValueChange to mirror changes out (we never mutate props directly). const [internalGrants, setInternalGrants] = React.useState>( value ? { ...value } : { ...defaultGrants }, ) const grants = internalGrants const allRoleIds = roles.map((r) => r.id) function setGrant(permissionId: string, roleIds: string[]) { const next = { ...grants, [permissionId]: roleIds } setInternalGrants(next) onValueChange?.(next) } function isGranted(permissionId: string, roleId: string) { return (grants[permissionId] ?? []).includes(roleId) } function toggleCell(permissionId: string, roleId: string) { if (readOnly) return const current = grants[permissionId] ?? [] setGrant(permissionId, current.includes(roleId) ? current.filter((id) => id !== roleId) : [...current, roleId]) } function roleState(roleId: string): boolean | 'indeterminate' { const total = groups.reduce((n, g) => n + g.permissions.length, 0) const count = groups.reduce((n, g) => n + g.permissions.filter((p) => isGranted(p.id, roleId)).length, 0) if (count === 0) return false if (count === total) return true return 'indeterminate' } function toggleRoleColumn(roleId: string) { if (readOnly) return const turnOn = roleState(roleId) !== true const next = { ...grants } for (const group of groups) { for (const permission of group.permissions) { const current = next[permission.id] ?? [] const has = current.includes(roleId) next[permission.id] = turnOn ? has ? current : [...current, roleId] : has ? current.filter((id) => id !== roleId) : current } } setInternalGrants(next) onValueChange?.(next) } function groupSummary(group: PermissionGroup) { const total = group.permissions.length * allRoleIds.length const granted = group.permissions.reduce( (n, p) => n + allRoleIds.filter((roleId) => isGranted(p.id, roleId)).length, 0, ) return `${granted} of ${total} grants` } return ( Read-only ) : undefined } >

Permission {roles.map((role) => ( {role.label} toggleRoleColumn(role.id)} /> ))} {groups.map((group) => (

{group.resource} {groupSummary(group)}

{group.permissions.map((permission) => ( {permission.label} {roles.map((role) => ( toggleCell(permission.id, role.id)} /> ))} ))} ))}

Column headers toggle every permission for that role. Changes apply on save.

) } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/checkbox.json","https://uipkge.dev/r/react/section-card.json","https://uipkge.dev/r/react/table.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"packages/registry-react/blocks/role-matrix/RoleMatrix.tsx","content":"$62","type":"registry:block","target":"~/components/blocks/RoleMatrix.tsx"}],"className":"h-[70svh] min-h-80"}]]}]