<!-- source-hash: ff0ecf9e6a81a5b5db96e020586aff9d -->
A client-side page header component that renders a title, optional subtitle, entity image, back button, and action controls in a responsive layout.

## Key Components

- **`TitleBlockProps`** — Interface defining all configurable props including title, subtitle, image, navigation, actions, and visual variant
- **`TitleBlock`** — Main exported component handling layout for page-level headings with responsive behavior (`plain` vs `card` variants)
- **`variant`** — Controls visual treatment: `plain` (default, transparent) collapses `card` style (bordered, padded) on `md+` breakpoints

## Usage Example

```typescript
import { TitleBlock } from './title-block'

// Basic usage
<TitleBlock
  title="Devices"
  subtitle="Manage all enrolled devices"
  backButton={{ label: 'Back', onClick: () => router.back() }}
  actions={[
    { label: 'Add Device', icon: PlusIcon, onClick: handleAdd },
  ]}
  actionsVariant="primary-buttons"
/>

// With entity image and card variant (e.g. mobile-first detail pages)
<TitleBlock
  title="Acme Corp"
  subtitle="Enterprise Client"
  image={{ src: '/logos/acme.png', alt: 'Acme Corp' }}
  variant="card"
  actions={[{ label: 'Edit', icon: EditIcon, onClick: handleEdit }]}
  menuActions={[{ label: 'More', items: [...] }]}
  selector={<TabSelector tabs={tabs} />}
/>
```

## Notes

- The `selector` slot (e.g. a `TabSelector`) is desktop-only and rendered alongside actions
- Back button is hidden on mobile (`hidden md:inline-flex`)
- Title truncates with `title` attribute tooltip when content overflows