AppTopBar
AppTop bar wrapper passed into AppShell's header slot. The logo slot anchors the left side while children (GlobalSearch, UserMenu, Button, etc.) are arranged in a flex row.
<AppTopBar>
<GlobalSearch
onSearch={handleSearch}
onSelect={handleSelect}
className="flex-1 max-w-sm hidden sm:block"
/>
<div className="ml-auto flex items-center gap-1">
<Button variant="ghost" size="sm" iconOnly aria-label="Notifications">🔔</Button>
<Button variant="ghost" size="sm" iconOnly aria-label="Settings">⚙️</Button>
<UserMenu user={currentUser} />
</div>
</AppTopBar>Acme
<AppTopBar logo={<span className="font-black text-primary text-lg">Acme</span>}>
<div className="ml-auto flex items-center gap-2">
<Button variant="primary" size="sm">Upgrade</Button>
<UserMenu user={currentUser} />
</div>
</AppTopBar>