native-fn 1.2.2 → 1.3.0

package/dist/plugin/dimension/index.mjs

@@ -57,19 +57,16 @@ var ENV_PRESETS = {
         left: 'viewport-segment-left',
     },
 };
-var FALLBACK_DIMENSION = {
-    innerWidth: -1,
-    innerHeight: -1,
-    outerWidth: -1,
-    outerHeight: -1,
-    scale: 1,
-    orientation: Orientation.Unknown,
-};
-var MEDIA_QUERY_LIST;
+var ORIENTATION_MEDIA_QUERY_LIST;
+if (typeof globalThis.matchMedia !== 'undefined')
+    ORIENTATION_MEDIA_QUERY_LIST = globalThis.matchMedia('(orientation: portrait)');
+else
+    ORIENTATION_MEDIA_QUERY_LIST = FALLBACK_MEDIA_QUERY_LIST;
+var DEVICE_POSTURE_MEDIA_QUERY_LIST;
 if (typeof globalThis.matchMedia !== 'undefined')
-    MEDIA_QUERY_LIST = globalThis.matchMedia('(orientation: portrait)');
+    DEVICE_POSTURE_MEDIA_QUERY_LIST = globalThis.matchMedia('(device-posture: folded)');
 else
-    MEDIA_QUERY_LIST = FALLBACK_MEDIA_QUERY_LIST;
+    DEVICE_POSTURE_MEDIA_QUERY_LIST = FALLBACK_MEDIA_QUERY_LIST;
 
 var IE_WRAPPER_STORE = [];
 var MEDIA_QUERY_LIST_WRAPPER_STORE = [];
@@ -304,6 +301,8 @@ function createSubscriptionManager(attach, detach) {
         },
         subscribe: function (listener, options) {
             if (options === void 0) { options = {}; }
+            if (typeof options.signal !== 'undefined' && options.signal.aborted)
+                return function () { };
             var entry = { fn: listener, once: false };
             if (typeof options.once !== 'undefined')
                 entry.once = options.once;
@@ -322,12 +321,8 @@ function createSubscriptionManager(attach, detach) {
                 EventListener.remove(entry.signal, { type: 'abort', callback: cleanup });
                 removeEntry(entry);
             };
-            if (typeof entry.signal !== 'undefined') {
-                if (entry.signal.aborted)
-                    removeEntry(entry);
-                else
-                    EventListener.add(entry.signal, { type: 'abort', callback: cleanup });
-            }
+            if (typeof entry.signal !== 'undefined')
+                EventListener.add(entry.signal, { type: 'abort', callback: cleanup });
             return function unsubscribe() {
                 removeEntry(entry);
             };
@@ -364,15 +359,364 @@ function setStyle(element, styles) {
     }
 }
 
+function createHiddenElement(tagName, focusable) {
+    if (focusable === void 0) { focusable = true; }
+    var element = globalThis.document.createElement(tagName);
+    if (typeof element.width !== 'undefined')
+        element.width = '0';
+    if (typeof element.height !== 'undefined')
+        element.height = '0';
+    if (typeof element.border !== 'undefined')
+        element.border = '0';
+    if (typeof element.frameBorder !== 'undefined')
+        element.frameBorder = '0';
+    if (typeof element.scrolling !== 'undefined')
+        element.scrolling = 'no';
+    if (typeof element.cellPadding !== 'undefined')
+        element.cellPadding = '0';
+    if (typeof element.cellSpacing !== 'undefined')
+        element.cellSpacing = '0';
+    if (typeof element.frame !== 'undefined')
+        element.frame = 'void';
+    if (typeof element.rules !== 'undefined')
+        element.rules = 'none';
+    if (typeof element.noWrap !== 'undefined')
+        element.noWrap = true;
+    element.tabIndex = -1;
+    element.setAttribute('role', 'presentation');
+    if (focusable) {
+        setStyle(element, {
+            width: '1px',
+            height: '1px',
+        });
+    }
+    else {
+        element.setAttribute('aria-hidden', 'true');
+        setStyle(element, {
+            width: '0',
+            height: '0',
+            zIndex: '-9999',
+            display: 'none',
+            visibility: 'hidden',
+            pointerEvents: 'none',
+        });
+    }
+    setStyle(element, {
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        padding: '0',
+        margin: '0',
+        border: 'none',
+        outline: 'hidden',
+        clip: 'rect(1px, 1px, 1px, 1px)',
+        clipPath: 'inset(50%)',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+    });
+    return element;
+}
+
+var MAX_SEGMENTS_PER_AXIS = 4;
 function noop() {
 }
+function getSupportedEnvironment() {
+    if (typeof globalThis.CSS !== 'undefined' && typeof globalThis.CSS.supports === 'function') {
+        if (globalThis.CSS.supports('x: env(x)'))
+            return 'env';
+        if (globalThis.CSS.supports('x: constant(x)'))
+            return 'constant';
+    }
+    return undefined;
+}
+function getSegmentGrid() {
+    if (typeof globalThis.matchMedia !== 'function')
+        return { rows: 1, cols: 1 };
+    var cols = 1;
+    var rows = 1;
+    for (var i = MAX_SEGMENTS_PER_AXIS; i >= 2; i--) {
+        if (globalThis.matchMedia('(horizontal-viewport-segments: ' + i + ')').matches) {
+            cols = i;
+            break;
+        }
+    }
+    for (var i = MAX_SEGMENTS_PER_AXIS; i >= 2; i--) {
+        if (globalThis.matchMedia('(vertical-viewport-segments: ' + i + ')').matches) {
+            rows = i;
+            break;
+        }
+    }
+    return { rows: rows, cols: cols };
+}
+function buildSegmentMediaQueryLists() {
+    if (typeof globalThis.matchMedia !== 'function')
+        return [];
+    var mediaQueryLists = [];
+    for (var i = 2; i <= MAX_SEGMENTS_PER_AXIS; i++) {
+        mediaQueryLists.push(globalThis.matchMedia('(horizontal-viewport-segments: ' + i + ')'));
+        mediaQueryLists.push(globalThis.matchMedia('(vertical-viewport-segments: ' + i + ')'));
+    }
+    return mediaQueryLists;
+}
+function createViewportSegmentObserver() {
+    var viewport = globalThis.viewport;
+    var visualViewport = globalThis.visualViewport;
+    var devicePosture = globalThis.navigator.devicePosture;
+    var hasSegmentsAPI = typeof viewport !== 'undefined';
+    var hasLegacySegmentsAPI = !hasSegmentsAPI && typeof visualViewport !== 'undefined' && visualViewport !== null && typeof visualViewport.segments !== 'undefined';
+    var hasDevicePosture = typeof devicePosture !== 'undefined';
+    var onChangeSubscriptionManager = createSubscriptionManager(attachOnChange, detachOnChange);
+    var support = getSupportedEnvironment();
+    var cachedDiv = null;
+    var segmentMediaQueryLists = [];
+    var previousSegments = null;
+    function attachCSSFallbackListeners() {
+        EventListener.add(globalThis, { type: 'resize', callback: onSegmentChange });
+        segmentMediaQueryLists = buildSegmentMediaQueryLists();
+        for (var i = 0; i < segmentMediaQueryLists.length; i++)
+            EventListener.add(segmentMediaQueryLists[i], { type: 'change', callback: onSegmentChange });
+        if (DEVICE_POSTURE_MEDIA_QUERY_LIST.media !== 'not all')
+            EventListener.add(DEVICE_POSTURE_MEDIA_QUERY_LIST, { type: 'change', callback: onSegmentChange });
+    }
+    function detachCSSFallbackListeners() {
+        EventListener.remove(globalThis, { type: 'resize', callback: onSegmentChange });
+        for (var i = 0; i < segmentMediaQueryLists.length; i++)
+            EventListener.remove(segmentMediaQueryLists[i], { type: 'change', callback: onSegmentChange });
+        segmentMediaQueryLists = [];
+        if (DEVICE_POSTURE_MEDIA_QUERY_LIST.media !== 'not all')
+            EventListener.remove(DEVICE_POSTURE_MEDIA_QUERY_LIST, { type: 'change', callback: onSegmentChange });
+    }
+    function attachOnChange() {
+        if (hasSegmentsAPI) {
+            if (hasDevicePosture) {
+                EventListener.add(devicePosture, { type: 'change', callback: onSegmentChange });
+                EventListener.add(globalThis, { type: 'resize', callback: onSegmentChange });
+            }
+            else {
+                attachCSSFallbackListeners();
+            }
+        }
+        else if (hasLegacySegmentsAPI) {
+            EventListener.add(visualViewport, { type: 'resize', callback: onSegmentChange, options: { passive: true } });
+            if (hasSegmentsAPI)
+                EventListener.add(devicePosture, { type: 'change', callback: onSegmentChange });
+        }
+        else {
+            getOrCreateCachedDiv();
+            attachCSSFallbackListeners();
+        }
+    }
+    function detachOnChange() {
+        if (hasSegmentsAPI) {
+            if (hasDevicePosture) {
+                EventListener.remove(devicePosture, { type: 'change', callback: onSegmentChange });
+                EventListener.remove(globalThis, { type: 'resize', callback: onSegmentChange });
+            }
+            else {
+                detachCSSFallbackListeners();
+            }
+        }
+        else if (hasLegacySegmentsAPI) {
+            EventListener.remove(visualViewport, { type: 'resize', callback: onSegmentChange, options: { passive: true } });
+            if (hasSegmentsAPI)
+                EventListener.remove(devicePosture, { type: 'change', callback: onSegmentChange });
+        }
+        else {
+            detachCSSFallbackListeners();
+            releaseDiv();
+        }
+    }
+    function segmentsEqual(segments1, segments2) {
+        if (segments1.length !== segments2.length)
+            return false;
+        for (var i = 0; i < segments1.length; i++) {
+            var segment1 = segments1[i];
+            var segment2 = segments2[i];
+            if (segment1.width !== segment2.width || segment1.height !== segment2.height || segment1.top !== segment2.top || segment1.left !== segment2.left || segment1.bottom !== segment2.bottom || segment1.right !== segment2.right)
+                return false;
+        }
+        return true;
+    }
+    function onSegmentChange() {
+        var next = getValue();
+        if (previousSegments !== null && segmentsEqual(previousSegments, next))
+            return;
+        previousSegments = next;
+        onChangeSubscriptionManager.emit(next);
+    }
+    function buildDiv() {
+        var div = createHiddenElement('div');
+        div.setAttribute('data-viewport-segment-observer', '');
+        div.style.setProperty('position', 'fixed', 'important');
+        div.style.setProperty('top', '0', 'important');
+        div.style.setProperty('left', '0', 'important');
+        div.style.setProperty('visibility', 'hidden', 'important');
+        div.style.setProperty('pointer-events', 'none', 'important');
+        div.style.setProperty('z-index', '-1', 'important');
+        div.style.setProperty('box-sizing', 'content-box', 'important');
+        div.style.setProperty('padding', '0', 'important');
+        div.style.setProperty('margin', '0', 'important');
+        div.style.setProperty('border', '0', 'important');
+        div.style.setProperty('width', '0', 'important');
+        div.style.setProperty('height', '0', 'important');
+        div.style.setProperty('min-width', '0', 'important');
+        div.style.setProperty('min-height', '0', 'important');
+        div.style.setProperty('max-width', 'none', 'important');
+        div.style.setProperty('max-height', 'none', 'important');
+        div.style.setProperty('transition', 'none', 'important');
+        div.style.setProperty('animation', 'none', 'important');
+        div.style.setProperty('display', 'block', 'important');
+        div.style.setProperty('float', 'none', 'important');
+        div.style.setProperty('transform', 'none', 'important');
+        return div;
+    }
+    function getOrCreateCachedDiv() {
+        if (cachedDiv !== null)
+            return cachedDiv;
+        cachedDiv = buildDiv();
+        globalThis.document.body.appendChild(cachedDiv);
+        return cachedDiv;
+    }
+    function releaseDiv() {
+        if (cachedDiv !== null) {
+            if (cachedDiv.parentNode !== null)
+                cachedDiv.parentNode.removeChild(cachedDiv);
+            cachedDiv = null;
+        }
+    }
+    function readFromSegmentsAPI() {
+        var segments;
+        if (hasSegmentsAPI)
+            segments = viewport.segments;
+        else
+            segments = visualViewport.segments;
+        if (segments === null || typeof segments === 'undefined')
+            return [];
+        var results = [];
+        for (var i = 0; i < segments.length; i++) {
+            var segment = segments[i];
+            results.push({
+                width: segment.width,
+                height: segment.height,
+                top: segment.top,
+                left: segment.left,
+                bottom: segment.bottom,
+                right: segment.right,
+            });
+        }
+        return results;
+    }
+    function buildFullViewportSegment() {
+        var width = globalThis.innerWidth;
+        var height = globalThis.innerHeight;
+        return {
+            width: width,
+            height: height,
+            top: 0,
+            left: 0,
+            bottom: height,
+            right: width,
+        };
+    }
+    function readFromCSSEnv(div) {
+        var grid = getSegmentGrid();
+        if (grid.rows === 1 && grid.cols === 1)
+            return [buildFullViewportSegment()];
+        if (typeof support === 'undefined' || typeof div.style.setProperty === 'undefined')
+            return [buildFullViewportSegment()];
+        var results = [];
+        for (var row = 0; row < grid.rows; row++) {
+            for (var col = 0; col < grid.cols; col++) {
+                div.style.setProperty('width', support + '(viewport-segment-width ' + row + ' ' + col + ', -1px)', 'important');
+                div.style.setProperty('height', support + '(viewport-segment-height ' + row + ' ' + col + ', -1px)', 'important');
+                div.style.setProperty('margin-top', support + '(viewport-segment-top ' + row + ' ' + col + ', -1px)', 'important');
+                div.style.setProperty('margin-left', support + '(viewport-segment-left ' + row + ' ' + col + ', -1px)', 'important');
+                div.style.setProperty('margin-bottom', support + '(viewport-segment-bottom ' + row + ' ' + col + ', -1px)', 'important');
+                div.style.setProperty('margin-right', support + '(viewport-segment-right ' + row + ' ' + col + ', -1px)', 'important');
+                var computed = globalThis.getComputedStyle(div);
+                var top_1 = globalThis.parseFloat(computed.marginTop);
+                if (top_1 < 0)
+                    continue;
+                var left = globalThis.parseFloat(computed.marginLeft);
+                var bottom = globalThis.parseFloat(computed.marginBottom);
+                var right = globalThis.parseFloat(computed.marginRight);
+                var width = globalThis.parseFloat(computed.width);
+                var height = globalThis.parseFloat(computed.height);
+                results.push({
+                    width: width,
+                    height: height,
+                    top: top_1,
+                    left: left,
+                    bottom: bottom,
+                    right: right,
+                });
+            }
+        }
+        return results;
+    }
+    function getValue() {
+        if (hasSegmentsAPI || hasLegacySegmentsAPI)
+            return readFromSegmentsAPI();
+        if (cachedDiv !== null)
+            return readFromCSSEnv(cachedDiv);
+        var div = buildDiv();
+        globalThis.document.body.appendChild(div);
+        var results = readFromCSSEnv(div);
+        globalThis.document.body.removeChild(div);
+        return results;
+    }
+    function useCssVariable(prefix) {
+        if (typeof globalThis.document === 'undefined')
+            return noop;
+        var attributes = keys(ENV_PRESETS['viewport-segment']);
+        var element = globalThis.document.documentElement;
+        var lastCount = 0;
+        function applySegments(segments) {
+            for (var i = segments.length; i < lastCount; i++) {
+                for (var j = 0; j < attributes.length; j++) {
+                    element.style.removeProperty("--".concat(prefix, "-").concat(i, "-").concat(attributes[j]));
+                }
+            }
+            lastCount = segments.length;
+            for (var i = 0; i < segments.length; i++) {
+                var segment = segments[i];
+                for (var j = 0; j < attributes.length; j++) {
+                    var attribute = attributes[j];
+                    element.style.setProperty("--".concat(prefix, "-").concat(i, "-").concat(attribute), segment[attribute] + 'px');
+                }
+            }
+        }
+        applySegments(getValue());
+        var unsubscribe = onChangeSubscriptionManager.subscribe(function (segments) {
+            applySegments(segments);
+        });
+        return function () {
+            unsubscribe();
+            for (var i = 0; i < lastCount; i++)
+                for (var j = 0; j < attributes.length; j++)
+                    element.style.removeProperty("--".concat(prefix, "-").concat(i, "-").concat(attributes[j]));
+            lastCount = 0;
+        };
+    }
+    return {
+        get value() {
+            return getValue();
+        },
+        onChange: onChangeSubscriptionManager.subscribe,
+        useCssVariable: useCssVariable,
+    };
+}
 function createVirtualKeyboardObserver() {
     var onChangeSubscriptionManager = createSubscriptionManager(attachOnChange, detachOnChange);
+    var previousOverlaysContent = false;
     function attachOnChange() {
+        previousOverlaysContent = globalThis.navigator.virtualKeyboard.overlaysContent;
+        globalThis.navigator.virtualKeyboard.overlaysContent = true;
         EventListener.add(globalThis.navigator.virtualKeyboard, { type: 'geometrychange', callback: onGeometryChange, options: { passive: true } });
     }
     function detachOnChange() {
         EventListener.remove(globalThis.navigator.virtualKeyboard, { type: 'geometrychange', callback: onGeometryChange, options: { passive: true } });
+        globalThis.navigator.virtualKeyboard.overlaysContent = previousOverlaysContent;
     }
     function onGeometryChange() {
         onChangeSubscriptionManager.emit(getValue());
@@ -383,16 +727,16 @@ function createVirtualKeyboardObserver() {
         var top = rect.y;
         var width = rect.width;
         var height = rect.height;
-        var right = (function () {
-            if (width === 0)
-                return 0;
-            return Math.max(0, globalThis.innerWidth - (left + width));
-        })();
-        var bottom = (function () {
-            if (height === 0)
-                return 0;
-            return Math.max(0, globalThis.innerHeight - (top + height));
-        })();
+        var right;
+        if (width === 0)
+            right = 0;
+        else
+            right = Math.max(0, globalThis.innerWidth - (left + width));
+        var bottom;
+        if (height === 0)
+            bottom = 0;
+        else
+            bottom = Math.max(0, globalThis.innerHeight - (top + height));
         return {
             top: top,
             right: right,
@@ -402,17 +746,43 @@ function createVirtualKeyboardObserver() {
             height: height,
         };
     }
+    function useCssVariable(prefix) {
+        if (typeof globalThis.document === 'undefined')
+            return noop;
+        var attributes = keys(ENV_PRESETS['keyboard-inset']);
+        var element = globalThis.document.documentElement;
+        function applyValues(values) {
+            for (var i = 0; i < attributes.length; i++) {
+                var attribute = attributes[i];
+                element.style.setProperty("--".concat(prefix, "-").concat(attribute), values[attribute] + 'px');
+            }
+        }
+        applyValues(getValue());
+        var unsubscribe = onChangeSubscriptionManager.subscribe(function (values) {
+            applyValues(values);
+        });
+        return function () {
+            unsubscribe();
+            for (var i = 0; i < attributes.length; i++)
+                element.style.removeProperty("--".concat(prefix, "-").concat(attributes[i]));
+        };
+    }
     return {
-        get: getValue,
+        get value() {
+            return getValue();
+        },
         onChange: onChangeSubscriptionManager.subscribe,
+        useCssVariable: useCssVariable,
     };
 }
-function createEnvObserver(preset) {
+function createEnvironmentObserver(preset) {
     if (preset === 'keyboard-inset' && typeof globalThis.navigator.virtualKeyboard !== 'undefined')
         return createVirtualKeyboardObserver();
-    var envMap = ENV_PRESETS[preset];
-    var attributes = keys(envMap);
-    var support = getSupportedEnv();
+    if (preset === 'viewport-segment')
+        return createViewportSegmentObserver();
+    var environmentMap = ENV_PRESETS[preset];
+    var attributes = keys(environmentMap);
+    var support = getSupportedEnvironment();
     var parentReadyCallbacks = [];
     var onChangeSubscriptionManager = createSubscriptionManager(attachOnChange, detachOnChange);
     var elementComputedStyle = {};
@@ -429,15 +799,6 @@ function createEnvObserver(preset) {
     function detachOnChange() {
         removeDetector();
     }
-    function getSupportedEnv() {
-        if (typeof globalThis.CSS !== 'undefined' && typeof globalThis.CSS.supports === 'function') {
-            if (globalThis.CSS.supports('x: env(x)'))
-                return 'env';
-            if (globalThis.CSS.supports('x: constant(x)'))
-                return 'constant';
-        }
-        return undefined;
-    }
     function isSameValues(a, b) {
         for (var i = 0; i < attributes.length; i++) {
             var key = attributes[i];
@@ -477,7 +838,7 @@ function createEnvObserver(preset) {
                 parentReadyCallbacks[i]();
     }
     function addChild(parent, attribute) {
-        var envVar = envMap[attribute];
+        var envVar = environmentMap[attribute];
         var p1 = globalThis.document.createElement('div');
         var p2 = globalThis.document.createElement('div');
         var c1 = globalThis.document.createElement('div');
@@ -540,9 +901,8 @@ function createEnvObserver(preset) {
     }
     function init() {
         if (typeof support === 'undefined') {
-            for (var i = 0; i < attributes.length; i++) {
+            for (var i = 0; i < attributes.length; i++)
                 elementComputedStyle[attributes[i]] = 0;
-            }
             return;
         }
         elementComputedStyle = {};
@@ -586,8 +946,28 @@ function createEnvObserver(preset) {
         }
         return result;
     }
+    function useCssVariable(prefix) {
+        if (typeof support === 'undefined' || typeof globalThis.document === 'undefined')
+            return noop;
+        var element = globalThis.document.documentElement;
+        function applyValues(values) {
+            for (var i = 0; i < attributes.length; i++) {
+                var attribute = attributes[i];
+                element.style.setProperty("--".concat(prefix, "-").concat(String(attribute)), values[attribute] + 'px');
+            }
+        }
+        var unsubscribe = onChangeSubscriptionManager.subscribe(function (values) {
+            applyValues(values);
+        });
+        applyValues(readValues());
+        return function () {
+            unsubscribe();
+            for (var i = 0; i < attributes.length; i++)
+                element.style.removeProperty("--".concat(prefix, "-").concat(String(attributes[i])));
+        };
+    }
     return {
-        get: function () {
+        get value() {
             if (parentDiv !== null)
                 return readValues();
             init();
@@ -600,15 +980,16 @@ function createEnvObserver(preset) {
             if (typeof support === 'undefined')
                 return noop;
             return onChangeSubscriptionManager.subscribe(callback, options);
-        }
+        },
+        useCssVariable: useCssVariable
     };
 }
 
-var safeAreaInsetObserver = createEnvObserver('safe-area-inset');
-var safeAreaMaxInsetObserver = createEnvObserver('safe-area-max-inset');
-var keyboardInsetObserver = createEnvObserver('keyboard-inset');
-var titlebarAreaObserver = createEnvObserver('titlebar-area');
-var viewportSegmentObserver = createEnvObserver('viewport-segment');
+var safeAreaInsetObserver = createEnvironmentObserver('safe-area-inset');
+var safeAreaMaxInsetObserver = createEnvironmentObserver('safe-area-max-inset');
+var keyboardInsetObserver = createEnvironmentObserver('keyboard-inset');
+var titlebarAreaObserver = createEnvironmentObserver('titlebar-area');
+var viewportSegmentObserver = createEnvironmentObserver('viewport-segment');
 var onChangeSubscriptionManager = createSubscriptionManager(attachOnChange, detachOnChange);
 var dimensionRef = null;
 var Dimension = {
@@ -643,9 +1024,9 @@ function getOrientation() {
                 return Orientation.Landscape;
         }
     }
-    if (MEDIA_QUERY_LIST.media === 'not all')
+    if (ORIENTATION_MEDIA_QUERY_LIST.media === 'not all')
         return Orientation.Unknown;
-    else if (MEDIA_QUERY_LIST.matches)
+    else if (ORIENTATION_MEDIA_QUERY_LIST.matches)
         return Orientation.Portrait;
     else
         return Orientation.Landscape;
@@ -657,50 +1038,29 @@ function getScale() {
 }
 function getEnvironment() {
     return {
-        safeAreaInset: {
-            get value() {
-                return safeAreaInsetObserver.get();
-            },
-            onChange: safeAreaInsetObserver.onChange,
-        },
-        safeAreaMaxInset: {
-            get value() {
-                return safeAreaMaxInsetObserver.get();
-            },
-            onChange: safeAreaMaxInsetObserver.onChange,
-        },
-        keyboardInset: {
-            get value() {
-                return keyboardInsetObserver.get();
-            },
-            onChange: keyboardInsetObserver.onChange,
-        },
-        titlebarArea: {
-            get value() {
-                return titlebarAreaObserver.get();
-            },
-            onChange: titlebarAreaObserver.onChange,
-        },
-        viewportSegment: {
-            get value() {
-                return viewportSegmentObserver.get();
-            },
-            onChange: viewportSegmentObserver.onChange,
-        },
+        safeAreaInset: safeAreaInsetObserver,
+        safeAreaMaxInset: safeAreaMaxInsetObserver,
+        keyboardInset: keyboardInsetObserver,
+        titlebarArea: titlebarAreaObserver,
+        viewportSegment: viewportSegmentObserver,
     };
 }
 function getDimension() {
+    var dimensions = {
+        innerWidth: 0,
+        innerHeight: 0,
+        outerWidth: 0,
+        outerHeight: 0,
+        scale: getScale(),
+        orientation: getOrientation(),
+    };
     if (typeof globalThis.innerWidth !== 'undefined') {
-        return {
-            innerWidth: globalThis.innerWidth,
-            innerHeight: globalThis.innerHeight,
-            outerWidth: globalThis.outerWidth,
-            outerHeight: globalThis.outerHeight,
-            scale: getScale(),
-            orientation: getOrientation(),
-        };
+        dimensions.innerWidth = globalThis.innerWidth;
+        dimensions.innerHeight = globalThis.innerHeight;
+        dimensions.outerWidth = globalThis.outerWidth;
+        dimensions.outerHeight = globalThis.outerHeight;
     }
-    return FALLBACK_DIMENSION;
+    return dimensions;
 }
 function attachOnChange() {
     dimensionRef = getDimension();
@@ -709,8 +1069,8 @@ function attachOnChange() {
         EventListener.add(globalThis.screen.orientation, { type: 'change', callback: onResize });
     else if (typeof globalThis.orientation !== 'undefined')
         EventListener.add(globalThis, { type: 'orientationChange', callback: onResize });
-    else if (MEDIA_QUERY_LIST.media !== 'not all')
-        EventListener.add(MEDIA_QUERY_LIST, { type: 'change', callback: onResize });
+    else if (ORIENTATION_MEDIA_QUERY_LIST.media !== 'not all')
+        EventListener.add(ORIENTATION_MEDIA_QUERY_LIST, { type: 'change', callback: onResize });
 }
 function detachOnChange() {
     dimensionRef = null;
@@ -719,8 +1079,8 @@ function detachOnChange() {
         EventListener.remove(globalThis.screen.orientation, { type: 'change', callback: onResize });
     else if (typeof globalThis.orientation !== 'undefined')
         EventListener.remove(globalThis, { type: 'orientationChange', callback: onResize });
-    else if (MEDIA_QUERY_LIST.media !== 'not all')
-        EventListener.remove(MEDIA_QUERY_LIST, { type: 'change', callback: onResize });
+    else if (ORIENTATION_MEDIA_QUERY_LIST.media !== 'not all')
+        EventListener.remove(ORIENTATION_MEDIA_QUERY_LIST, { type: 'change', callback: onResize });
 }
 function onResize() {
     var dimension = getDimension();
@@ -728,4 +1088,4 @@ function onResize() {
         onChangeSubscriptionManager.emit(dimensionRef = dimension);
 }
 
-export { ENV_PRESETS, FALLBACK_DIMENSION, MEDIA_QUERY_LIST, Orientation, Dimension as default };
+export { DEVICE_POSTURE_MEDIA_QUERY_LIST, ENV_PRESETS, ORIENTATION_MEDIA_QUERY_LIST, Orientation, Dimension as default };