Shell in Kookie UI.

The UI of an app frame is easy: navigation on the left, the work in the middle and details on the right. Any team can draw those three boxes in an afternoon. The hard part is the pattern. How the boxes behave together is a problem that recurs in every app, with a known solution, and that solution decides which panes are open, what a phone shows instead, where the focus goes when a pane closes, and what happens when a person goes back and forth between a wide window and a narrow one.

import {  Shell,  ShellContent,  ShellHeader,  ShellInspector,  ShellRail,  ShellScroll,  ShellSidebar,} from '@kookie-ui/react';export function App({ children }: { children: React.ReactNode }) {  return (    <Shell size="2">      <ShellHeader>{/* global navigation */}</ShellHeader>      <ShellRail aria-label="Sections">{/* sections */}</ShellRail>      <ShellSidebar aria-label="Pages">        <ShellScroll>{/* pages */}</ShellScroll>      </ShellSidebar>      <ShellContent>        <ShellScroll>{children}</ShellScroll>      </ShellContent>      <ShellInspector>{/* details */}</ShellInspector>    </Shell>  );}

A pattern cannot live inside one component, because it is a relation between components. When each pane manages itself, a sidebar must reach up and control the layout around it, and that is the sign of a pattern forced into the shape of a component. Shell in Kookie UI turns this around: it owns the arrangement, and each pane only says that it exists.

The behavior then follows from how people use each pane. Navigation stays open on a wide window and opens over the content on a phone, where the rail becomes a tab bar at the bottom of the screen. Details stay closed until a person asks for them. The same pattern also fits a tiled editor or a canvas app with one setting, because only the way the panes sit changes, not the pattern.