Safe Area Handling

function getSafeAreaInsets() {  const computedStyle = getComputedStyle(document.documentElement);
  return {    top: parseInt(computedStyle.getPropertyValue('--sat') || '0'),    bottom: parseInt(computedStyle.getPropertyValue('--sab') || '0'),    left: parseInt(computedStyle.getPropertyValue('--sal') || '0'),    right: parseInt(computedStyle.getPropertyValue('--sar') || '0'),  };}
// Set CSS custom propertiesfunction setSafeAreaProperties() {  const style = document.documentElement.style;
  // Create temporary element to read values  const temp = document.createElement('div');  temp.style.paddingTop = 'env(safe-area-inset-top)';  temp.style.paddingBottom = 'env(safe-area-inset-bottom)';  temp.style.paddingLeft = 'env(safe-area-inset-left)';  temp.style.paddingRight = 'env(safe-area-inset-right)';  document.body.appendChild(temp);
  const computed = getComputedStyle(temp);  style.setProperty('--sat', computed.paddingTop);  style.setProperty('--sab', computed.paddingBottom);  style.setProperty('--sal', computed.paddingLeft);  style.setProperty('--sar', computed.paddingRight);
  document.body.removeChild(temp);}
// Update on orientation changewindow.addEventListener('orientationchange', () => {  setTimeout(setSafeAreaProperties, 100);});

import { useState, useEffect } from 'react';
interface SafeAreaInsets {  top: number;  bottom: number;  left: number;  right: number;}
function useSafeArea(): SafeAreaInsets {  const [insets, setInsets] = useState<SafeAreaInsets>({    top: 0,    bottom: 0,    left: 0,    right: 0,  });
  useEffect(() => {    function updateInsets() {      const temp = document.createElement('div');      temp.style.cssText = `        position: fixed;        top: 0;        padding-top: env(safe-area-inset-top);        padding-bottom: env(safe-area-inset-bottom);        padding-left: env(safe-area-inset-left);        padding-right: env(safe-area-inset-right);      `;      document.body.appendChild(temp);
      const computed = getComputedStyle(temp);      setInsets({        top: parseFloat(computed.paddingTop) || 0,        bottom: parseFloat(computed.paddingBottom) || 0,        left: parseFloat(computed.paddingLeft) || 0,        right: parseFloat(computed.paddingRight) || 0,      });
      document.body.removeChild(temp);    }
    const handleOrientationChange = () => {      setTimeout(updateInsets, 100);    };
    updateInsets();    window.addEventListener('resize', updateInsets);    window.addEventListener('orientationchange', handleOrientationChange);
    return () => {      window.removeEventListener('resize', updateInsets);      window.removeEventListener('orientationchange', handleOrientationChange);    };  }, []);
  return insets;}
// Usagefunction Header() {  const { top } = useSafeArea();
  return (    <header style={{ paddingTop: top }}>      App Header    </header>  );}

import { ref, onMounted, onUnmounted } from 'vue';
export function useSafeArea() {  const insets = ref({    top: 0,    bottom: 0,    left: 0,    right: 0,  });
  function updateInsets() {    const temp = document.createElement('div');    temp.style.cssText = `      position: fixed;      padding-top: env(safe-area-inset-top);      padding-bottom: env(safe-area-inset-bottom);      padding-left: env(safe-area-inset-left);      padding-right: env(safe-area-inset-right);    `;    document.body.appendChild(temp);
    const computed = getComputedStyle(temp);    insets.value = {      top: parseFloat(computed.paddingTop) || 0,      bottom: parseFloat(computed.paddingBottom) || 0,      left: parseFloat(computed.paddingLeft) || 0,      right: parseFloat(computed.paddingRight) || 0,    };
    document.body.removeChild(temp);  }
  onMounted(() => {    updateInsets();    window.addEventListener('resize', updateInsets);  });
  onUnmounted(() => {    window.removeEventListener('resize', updateInsets);  });
  return insets;}

// capacitor.config.tsimport type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {  ios: {    // Content extends behind status bar    contentInset: 'automatic', // or 'always', 'scrollableAxes', 'never'  },};

import { StatusBar, Style } from '@capacitor/status-bar';
// Set status bar styleawait StatusBar.setStyle({ style: Style.Dark });
// Set background color (Android)await StatusBar.setBackgroundColor({ color: '#ffffff' });
// Show/hide status barawait StatusBar.hide();await StatusBar.show();
// Overlay modeawait StatusBar.setOverlaysWebView({ overlay: true });

import { Keyboard } from '@capacitor/keyboard';
Keyboard.addListener('keyboardWillShow', (info) => {  document.body.style.paddingBottom = `${info.keyboardHeight}px`;});
Keyboard.addListener('keyboardWillHide', () => {  document.body.style.paddingBottom = 'env(safe-area-inset-bottom)';});