Every module is a brick with four faces. View is what draws and maintains a section of the page, Behavior is what listens and emits, Logic is what computes, and includes the operations a trait performs for its host, since the trait is the framework's function module, Content is what is shown: markup, copy, and styles, in a template or in JSX. Each tile below is one module: its size is the module's token count, and its 100 blocks are the module's tokens by percentage, laid out in the order they appear in the file. A module that declares its shape can be drawn wearing one color for every token in its place, with another color only where a token is out of place, and a member its role does not sanction out of place in full. The default view is composition on every side. A brick that is one color in the composition view is one bucket; a brick that is one color in the declared-shape view is inside its declared shape. A codebase of same-shaped bricks is easy to build with, even when the shape is mixed; a pile of random shapes is not.
Mixing (per module, 0 to 0.75) = 1 − largest share. Consistency (per codebase, 0 to √2) = mean distance of each module's shape from the median shape of its family, a family being the modules that share a dominant color; low means each kind of module has one shape to learn. Drift (declared roles only) = share of tokens outside the shape the role promises, less what the config permits there. Punctuation, comments, and scaffolding are excluded from every count.
Pick a name or a module.