setHover(null)}>

Permission

{roles.map((r) => { const changed = !sameGrants(draft[r.id] ?? [], saved[r.id] ?? []); const count = counts[r.id] ?? 0; return ( setHover(r.id)} role="columnheader" > {r.from ? ( !e.target.value.trim() && onRename(r.id, "Custom")} onChange={(e) => onRename(r.id, e.target.value)} value={r.name} /> ) : ( {r.locked && } {r.name} )} {changed && } {count === 1 ? "person" : "people"} ); })}

{areas.map((area) => (

{area.name}

{roles.map((r) => (

setHover(r.id)} role="cell" /> ))}

{area.permissions.map((p) => (

{p.label}

{roles.map((r) => { const on = (draft[r.id] ?? []).includes(p.id); const diverges = r.from ? on !== (draft[r.from] ?? []).includes(p.id) : false; return (

setHover(r.id)} role="cell" > onToggle(r.id, p.id)} reduce={reduce} />

); })}

))} ))} {roles.some((r) => r.from) && (

{roles.map((r) => (

setHover(r.id)} role="cell"> {r.from && ( )}

))}

)}

); } export function TeamRoles({ className, areas = defaultAreas, roles: initialRoles = defaultRoles, members: initialMembers = defaultMembers, invites: initialInvites = defaultInvites, currentUserId = "m1", onNavigate, }: TeamRolesProps) { const reduce = useReducedMotionAfterMount(); const id = useId(); const [roles, setRoles] = useState(initialRoles); const [saved, setSaved] = useState>(() => Object.fromEntries(initialRoles.map((r) => [r.id, r.grants]))); const [draft, setDraft] = useState>(saved); const [members, setMembers] = useState(initialMembers); const [invites, setInvites] = useState(initialInvites); const [email, setEmail] = useState(""); const [inviteRole, setInviteRole] = useState("member"); const [inviteError, setInviteError] = useState(null); const [resent, setResent] = useState([]); const [removing, setRemoving] = useState(null); const [removeOpen, setRemoveOpen] = useState(false); const [notice, setNotice] = useState<{ key: number; text: ReactNode; undo?: () => void } | null>(null); const [justSaved, setJustSaved] = useState(false); const counter = useRef(0); const savedTimer = useRef | null>(null); useEffect(() => { if (!notice) return; const t = setTimeout(() => setNotice(null), 4000); return () => clearTimeout(t); }, [notice]); useEffect(() => () => { if (savedTimer.current) clearTimeout(savedTimer.current); }, []); const say = (text: ReactNode, undo?: () => void) => { counter.current += 1; setNotice({ key: counter.current, text, undo }); }; const counts = Object.fromEntries(roles.map((r) => [r.id, members.filter((m) => m.roleId === r.id).length])); const changedRoles = roles.filter((r) => !sameGrants(draft[r.id] ?? [], saved[r.id] ?? [])); const affected = changedRoles.reduce((n, r) => n + (counts[r.id] ?? 0), 0); const customRole = roles.find((r) => r.from); const sendInvite = (e: FormEvent) => { e.preventDefault(); const value = email.trim(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { setInviteError("Enter a full email address, like name@company.com."); return; } if (invites.some((i) => i.email === value) || members.some((m) => m.email === value)) { setInviteError("That person is already here or invited."); return; } counter.current += 1; setInvites((all) => [{ id: `new-${counter.current}`, email: value, roleId: inviteRole, invitedBy: "Ada", sent: "just now" }, ...all]); setEmail(""); say( <> Invite sent to {value} , ); }; const toggle = (roleId: string, permissionId: string) => setDraft((d) => { const current = d[roleId] ?? []; return { ...d, [roleId]: current.includes(permissionId) ? current.filter((p) => p !== permissionId) : [...current, permissionId] }; }); const addCustom = () => { counter.current += 1; const rid = `custom-${counter.current}`; const grants = [...(draft.member ?? [])]; setRoles((all) => { const ownerIndex = all.findIndex((r) => r.locked); const next = [...all]; next.splice(ownerIndex < 0 ? all.length : ownerIndex, 0, { id: rid, name: "Contractor", description: "Custom, based on Member", from: "member", grants, }); return next; }); setSaved((s) => ({ ...s, [rid]: grants })); setDraft((d) => ({ ...d, [rid]: grants })); }; const removeCustom = (rid: string) => { const role = roles.find((r) => r.id === rid); const fallback = role?.from ?? "viewer"; const before = { roles, members, invites, saved, draft }; setRoles((all) => all.filter((r) => r.id !== rid)); setMembers((all) => all.map((m) => (m.roleId === rid ? { ...m, roleId: fallback } : m))); setInvites((all) => all.map((i) => (i.roleId === rid ? { ...i, roleId: fallback } : i))); setSaved(({ [rid]: _, ...rest }) => rest); setDraft(({ [rid]: _, ...rest }) => rest); say( <> {role?.name} role removed , () => { setRoles(before.roles); setMembers(before.members); setInvites(before.invites); setSaved(before.saved); setDraft(before.draft); }, ); }; const save = () => { setSaved(draft); setRoles((all) => all.map((r) => ({ ...r, grants: draft[r.id] ?? r.grants }))); setJustSaved(true); if (savedTimer.current) clearTimeout(savedTimer.current); savedTimer.current = setTimeout(() => setJustSaved(false), 1600); }; const fade = reduce ? { duration: 0 } : { duration: 0.22, ease: easeOut }; const bar = changedRoles.length > 0 ? "dirty" : justSaved ? "saved" : null; const roleName = (rid: string) => roles.find((r) => r.id === rid)?.name ?? "Viewer"; return (

Members & roles

Invite people to Ridgeline and decide what each role can do.

Invite people

They’ll get an email with a link that works for 7 days.

Members

{plural(members.length, "person", "people")} in Ridgeline.

Name Role Last active Actions

{members.map((m) => { const role = roles.find((r) => r.id === m.roleId); const you = m.id === currentUserId; return (

{m.name} {you && (you)}

{m.email}

{role?.locked ? ( {role.name} ) : ( setMembers((all) => all.map((x) => (x.id === m.id ? { ...x, roleId: rid } : x)))} roles={roles} value={m.roleId} /> )} {m.lastActive}

{m.lastActive === "Now" ? ( Now ) : ( m.lastActive )} } > navigator.clipboard?.writeText(m.email).catch(() => {})}> Copy email { setRemoving(m); setRemoveOpen(true); }} variant="destructive" > {role?.locked ? "Owner can’t be removed" : "Remove from workspace"}

); })}

Pending invites {invites.length}

{invites.map((inv) => { const wasResent = resent.includes(inv.id); return (

{inv.email}

{roleName(inv.roleId)} · {wasResent ? "resent just now" : `invited by ${inv.invitedBy} ${inv.sent}`}

); })}

{invites.length === 0 &&

No invites waiting.

}

Roles

What each role can do. Owners can always do everything.

setRoles((all) => all.map((r) => (r.id === rid ? { ...r, name } : r)))} onToggle={toggle} reduce={reduce} roles={roles} saved={saved} />

{customRole ? ( <> marks where {customRole.name} differs from Member. Click its name to rename it. ) : ( "Need something in between? Duplicate Member and adjust it." )}

{bar ? ( {bar === "dirty" ? ( <>

Unsaved changes You have unsaved changes {" "} · {affected === 0 ? "no one has these roles yet" : `affects ${plural(affected, "person", "people")}`}

) : (

Roles saved

)} ) : notice ? (

{notice.text}

{notice.undo ? ( ) : ( )} ) : null}

Remove {removing?.name}? They lose access to Ridgeline straight away. Projects they created stay where they are. }>Cancel { if (!removing) return; const target = removing; setMembers((all) => all.filter((x) => x.id !== target.id)); say( <> {target.name} removed , ); }} variant="destructive" /> } > Remove ); }