<!-- source-hash: 5bd98e591bdfac5e0da78b79f15c4945 -->
Storybook stories for the `ListPageLayout` component, showcasing layout variants, interactive states, and real-world page examples used across the OpenFrame application.

## Key Components

| Story | Description |
|---|---|
| `Basic` | Minimal layout with title, search bar, and table |
| `WithHeaderActions` | Layout with Refresh and Add Device action buttons |
| `WithViewToggle` | Layout with list/grid view switcher |
| `WithError` | Error state rendering |
| `WithSearchValue` | Pre-filled search input |
| `EmptyState` | Table with no data and empty message |
| `SmallPadding` / `LargePadding` | Padding size variants (`sm`, `lg`) |
| `CardBackground` | Card-style background variant |
| `Interactive` | Fully functional search with live filtering |
| `ScriptsPageExample` | Real-world Scripts page layout mock |
| `LogsPageExample` | Real-world Logs page layout mock |

## Usage Example

```typescript
import { ListPageLayout } from '../components/layout/list-page-layout'
import { Table } from '../components/ui/table'
import { Button } from '../components/ui/button'
import { useState } from 'react'

function DevicesPage() {
  const [searchValue, setSearchValue] = useState('')

  const filtered = devices.filter(d =>
    d.name.toLowerCase().includes(searchValue.toLowerCase())
  )

  return (
    <ListPageLayout
      title="Devices"
      headerActions={
        <Button variant="accent" size="small-legacy">
          Add Device
        </Button>
      }
      searchPlaceholder="Search devices..."
      searchValue={searchValue}
      onSearch={setSearchValue}
      padding="md"
      background="default"
    >
      <Table data={filtered} columns={deviceColumns} rowKey="id" />
    </ListPageLayout>
  )
}
```

## Layout Structure

```text
┌──────────────────────────────────────────────────┐
│ Title (left)          │   Header Actions (right) │
├──────────────────────────────────────────────────┤
│              Search Bar (full width)             │
├──────────────────────────────────────────────────┤
│           Table / Grid (main content)            │
└──────────────────────────────────────────────────┘
```

**Props:** `padding` (`none` | `sm` | `md` | `lg`), `background` (`default` | `card` | `transparent`), `error` (string), `headerActions` (ReactNode), `searchPlaceholder`, `searchValue`, `onSearch`.