ConciergeShell

Client wrapper that pads the site shell when Dex is open on md+, so the fixed ConciergeDrawer pushes header, main, and footer aside instead of overlaying them. Mobile gets no padding (drawer remains a full-screen overlay).

components/system/ConciergeShell.tsx

Props

Prop	Type	Required	Default	Description
`children`	`ReactNode`	Yes	—	App shell (header, main, footer)

Usage

import { ConciergeShell } from "@/components/system/ConciergeShell";

// app/layout.tsx, inside <ConciergeProvider>
<ConciergeShell>{appShell}</ConciergeShell>
<ConciergeDrawer />

import { ConciergeShell } from "@/components/system/ConciergeShell";

// app/layout.tsx, inside <ConciergeProvider>
<ConciergeShell>{appShell}</ConciergeShell>
<ConciergeDrawer />

Behavior

Reads isDrawerOpen and isWide from useConcierge().
Closed or mobile: no padding.
Open + narrow: md:pr-[28rem] (matches md:max-w-md).
Open + wide: md:pr-[48rem] xl:pr-[56rem] (matches wide drawer max-widths).
Uses the same duration-300 ease as the drawer transform/max-width transition.

Notes

Must render inside ConciergeProvider.
Only mounted when CONCIERGE_ENABLED is true (same gate as the drawer).