@duro-app/ui 4.4.0 → 4.5.0

package/dist/table.js

@@ -1,4 +1,4 @@
-import { M as F, s as xt, R as rt, H as kt, a as pt, B as bt, c as mt, C as ft, b as ht, d as yt } from "./Table-JTgcR_Fh.js";
+import { M as F, s as xt, R as rt, H as kt, a as pt, B as bt, c as mt, C as ft, b as ht, d as yt } from "./Table-CUp12BKZ.js";
 import { jsx as u, jsxs as B } from "react/jsx-runtime";
 import { c as H, m as p, d as b } from "./compiler-runtime-B2IcI8_O.js";
 import { flexRender as E, useReactTable as it, getPaginationRowModel as St, getFilteredRowModel as Tt, getSortedRowModel as at, getCoreRowModel as st } from "@tanstack/react-table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^4.4.0"
+    "@duro-app/tokens": "^4.5.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Combobox/Combobox.meta.ts

@@ -18,6 +18,12 @@ export const meta: ComponentMeta = {
     optional: ['Empty'],
   },
   relatedTo: [
+    {
+      component: 'Popover',
+      kind: 'composition',
+      relationship:
+        'Inside Popover.Popup a Combobox keeps the popover open while you choose; Escape closes only the list',
+    },
     {
       component: 'Select',
       kind: 'contrast',

package/src/components/Combobox/Combobox.tsx

@@ -5,6 +5,7 @@ import {styles} from './styles.css'
 import {ComboboxContext, useCombobox} from './ComboboxContext'
 import {useComboboxRoot} from './useComboboxRoot'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
+import {usePopoverLayer} from '../Popover/PopoverLayerContext'
 
 // --- Root ---
 interface RootProps {
@@ -137,6 +138,7 @@ function Trigger({children}: {children?: ReactNode}) {
 function Popup({children}: {children: ReactNode}) {
   const {open, listboxId, rootRef} = useCombobox()
   const mount = usePortalMount()
+  const listboxRef = useRef<HTMLDivElement>(null)
   const [coords, setCoords] = useState<{top: number; left: number; width: number} | null>(null)
 
   // Measure the root each time the popup opens, and re-measure on scroll/resize
@@ -163,10 +165,13 @@ function Popup({children}: {children: ReactNode}) {
     }
   }, [open, rootRef])
 
+  usePopoverLayer(listboxRef, {active: open && coords !== null})
+
   if (!open || !coords) return null
 
   const node = (
     <html.div
+      ref={listboxRef}
       id={listboxId}
       role="listbox"
       style={[styles.popup, styles.popupPosition(coords.top, coords.left, coords.width)]}

package/src/components/Drawer/Drawer.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Use for secondary workflows, settings panels, or mobile-friendly detail views.',
+    'Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Swipe yields to an inner Duro ScrollArea: a drag there scrolls it, and dismisses only toward the edge from the scroll start (a native overflow:auto child is not covered — use ScrollArea). Use for secondary workflows, settings panels, or mobile-friendly detail views.',
   whenToUse: [
     'Settings or configuration panels that slide in from the side',
     'Mobile-friendly detail views (bottom sheet pattern)',

package/src/components/Drawer/Drawer.tsx

@@ -233,6 +233,16 @@ function Portal({children, size = 'md'}: PortalProps) {
     panelRef,
   } = useDrawer()
   const mount = usePortalMount()
+  // The shown panel element, tracked as state so swipe listeners follow it
+  // when the portal mount arrives and the panel is remounted into it.
+  const [panel, setPanel] = useState<HTMLDivElement | null>(null)
+  const attachPanel = useCallback(
+    (el: HTMLDivElement | null) => {
+      panelRef.current = el
+      setPanel(el)
+    },
+    [panelRef],
+  )
 
   const handleBackdropClick = useCallback(() => {
     if (dismissable) {
@@ -245,7 +255,7 @@ function Portal({children, size = 'md'}: PortalProps) {
     anchor,
     enabled: swipeEnabled && open && !closing,
     onDismiss: requestCloseImmediate,
-    panelRef,
+    panel,
   })
 
   if (!open) return null
@@ -269,7 +279,7 @@ function Portal({children, size = 'md'}: PortalProps) {
       {/* Viewport */}
       <html.div style={[styles.viewport, viewportAnchorMap[anchor]]} data-drawer-viewport="">
         <html.div
-          ref={panelRef}
+          ref={attachPanel}
           role="dialog"
           aria-modal={true}
           aria-labelledby={titleId}

package/src/components/Drawer/DrawerScroll.stories.tsx

@@ -0,0 +1,292 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, waitFor} from 'storybook/test'
+import {cdp, page} from 'vitest/browser'
+import {Drawer} from './Drawer'
+import {ToggleGroup} from '../ToggleGroup/ToggleGroup'
+import {Toggle} from '../Toggle/Toggle'
+import {Icon, type IconName} from '../Icon'
+import {ROW_HEIGHT} from '../Toggle/rowHeight'
+
+const meta: Meta = {
+  title: 'Components/Drawer/Scroll',
+  parameters: {layout: 'fullscreen'},
+}
+
+export default meta
+type Story = StoryObj
+
+const ICON_NAMES: IconName[] = [
+  'x-circle',
+  'check-circle',
+  'check-done',
+  'clock',
+  'forbidden',
+  'info-circle',
+  'alert-triangle',
+  'shield',
+  'lock',
+  'key',
+  'map',
+  'layers',
+  'repeat',
+  'database',
+  'shield-check',
+  'route',
+  'git-branch',
+  'menu',
+  'pin',
+  'server',
+  'hard-drive',
+  'box',
+  'image',
+  'tag',
+  'pie-chart',
+  'users',
+  'user-plus',
+  'mail',
+  'file-text',
+  'plug',
+  'search',
+  'mic',
+  'sun',
+  'moon',
+  'monitor',
+  'contrast',
+  'info-circle-filled',
+  'alert-triangle-filled',
+  'check-circle-filled',
+  'x-circle-filled',
+  'shield-filled',
+  'lock-filled',
+]
+
+function Scene({pressed}: {pressed?: string} = {}) {
+  return (
+    <Drawer.Root anchor="bottom" defaultOpen>
+      <Drawer.Portal>
+        <Drawer.Header>
+          <Drawer.Title>Pick an icon</Drawer.Title>
+        </Drawer.Header>
+        <Drawer.Body>
+          <ToggleGroup
+            wrap
+            maxRows={3}
+            size="small"
+            aria-label="Icon"
+            defaultValue={pressed ? [pressed] : []}
+          >
+            {ICON_NAMES.map((name) => (
+              <Toggle key={name} value={name} aria-label={name}>
+                <Icon name={name} size="sm" />
+              </Toggle>
+            ))}
+          </ToggleGroup>
+        </Drawer.Body>
+      </Drawer.Portal>
+    </Drawer.Root>
+  )
+}
+
+type Point = {x: number; y: number}
+
+/** `CDPSession` is empty until the provider's typings load; `send` exists at runtime. */
+const cdpSend = (method: string, params: object) =>
+  (cdp() as unknown as {send: (method: string, params: object) => Promise<unknown>}).send(
+    method,
+    params,
+  )
+
+const pause = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+/**
+ * CDP input lands in top-level page coordinates; the story runs in an iframe
+ * the test runner offsets and may scale to fit. Map a point up every frame.
+ */
+function toPage(p: Point): Point {
+  let {x, y} = p
+  let win: Window = window
+  while (win.frameElement && win.parent !== win) {
+    const rect = win.frameElement.getBoundingClientRect()
+    const scale = rect.width / win.innerWidth
+    x = rect.left + x * scale
+    y = rect.top + y * scale
+    win = win.parent
+  }
+  return {x, y}
+}
+
+/**
+ * A page-coordinate touch point with a 1px radius: Chrome's touch adjustment
+ * snaps a fat default touch onto the nearest control, which would turn every
+ * drag in the list into a drag on a toggle.
+ */
+const touchAt = (p: Point) => ({...toPage(p), radiusX: 1, radiusY: 1})
+
+/** Real touch drag through CDP; synthetic pointer events don't scroll. */
+async function touchDrag(from: Point, to: Point) {
+  const steps = 12
+  const send = (type: string, touchPoints: Point[]) =>
+    cdpSend('Input.dispatchTouchEvent', {type, touchPoints: touchPoints.map(touchAt)})
+  await send('touchStart', [from])
+  for (let i = 1; i <= steps; i++) {
+    await send('touchMove', [
+      {x: from.x + ((to.x - from.x) * i) / steps, y: from.y + ((to.y - from.y) * i) / steps},
+    ])
+    await pause(16)
+  }
+  await send('touchEnd', [])
+}
+
+const getViewport = () => document.querySelector<HTMLElement>('[data-duro-scroll]')!
+const getDialog = () => document.querySelector('[role="dialog"]')
+
+/**
+ * A point inside the list that is not on a toggle, so a drag starting there
+ * is the case the deferral decides (a drag starting on a toggle is decided
+ * the same way, but on origin/main it was left to the native scroll).
+ */
+function freePoint(el: HTMLElement, fy: number): Point {
+  const r = el.getBoundingClientRect()
+  const y = r.top + r.height * fy
+  for (let dy = 0; dy < 12; dy++) {
+    for (let x = r.left + 2; x < r.right; x += 2) {
+      const hit = document.elementFromPoint(x, y + dy)
+      if (hit && el.contains(hit) && !hit.closest('button')) return {x, y: y + dy}
+    }
+  }
+  throw new Error('no free point in the list')
+}
+
+async function setup() {
+  await page.viewport(390, 844)
+  await cdpSend('Emulation.setTouchEmulationEnabled', {enabled: true, maxTouchPoints: 1})
+  await waitFor(() => expect(getViewport()).toBeTruthy())
+  const viewport = getViewport()
+  await expect(viewport.scrollHeight).toBeGreaterThan(viewport.clientHeight)
+  // let the slide-in animation finish
+  await pause(500)
+  return viewport
+}
+
+export const DragUpAtTopScrolls: Story = {
+  render: () => <Scene />,
+  play: async () => {
+    const viewport = await setup()
+    await expect(viewport.scrollTop).toBe(0)
+    const from = freePoint(viewport, 0.7)
+    await touchDrag(from, {x: from.x, y: from.y - 60})
+    await pause(300)
+    await expect(viewport.scrollTop).toBeGreaterThan(0)
+    await expect(getDialog()).not.toBeNull()
+  },
+}
+
+export const DragDownMidListScrolls: Story = {
+  render: () => <Scene />,
+  play: async () => {
+    const viewport = await setup()
+    viewport.scrollTop = 40
+    await pause(100)
+    const before = viewport.scrollTop
+    await expect(before).toBeGreaterThan(0)
+    const from = freePoint(viewport, 0.5)
+    await touchDrag(from, {x: from.x, y: from.y + 20})
+    await pause(300)
+    await expect(viewport.scrollTop).toBeLessThan(before)
+    await expect(getDialog()).not.toBeNull()
+  },
+}
+
+export const DragDownAtTopDismisses: Story = {
+  render: () => <Scene />,
+  play: async () => {
+    const viewport = await setup()
+    await expect(viewport.scrollTop).toBe(0)
+    const from = freePoint(viewport, 0.5)
+    await touchDrag(from, {x: from.x, y: from.y + 300})
+    await waitFor(() => expect(getDialog()).toBeNull())
+  },
+}
+
+export const DragDownOnHeaderDismisses: Story = {
+  render: () => <Scene />,
+  play: async () => {
+    await setup()
+    const title = [...document.querySelectorAll('[role="dialog"] *')].find(
+      (el) => el.textContent === 'Pick an icon',
+    ) as HTMLElement
+    const r = title.getBoundingClientRect()
+    const from = {x: r.left + r.width / 2, y: r.top + r.height / 2}
+    await touchDrag(from, {x: from.x, y: from.y + 300})
+    await waitFor(() => expect(getDialog()).toBeNull())
+  },
+}
+
+export const TapOnToggleStillPresses: Story = {
+  render: () => <Scene />,
+  play: async () => {
+    await setup()
+    const key = document.querySelector<HTMLElement>('[role="dialog"] button[aria-label="key"]')!
+    const r = key.getBoundingClientRect()
+    const at = toPage({x: r.left + r.width / 2, y: r.top + r.height / 2})
+    await cdpSend('Input.dispatchTouchEvent', {
+      type: 'touchStart',
+      touchPoints: [{...at, radiusX: 1, radiusY: 1}],
+    })
+    await cdpSend('Input.dispatchTouchEvent', {type: 'touchEnd', touchPoints: []})
+    await waitFor(() => expect(key).toHaveAttribute('aria-pressed', 'true'))
+    await expect(getDialog()).not.toBeNull()
+  },
+}
+
+export const MountKeepsTheDrawerStill: Story = {
+  // size the page before the render: a drawer mounts at its final width
+  beforeEach: async () => {
+    await page.viewport(390, 844)
+  },
+  render: () => <Scene pressed={ICON_NAMES[39]} />,
+  play: async () => {
+    const pageScroll = document.scrollingElement?.scrollTop
+    await waitFor(() => expect(getViewport()).toBeTruthy())
+    await pause(500)
+    const viewport = getViewport()
+    const body = viewport.closest('[role="dialog"]')!
+    // the list scrolled itself to the pressed icon …
+    await expect(viewport.scrollTop).toBeGreaterThan(0)
+    const pressed = viewport.querySelector('[aria-pressed="true"]')!.getBoundingClientRect()
+    const v = viewport.getBoundingClientRect()
+    await expect(pressed.top).toBeGreaterThanOrEqual(v.top - 1)
+    await expect(pressed.bottom).toBeLessThanOrEqual(v.bottom + 1)
+    // … and nothing outside it moved
+    for (const el of body.querySelectorAll<HTMLElement>('*')) {
+      if (el !== viewport && !viewport.contains(el)) await expect(el.scrollTop).toBe(0)
+    }
+    await expect(document.scrollingElement?.scrollTop).toBe(pageScroll)
+  },
+}
+
+/** The coarse-pointer rows of a wrapping group, measured, not inferred. */
+export const CoarsePointerRows: Story = {
+  render: () => (
+    <ToggleGroup wrap maxRows={3} size="small" aria-label="Icon">
+      {ICON_NAMES.map((name) => (
+        <Toggle key={name} value={name} aria-label={name}>
+          <Icon name={name} size="sm" />
+        </Toggle>
+      ))}
+    </ToggleGroup>
+  ),
+  play: async () => {
+    // phone width, so 42 icons overflow three rows
+    await page.viewport(390, 844)
+    await cdpSend('Emulation.setTouchEmulationEnabled', {enabled: true, maxTouchPoints: 1})
+    await waitFor(() => expect(matchMedia('(pointer: coarse)').matches).toBe(true))
+    const viewport = getViewport()
+    const expected = 3.5 * ROW_HEIGHT.coarse + 3 * 4 + 2 * 4
+    await waitFor(() => expect(Math.abs(viewport.clientHeight - expected)).toBeLessThanOrEqual(2))
+    const toggle = viewport.querySelector('button')!.getBoundingClientRect()
+    // exact: Toggle's styles repeat ROW_HEIGHT, and a drift must fail here
+    await expect(Math.abs(toggle.height - ROW_HEIGHT.coarse)).toBeLessThanOrEqual(0.5)
+    await expect(toggle.width).toBeGreaterThanOrEqual(ROW_HEIGHT.coarse)
+  },
+}

package/src/components/Drawer/useSwipeDismiss.ts

@@ -21,7 +21,12 @@ interface UseSwipeDismissOptions {
   anchor: DrawerAnchor
   enabled: boolean
   onDismiss: () => void
-  panelRef: React.RefObject<HTMLDivElement | null>
+  /**
+   * The panel element itself, not a ref: a Drawer open from its first render
+   * draws the panel inline, then remounts it into the portal once the mount
+   * exists, and listeners must follow the element that is actually shown.
+   */
+  panel: HTMLDivElement | null
 }
 
 interface SwipeState {
@@ -32,6 +37,9 @@ interface SwipeState {
   startTime: number
   swiping: boolean
   panelSize: number
+  /** Inner Duro scroll viewport the gesture started in; capture is deferred until the axis is decided */
+  deferredScroll: HTMLElement | null
+  pointerId: number
 }
 
 /**
@@ -41,7 +49,7 @@ interface SwipeState {
  * Opposite direction: iOS-style — panel stays anchored, shows subtle
  * overscroll feedback (box-shadow intensifies), then snaps back.
  */
-export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipeDismissOptions) {
+export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDismissOptions) {
   const stateRef = useRef<SwipeState>({
     startX: 0,
     startY: 0,
@@ -50,6 +58,8 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
     startTime: 0,
     swiping: false,
     panelSize: 0,
+    deferredScroll: null,
+    pointerId: 0,
   })
 
   const isHorizontal = anchor === 'left' || anchor === 'right'
@@ -169,14 +179,18 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
   }, [])
 
   useEffect(() => {
-    if (!enabled) return
-    const panel = panelRef.current
-    if (!panel) return
+    if (!enabled || !panel) return
 
     function handlePointerDown(e: PointerEvent) {
       if (e.button !== 0) return
       const target = e.target as HTMLElement
-      if (target.closest('button, a, input, textarea, select, [role="button"]')) {
+      const scrollEl = target.closest<HTMLElement>('[data-duro-scroll]')
+      // Outside a ScrollArea a control keeps its press. Inside one the gesture
+      // is decided on the first move even from a control: a list of toggles is
+      // all buttons, and touch adjustment snaps a finger onto one. A tap
+      // (under the 8px slop) still presses it; a drag never captures before
+      // the decision, so the release lands on the panel, not the control.
+      if (!scrollEl && target.closest('button, a, input, textarea, select, [role="button"]')) {
         return
       }
 
@@ -190,14 +204,30 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
       state.swiping = false
       state.panelSize = isHorizontal ? rect.width : rect.height
 
+      state.pointerId = e.pointerId
+      state.deferredScroll = scrollEl
+
       panel!.dataset.panelSize = String(state.panelSize)
-      panel!.setPointerCapture(e.pointerId)
+
+      // Inside a Duro ScrollArea the scroll may own the gesture: wait for the first move.
+      if (!state.deferredScroll) beginCapture(e.pointerId)
+    }
+
+    function beginCapture(pointerId: number) {
+      panel!.setPointerCapture(pointerId)
 
       // Freeze CSS animation — we take over positioning.
       // Never restore it; the panel is already at its final resting position.
       panel!.style.animation = 'none'
     }
 
+    /** True when the viewport can't scroll further against the dismiss direction */
+    function isAtDismissEdge(el: HTMLElement) {
+      if (!isHorizontal) return el.scrollTop <= 0
+      if (anchor === 'right') return el.scrollLeft <= 0
+      return el.scrollLeft + el.clientWidth >= el.scrollWidth - 1
+    }
+
     function handlePointerMove(e: PointerEvent) {
       const state = stateRef.current
       if (state.startTime === 0) return
@@ -219,8 +249,21 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
         } else {
           // Wrong axis — abort gesture
           state.startTime = 0
+          state.deferredScroll = null
           return
         }
+
+        const scrollEl = state.deferredScroll
+        if (scrollEl) {
+          state.deferredScroll = null
+          if (getMovement(state) <= 0 || !isAtDismissEdge(scrollEl)) {
+            // The scroll owns this gesture: no swiping, no capture, no preventDefault
+            state.swiping = false
+            state.startTime = 0
+            return
+          }
+          beginCapture(state.pointerId)
+        }
       }
 
       if (state.swiping) {
@@ -239,6 +282,7 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
       const velocity = movement / elapsed
 
       state.startTime = 0
+      state.deferredScroll = null
 
       if (!state.swiping) {
         return
@@ -266,6 +310,7 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
       const state = stateRef.current
       state.startTime = 0
       state.swiping = false
+      state.deferredScroll = null
       resetStyles(panel!)
     }
 
@@ -290,7 +335,7 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
     }
   }, [
     enabled,
-    panelRef,
+    panel,
     anchor,
     isHorizontal,
     getMovement,

package/src/components/Menu/useMenuRoot.ts

@@ -109,7 +109,11 @@ export function useMenuRoot() {
           })
           break
         }
-        case 'Escape':
+        case 'Escape': {
+          e.preventDefault()
+          close()
+          break
+        }
         case 'Tab': {
           close()
           break

package/src/components/Popover/Popover.meta.ts

@@ -6,6 +6,7 @@ export const meta: ComponentMeta = {
   whenToUse: [
     'A small form or controls tied to one element that stay open while you work in them',
     'Anchoring to a spot that is not a button (a canvas point, a text selection) with a virtual anchor',
+    'Holding a Select or Combobox: their portalled list counts as inside the popover, so choosing an item keeps it open; Escape closes an open Select, Combobox or Menu before the popover',
   ],
   whenNotToUse: [
     'A list of actions — use Menu',
@@ -47,6 +48,12 @@ export const meta: ComponentMeta = {
       relationship:
         'Drawer is the modal edge panel for phone width; Popover is anchored and non-modal',
     },
+    {
+      component: 'Select',
+      kind: 'composition',
+      relationship:
+        'A Select or Combobox inside Popover.Popup keeps the popover open while you choose; a Select backdrop press closes only its list',
+    },
     {
       component: 'Field',
       kind: 'composition',

package/src/components/Popover/Popover.tsx

@@ -8,6 +8,7 @@ import {
   useId,
   useImperativeHandle,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react'
@@ -17,6 +18,7 @@ import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {styles} from './styles.css'
 import {computePopoverPosition, type PopoverAlign, type PopoverSide} from './position'
 import {isOutsidePress} from './outside'
+import {PopoverLayerContext, type PopoverLayerContextValue} from './PopoverLayerContext'
 
 // --- Context ---
 
@@ -47,27 +49,6 @@ const FOCUSABLE =
 
 const OFFSET = 4 // `xs` token
 
-/**
- * Whether a nested popup control owns this Escape: a Select, Menu or
- * Combobox inside the popup closes on Esc without preventing default, and
- * that Esc must close only it. Only controls that open a popup count — an
- * expanded trigger that declares one (`aria-haspopup`), an expanded combobox,
- * or focus inside a listbox or menu — never a plain disclosure, and never
- * this popover's own Trigger.
- *
- * holds-until: Duro's Select, Menu and Combobox call preventDefault on the
- * Escape they consume; the defaultPrevented check alone then suffices and
- * this selector goes.
- */
-const NESTED_POPUP_OWNER =
-  '[aria-expanded="true"][aria-haspopup], [role="combobox"][aria-expanded="true"], [role="listbox"], [role="menu"]'
-
-function nestedOwnsEscape(target: EventTarget | null, ownTrigger: Element | null): boolean {
-  if (!(target instanceof Element)) return false
-  const owner = target.closest(NESTED_POPUP_OWNER)
-  return owner !== null && owner !== ownTrigger
-}
-
 // --- Root ---
 
 export interface PopoverHandle {
@@ -148,7 +129,6 @@ function Root({
 
     function onKeyDown(e: KeyboardEvent) {
       if (e.key !== 'Escape' || e.defaultPrevented) return
-      if (nestedOwnsEscape(e.target, triggerRef.current)) return
       e.preventDefault()
       setOpen(false)
     }
@@ -157,7 +137,7 @@ function Root({
       const ignored = (ignoreRef.current ?? []).map((entry) =>
         typeof entry === 'function' ? entry() : entry,
       )
-      const inside = [popupRef.current, triggerRef.current, ...ignored]
+      const inside = [popupRef.current, triggerRef.current, ...ignored, ...layersRef.current]
       if (isOutsidePress(e.target as Node | null, inside)) setOpen(false)
     }
 
@@ -169,6 +149,28 @@ function Root({
     }
   }, [open, setOpen])
 
+  const layersRef = useRef(new Set<Element>())
+  // A nested Popover's layers are inside its parent too.
+  const parentLayer = useContext(PopoverLayerContext)
+  const layerCtx = useMemo<PopoverLayerContextValue>(
+    () => ({
+      register: (el) => {
+        layersRef.current.add(el)
+        const unregisterParent = parentLayer?.register(el)
+        return () => {
+          layersRef.current.delete(el)
+          unregisterParent?.()
+        }
+      },
+    }),
+    [parentLayer],
+  )
+  useLayoutEffect(() => {
+    const popup = popupRef.current
+    if (!open || !popup) return
+    return parentLayer?.register(popup)
+  }, [open, parentLayer])
+
   const ctx: PopoverContextValue = {
     open,
     setOpen,
@@ -181,7 +183,11 @@ function Root({
     repositionRef,
   }
 
-  return <PopoverContext.Provider value={ctx}>{children}</PopoverContext.Provider>
+  return (
+    <PopoverContext.Provider value={ctx}>
+      <PopoverLayerContext.Provider value={layerCtx}>{children}</PopoverLayerContext.Provider>
+    </PopoverContext.Provider>
+  )
 }
 
 // --- Trigger ---