Add app bars, toolbars, tabs and the account and theme controls

M3 Expressive top app bars (small, centered, medium and large flexible,
search) that collapse with CSS sticky, docked and floating toolbars,
primary and secondary tabs with a view-transition indicator, section
navigation, the account menu and theme toggles.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy

resources/boost/skills/livewire-material-development/SKILL.md

@@ -492,6 +492,63 @@ M3 search bar that opens into a search view: docked under the bar from `sm`, ful
 
 The docked view overlaps what is under it; never place a search inside an element with `overflow-hidden` (a card), which clips it.
 
+### `<x-app-bar>`
+
+M3 Expressive top app bar, sticky by default (`:sticky="false"` to scroll away), turning surface-container once content scrolls under it. `variant`: `small` (default), `center`, `medium` and `large` (a big title that collapses into the row as the page scrolls — CSS sticky, no layout shift), `search` (put an `<x-search>` in the slot). Props: `title`, `subtitle`, `heading` (`h1` default). Slots: `navigation` (leading icon button), `actions` (trailing icon buttons, avatar).
+
+```blade
+<x-app-bar variant="medium" title="Recipients" subtitle="3 people">
+    <x-slot:navigation><x-button icon="arrow_back" tooltip="Back" :link="route('shares.index')" /></x-slot:navigation>
+    <x-slot:actions><x-button icon="person_add" tooltip="Add recipient" wire:click="add" /></x-slot:actions>
+</x-app-bar>
+```
+
+A collapsing bar needs the window to scroll: no ancestor with `overflow-hidden`/`overflow-auto` (`overflow-x-clip` is fine).
+
+### `<x-toolbar>`
+
+M3 Expressive toolbar, `role="toolbar"` (arrow keys move between controls). `variant`: `floating` (default pill at elevation 3; `vibrant`, `vertical`) or `docked` (full-width surface-container bar). `place`: `bottom` or `end` to fix it over the page; `fab` slot sets a FAB beside a floating toolbar; `label` names it.
+
+```blade
+<x-toolbar label="Selection" place="bottom" vibrant>
+    <x-button icon="download" tooltip="Download" wire:click="download" />
+    <x-button icon="delete" tooltip="Delete" wire:click="delete" />
+    <x-slot:fab><x-fab icon="add" tooltip="New share" /></x-slot:fab>
+</x-toolbar>
+```
+
+### `<x-tabs>`, `<x-tab>`
+
+M3 tabs with a server-rendered tablist (arrow keys, Home/End, disabled tabs skipped, the indicator moves in a view transition). `tabs`: `['name', 'label', 'icon', 'badge', 'disabled']`; panels are `<x-tab name>` in the slot. Bind with `wire:model` (entangled), or `selected` / `x-model` without Livewire. `variant` `primary` (default) or `secondary`; `stacked` (icon over label), `scrollable`. Give two identical tab sets on one page distinct `id`s.
+
+```blade
+<x-tabs wire:model.live="tab" :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'people', 'label' => 'People', 'badge' => $pending]]">
+    <x-tab name="files">…</x-tab>
+    <x-tab name="people">…</x-tab>
+</x-tabs>
+```
+
+### `<x-section-nav>`
+
+Navigation between the sections of one area (settings, admin): secondary tabs as links from `sm` (wrapping onto a grid rather than scrolling), a menu picker below. `items`: `['title', 'url', 'icon', 'active', 'badge']` — current when `active` or its `url` is the request's. `label`, `no-wire-navigate`.
+
+### `<x-account-menu>`
+
+An avatar that opens a menu: `name`, `email`, `avatar` (image URL or initials; default the name's initials), items in the slot, a theme item (`:theme="false"` to drop it), and a `footer` slot for signing out. `label`, `position`.
+
+```blade
+<x-account-menu :name="auth()->user()->name" :email="auth()->user()->email">
+    <x-menu-item label="Settings" icon="settings" :link="route('settings')" />
+    <x-slot:footer>
+        <form method="POST" action="{{ route('logout') }}">@csrf<x-menu-item label="Sign out" icon="logout" type="submit" /></form>
+    </x-slot:footer>
+</x-account-menu>
+```
+
+### `<x-theme-toggle>`
+
+Switches `$store.theme`: `mode="toggle"` (default, light/dark icon button), `cycle` (light → dark → system), `picker` (segmented buttons for settings pages). Every toggle on a page shares the store.
+
 ## Testing the design
 
 ```php