Renders the title/subtitle/back-button/actions chrome block used by `PageLayout`. This component is **frozen** — it defines the canonical page header baseline across all OpenFrame pages and must not be structurally modified without explicit human sign-off. ## Key Components ### `TitleBlock` (default export) Primary component rendering the full page title chrome. Accepts the following props: | Prop | Type | Default | Description | |---|---|---|---| | `title` | `string` | — | Page title text | | `subtitle` | `string` | — | Secondary descriptor | | `image` | `{ src, alt? }` | — | Entity image rendered beside title | | `backButton` | `{ label?, onClick }` | — | Back navigation (desktop-only) | | `actions` | `PageActionButton[]` | — | Action buttons rendered inline with title | | `actionsVariant` | `'icon-buttons' \| 'primary-buttons' \| 'menu-primary'` | `'icon-buttons'` | Action button style | | `menuActions` | `ActionsMenuGroup[]` | — | Overflow menu action groups | | `selector` | `ReactNode` | — | Desktop-only slot (e.g. `TabSelector`) | | `variant` | `'plain' \| 'card'` | `'plain'` | Visual container style | | `titleSize` | `'h1' \| 'h2'` | `'h2'` | Title typography size | | `titleAdornment` | `ReactNode` | — | Inline node after title (e.g. status `Tag`) | | `loading` | `boolean` | — | Swaps title/subtitle text for skeleton bars | | `titleWrap` | `boolean` | `false` | Allows multi-line title instead of truncation | ### `TitleTextSkeleton` Internal component rendering inline skeleton bars that preserve line-box height during loading state — the header remains pixel-identical in height whether loaded or loading. ### `TITLE_BLOCK_MIN_HEIGHT` Exported Tailwind class string (`'min-h-11 md:min-h-12'`) ensuring consistent header height regardless of whether action buttons are present. Reusable by other page chrome components. ## Usage Example ```typescript import { TitleBlock } from '@/components/layout/title-block' // Basic usage — frozen h2 baseline router.back() }} actions={[{ label: 'Add Device', onClick: handleAdd }]} actionsVariant="primary-buttons" /> // Help Center page — sanctioned h1 override New} titleWrap /> // Loading skeleton (height preserved) ``` > **Note:** This component is intentionally frozen. New page chrome designs must be implemented as separate components. See the in-file freeze notice for full rationale and the list of sanctioned exceptions. Source: [`title-block.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/components/layout/title-block.tsx)