<!-- source-hash: 3e5784b9b627d4143a0bac991ef6fb48 -->
Storybook stories for the `PageLayout` component, covering all major layout variants including title-only, subtitle/image combinations, mobile responsive behavior, and action button configurations.

## Key Components

| Export | Description |
|--------|-------------|
| `TitleOnly` | Minimal header with title and content only |
| `WithSubtitleAndImage` | Full organization detail header with back button, thumbnail, subtitle, and icon-button actions |
| `MobileActionsMenu` | Same as `WithSubtitleAndImage` at mobile viewport — actions collapse to `…` dropdown |
| `WithSubtitleOnly` | Title + one-line context note with primary-button actions |
| `WithImageOnly` | Branded entity header without a subtitle line |
| `WithSelector` | Desktop tab selector (table/grid toggle) rendered before action buttons |
| `WithSelectorMobile` | `WithSelector` at mobile viewport — selector hidden, only `…` dropdown remains |
| `LongTitleTruncates` | Verifies ellipsis truncation when title/subtitle overflow the header |

## Usage Example

```typescript
// Minimal usage
<PageLayout title="Devices">
  <Table data={devices} columns={columns} rowKey="id" />
</PageLayout>

// Full organization detail page
<PageLayout
  title="TechFlow Solutions"
  subtitle="techflow.com • Software Development"
  image={{ src: logoSrc, alt: 'TechFlow logo' }}
  backButton={{ label: 'Back to Organizations', onClick: handleBack }}
  actionsVariant="icon-buttons"
  actions={[
    { label: 'Archive Organization', onClick: handleArchive, variant: 'outline', icon: <BoxArchiveIcon size={24} /> },
    { label: 'Edit Organization',    onClick: handleEdit,    variant: 'outline', icon: <PenEditIcon size={24} />    },
  ]}
>
  <Table data={devices} columns={columns} rowKey="id" />
</PageLayout>

// With desktop tab selector (hidden on mobile)
<PageLayout
  title="Devices"
  actionsVariant="icon-buttons"
  actions={[{ label: 'Add Device', onClick: fn(), variant: 'outline', icon: <PlusCircleIcon size={24} /> }]}
  selector={
    <TabSelector
      value={view}
      onValueChange={setView}
      items={[
        { id: 'table', label: '', icon: <TableCellIcon size={24} /> },
        { id: 'grid',  label: '', icon: <GridLayoutIcon size={24} /> },
      ]}
    />
  }
>
  <Table data={devices} columns={columns} rowKey="id" />
</PageLayout>
```

**`actionsVariant` options:** `icon-buttons` (labeled outline buttons → `…` menu on mobile), `primary-buttons` (always visible primary buttons), `menu-primary` (menu trigger with primary style).