@oxy.so/bloom 4.0.0 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -1284,6 +1284,20 @@
         "default": "./lib/commonjs/icon-circle/index.js"
       }
     },
+    "./empty-state": {
+      "react-native": {
+        "types": "./lib/typescript/module/empty-state/index.d.ts",
+        "default": "./src/empty-state/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/empty-state/index.d.ts",
+        "default": "./lib/module/empty-state/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/empty-state/index.d.ts",
+        "default": "./lib/commonjs/empty-state/index.js"
+      }
+    },
     "./connection-dots": {
       "react-native": {
         "types": "./lib/typescript/module/connection-dots/index.d.ts",
@@ -2207,6 +2221,104 @@
         "default": "./lib/commonjs/map-marker/index.js"
       }
     },
+    "./place-card": {
+      "react-native": {
+        "types": "./lib/typescript/module/place-card/index.d.ts",
+        "default": "./src/place-card/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/place-card/index.d.ts",
+        "default": "./lib/module/place-card/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/place-card/index.d.ts",
+        "default": "./lib/commonjs/place-card/index.js"
+      }
+    },
+    "./place-details": {
+      "react-native": {
+        "types": "./lib/typescript/module/place-details/index.d.ts",
+        "default": "./src/place-details/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/place-details/index.d.ts",
+        "default": "./lib/module/place-details/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/place-details/index.d.ts",
+        "default": "./lib/commonjs/place-details/index.js"
+      }
+    },
+    "./place-list": {
+      "react-native": {
+        "types": "./lib/typescript/module/place-list/index.d.ts",
+        "default": "./src/place-list/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/place-list/index.d.ts",
+        "default": "./lib/module/place-list/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/place-list/index.d.ts",
+        "default": "./lib/commonjs/place-list/index.js"
+      }
+    },
+    "./map-controls": {
+      "react-native": {
+        "types": "./lib/typescript/module/map-controls/index.d.ts",
+        "default": "./src/map-controls/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/map-controls/index.d.ts",
+        "default": "./lib/module/map-controls/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/map-controls/index.d.ts",
+        "default": "./lib/commonjs/map-controls/index.js"
+      }
+    },
+    "./location-puck": {
+      "react-native": {
+        "types": "./lib/typescript/module/location-puck/index.d.ts",
+        "default": "./src/location-puck/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/location-puck/index.d.ts",
+        "default": "./lib/module/location-puck/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/location-puck/index.d.ts",
+        "default": "./lib/commonjs/location-puck/index.js"
+      }
+    },
+    "./navigation-banner": {
+      "react-native": {
+        "types": "./lib/typescript/module/navigation-banner/index.d.ts",
+        "default": "./src/navigation-banner/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/navigation-banner/index.d.ts",
+        "default": "./lib/module/navigation-banner/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/navigation-banner/index.d.ts",
+        "default": "./lib/commonjs/navigation-banner/index.js"
+      }
+    },
+    "./map-attribution": {
+      "react-native": {
+        "types": "./lib/typescript/module/map-attribution/index.d.ts",
+        "default": "./src/map-attribution/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/map-attribution/index.d.ts",
+        "default": "./lib/module/map-attribution/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/map-attribution/index.d.ts",
+        "default": "./lib/commonjs/map-attribution/index.js"
+      }
+    },
     "./order-status": {
       "react-native": {
         "types": "./lib/typescript/module/order-status/index.d.ts",
@@ -2235,6 +2347,90 @@
         "default": "./lib/commonjs/price-breakdown/index.js"
       }
     },
+    "./checkout-summary": {
+      "react-native": {
+        "types": "./lib/typescript/module/checkout-summary/index.d.ts",
+        "default": "./src/checkout-summary/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/checkout-summary/index.d.ts",
+        "default": "./lib/module/checkout-summary/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/checkout-summary/index.d.ts",
+        "default": "./lib/commonjs/checkout-summary/index.js"
+      }
+    },
+    "./delivery-slot": {
+      "react-native": {
+        "types": "./lib/typescript/module/delivery-slot/index.d.ts",
+        "default": "./src/delivery-slot/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/delivery-slot/index.d.ts",
+        "default": "./lib/module/delivery-slot/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/delivery-slot/index.d.ts",
+        "default": "./lib/commonjs/delivery-slot/index.js"
+      }
+    },
+    "./order-confirmation": {
+      "react-native": {
+        "types": "./lib/typescript/module/order-confirmation/index.d.ts",
+        "default": "./src/order-confirmation/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/order-confirmation/index.d.ts",
+        "default": "./lib/module/order-confirmation/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/order-confirmation/index.d.ts",
+        "default": "./lib/commonjs/order-confirmation/index.js"
+      }
+    },
+    "./vendor-card": {
+      "react-native": {
+        "types": "./lib/typescript/module/vendor-card/index.d.ts",
+        "default": "./src/vendor-card/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/vendor-card/index.d.ts",
+        "default": "./lib/module/vendor-card/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/vendor-card/index.d.ts",
+        "default": "./lib/commonjs/vendor-card/index.js"
+      }
+    },
+    "./menu-item": {
+      "react-native": {
+        "types": "./lib/typescript/module/menu-item/index.d.ts",
+        "default": "./src/menu-item/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/menu-item/index.d.ts",
+        "default": "./lib/module/menu-item/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/menu-item/index.d.ts",
+        "default": "./lib/commonjs/menu-item/index.js"
+      }
+    },
+    "./cart-panel": {
+      "react-native": {
+        "types": "./lib/typescript/module/cart-panel/index.d.ts",
+        "default": "./src/cart-panel/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/cart-panel/index.d.ts",
+        "default": "./lib/module/cart-panel/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/cart-panel/index.d.ts",
+        "default": "./lib/commonjs/cart-panel/index.js"
+      }
+    },
     "./address": {
       "react-native": {
         "types": "./lib/typescript/module/address/index.d.ts",
@@ -2263,6 +2459,146 @@
         "default": "./lib/commonjs/route-stops/index.js"
       }
     },
+    "./directions": {
+      "react-native": {
+        "types": "./lib/typescript/module/directions/index.d.ts",
+        "default": "./src/directions/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/directions/index.d.ts",
+        "default": "./lib/module/directions/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/directions/index.d.ts",
+        "default": "./lib/commonjs/directions/index.js"
+      }
+    },
+    "./shipment-request": {
+      "react-native": {
+        "types": "./lib/typescript/module/shipment-request/index.d.ts",
+        "default": "./src/shipment-request/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/shipment-request/index.d.ts",
+        "default": "./lib/module/shipment-request/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/shipment-request/index.d.ts",
+        "default": "./lib/commonjs/shipment-request/index.js"
+      }
+    },
+    "./carrier-quote": {
+      "react-native": {
+        "types": "./lib/typescript/module/carrier-quote/index.d.ts",
+        "default": "./src/carrier-quote/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/carrier-quote/index.d.ts",
+        "default": "./lib/module/carrier-quote/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/carrier-quote/index.d.ts",
+        "default": "./lib/commonjs/carrier-quote/index.js"
+      }
+    },
+    "./vehicle-picker": {
+      "react-native": {
+        "types": "./lib/typescript/module/vehicle-picker/index.d.ts",
+        "default": "./src/vehicle-picker/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/vehicle-picker/index.d.ts",
+        "default": "./lib/module/vehicle-picker/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/vehicle-picker/index.d.ts",
+        "default": "./lib/commonjs/vehicle-picker/index.js"
+      }
+    },
+    "./payment-method": {
+      "react-native": {
+        "types": "./lib/typescript/module/payment-method/index.d.ts",
+        "default": "./src/payment-method/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/payment-method/index.d.ts",
+        "default": "./lib/module/payment-method/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/payment-method/index.d.ts",
+        "default": "./lib/commonjs/payment-method/index.js"
+      }
+    },
+    "./card-form": {
+      "react-native": {
+        "types": "./lib/typescript/module/card-form/index.d.ts",
+        "default": "./src/card-form/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/card-form/index.d.ts",
+        "default": "./lib/module/card-form/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/card-form/index.d.ts",
+        "default": "./lib/commonjs/card-form/index.js"
+      }
+    },
+    "./payment-status": {
+      "react-native": {
+        "types": "./lib/typescript/module/payment-status/index.d.ts",
+        "default": "./src/payment-status/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/payment-status/index.d.ts",
+        "default": "./lib/module/payment-status/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/payment-status/index.d.ts",
+        "default": "./lib/commonjs/payment-status/index.js"
+      }
+    },
+    "./job-board": {
+      "react-native": {
+        "types": "./lib/typescript/module/job-board/index.d.ts",
+        "default": "./src/job-board/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/job-board/index.d.ts",
+        "default": "./lib/module/job-board/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/job-board/index.d.ts",
+        "default": "./lib/commonjs/job-board/index.js"
+      }
+    },
+    "./earnings": {
+      "react-native": {
+        "types": "./lib/typescript/module/earnings/index.d.ts",
+        "default": "./src/earnings/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/earnings/index.d.ts",
+        "default": "./lib/module/earnings/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/earnings/index.d.ts",
+        "default": "./lib/commonjs/earnings/index.js"
+      }
+    },
+    "./proof-of-delivery": {
+      "react-native": {
+        "types": "./lib/typescript/module/proof-of-delivery/index.d.ts",
+        "default": "./src/proof-of-delivery/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/proof-of-delivery/index.d.ts",
+        "default": "./lib/module/proof-of-delivery/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/proof-of-delivery/index.d.ts",
+        "default": "./lib/commonjs/proof-of-delivery/index.js"
+      }
+    },
     "./mail-list": {
       "react-native": {
         "types": "./lib/typescript/module/mail-list/index.d.ts",
@@ -3325,6 +3661,9 @@
       "icon-circle": [
         "./lib/typescript/module/icon-circle/index.d.ts"
       ],
+      "empty-state": [
+        "./lib/typescript/module/empty-state/index.d.ts"
+      ],
       "connection-dots": [
         "./lib/typescript/module/connection-dots/index.d.ts"
       ],
@@ -3511,18 +3850,87 @@
       "map-marker": [
         "./lib/typescript/module/map-marker/index.d.ts"
       ],
+      "place-card": [
+        "./lib/typescript/module/place-card/index.d.ts"
+      ],
+      "place-details": [
+        "./lib/typescript/module/place-details/index.d.ts"
+      ],
+      "place-list": [
+        "./lib/typescript/module/place-list/index.d.ts"
+      ],
+      "map-controls": [
+        "./lib/typescript/module/map-controls/index.d.ts"
+      ],
+      "location-puck": [
+        "./lib/typescript/module/location-puck/index.d.ts"
+      ],
+      "navigation-banner": [
+        "./lib/typescript/module/navigation-banner/index.d.ts"
+      ],
+      "map-attribution": [
+        "./lib/typescript/module/map-attribution/index.d.ts"
+      ],
       "order-status": [
         "./lib/typescript/module/order-status/index.d.ts"
       ],
       "price-breakdown": [
         "./lib/typescript/module/price-breakdown/index.d.ts"
       ],
+      "checkout-summary": [
+        "./lib/typescript/module/checkout-summary/index.d.ts"
+      ],
+      "delivery-slot": [
+        "./lib/typescript/module/delivery-slot/index.d.ts"
+      ],
+      "order-confirmation": [
+        "./lib/typescript/module/order-confirmation/index.d.ts"
+      ],
+      "vendor-card": [
+        "./lib/typescript/module/vendor-card/index.d.ts"
+      ],
+      "menu-item": [
+        "./lib/typescript/module/menu-item/index.d.ts"
+      ],
+      "cart-panel": [
+        "./lib/typescript/module/cart-panel/index.d.ts"
+      ],
       "address": [
         "./lib/typescript/module/address/index.d.ts"
       ],
       "route-stops": [
         "./lib/typescript/module/route-stops/index.d.ts"
       ],
+      "directions": [
+        "./lib/typescript/module/directions/index.d.ts"
+      ],
+      "shipment-request": [
+        "./lib/typescript/module/shipment-request/index.d.ts"
+      ],
+      "carrier-quote": [
+        "./lib/typescript/module/carrier-quote/index.d.ts"
+      ],
+      "vehicle-picker": [
+        "./lib/typescript/module/vehicle-picker/index.d.ts"
+      ],
+      "payment-method": [
+        "./lib/typescript/module/payment-method/index.d.ts"
+      ],
+      "card-form": [
+        "./lib/typescript/module/card-form/index.d.ts"
+      ],
+      "payment-status": [
+        "./lib/typescript/module/payment-status/index.d.ts"
+      ],
+      "job-board": [
+        "./lib/typescript/module/job-board/index.d.ts"
+      ],
+      "earnings": [
+        "./lib/typescript/module/earnings/index.d.ts"
+      ],
+      "proof-of-delivery": [
+        "./lib/typescript/module/proof-of-delivery/index.d.ts"
+      ],
       "mail-list": [
         "./lib/typescript/module/mail-list/index.d.ts"
       ],

package/src/app-shell/AppShell.tsx

@@ -1,5 +1,5 @@
 import React, { cloneElement, isValidElement, useMemo, useState, type ComponentType } from 'react';
-import { View, useWindowDimensions } from 'react-native';
+import { Platform, View, useWindowDimensions } from 'react-native';
 import { BREAKPOINTS } from '../styles/breakpoints';
 import { Screen, ScreenScrollView, useScreen } from '../screen';
 import { Sidebar } from '../sidebar';
@@ -9,14 +9,18 @@ import type { BottomBarProps } from '../bottom-bar/types';
 import type { FabProps } from '../fab/types';
 import { ResponsiveNavigation } from './ResponsiveNavigation';
 import type { AppShellProps, AppShellEngineProps } from './types';
-import { AppShellEngine } from './AppShellEngine';
+import { createAppShellEngine } from './AppShellEngine';
+import { resolveScrollMode } from './layout';
+import { AppShellMenuButton } from './AppShellMenuButton';
+import { breakpointPx } from './constants';
 
 export function resolveNavigationPlacement(width: number, placement: AppShellProps['navigationPlacement'] = 'auto') {
   return placement === 'auto' ? width < BREAKPOINTS.md ? 'bottom' : width < BREAKPOINTS.lg ? 'rail' : 'sidebar' : placement;
 }
 
 /** Platform factory keeps the shared shell free of native material peers. */
-export function createAppShell(BottomBar: ComponentType<BottomBarProps>, Fab: ComponentType<FabProps>) {
+export function createAppShell(BottomBar: ComponentType<BottomBarProps>, Fab: ComponentType<FabProps>, ...panelComponents: Parameters<typeof createAppShellEngine>) {
+  const AppShellEngine = createAppShellEngine(...panelComponents);
   function NavigationBottom({ navigation = [], value = '', onValueChange, primaryAction, navigationMaterial, bottomActionBehavior, testID }: AppShellProps) {
     const { collapseProgress } = useScreen();
     return <BottomBar actionBehavior={bottomActionBehavior} material={navigationMaterial} items={navigation.map(item => ({ name: item.value, label: item.label, icon: item.icon }))} value={value} onValueChange={onValueChange ?? (() => {})} minimizeProgress={collapseProgress} action={primaryAction ? <Fab {...primaryAction} /> : undefined} testID={testID ? `${testID}-navigation-bottom` : undefined} />;
@@ -86,11 +90,74 @@ export function createAppShell(BottomBar: ComponentType<BottomBarProps>, Fab: Co
       </Screen>
     </View>;
   }
+  /** Translate navigation convenience props into the one document/layout engine. */
+  function EngineNavigationShell(props: AppShellProps) {
+    const { navigation, navigationPlacement = 'auto', value, onValueChange, sidebar, primaryAction,
+      navigationMaterial, bottomActionBehavior, active = true, scroll = 'document', testID } = props;
+    const window = useWindowDimensions();
+    const [measuredWidth, setMeasuredWidth] = useState<number | null>(null);
+    const width = measuredWidth ?? window.width;
+    const navFrom = props.navFrom ?? (navigationPlacement === 'bottom' ? Number.MAX_SAFE_INTEGER : navigationPlacement === 'auto' ? 'md' : 0);
+    const navExpandedFrom = props.navExpandedFrom ?? (navigationPlacement === 'auto' ? 'lg' : undefined);
+    const placement = width < breakpointPx(navFrom) ? 'bottom'
+      : navExpandedFrom !== undefined ? width < breakpointPx(navExpandedFrom) ? 'rail' : 'sidebar'
+        : navigationPlacement === 'rail' ? 'rail' : 'sidebar';
+    const items = navigation ?? sidebar?.items?.map(item => ({ value: item.key, label: item.label, icon: <item.icon /> })) ?? [];
+    const select = (next: string) => {
+      if (onValueChange) onValueChange(next);
+      else {
+        const item = sidebar?.items?.find(candidate => candidate.key === next);
+        if (item?.onPress) item.onPress();
+        else if (item && sidebar?.onNavigate) sidebar.onNavigate(item);
+        else if (item?.href && typeof globalThis.window !== 'undefined') globalThis.window.location.assign(item.href);
+      }
+    };
+    const mappedItems = useMemo(() => navigation?.map(item => ({
+      key: item.value, label: item.label, onPress: () => onValueChange?.(item.value),
+      icon: (iconProps: { width?: number; height?: number; fill?: string }) =>
+        isValidElement<{ width?: number; height?: number; fill?: string }>(item.icon)
+          ? cloneElement(item.icon, iconProps) : <>{item.icon}</>,
+    })), [navigation, onValueChange]);
+    const hasNavigation = items.length > 0 && props.variant !== 'focus';
+    const compact = placement === 'bottom';
+    const engineScroll = scroll === 'auto' ? 'container' : scroll === 'external' ? 'fixed' : scroll;
+    const document = resolveScrollMode(props.variant ?? 'dashboard', engineScroll) === 'document';
+    const bottom = compact && hasNavigation ? <NavigationBottom navigation={items} value={value ?? sidebar?.selected}
+      onValueChange={select} primaryAction={primaryAction} navigationMaterial={navigationMaterial}
+      bottomActionBehavior={bottomActionBehavior} testID={testID} /> : undefined;
+    const mappedSidebar = props.variant !== 'focus' && (sidebar || navigation) ? { ...(navigation ? { showSearch: false, showThemeToggle: false } : {}), ...sidebar, items: mappedItems ?? sidebar?.items,
+      selected: value ?? sidebar?.selected,
+      onNavigate: (item: NonNullable<NonNullable<AppShellProps['sidebar']>['items']>[number]) => select(item.key),
+      variant: placement === 'rail' ? 'rail' as const : sidebar?.variant,
+    } : undefined;
+    return <Screen active={active} navigationScope="shared" documentScroll={document}
+      testID={testID ? `${testID}-screen` : undefined}
+      onLayout={event => setMeasuredWidth(event.nativeEvent.layout.width)}>
+      <AppShellEngine {...props as AppShellEngineProps} scroll={engineScroll}
+        sidebar={mappedSidebar}
+        navFrom={navFrom}
+        navExpandedFrom={navExpandedFrom}
+        header={props.header !== undefined ? props.header : props.title ? <PageHeader title={props.title}
+          subtitle={props.breadcrumb} actions={props.actions} leading={<AppShellMenuButton />} /> : undefined}
+        bottomBar={props.bottomBar !== undefined ? props.bottomBar : bottom}
+        bottomBarVisibility={props.bottomBarVisibility ?? 'compact'}
+        floatingAction={props.floatingAction !== undefined ? props.floatingAction : (primaryAction && (!compact || !hasNavigation || props.bottomBar !== undefined) ? <Fab {...primaryAction} /> : undefined)}
+      />
+    </Screen>;
+  }
   const AdaptiveAppShell = AppShell;
   function ComposedAppShell(props: AppShellProps) {
     const adaptive = props.navigation !== undefined || props.navigationPlacement !== undefined
       || props.primaryAction !== undefined || props.scroll === 'auto' || props.scroll === 'external';
-    return adaptive ? <AdaptiveAppShell {...props} /> : <AppShellEngine {...props as AppShellEngineProps} />;
+    if (!adaptive) return <AppShellEngine {...props as AppShellEngineProps} />;
+    const scroll = props.scroll ?? (Platform.OS === 'web' ? 'document' : 'auto');
+    const usesLayout = props.panel !== undefined || props.panelColorPreset !== undefined || props.variant !== undefined || props.aside !== undefined || props.list !== undefined || props.info !== undefined
+      || props.contentWidth !== undefined || props.navigationAlign !== undefined || props.navigationGap !== undefined || props.drawer !== undefined
+      || props.navFrom !== undefined || props.navExpandedFrom !== undefined || props.topBar !== undefined
+      || props.bottomBar !== undefined || props.floatingAction !== undefined;
+    return (scroll === 'auto' || scroll === 'external') && !usesLayout
+      ? <AdaptiveAppShell {...props} scroll={scroll} />
+      : <EngineNavigationShell {...props} scroll={scroll} />;
   }
   ComposedAppShell.displayName = 'AppShell';
   return ComposedAppShell;

package/src/app-shell/AppShellBars.tsx

@@ -26,11 +26,12 @@
  * not, so a full-width FAB wrapper never swallows a tap on the content behind
  * it.
  */
-import React, { memo, useContext } from 'react';
+import React, { memo, useCallback, useContext, useRef, useState } from 'react';
 import { View, type LayoutChangeEvent } from 'react-native';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 import { WEB_POSITION_FIXED, WEB_POSITION_STICKY, type WebCssStyle } from '../styles/web-view-style';
+import { useClaimBottomEdge } from '../layout/bottom-edge';
 import { Z_INDEX } from '../styles/z-index';
 
 /** The safe-area insets, or zeros outside a `SafeAreaProvider`. */
@@ -75,11 +76,26 @@ const AppShellBottomBarComponent: React.FC<AppShellBottomBarProps> = ({
   testID,
 }) => {
   const insets = useShellInsets();
+  const [height, setHeight] = useState(0);
+  const measuredHeight = useRef(0);
+  // Layout already includes the safe-area padding. Publish, but never read,
+  // the registry here: using its result in this wrapper would feed back into
+  // the next measurement. Other edge claims combine with this one by max.
+  useClaimBottomEdge(height);
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const rawHeight = event.nativeEvent.layout.height;
+    if (!Number.isFinite(rawHeight)) return;
+    const next = Math.max(0, Math.round(rawHeight));
+    if (measuredHeight.current === next) return;
+    measuredHeight.current = next;
+    setHeight(next);
+    onHeightChange(next);
+  }, [onHeightChange]);
   return (
     <View
       testID={testID}
       pointerEvents="box-none"
-      onLayout={(event: LayoutChangeEvent) => onHeightChange(Math.round(event.nativeEvent.layout.height))}
+      onLayout={onLayout}
       style={[anchorBottom(doc), { paddingBottom: insets.bottom }]}
     >
       {children}