@duro-app/ui 5.10.0 → 5.12.0

package/src/components/Switch/Switch.types.ts

@@ -0,0 +1,18 @@
+import type {ReactNode} from 'react'
+
+export interface SwitchProps {
+  /** Controlled checked state. */
+  checked?: boolean
+  /** Initial checked state (uncontrolled). */
+  defaultChecked?: boolean
+  /** Callback fired when the checked state changes. */
+  onCheckedChange?: (checked: boolean) => void
+  /** Prevents user interaction. */
+  disabled?: boolean
+  /** Form field name for the hidden input. */
+  name?: string
+  /** Value submitted when checked. */
+  value?: string
+  /** Label content rendered beside the switch. */
+  children?: ReactNode
+}

package/src/components/TableOfContents/styles.css.ts

@@ -94,6 +94,8 @@ export const styles = css.create({
     justifyContent: 'space-between',
     gap: spacing.sm,
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     minHeight: sizes.touchTarget,
     paddingTop: spacing.sm,
     paddingBottom: spacing.sm,

package/src/components/Textarea/styles.css.ts

@@ -8,6 +8,8 @@ import {borders} from '@duro-app/tokens/tokens/borders.css'
 export const styles = css.create({
   base: {
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     paddingTop: spacing.sm,
     paddingBottom: spacing.sm,
     paddingLeft: spacing.md,

package/src/components/ThemeProvider/ThemeProvider.native.tsx

@@ -1,13 +1,23 @@
 // Native (React Native / Expo) ThemeProvider — Metro resolves this over
 // ThemeProvider.tsx via the platform extension. The web version uses
 // `display:contents` + a fixed portal-mount, neither of which exists on RN, so
-// this applies the theme StyleX styles to a plain flex-column container and
-// drops the portal mount (native overlays don't portal to a fixed div).
-import {createContext, type ReactNode, useContext} from 'react'
+// this applies the theme to a plain flex-column container, and passive
+// overlays (toasts) draw through the host registry instead (plan N0,
+// Decision 2).
+import {createContext, type ReactNode, useContext, useMemo, useState} from 'react'
 import {css, html} from 'react-strict-dom'
+import type {ColorToken} from '@duro-app/tokens/keys'
+import {darkColors, highContrastColors, lightColors, type RawColors} from '@duro-app/tokens/raw'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {lightTheme, lightShadows} from '@duro-app/tokens/themes/light.css'
 import {highContrastTheme, highContrastShadows} from '@duro-app/tokens/themes/high-contrast.css'
+import {createHostRegistry, type HostRegistry} from '../../shared/portal/hostRegistry'
+import {HostRegistryContext, PortalHost} from '../../shared/portal/PortalHost'
+import {
+  ResolvedColorsContext,
+  ThemeScopeContext,
+  type ThemeScope,
+} from '../../shared/portal/themeScope'
 
 export type ThemeName = 'dark' | 'light' | 'high-contrast'
 
@@ -16,34 +26,84 @@ interface ThemeProviderProps {
   children: ReactNode
 }
 
-const themeMap: Partial<Record<ThemeName, readonly [typeof lightTheme, typeof lightShadows]>> = {
+// On the web, `dark` is the base vars and needs no theme. On native,
+// createTheme is a runtime call, so dark gets an explicit one: a dark
+// provider nested in a light one then draws dark, and its resolved colours
+// (below) agree with what RSD draws.
+const darkTheme = css.createTheme(colors, darkColors)
+
+const themeMap: Record<ThemeName, readonly unknown[]> = {
+  dark: [darkTheme],
   light: [lightTheme, lightShadows],
   'high-contrast': [highContrastTheme, highContrastShadows],
 }
 
+const palettes: Record<ThemeName, RawColors> = {
+  dark: darkColors,
+  light: lightColors,
+  'high-contrast': highContrastColors,
+}
+
 const styles = css.create({
   // No `display:contents` on RN. RSD uses web flex semantics on native, so
-  // declare flex + column explicitly; flex:1 lets a root provider fill.
+  // declare flex + column explicitly.
   root: {
     display: 'flex',
     flexDirection: 'column',
-    flex: 1,
     color: colors.text,
   },
+  // The app canvas: the web paints it on body from vars.css; native has no
+  // body, so the outermost provider paints it and fills its host (height,
+  // not flex: the host is an RN view, which RSD does not know is flex).
+  canvas: {
+    backgroundColor: colors.bg,
+    height: '100%',
+  },
 })
 
 type DivStyle = Parameters<typeof html.div>[0]['style']
 
 // Parity with the web export — there's no portal mount on native, so this is
-// always null. (The components that consume it aren't in the native barrel.)
+// always null.
 const PortalMountContext = createContext<HTMLElement | null>(null)
 
 export function usePortalMount(): HTMLElement | null {
   return useContext(PortalMountContext)
 }
 
+/**
+ * The nearest ThemeProvider's colours as real colour strings, for native hosts
+ * that cannot read a `var(--…)` reference: an Icon renderer, an animated
+ * backdrop, a Pressable. RSD styles keep using the `colors` tokens.
+ */
+export function useResolvedColors(): Record<ColorToken, string> {
+  return useContext(ResolvedColorsContext)
+}
+
 export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
-  const overrides = themeMap[theme]
-  const themeStyles = [overrides?.[0], overrides?.[1], styles.root] as DivStyle
-  return <html.div style={themeStyles}>{children}</html.div>
+  const outerRegistry = useContext(HostRegistryContext)
+  const outerScope = useContext(ThemeScopeContext)
+  // The outermost provider owns the registry and draws the root host.
+  const [ownRegistry] = useState<HostRegistry | null>(() =>
+    outerRegistry ? null : createHostRegistry(),
+  )
+  const registry = outerRegistry ?? ownRegistry
+  const themeStyles = themeMap[theme]
+  const scope = useMemo<ThemeScope>(
+    () => ({styles: [...outerScope.styles, ...themeStyles]}),
+    [outerScope, themeStyles],
+  )
+
+  return (
+    <HostRegistryContext.Provider value={registry}>
+      <ThemeScopeContext.Provider value={scope}>
+        <ResolvedColorsContext.Provider value={palettes[theme]}>
+          <html.div style={[...themeStyles, styles.root, ownRegistry && styles.canvas] as DivStyle}>
+            {children}
+            {ownRegistry ? <PortalHost placement="base" /> : null}
+          </html.div>
+        </ResolvedColorsContext.Provider>
+      </ThemeScopeContext.Provider>
+    </HostRegistryContext.Provider>
+  )
 }

package/src/components/Toggle/Toggle.tsx

@@ -5,6 +5,7 @@ import {useToggleGroup} from '../ToggleGroup/ToggleGroupContext'
 import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
 import {mergeRefs} from '../../shared/mergeRefs'
 import type {ControlSize} from '../../shared/types'
+import {isNative} from '../../platform'
 import {styles} from './styles.css'
 
 export type ToggleSize = ControlSize
@@ -103,6 +104,7 @@ export function Toggle({
       data-pressed={pressed ? '' : undefined}
       style={[
         styles.base,
+        isNative && styles.nativeFlex,
         sizeMap[size],
         pressed ? styles.pressed : styles.unpressed,
         wrap && wrappedSizeMap[size],

package/src/components/Toggle/styles.css.ts

@@ -27,13 +27,20 @@ export const styles = css.create({
     minHeight: {default: null, '@media (pointer: coarse)': sizes.touchTarget},
   },
   sizeDefault: {
-    padding: `${spacing.sm} ${spacing.md}`,
+    // Longhands: RSD-native rejects a multi-value shorthand.
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
     fontSize: typography.fontSizeSm,
     borderRadius: radii.sm,
     gap: spacing.sm,
   },
   sizeSmall: {
-    padding: `${spacing.xs} ${spacing.sm}`,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
     fontSize: typography.fontSizeXs,
     borderRadius: radii.sm,
     gap: spacing.xs,
@@ -87,4 +94,9 @@ export const styles = css.create({
     opacity: 0.5,
     cursor: 'not-allowed',
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native only.
+  nativeFlex: {
+    display: 'flex',
+  },
 })

package/src/components/VirtualTable/styles.css.ts

@@ -9,10 +9,14 @@ export const styles = css.create({
   wrap: {
     position: 'relative',
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
   },
   scroll: {
     position: 'relative',
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
@@ -66,6 +70,8 @@ export const styles = css.create({
   bodyTotal: (height: number) => ({
     position: 'relative',
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     height,
   }),
   row: {
@@ -73,6 +79,8 @@ export const styles = css.create({
     flexDirection: 'row',
     alignItems: 'center',
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
@@ -113,6 +121,8 @@ export const styles = css.create({
   stackScroll: {
     position: 'relative',
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     backgroundColor: 'transparent',
   },
   stackBody: {
@@ -125,6 +135,8 @@ export const styles = css.create({
     flexDirection: 'column',
     gap: spacing.xs,
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     padding: spacing.sm,
     borderWidth: borders.hairline,
     borderStyle: 'solid',

package/src/index.native.ts

@@ -7,7 +7,8 @@
  * TagGroup, ThemeProvider's portal) that use web-only DOM APIs — and Combobox
  * imports `react-dom`, so pulling the full barrel crashes on Metro. This barrel
  * re-exports ONLY the components whose source is RN-safe (pure react-strict-dom
- * `html` + `css`, audited 2026-06-02). The rest get RN variants in a later pass.
+ * `html` + `css`) or that have a `.native` variant; `pnpm typecheck:native` and
+ * `scripts/check-native-graph.mjs` hold the line (plan N0).
  *
  * Tokens resolve fine on native already: @duro-app/tokens's subpath exports
  * (`./tokens/*.css`, `./themes/*.css`) point straight at their `.css.ts`
@@ -29,7 +30,30 @@ export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
 export {Field} from './components/Field/Field'
 export {InputGroup} from './components/InputGroup/InputGroup'
 
+// Status and feedback (5.12: Icon draws with react-native-svg on native)
+export {Alert, type AlertVariant} from './components/Alert/Alert'
+export {Callout, type CalloutVariant} from './components/Callout/Callout'
+export {EmptyState} from './components/EmptyState/EmptyState'
+export {Icon, type IconName} from './components/Icon'
+export {Meter, type MeterProps, type MeterTone} from './components/Meter/Meter'
+export {Spinner, type SpinnerSize} from './components/Spinner/Spinner'
+export {
+  StatusIcon,
+  type StatusIconName,
+  type StatusIconVariant,
+} from './components/StatusIcon/StatusIcon'
+
+// Choice and collection
+export {List, type ListSelectionMode} from './components/List/List'
+export {RadioGroup} from './components/RadioGroup/RadioGroup'
+export {Toggle, type ToggleSize} from './components/Toggle/Toggle'
+
+// Overlays (5.12: rendered in an OverlayModal on native)
+export {ConfirmDialog} from './components/ConfirmDialog/ConfirmDialog'
+export {Dialog, type DialogSize} from './components/Dialog/Dialog'
+
 // Layout primitives
+export {PageShell, type PageShellMaxWidth, type PageShellPadding} from './components/PageShell'
 export {Stack, type SpacingKey} from './components/Stack/Stack'
 export {Inline} from './components/Inline/Inline'
 export {Cluster} from './components/Cluster/Cluster'
@@ -41,5 +65,8 @@ export type {GridTrack} from './shared/length'
 export {
   ThemeProvider,
   usePortalMount,
+  useResolvedColors,
   type ThemeName,
 } from './components/ThemeProvider/ThemeProvider'
+// Where toasts draw on native: mount one inside a natively presented route.
+export {PortalHost} from './shared/portal/PortalHost'

package/src/index.ts

@@ -20,6 +20,11 @@ export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
 export {Breadcrumb} from './components/Breadcrumb/Breadcrumb'
 export {Button, type ButtonVariant, type ButtonSize} from './components/Button/Button'
+export {
+  FileTrigger,
+  type FileTriggerProps,
+  type FileTriggerHandle,
+} from './components/FileTrigger/FileTrigger'
 export type {ControlSize} from './shared/types'
 export {ButtonGroup, type ButtonGroupProps} from './components/ButtonGroup/ButtonGroup'
 export {Callout, type CalloutVariant} from './components/Callout/Callout'

package/src/native-guard/globals.d.ts

@@ -0,0 +1,10 @@
+// The native graph has no DOM lib. A few spots on it still name DOM members:
+// ConfirmDialog reads `event.target.value` from an Input change (RSD's native
+// change event carries it too), and Grid reads `process.env.NODE_ENV`
+// (inlined by Metro). Declare exactly those members rather than pulling in
+// lib.dom.
+interface HTMLInputElement {
+  value: string
+}
+
+declare const process: {env: {NODE_ENV?: string}}

package/src/native-guard/react-dom.d.ts

@@ -0,0 +1,3 @@
+// Empty on purpose: tsconfig.native.json maps "react-dom" here, so a react-dom
+// import on the native graph has no exports to resolve and fails to typecheck.
+export {}

package/src/shared/accessibilityFocus.native.ts

@@ -0,0 +1,23 @@
+import {AccessibilityInfo} from 'react-native'
+
+const reported = new Set<string>()
+
+type FocusTarget = Parameters<typeof AccessibilityInfo.sendAccessibilityEvent>[0]
+
+/**
+ * Moves the screen reader's focus to `target` (a host view, or a
+ * react-strict-dom element ref). Native overlays call it on open and, for the
+ * trigger, on close: the screen-reader contract that stands in for the web's
+ * DOM focus (plan N0, Decision 6). A target the platform refuses is logged
+ * once per caller, in release builds too, rather than dropped.
+ */
+export function focusForAccessibility(target: unknown, from: string): void {
+  if (target == null) return
+  try {
+    AccessibilityInfo.sendAccessibilityEvent(target as FocusTarget, 'focus')
+  } catch (error) {
+    if (reported.has(from)) return
+    reported.add(from)
+    console.warn(`[duro] ${from}: could not move accessibility focus: ${String(error)}`)
+  }
+}

package/src/shared/portal/OverlayModal.native.tsx

@@ -0,0 +1,51 @@
+import type {ReactNode} from 'react'
+import {Modal, StyleSheet} from 'react-native'
+import {GestureHandlerRootView} from 'react-native-gesture-handler'
+import {PortalHost} from './PortalHost'
+
+interface OverlayModalProps {
+  visible: boolean
+  /** Android back button: the dismissal Escape is on the web. */
+  onRequestClose: () => void
+  /** The Modal has been presented: move accessibility focus in. */
+  onShow?: () => void
+  /** iOS: the Modal has finished dismissing (presenting another one is safe). */
+  onDismiss?: () => void
+  children: ReactNode
+}
+
+/**
+ * The window every interactive native overlay renders in (plan N0,
+ * Decision 2). RN `Modal` is a React portal, so the app's contexts reach the
+ * content, and it presents above natively presented routes. Duro draws its own
+ * backdrop and motion, so the Modal's own animation is off.
+ *
+ * Content gets its own GestureHandlerRootView: on Android a Modal is a
+ * separate window that the app's root view does not cover. A PortalHost on
+ * top lets toasts raised while it is open draw above it.
+ */
+export function OverlayModal({
+  visible,
+  onRequestClose,
+  onShow,
+  onDismiss,
+  children,
+}: OverlayModalProps) {
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      statusBarTranslucent
+      navigationBarTranslucent
+      animationType="none"
+      onRequestClose={onRequestClose}
+      onShow={onShow}
+      onDismiss={onDismiss}
+    >
+      <GestureHandlerRootView style={StyleSheet.absoluteFill}>
+        {children}
+        <PortalHost />
+      </GestureHandlerRootView>
+    </Modal>
+  )
+}

package/src/shared/portal/PortalHost.native.tsx

@@ -0,0 +1,102 @@
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useSyncExternalStore,
+} from 'react'
+import {StyleSheet, View} from 'react-native'
+import {css, html} from 'react-strict-dom'
+import type {HostRegistry} from './hostRegistry'
+import {ResolvedColorsContext, ThemeScopeContext} from './themeScope'
+
+/** The registry the outermost ThemeProvider owns; null outside every provider. */
+export const HostRegistryContext = createContext<HostRegistry | null>(null)
+
+function useHostRegistry(component: string): HostRegistry {
+  const registry = useContext(HostRegistryContext)
+  if (!registry) throw new Error(`${component} must be rendered inside a Duro ThemeProvider`)
+  return registry
+}
+
+const styles = css.create({
+  // An entry covers its host without taking touches the entry does not draw on.
+  entry: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'box-none',
+  },
+})
+
+type DivStyle = Parameters<typeof html.div>[0]['style']
+
+interface PortalHostProps {
+  /**
+   * `base`: the app root, always below every other host (the ThemeProvider
+   * draws it). `presented` (the default): a natively presented route, which
+   * a consumer mounts in that route's layout so toasts draw above it.
+   */
+  placement?: 'base' | 'presented'
+}
+
+/**
+ * Where passive overlays (toasts) draw on native. The ThemeProvider draws the
+ * root host and each open Duro Modal draws its own; mount one inside a
+ * natively presented route (`presentation: 'modal'`), or toasts raised there
+ * draw behind it.
+ */
+export function PortalHost({placement = 'presented'}: PortalHostProps) {
+  const registry = useHostRegistry('PortalHost')
+  const id = useId()
+  useLayoutEffect(() => registry.addHost(id, placement), [registry, id, placement])
+  const {topHost, entries} = useSyncExternalStore(registry.subscribe, registry.getSnapshot)
+  if (topHost !== id) return null
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      {entries.map((entry) => (
+        <View key={entry.key} style={StyleSheet.absoluteFill} pointerEvents="box-none">
+          {entry.node}
+        </View>
+      ))}
+    </View>
+  )
+}
+
+interface PortalProps {
+  /** Numeric layer from `LAYERS` in `@duro-app/tokens/keys`. */
+  layer: number
+  children: ReactNode
+}
+
+/**
+ * Draws its children in the top host, above the app and every open Duro
+ * Modal. The children keep the source's theme and resolved colours; no other
+ * context crosses, so pass data, not components that read the app's contexts.
+ */
+export function Portal({layer, children}: PortalProps) {
+  const registry = useHostRegistry('Portal')
+  const key = useId()
+  const scope = useContext(ThemeScopeContext)
+  const resolvedColors = useContext(ResolvedColorsContext)
+
+  useLayoutEffect(() => {
+    registry.setEntry({
+      key,
+      layer,
+      node: (
+        <ThemeScopeContext.Provider value={scope}>
+          <ResolvedColorsContext.Provider value={resolvedColors}>
+            <html.div style={[...scope.styles, styles.entry] as DivStyle}>{children}</html.div>
+          </ResolvedColorsContext.Provider>
+        </ThemeScopeContext.Provider>
+      ),
+    })
+  })
+  useEffect(() => () => registry.removeEntry(key), [registry, key])
+  return null
+}

package/src/shared/portal/hostRegistry.ts

@@ -0,0 +1,76 @@
+import type {ReactNode} from 'react'
+
+/** One passive surface (a toast region) waiting for a host to draw it. */
+export interface PortalEntry {
+  readonly key: string
+  /** Numeric layer from `LAYERS` in `@duro-app/tokens/keys`; higher draws on top. */
+  readonly layer: number
+  readonly node: ReactNode
+}
+
+export interface HostRegistrySnapshot {
+  /** The host that draws every entry: the last one presented, else the root. */
+  readonly topHost: string | undefined
+  /** Entries ordered by layer, lowest first (equal layers keep insertion order). */
+  readonly entries: readonly PortalEntry[]
+}
+
+/**
+ * The hosts that passive surfaces draw into, on native: the app root, each
+ * open Duro Modal and each `PortalHost` a consumer mounts in a natively
+ * presented route. Entries render in the top host only, so a toast raised
+ * under an open Dialog draws above it.
+ *
+ * A plain store (subscribe / getSnapshot) for `useSyncExternalStore`; it holds
+ * no React state and imports nothing from React Native.
+ */
+export interface HostRegistry {
+  /** Adds a host. A `base` host (the app root) always sits below the others. */
+  addHost(id: string, placement: 'base' | 'presented'): () => void
+  setEntry(entry: PortalEntry): void
+  removeEntry(key: string): void
+  getSnapshot(): HostRegistrySnapshot
+  subscribe(listener: () => void): () => void
+}
+
+export function createHostRegistry(): HostRegistry {
+  let hosts: readonly string[] = []
+  let entries: readonly PortalEntry[] = []
+  let snapshot: HostRegistrySnapshot = {topHost: undefined, entries}
+  const listeners = new Set<() => void>()
+
+  const publish = () => {
+    snapshot = {topHost: hosts[hosts.length - 1], entries}
+    for (const listener of listeners) listener()
+  }
+
+  return {
+    addHost(id, placement) {
+      hosts = placement === 'base' ? [id, ...hosts] : [...hosts, id]
+      publish()
+      return () => {
+        hosts = hosts.filter((host) => host !== id)
+        publish()
+      }
+    },
+    setEntry(entry) {
+      const others = entries.filter((existing) => existing.key !== entry.key)
+      const at = others.findIndex((existing) => existing.layer > entry.layer)
+      entries =
+        at === -1 ? [...others, entry] : [...others.slice(0, at), entry, ...others.slice(at)]
+      publish()
+    },
+    removeEntry(key) {
+      if (!entries.some((entry) => entry.key === key)) return
+      entries = entries.filter((entry) => entry.key !== key)
+      publish()
+    },
+    getSnapshot: () => snapshot,
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => {
+        listeners.delete(listener)
+      }
+    },
+  }
+}

package/src/shared/portal/themeScope.native.ts

@@ -0,0 +1,18 @@
+import {createContext} from 'react'
+import type {ColorToken} from '@duro-app/tokens/keys'
+import {darkColors} from '@duro-app/tokens/raw'
+
+/**
+ * The theme styles in force where a component renders: every enclosing
+ * ThemeProvider's createTheme objects, outermost first. A native Portal
+ * re-applies them around its entry, because the host it draws into sits
+ * outside the source's ThemeProviders.
+ */
+export interface ThemeScope {
+  readonly styles: readonly unknown[]
+}
+
+export const ThemeScopeContext = createContext<ThemeScope>({styles: []})
+
+/** The nearest ThemeProvider's palette as colour strings (native). */
+export const ResolvedColorsContext = createContext<Record<ColorToken, string>>(darkColors)

package/src/shared/safeArea.native.ts

@@ -0,0 +1,22 @@
+import {useContext} from 'react'
+import {SafeAreaInsetsContext, type EdgeInsets} from 'react-native-safe-area-context'
+import {devWarnOnce} from './devWarnOnce'
+
+const NO_INSETS: EdgeInsets = {top: 0, right: 0, bottom: 0, left: 0}
+
+/**
+ * The window's safe-area insets from the app's SafeAreaProvider (expo-router
+ * mounts one). Modal content is a React portal, so overlays inside an
+ * OverlayModal read the same insets. Without a provider, no insets, and a
+ * development warning names the missing provider.
+ */
+export function useSafeAreaInsets(): EdgeInsets {
+  const insets = useContext(SafeAreaInsetsContext)
+  if (insets) return insets
+  devWarnOnce(
+    'safeArea',
+    'no-provider',
+    'No SafeAreaProvider above this Duro overlay: it draws without safe-area insets. Wrap the app in react-native-safe-area-context’s SafeAreaProvider.',
+  )
+  return NO_INSETS
+}