From 3 components to 8: what actually changes when a design system scales

When flintwork had 3 components (Button, Dialog, Tabs), every component was its own island. Each one had its own hooks, its own keyboard handling, its own focus management. The code worked but nothing talked to anything else. When it grew to 8 (adding Menu, Select, Popover, Accordion, Tooltip), the codebase went through a structural shift I didn't plan for. Patterns emerged that only become visible when you have enough components to compare. This is about what those patterns are and why they matter more than any individual component. Four components that are secretly the same thing Dialog, Popover, Menu, and Select look completely different to a user. Different triggers, different content, different interaction models. But internally they all do the same three things when they open: Trap focus inside the content Close when you click outside Close when you press Escape The code is identical: // All four components do exactly this in their Content component: useFocusTrap(contentRef, { en