Storybook stories for the `PageLayout` component, covering layout variants including title-only, subtitle/image combinations, mobile responsive behavior, and action button configurations. ## Key Components | Export | Description | |---|---| | `TitleOnly` | Baseline header with title and content, no extras | | `WithSubtitleAndImage` | Full org detail page with thumbnail, subtitle, back button, and icon-button actions | | `MobileActionsMenu` | `WithSubtitleAndImage` at mobile viewport — actions collapse into a `…` dropdown | | `WithSubtitleOnly` | Title + one-line subtitle with primary-button actions, no image | | `WithImageOnly` | Branded entity header with thumbnail, no subtitle | | `WithSelector` | Adds a desktop-only `TabSelector` (table/grid toggle) before action buttons | | `WithSelectorMobile` | `WithSelector` at mobile viewport — selector is hidden, only `…` dropdown remains | | `LongTitleTruncates` | Validates ellipsis truncation for overflowing titles and subtitles | ## Usage Example ```typescript // Minimal title-only layout // Full org detail layout with image, subtitle, back button, and actions }, { label: 'Edit Organization', onClick: handleEdit, variant: 'outline', icon: }, ]} >
``` **`actionsVariant` options:** `icon-buttons` (outline buttons that collapse to `…` on mobile) · `primary-buttons` (always visible) · `menu-primary`. **Source:** [`PageLayout.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/PageLayout.stories.tsx)