<!-- source-hash: cad0666dc893f948d0160200a40d9384 -->
Storybook stories file for the `PageActions` component, documenting all interactive variants and states for use in the Flamingo/OpenFrame UI library.

## Key Components

**Exported Stories:**

| Story | Variant | Description |
|---|---|---|
| `IconButtons` | `icon-buttons` | Icon + label buttons, collapses to dropdown on mobile |
| `PrimaryButtons` | `primary-buttons` | Accent + outline buttons, fixed bottom bar on mobile |
| `PrimaryButtonsWithIcons` | `primary-buttons` | Primary buttons with leading icons |
| `SinglePrimaryButton` | `primary-buttons` | Single accent CTA |
| `SingleIconButton` | `icon-buttons` | Single icon button (stays visible on mobile, no menu collapse) |
| `ThreeIconButtons` | `icon-buttons` | Three-action icon row |
| `WithStates` | `primary-buttons` | `loading` and `disabled` prop states |
| `MenuPrimary` | `menu-primary` | `...` overflow menu + primary button |
| `MenuPrimaryLoading` | `menu-primary` | Loading state on primary button |
| `MobileOnlyActions` | `icon-buttons` | `showOnlyMobile` prop — hides specific actions on desktop |
| `LinkActions` | `menu-primary` | `href`-based actions rendering as `<a>` elements |
| `SplitButtonWithMenu` | `menu-primary` | `submenu` chevron split button pattern |
| `SplitButtonTwoActions` | `menu-primary` | `iconAction` dual-target split button |

## Usage Example

```typescript
// Basic icon-buttons usage in a page header
<PageActions
  variant="icon-buttons"
  actions={[
    { label: 'Add Script', onClick: handleAdd, icon: <PlusCircleIcon size={24} /> },
    { label: 'Edit Categories', onClick: handleEdit, icon: <ColorsIcon size={24} /> },
  ]}
/>

// menu-primary with split button and overflow menu
<PageActions
  variant="menu-primary"
  actions={[
    {
      label: 'Remote Shell',
      variant: 'outline',
      submenu: [
        { id: 'cmd', label: 'CMD', onClick: openCmd, icon: <TerminalIcon size={24} /> },
        { id: 'powershell', label: 'Power Shell', onClick: openPs, icon: <TerminalIcon size={24} /> },
      ],
    },
  ]}
  menuActions={[
    {
      items: [
        { id: 'edit', label: 'Edit Device', onClick: handleEdit, icon: <PenEditIcon size={24} /> },
        { id: 'delete', label: 'Delete Device', onClick: handleDelete, icon: <TrashIcon size={24} /> },
      ],
    },
  ]}
/>
```

> **Tip:** Use `PageActions` via the `headerActions` prop on `PageContainer` for consistent page-level layouts across the Flamingo platform.