Renders a drawer panel anchored inside the `AppLayout` main content area (rather than the viewport), keeping the header and sidebar visible and interactive while the drawer is open. ## Key Components | Export | Type | Description | |---|---|---| | `AppLayoutDrawerRoot` | Component | Root wrapper; manages open state, coordination with other layout panels, and `DialogPrimitive.Root` in non-modal mode | | `AppLayoutDrawerTrigger` | Component | Re-export of `DialogPrimitive.Trigger` | | `AppLayoutDrawerClose` | Component | Re-export of `DialogPrimitive.Close` | | `AppLayoutDrawerResizeHandle` | Component | Drag handle for resizing the drawer panel via pointer events | | `useContainedResizableSize` | Hook | Manages panel size state with localStorage persistence and container-aware clamping | | `appLayoutDrawerVariants` | CVA | Tailwind variants for the outer positioning wrapper (`side`, `flush`) | | `appLayoutDrawerPanelVariants` | CVA | Tailwind variants for the inner panel surface (`side`, `flush`) | | `DrawerOpenContext` | Context | Exposes the current open state to descendant components for animation control | | `PERSIST_CLOSED_HOLD` | Constant | Tailwind class that pins `fill-mode: forwards` on exit animations when `forceMount` is used | Re-exported from `ui/drawer`: `DrawerBody`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerTitle`. ## Usage Example ```typescript import { AppLayoutDrawerRoot, AppLayoutDrawerTrigger, AppLayoutDrawerClose, } from "./app-layout-drawer" import { DrawerHeader, DrawerTitle, DrawerBody, DrawerFooter } from "../ui/drawer" export function ExamplePanel() { const [open, setOpen] = React.useState(false) return ( {/* Content is portalled into the AppLayout container, not document.body */} Details Panel content here ) } ``` > **Note:** `modal={false}` is set by default so clicks outside the drawer do not block the header or sidebar. A custom overlay div is rendered as a portal sibling to catch pointer events and prevent close-and-reopen flicker on trigger elements.