# AdaptiveAppLayout

**Maturity:** experimental

Adaptive shell with independently controlled bars and sidebar.

## Import

```tsx
import { AdaptiveAppLayout } from "@liquidify/react/adaptive-app-layout"
```

## Props

- `actions`: `LayoutSlot`. 
- `appName`: `string | undefined`. 
- `asChild`: `undefined`. Multiple owned elements cannot be merged onto one child.
- `bottomBar`: `AdaptiveAppBarOptions | null | undefined`. 
- `children`: `ReactNode` (required). 
- `className`: `string | undefined`. Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean.
- `compactNavigation`: `{ label: string; icon?: ReactNode; } | undefined`. 
- `contentInset`: `"automatic" | "none" | undefined`. Automatic content clearance, or caller-owned padding using the public inset tokens.
- `contentProps`: `DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined`. 
- `defaultSidebarOpen`: `boolean | undefined`. 
- `gap`: `LayoutSpacing | undefined`. 
- `leading`: `LayoutSlot`. 
- `navigation`: `LayoutSlot`. 
- `onPresentationChange`: `((change: AdaptivePresentationChange) => void) | undefined`. 
- `onSidebarOpenChange`: `((open: boolean, details: AdaptiveStateChange<boolean>) => void) | undefined`. 
- `ref`: `Ref<HTMLDivElement> | undefined`. Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`.
- `scrollBehavior`: `AdaptiveScrollBehavior | undefined`. 
- `separation`: `LayoutSpacing | undefined`. 
- `showCompactNavigation`: `boolean | undefined`. 
- `showSidebar`: `boolean | undefined`. Defaults to whether navigation or sidebar content was supplied.
- `sidebar`: `LayoutSlot`. 
- `sidebarContentProps`: `DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined`. 
- `sidebarFooter`: `LayoutSlot`. 
- `sidebarOpen`: `boolean | undefined`. 
- `sidebarProps`: `DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined`. 
- `sidebarTitle`: `string | undefined`. 
- `sidebarToggle`: `LayoutSlot`. Undefined supplies the standard toggle; null omits it.
- `skipLinkLabel`: `string | undefined`. 
- `title`: `string | undefined`. 
- `topBar`: `AdaptiveAppBarOptions | null | undefined`. Null omits the entire bar. Undefined uses default content.
- `visualDebug`: `boolean | undefined`. 

## SwiftUI mapping

- `*(web-only, no direct SwiftUI analogue)*` → ``navigation / sidebar / topBar / bottomBar`` (web-only): Web layout composition of navigation and independent bar slots.
- `*(web-only, no direct SwiftUI analogue)*` → ``contentInset`` (web-only): Web scroll-container clearance; automatic measurement or caller-owned padding.
- `*(web-only, no direct SwiftUI analogue)*` → ``scrollBehavior / onPresentationChange`` (web-only): Web scrolling policy and presentation requests, not a direct SwiftUI modifier.