AppShell
The application shell, driven by **one recursive structure tree**: section nodes render as top-bar tabs (show:'dropdown' opens a menu of children, show:'sidebar' renders them in the left sidebar); inside sections live switcher (workspace/profile picker whose selected child supplies the nav below it), search (filters the items after it), group, item (nesting freely — the chevron expands independently of the link), and divider (vertical in the top bar, horizontal in the sidebar). A section with search:true enables the global top-bar search while active (or force it with showSearchOverride). Give the search something to find with searchGroups — results appear from the first keystroke, grouped by type, matched on title + sub with accents folded; onSearch fires per keystroke for a server-backed search, and onSearchSelect reports the chosen row. Selections bind via bind:activeSection / bind:selections; the current page is marked active:true in the data; clicks fire onSelect(node). Responsive via container query — below the breakpoint everything collapses into a hamburger drawer where sections become an accordion with the active one expanded. Full-page demos in context: the patient, doctor and admin rooms under @mocks.
Props
show:'sidebar' children when set.href, shows an unread count badge. Used when the host has a notifications page instead of inline items. Ignored if notifications has entries.onSearch and swap this array as results arrive — the component only renders what it is given.search). Use for a global search.user (e.g. sign in). Events
url).