diff --git a/apps/storybook/stories/DrawerReview5549.stories.tsx b/apps/storybook/stories/DrawerReview5549.stories.tsx
new file mode 100644
index 00000000000..3535f35b2a7
--- /dev/null
+++ b/apps/storybook/stories/DrawerReview5549.stories.tsx
@@ -0,0 +1,113 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import type {Meta, StoryObj} from '@storybook/react';
+import {Profiler, useState} from 'react';
+import {Drawer} from '@astryxdesign/lab';
+import {Button} from '@astryxdesign/core/Button';
+import {Heading} from '@astryxdesign/core/Heading';
+import {Section} from '@astryxdesign/core/Section';
+import {VStack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Review/Drawer5549',
+  component: Drawer,
+  parameters: {layout: 'centered'},
+};
+
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+
+type ReviewGlobals = typeof globalThis & {
+  __drawer5549Commits?: Array<{phase: string; isOpen: boolean}>;
+};
+
+export const Lifecycle: Story = {
+  render: () => {
+    const [side, setSide] = useState<'start' | 'end' | null>(null);
+    const [underlayClicks, setUnderlayClicks] = useState(0);
+    const isOpen = side != null;
+    return (
+      <div
+        data-review-frame="drawer-5549"
+        style={{
+          background: 'white',
+          border: '2px dashed #767676',
+          boxSizing: 'border-box',
+          height: 360,
+          padding: 24,
+          position: 'relative',
+          transform: 'translateZ(0)',
+          width: 620,
+        }}>
+        <VStack gap={3}>
+          <Heading level={3}>Transformed application pane</Heading>
+          <Button label="Open from end" onClick={() => setSide('end')} />
+          <Button label="Open from start" onClick={() => setSide('start')} />
+          <Button
+            data-testid="underlay-target"
+            label={`Underlay action ${underlayClicks}`}
+            onClick={() => setUnderlayClicks(value => value + 1)}
+          />
+        </VStack>
+        <Profiler
+          id="drawer"
+          onRender={(_id, phase) => {
+            const scope = globalThis as ReviewGlobals;
+            (scope.__drawer5549Commits ??= []).push({phase, isOpen});
+          }}>
+          <Drawer
+            isOpen={isOpen}
+            onOpenChange={open => !open && setSide(null)}
+            label="Review drawer"
+            side={side ?? 'end'}
+            style={{transitionDuration: '600ms'}}>
+            <Section padding={4}>
+              <VStack gap={3}>
+                <Heading level={3}>Drawer content</Heading>
+                <Text>The panel must leave the page cleanly.</Text>
+                <Button label="Drawer focus target" data-autofocus />
+              </VStack>
+            </Section>
+          </Drawer>
+        </Profiler>
+      </div>
+    );
+  },
+};
+
+export const NestedLifecycle: Story = {
+  render: () => {
+    const [outerOpen, setOuterOpen] = useState(false);
+    const [innerOpen, setInnerOpen] = useState(false);
+    return (
+      <div data-review-frame="drawer-5549-nested" style={{height: 360, width: 620}}>
+        <Button label="Open outer" onClick={() => setOuterOpen(true)} />
+        <Drawer
+          isOpen={outerOpen}
+          onOpenChange={setOuterOpen}
+          label="Outer review drawer"
+          hasScrim={false}
+          style={{transitionDuration: '80ms'}}>
+          <Section padding={4}>
+            <VStack gap={3}>
+              <Heading level={3}>Outer drawer</Heading>
+              <Button label="Open inner" onClick={() => setInnerOpen(true)} />
+            </VStack>
+          </Section>
+          <Drawer
+            isOpen={innerOpen}
+            onOpenChange={setInnerOpen}
+            label="Inner review drawer"
+            hasScrim={false}
+            width={280}
+            style={{transitionDuration: '80ms'}}>
+            <Section padding={4}>
+              <Heading level={3}>Inner drawer</Heading>
+            </Section>
+          </Drawer>
+        </Drawer>
+      </div>
+    );
+  },
+};