AppBar

Top-of-page bar with brand, search, theme/accent controls, avatar, custom actions.

<AppBar
  brandName="My App"           // string
  brandSub="subtitle"          // string
  brandLogo={<img … />}        // ReactNode — replaces the default hex mark (~20×20)
  showSearch                   // boolean (default true)
  searchPlaceholder="…"        // string
  isDark={theme === 'dark'}    // boolean
  onToggleTheme={toggleTheme}  // () => void — shows toggle if present
  accent={accent}              // AccentColor — shows picker if present
  onAccentChange={setAccent}   // (AccentColor) => void
  avatarInitials="AB"          // string — shows <Avatar> at trailing edge
  onNewClick={() => {}}        // () => void — shows "New" button if present
  actions={<Node />}           // ReactNode — custom slot
  onMenuClick={() => {}}       // () => void — shows hamburger at leading edge
  onSearch={(q) => {}}         // (query: string) => void — fires on Enter in search
  onSearchFocus={() => {}}     // () => void — fires when search input focuses
/>