A unified page container component that supports both a legacy layout pattern and an advanced UI pattern with variant-based layouts, headers, back buttons, and configurable actions. ## Key Components - **`PageContainer`** – Main exported component. Detects which interface is in use via `isAdvancedProps()` and delegates to the appropriate renderer. - **`LegacyPageContainerProps`** – Backward-compatible interface for full-width background sections with configurable max-width and padding. - **`AdvancedPageContainerProps`** – Modern interface supporting `variant`, `title`, `subtitle`, `backButton`, `headerActions`, `actions`, and `menuActions`. - **`renderLegacyPageContainer`** – Preserves original layout behavior with configurable `as` element, background, and padding. - **`renderAdvancedPageContainer`** – Renders variant-aware layouts (`list`, `detail`, `form`, `content`) with responsive headers and mobile-fixed action bars. > **Deprecated:** Use `PageLayout` from `'../layout/page-layout'` instead. ## Usage Example ```typescript // Legacy usage

Content

// Advanced — detail page with back button and actions router.back() }} actions={[ { label: 'Save', onClick: handleSave, variant: 'primary' }, { label: 'Cancel', onClick: handleCancel }, ]} > // Advanced — list page with header actions } actions={[{ label: 'Add Device', onClick: handleAdd, icon: PlusIcon }]} > ``` **Source:** [`page-container.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/page-container.tsx)