{"version":3,"file":"getSafeAreaInset.mjs","names":[],"sources":["../../../src/utils/getSafeAreaInset/getSafeAreaInset.ts"],"sourcesContent":["import { isServer } from '../isServer/index.ts';\n\nexport type SafeAreaInset = {\n  /** Top safe area inset in pixels (notch, Dynamic Island, or status bar) */\n  top: number;\n  /** Bottom safe area inset in pixels (home indicator on Face ID devices) */\n  bottom: number;\n  /** Left safe area inset in pixels (rounded corners in landscape mode) */\n  left: number;\n  /** Right safe area inset in pixels (rounded corners in landscape mode) */\n  right: number;\n};\n\n/**\n * @description\n * `getSafeAreaInset` is a utility function that returns all safe area insets in pixels as an object.\n *\n * This function reads the CSS `env(safe-area-inset-*)` values by creating\n * a temporary DOM element and reading its computed style.\n *\n * Safe area insets account for device-specific UI elements:\n * - **top**: Notch, Dynamic Island, or status bar\n * - **bottom**: Home indicator on Face ID devices\n * - **left/right**: Rounded corners in landscape mode\n *\n * Typical values (iPhone with Face ID, portrait mode):\n * - top: 47-59px (notch/Dynamic Island)\n * - bottom: 34px (home indicator)\n * - left/right: 0px\n *\n * @returns {SafeAreaInset} Object containing safe area insets for all four sides, or all 0 if not available.\n * - top `number` - Top safe area inset in pixels;\n * - bottom `number` - Bottom safe area inset in pixels;\n * - left `number` - Left safe area inset in pixels;\n * - right `number` - Right safe area inset in pixels;\n *\n * @example\n * const { top, bottom, left, right } = getSafeAreaInset();\n *\n * header.style.paddingTop = `${top}px`;\n * footer.style.paddingBottom = `${bottom}px`;\n */\nexport function getSafeAreaInset(): SafeAreaInset {\n  if (isServer()) {\n    return { top: 0, bottom: 0, left: 0, right: 0 };\n  }\n\n  const div = document.createElement('div');\n  div.style.position = 'fixed';\n  div.style.setProperty('padding-top', 'env(safe-area-inset-top)');\n  div.style.setProperty('padding-bottom', 'env(safe-area-inset-bottom)');\n  div.style.setProperty('padding-left', 'env(safe-area-inset-left)');\n  div.style.setProperty('padding-right', 'env(safe-area-inset-right)');\n  document.body.appendChild(div);\n\n  const computedStyle = window.getComputedStyle(div);\n  const inset: SafeAreaInset = {\n    top: parseFloat(computedStyle.getPropertyValue('padding-top')) || 0,\n    bottom: parseFloat(computedStyle.getPropertyValue('padding-bottom')) || 0,\n    left: parseFloat(computedStyle.getPropertyValue('padding-left')) || 0,\n    right: parseFloat(computedStyle.getPropertyValue('padding-right')) || 0,\n  };\n\n  document.body.removeChild(div);\n  return inset;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,mBAAkC;CAChD,IAAI,SAAS,GACX,OAAO;EAAE,KAAK;EAAG,QAAQ;EAAG,MAAM;EAAG,OAAO;CAAE;CAGhD,MAAM,MAAM,SAAS,cAAc,KAAK;CACxC,IAAI,MAAM,WAAW;CACrB,IAAI,MAAM,YAAY,eAAe,0BAA0B;CAC/D,IAAI,MAAM,YAAY,kBAAkB,6BAA6B;CACrE,IAAI,MAAM,YAAY,gBAAgB,2BAA2B;CACjE,IAAI,MAAM,YAAY,iBAAiB,4BAA4B;CACnE,SAAS,KAAK,YAAY,GAAG;CAE7B,MAAM,gBAAgB,OAAO,iBAAiB,GAAG;CACjD,MAAM,QAAuB;EAC3B,KAAK,WAAW,cAAc,iBAAiB,aAAa,CAAC,KAAK;EAClE,QAAQ,WAAW,cAAc,iBAAiB,gBAAgB,CAAC,KAAK;EACxE,MAAM,WAAW,cAAc,iBAAiB,cAAc,CAAC,KAAK;EACpE,OAAO,WAAW,cAAc,iBAAiB,eAAe,CAAC,KAAK;CACxE;CAEA,SAAS,KAAK,YAAY,GAAG;CAC7B,OAAO;AACT"}