<!-- source-hash: 32c9dcb06a56d3c5fa171224fc048981 -->
A deprecated layout component for list-based pages in OpenFrame, providing a standardized structure with a title header, full-width search bar with debouncing, optional mobile filter modal, and a main content area for tables or grids.

## Key Components

### `ListPageLayoutProps`

| Prop | Type | Description |
|------|------|-------------|
| `title` | `string` | Page title displayed in the header |
| `searchPlaceholder` | `string` | Placeholder text for the search input |
| `searchValue` | `string` | Controlled search input value |
| `onSearch` | `(term: string) => void` | Callback fired after 500ms debounce |
| `headerActions` | `React.ReactNode` | Optional content rendered right-aligned in the header |
| `actions` | `PageActionButton[]` | Action buttons passed to the page container |
| `mobileFilterGroups` | `FilterGroup[]` | Filter groups shown in the mobile filter modal |
| `mobileSortConfig` | `SortConfig` | Sort columns available in the mobile filter modal |
| `stickyHeader` | `boolean` | Makes the search bar sticky on scroll |
| `error` | `string \| null` | Renders a `PageError` instead of the layout |
| `padding` | `'none' \| 'sm' \| 'md' \| 'lg'` | Inner padding size (default: `'sm'`) |
| `background` | `'default' \| 'card' \| 'transparent'` | Background style (default: `'default'`) |

### `ListPageLayout`

The main exported function component. Internally manages:

- **Local search state** synced with the controlled `searchValue` prop
- **Debounced search** — `onSearch` fires 500ms after the user stops typing
- **Mobile filter visibility** — a `Filter02Icon` button toggling a `FilterModal` overlay, rendered only when `mobileFilterGroups` or `mobileSortConfig` are provided

## Usage Example

```typescript
import { ListPageLayout } from './list-page-layout'
import { Button } from '../ui'

function DevicesPage() {
  const [search, setSearch] = useState('')
  const [filters, setFilters] = useState({})

  return (
    <ListPageLayout
      title="Devices"
      searchPlaceholder="Search devices..."
      searchValue={search}
      onSearch={setSearch}
      headerActions={<Button>Refresh</Button>}
      mobileFilterGroups={[
        { id: 'status', label: 'Status', options: [{ value: 'online', label: 'Online' }] },
      ]}
      onMobileFilterChange={setFilters}
      currentMobileFilters={filters}
      stickyHeader
    >
      <DevicesTable />
    </ListPageLayout>
  )
}
```

> **Deprecated** — Use `PageLayout` from `'../layout/page-layout'` instead.