<!-- source-hash: 70d0d7bf97f25795ba22d26ce08d067f -->
Responsive page-level action bar component that renders action buttons in three layout variants (`icon-buttons`, `primary-buttons`, `menu-primary`), automatically adapting between desktop and mobile layouts with overflow menus.

## Key Components

### Types
- **`PageActionButton`** — Action descriptor supporting labels, icons, links (`href`), submenus, split-button icon actions, and visibility/rendering flags like `showOnlyMobile` and `iconOnlyOnDesktop`
- **`PageActionsProps`** — Props for the main `PageActions` component

### Components
- **`PageActions`** — Root component; dispatches to the correct variant
- **`IconButtonsVariant`** — Desktop: icon buttons + optional overflow menu. Mobile: single icon or merged `...` dropdown
- **`PrimaryButtonsVariant`** — Desktop: labeled buttons sorted by variant. Mobile: fixed bottom bar
- **`MenuPrimaryVariant`** — Desktop: `...` menu + accent-styled primary buttons. Mobile: all actions in a single `...` dropdown

### Utilities
- **`renderActionButton`** — Renders a `Button`, `SplitButton`, or submenu `ActionsMenuDropdown` based on action config
- **`actionToMenuItems`** — Converts a `PageActionButton` to `ActionsMenuItem[]` for mobile dropdown merging
- **`usePageActionsBottomPadding`** — Hook returning a Tailwind padding class to prevent content from being obscured by the mobile bottom bar

## Usage Example

```typescript
import { PageActions, usePageActionsBottomPadding } from './page-actions'

function MyPage() {
  const bottomPad = usePageActionsBottomPadding('primary-buttons')

  return (
    <div className={bottomPad}>
      <PageActions
        variant="primary-buttons"
        actions={[
          {
            label: 'Save',
            variant: 'accent',
            onClick: () => handleSave(),
          },
          {
            label: 'More',
            icon: <SettingsIcon />,
            submenu: [
              { id: 'export', label: 'Export', onClick: handleExport },
              { id: 'delete', label: 'Delete', onClick: handleDelete },
            ],
          },
        ]}
      />
    </div>
  )
}
```