@oxy.so/bloom 7.1.4 → 7.2.0

package/src/agent-creator/EmotionPicker.tsx

@@ -12,26 +12,13 @@ import Animated, {
 } from 'react-native-reanimated';
 import { EYES, type AvatarConfig } from '../agent-avatar';
 import { AgentFace } from '../agent-avatar/AgentFace';
-import { ClippoArtwork } from './ClippoArtwork';
-import { CyclopsArtwork } from './CyclopsArtwork';
-import {
-  StyledImage,
-  StyledPressable,
-  StyledView,
-} from '../styles/styled-primitives';
+import { StyledImage, StyledPressable, StyledView } from '../styles/styled-primitives';
 import { useTheme } from '../theme/use-theme';
 import { useAgentCreatorMessages } from './context';
 import { useTrackEvents } from './use-track-events';
 
 const AnimatedView = Animated.createAnimatedComponent(StyledView);
-export type EmotionChoice = {
-  id: string;
-  label: string;
-  config: AvatarConfig;
-  disabled?: boolean;
-  thumbnail?: string;
-  artwork?: 'clippo' | 'cyclops';
-};
+export type EmotionChoice = { id: string; label: string; config: AvatarConfig; disabled?: boolean; thumbnail?: string };
 function Emotion({
   config,
   choice,
@@ -84,40 +71,21 @@ function Emotion({
           pointerEvents="auto"
           className={`pointer-events-auto flex size-[34px] cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 outline-none transition-[border-color,box-shadow] hover:ring-2 hover:ring-border-button-hover focus-visible:ring-2 focus-visible:ring-border-focus-ring ${active ? 'border-foreground-icon-secondary' : 'border-transparent'}`}
           style={{
-            backgroundColor:
-              backgroundColor ??
-              `hsl(${config.hue}, ${config.saturation}%, ${config.lightness ?? 80}%)`,
+            backgroundColor: backgroundColor ?? `hsl(${config.hue}, ${config.saturation}%, ${config.lightness ?? 80}%)`,
             borderColor: active ? colors.icon : 'transparent',
           }}
         >
-          {choice.artwork === 'cyclops' ? (
-            <CyclopsArtwork opacity={choice.disabled ? 0.35 : 1} />
-          ) : choice.artwork === 'clippo' ? (
-            <ClippoArtwork kind="eyes" opacity={choice.disabled ? 0.35 : 1} />
-          ) : choice.thumbnail ? (
-            <StyledImage
-              source={{ uri: choice.thumbnail }}
-              resizeMode="contain"
-              accessible={false}
-              style={{
-                width: 27,
-                height: 27,
-                opacity: choice.disabled ? 0.35 : 1,
-              }}
-            />
-          ) : (
-            <AgentFace
-              config={{
-                ...choice.config,
-                eyeSize: 24,
-                eyeGap: 36,
-                lookAt: 'center',
-                motion: 0,
-                idle: false,
-              }}
-              size={34}
-            />
-          )}
+          {choice.thumbnail ? <StyledImage source={{ uri: choice.thumbnail }} resizeMode="contain" accessible={false} style={{ width: 27, height: 27, opacity: choice.disabled ? 0.35 : 1 }} /> : <AgentFace
+            config={{
+              ...choice.config,
+              eyeSize: 24,
+              eyeGap: 36,
+              lookAt: 'center',
+              motion: 0,
+              idle: false,
+            }}
+            size={34}
+          />}
         </StyledPressable>
       </AnimatedView>
     </StyledView>
@@ -141,16 +109,9 @@ export function EmotionPicker({
   onChange: (eyes: AvatarConfig['eyes']) => void;
 }) {
   const messages = useAgentCreatorMessages();
-  const choices =
-    choicesProp ??
-    EYES.map((eyes) => ({
-      id: eyes,
-      label: messages.emotions[eyes],
-      config: { ...config, eyes },
-    }));
+  const choices = choicesProp ?? EYES.map((eyes) => ({ id: eyes, label: messages.emotions[eyes], config: { ...config, eyes } }));
   const value = valueProp ?? config.eyes;
-  const emit = (id: string) =>
-    onSelect ? onSelect(id) : onChange(id as AvatarConfig['eyes']);
+  const emit = (id: string) => onSelect ? onSelect(id) : onChange(id as AvatarConfig['eyes']);
   const ref = useRef<View>(null);
   const visible = useSharedValue(true);
   const target = useSharedValue(0);

package/src/agent-creator/ShapeSilhouette.tsx

@@ -1,12 +1,9 @@
-import { characterShapeGeometry } from '../agent-avatar/character-shapes';
 import { memo } from 'react';
 import Svg, { Path } from 'react-native-svg';
 import { legacyContours } from '../agent-avatar/legacy-contours';
 import { radialContour } from '../agent-avatar/legacy-recipe';
 import type { AvatarConfig } from '../agent-avatar/model';
 import { CHARACTER_COLORS } from './constants';
-import { ClippoArtwork } from './ClippoArtwork';
-import { ToddArtwork } from './ToddArtwork';
 
 const silhouettes = new Map<string, { path: string; viewBox: string }>();
 
@@ -52,19 +49,7 @@ export const ShapeSilhouette = memo(function ShapeSilhouette({
 }: {
   config: AvatarConfig;
 }) {
-  if (
-    config.character?.selections?.shape === 'todd' ||
-    (config.character?.preset === 'lime_frog' &&
-      !config.character.selections?.shape)
-  )
-    return <ToddArtwork />;
-  if (
-    config.character?.selections?.shape === 'clippo' ||
-    (config.character?.preset === 'clippo' &&
-      !config.character.selections?.shape)
-  )
-    return <ClippoArtwork kind="shape" />;
-  const { path, viewBox } = silhouette(characterShapeGeometry(config));
+  const { path, viewBox } = silhouette(config);
   return (
     <Svg
       width={56}

package/src/agent-creator/__tests__/support/character-runtime-fixture.tsx

@@ -0,0 +1,26 @@
+import type { ContextType, ReactNode } from 'react';
+import {
+  CharacterCapabilitiesContext,
+  CharacterRuntimeContext,
+} from '../../../agent-avatar/context';
+
+/** Supply both internal channels without starting the browser engine in UI tests. */
+export function CharacterRuntimeFixture({
+  value,
+  children,
+}: {
+  value: ContextType<typeof CharacterRuntimeContext> &
+    ContextType<typeof CharacterCapabilitiesContext>;
+  children: ReactNode;
+}) {
+  const { runtimeUrl, reportCapabilities, ...catalog } = value;
+  return (
+    <CharacterRuntimeContext.Provider
+      value={{ runtimeUrl, reportCapabilities }}
+    >
+      <CharacterCapabilitiesContext.Provider value={catalog}>
+        {children}
+      </CharacterCapabilitiesContext.Provider>
+    </CharacterRuntimeContext.Provider>
+  );
+}

package/src/agent-creator/constants.ts

@@ -1,4 +1,3 @@
-import { NATIVE_CHARACTER_SHAPES } from '../agent-avatar/character-shapes';
 import type { AgentLanguage, AgentPreferences } from './types';
 export const AGENT_LANGUAGES = [
   { id: 'auto', label: 'Auto-detect' },
@@ -59,7 +58,6 @@ export const PREVIEW_TEXT: Record<AgentLanguage, string> = {
 
 // Recovered engine catalog metadata. IDs are renderer selections; titles retain the beta catalog's English defaults.
 export const CHARACTER_PRESETS = [
-  { id: 'clippo', title: 'Clippo' },
   { id: 'blue_beret', title: 'Felipe' },
   { id: 'alfred', title: 'Alfred' },
   { id: 'purple_heart', title: 'Jojo' },
@@ -70,51 +68,20 @@ export const CHARACTER_PRESETS = [
   { id: 'lime_headphones', title: 'Iggy' },
 ] as const;
 export const CHARACTER_OPTIONS = {
-  shape: NATIVE_CHARACTER_SHAPES,
-  color: [
-    ['pink', 'Pink'],
-    ['orchid', 'Orchid'],
-    ['violet', 'Violet'],
-    ['blue', 'Blue'],
-    ['cyan', 'Cyan'],
-    ['teal', 'Teal'],
-    ['lime', 'Lime'],
-    ['yellow', 'Yellow'],
-    ['coral', 'Coral'],
-  ],
-  eyes: [
-    ['cyclops', 'Single eye'],
-    ['clippo', 'Clippo'],
-    ['todd', 'Todd'],
-    ['swept_lids', 'Swept lids'],
-    ['oval', 'Oval'],
-    ['sparkle_capsules', 'Sparkle capsules'],
-    ['highlight_capsules', 'Highlight capsules'],
-    ['dots', 'Dots'],
-    ['double_highlights', 'Round highlights'],
-    ['round_inset', 'Round inset'],
-    ['crescent_inset', 'Crescent inset'],
-    ['sleepy_lids', 'Sleepy lids'],
-  ],
-  eyewear: [
-    ['none', 'None'],
-    ['monocle', 'Monocle'],
-    ['tall_oval_frames', 'Tall oval frames'],
-    ['separate_trapezoid_lenses', 'Separate trapezoid lenses'],
-    ['classic_sunglasses', 'Classic sunglasses'],
-    ['round_sunglasses', 'Round sunglasses'],
-  ],
-  accessory: [
-    ['headphones', 'Headphones'],
-    ['bow', 'Bow tie'],
-    ['beanie', 'Beanie'],
-    ['hat', 'Hat'],
-    ['beret', 'Beret'],
-    ['felipe_beret', 'Felipe’s beret'],
-    ['orb', 'Bulb'],
-    ['three_lobe', 'Tuft'],
-    ['crown', 'Crown'],
+  shape: [
+    ['circle', 'Circle'], ['rounded_triangle', 'Rounded triangle'], ['capsule', 'Capsule'],
+    ['rounded_head_two_ears', 'Rounded head with two ears'], ['six_lobed_flower', 'Six lobed flower'],
+    ['heart', 'Heart'], ['four_lobed_butterfly', 'Four lobed butterfly'], ['circle_two_ears', 'Circle with two ears'],
+    ['twelve_scalloped_rosette', 'Twelve scalloped rosette'], ['rounded_cube', 'Hexagon'], ['rounded_diamond', 'Rounded diamond'],
   ],
+  color: [['pink', 'Pink'], ['orchid', 'Orchid'], ['violet', 'Violet'], ['blue', 'Blue'], ['cyan', 'Cyan'], ['teal', 'Teal'], ['lime', 'Lime'], ['yellow', 'Yellow'], ['coral', 'Coral']],
+  eyes: [['swept_lids', 'Swept lids'], ['oval', 'Oval'], ['sparkle_capsules', 'Sparkle capsules'], ['highlight_capsules', 'Highlight capsules'], ['dots', 'Dots'], ['double_highlights', 'Round highlights'], ['round_inset', 'Round inset'], ['crescent_inset', 'Crescent inset'], ['sleepy_lids', 'Sleepy lids']],
+  eyewear: [['none', 'None'], ['monocle', 'Monocle'], ['tall_oval_frames', 'Tall oval frames'], ['separate_trapezoid_lenses', 'Separate trapezoid lenses'], ['classic_sunglasses', 'Classic sunglasses'], ['round_sunglasses', 'Round sunglasses']],
+  accessory: [['headphones', 'Headphones'], ['bow', 'Bow tie'], ['beanie', 'Beanie'], ['hat', 'Hat'], ['beret', 'Beret'], ['orb', 'Bulb'], ['three_lobe', 'Tuft'], ['crown', 'Crown']],
 } as const;
 
-export { CHARACTER_COLORS } from '../agent-avatar/character-colors';
+/** RGB swatches returned by the recovered engine's Color catalog. */
+export const CHARACTER_COLORS = {
+  pink: '#fa70ab', orchid: '#dd6adc', violet: '#a25bff', blue: '#4778ff', cyan: '#00b1ff',
+  teal: '#04bb9f', lime: '#b6d80b', yellow: '#ffcc38', coral: '#ff8066',
+} as const;

package/src/agent-creator/messages.ts

@@ -114,8 +114,7 @@ export const AGENT_CREATOR_MESSAGES: MessageCatalog<AgentCreatorMessages> =
     betaEyes: 'Eye style',
     eyewear: 'Eyewear',
     accessory: 'Accessory',
-    characterOption: (category, id, title) =>
-      category === 'eyes' && id === 'cyclops' ? 'Single eye' : String(title),
+    characterOption: (_category, _id, title) => String(title),
     editor: 'Agent editor',
     newBot: 'New bot',
     closeEditor: 'Close agent editor',

package/src/app-shell/AppShell.tsx

@@ -84,7 +84,7 @@ export function createAppShell(BottomBar: ComponentType<BottomBarProps>, Fab: Co
       ) : null}
       <Screen navigationScope="shared" active={active} documentScroll={scroll === 'external'} testID={testID ? `${testID}-screen` : undefined} style={{ minWidth: 0 }} header={header ?? (title ? <PageHeader title={title} subtitle={breadcrumb} actions={actions} sticky={false} /> : null)} bottomBar={bottom} primaryAction={placement !== 'bottom' && primaryAction ? <Fab {...primaryAction} /> : undefined}>
         {scroll === 'auto' ? <ScreenScrollView style={{ flex: 1 }}>
-          <View style={{ width: '100%', maxWidth: contentMaxWidth, alignSelf: 'center', padding: 16, gap: 16 }}>{children}</View>
+          <View testID={testID ? `${testID}-content` : undefined} style={{ width: '100%', maxWidth: contentMaxWidth === 'none' ? undefined : contentMaxWidth, alignSelf: 'center', padding: 16, gap: 16 }}>{children}</View>
         </ScreenScrollView> : children}
         {overlay}
       </Screen>
@@ -151,7 +151,7 @@ export function createAppShell(BottomBar: ComponentType<BottomBarProps>, Fab: Co
       || props.primaryAction !== undefined || props.scroll === 'auto' || props.scroll === 'external';
     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
+    const usesLayout = props.safeArea !== undefined || 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;

package/src/app-shell/AppShellBars.tsx

@@ -36,13 +36,13 @@ import { useClaimBottomEdge } from '../layout/bottom-edge';
 import { Z_INDEX } from '../styles/z-index';
 
 /** The safe-area insets, or zeros outside a `SafeAreaProvider`. */
-export function useShellInsets(): { top: number; bottom: number } {
+export function useShellInsets(): { top: number; right: number; bottom: number; left: number } {
   // `useContext(SafeAreaInsetsContext)` rather than `useSafeAreaInsets()`: the
   // hook THROWS outside a provider, and `AppShell` is mounted at an app's root,
   // where making a previously-optional provider mandatory would be a breaking
   // change for every consumer that never had a bar to inset.
   const insets = useContext(SafeAreaInsetsContext);
-  return { top: insets?.top ?? 0, bottom: insets?.bottom ?? 0 };
+  return insets ?? { top: 0, right: 0, bottom: 0, left: 0 };
 }
 
 /** Pinned to the bottom of the viewport (document scroll) or of the frame. */
@@ -152,6 +152,8 @@ export const AppShellFloatingAction = memo(AppShellFloatingActionComponent);
 AppShellFloatingAction.displayName = 'AppShellFloatingAction';
 
 export interface AppShellTopBarProps {
+  /** The enclosing safe frame may already own the top inset. */
+  insetTop?: number;
   children: React.ReactNode;
   onHeightChange?: (height: number) => void;
   doc: boolean;
@@ -167,11 +169,11 @@ export interface AppShellTopBarProps {
  * only as far as `top: 0`); in `container`/`fixed` and on native it is simply
  * outside the scroller, which pins it by construction.
  */
-const AppShellTopBarComponent: React.FC<AppShellTopBarProps> = ({ children, doc, testID, onHeightChange }) => {
+const AppShellTopBarComponent: React.FC<AppShellTopBarProps> = ({ children, doc, testID, onHeightChange, insetTop }) => {
   const insets = useShellInsets();
   const pinned: WebCssStyle = doc ? { position: WEB_POSITION_STICKY, top: 0 } : {};
   return (
-    <View testID={testID} onLayout={event => onHeightChange?.(event.nativeEvent.layout.height)} style={[{ zIndex: Z_INDEX.floating, paddingTop: insets.top }, pinned]}>
+    <View testID={testID} onLayout={event => onHeightChange?.(event.nativeEvent.layout.height)} style={[{ zIndex: Z_INDEX.floating, paddingTop: insetTop ?? insets.top }, pinned]}>
       {children}
     </View>
   );

package/src/app-shell/AppShellEngine.tsx

@@ -106,6 +106,7 @@ export function createAppShellEngine(
 ) {
 const AppShellComponent: React.FC<AppShellEngineProps> = ({
   variant = 'dashboard',
+  safeArea = false,
   navigationAlign = 'edge',
   navigationGap,
   asideGap,
@@ -166,6 +167,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   const [asideHeight, setAsideHeight] = useState(0);
   const { width, onLayout } = useShellWidth();
   const insets = useShellInsets();
+  const ownsSafeArea = safeArea && Platform.OS !== 'web';
   const mode = resolveScrollMode(variant, scroll);
   const doc = mode === 'document';
   const fixed = mode === 'fixed';
@@ -175,6 +177,10 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   // for every other shape.
   const gutter = gutterProp ?? (variant === 'dashboard' ? D.dashboardGutter : D.gutter);
   const columnGap = variant === 'dashboard' ? D.dashboardColumnGap : gutter;
+  // Historical reveal geometry stays the default; an explicit gutter owns
+  // every frame edge, including the old extra top gap at wider breakpoints.
+  const revealGutter = gutterProp ?? 12;
+  const revealTopGutter = gutterProp ?? (small ? 24 : 12);
 
   // The nav: `navExpandedFrom` decides which sidebar variant is drawn, and the
   // variant decides how early it can sit in flow (a rail is narrow enough at
@@ -290,6 +296,24 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   const showTopBar = topBar != null && barActive(topBarVisibility);
   const showBottomBar = bottomBar != null && barActive(bottomBarVisibility);
   const showFloatingAction = floatingAction != null;
+  // Preserve the real device insets for fullscreen dialogs and portals. Only
+  // the bounded shell consumes these edges; bottom chrome keeps its own inset.
+  const bottomChrome = showBottomBar || showFloatingAction;
+  const frameBottomInset = ownsSafeArea && !bottomChrome ? insets.bottom : 0;
+  const navigationBottomInset = ownsSafeArea && bottomChrome ? insets.bottom : 0;
+  const safeFrame = (node: React.ReactElement) => ownsSafeArea ? (
+    <View {...dirProps} testID={testID ? `${testID}-safe-area` : undefined} style={{
+      flex: 1, minHeight: 0, minWidth: 0,
+      paddingTop: insets.top,
+      paddingInlineStart: rtl ? insets.right : insets.left,
+      paddingInlineEnd: rtl ? insets.left : insets.right,
+      paddingBottom: frameBottomInset, backgroundColor: background,
+    }}>{node}</View>
+  ) : node;
+
+  const safeNavigation = (node: React.ReactElement) => navigationBottomInset ? (
+    <View style={{ flexShrink: 0, paddingBottom: navigationBottomInset }}>{node}</View>
+  ) : node;
   const [topBarHeight, setTopBarHeight] = useState(0);
   const [bottomBarHeight, setBottomBarHeight] = useState(0);
   const [floatingActionHeight, setFloatingActionHeight] = useState(0);
@@ -328,7 +352,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   );
 
   const topBarNode = showTopBar ? (
-    <AppShellTopBar doc={doc} onHeightChange={setTopBarHeight} testID={testID ? `${testID}-top-bar` : undefined}>
+    <AppShellTopBar insetTop={ownsSafeArea ? 0 : undefined} doc={doc} onHeightChange={setTopBarHeight} testID={testID ? `${testID}-top-bar` : undefined}>
       {topBar}
     </AppShellTopBar>
   ) : null;
@@ -363,7 +387,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
 
   const fill = fixed ? { flex: 1, minHeight: 0 } : null;
   const column = (
-    <View style={[{ width: '100%', maxWidth: contentMaxWidth, alignSelf: 'center', gap: 10 }, fill]}>
+    <View testID={testID ? `${testID}-content` : undefined} style={[{ width: '100%', maxWidth: contentMaxWidth === 'none' ? undefined : contentMaxWidth, alignSelf: 'center', gap: 10 }, fill]}>
       {headerNode}
       <View
         style={[
@@ -432,7 +456,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   const veilStyle = useAnimatedStyle(() => ({ opacity: reveal.value }), [reveal]);
 
   if (drawerStyle === 'reveal' && variant === 'dashboard') {
-    return (
+    return safeFrame(
       <AppShellProvider value={shell}>
         <View
           {...dirProps}
@@ -445,20 +469,21 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
               style={[
                 flowSidebar.surface === 'docked'
                   ? { flexShrink: 0 }
-                  : { paddingTop: 12, paddingBottom: 12, paddingInlineStart: 12, flexShrink: 0 },
+                  : { paddingTop: revealGutter, paddingBottom: revealGutter, paddingInlineStart: revealGutter, flexShrink: 0 },
                 doc ? stickyRail(0) : null,
               ]}
             >
-              <Sidebar {...flowSidebar} />
+              {safeNavigation(<Sidebar {...flowSidebar} />)}
             </View>
           ) : null}
           {drawerAvailable && drawerSidebar ? (
             <View
+              testID={testID ? `${testID}-navigation-drawer` : undefined}
               aria-hidden={!isOpen}
               pointerEvents={isOpen ? 'auto' : 'none'}
               // Fixed on web in document mode: the rail waits beneath the VIEWPORT,
               // wherever the page is scrolled to.
-              style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, insetInlineStart: 0, width: 272, paddingTop: 12, paddingBottom: 12, paddingInlineStart: 6 }}
+              style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, insetInlineStart: 0, width: 272, paddingTop: revealGutter, paddingBottom: revealGutter + navigationBottomInset, paddingInlineStart: revealGutter / 2 }}
             >
               <Animated.View style={[{ height: '100%', width: 260, transformOrigin: railOrigin }, railStyle]}>
                 <Sidebar {...drawerSidebar} mobile surface="plain" onClose={() => setOpen(false)} />
@@ -487,13 +512,13 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
               // layered over the shorthand, and only when there is one.
               contentStyle={
                 contentReserve
-                  ? { paddingLeft: 12, paddingRight: 12, paddingTop: small ? 24 : 12, paddingBottom: 12 + contentReserve }
-                  : { padding: 12, paddingTop: small ? 24 : 12 }
+                  ? { paddingLeft: revealGutter, paddingRight: revealGutter, paddingTop: revealTopGutter, paddingBottom: revealGutter + contentReserve }
+                  : { padding: revealGutter, paddingTop: revealTopGutter }
               }
             >
               {column}
             </Scroller>
-            {asideColumn({ paddingTop: small ? 24 : 12, paddingBottom: 12, paddingInlineEnd: 12 })}
+            {asideColumn({ paddingTop: revealTopGutter, paddingBottom: revealGutter, paddingInlineEnd: revealGutter })}
             {!wide ? (
               <Animated.View
                 pointerEvents={isOpen ? 'auto' : 'none'}
@@ -758,15 +783,15 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
     navInFlow && flowSidebar ? (
       doc ? (
         <View testID={testID ? `${testID}-navigation` : undefined} style={stickyRail(dockedNav || plainFrame ? 0 : gutter)}>
-          <Sidebar {...flowSidebar} />
+          {safeNavigation(<Sidebar {...flowSidebar} />)}
         </View>
       ) : canvas && !dockedNav ? (
         // The canvas row has no padding of its own, so the nav states its.
         <View style={{ paddingTop: gutter, paddingBottom: gutter, paddingInlineStart: gutter, flexShrink: 0 }}>
-          <Sidebar {...flowSidebar} />
+          {safeNavigation(<Sidebar {...flowSidebar} />)}
         </View>
       ) : (
-        <Sidebar {...flowSidebar} />
+        safeNavigation(<Sidebar {...flowSidebar} />)
       )
     ) : null;
 
@@ -783,7 +808,15 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
           <View
             {...dirProps}
             pointerEvents="box-none"
-            style={{ position: 'absolute', top: 0, bottom: 0, insetInlineStart: 0, flexDirection: 'row', padding: 12 }}
+            testID={testID ? `${testID}-navigation-drawer` : undefined}
+            style={{ position: 'absolute', top: 0, bottom: 0, insetInlineStart: 0, flexDirection: 'row',
+              ...(ownsSafeArea ? {
+                paddingTop: 12 + insets.top,
+                paddingBottom: 12 + insets.bottom,
+                paddingInlineStart: 12 + (rtl ? insets.right : insets.left),
+                paddingInlineEnd: 12 + (rtl ? insets.left : insets.right),
+              } : { padding: 12 }),
+            }}
           >
             <View pointerEvents="auto" style={{ height: '100%' }}>
               <Sidebar {...drawerSidebar} mobile onClose={() => setOpen(false)} />
@@ -810,12 +843,12 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   };
 
   if (variant === 'feed' && drawerStyle === 'reveal' && drawerAvailable) {
-    return (
+    return safeFrame(
       <AppShellProvider value={shell}>
         <View {...dirProps} testID={testID} onLayout={onLayout}
           style={[frame, { overflow: doc ? WEB_OVERFLOW_CLIP : 'hidden', backgroundColor: background }, style]}>
-          <View aria-hidden={!isOpen} pointerEvents={isOpen ? 'auto' : 'none'}
-            style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, insetInlineStart: 0, width: 272, paddingTop: 12, paddingBottom: 12, paddingInlineStart: 6 }}>
+          <View testID={testID ? `${testID}-navigation-drawer` : undefined} aria-hidden={!isOpen} pointerEvents={isOpen ? 'auto' : 'none'}
+            style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, insetInlineStart: 0, width: 272, paddingTop: revealGutter, paddingBottom: revealGutter + navigationBottomInset, paddingInlineStart: revealGutter / 2 }}>
             <Animated.View style={[{ height: '100%', width: 260, transformOrigin: railOrigin }, railStyle]}>
               {drawerSidebar && <Sidebar {...drawerSidebar} mobile surface="plain" onClose={() => setOpen(false)} />}
             </Animated.View>
@@ -850,7 +883,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   // edge without escaping the frame's padding. Without one the root stays the
   // row it has always been, so nothing about an existing shell moves.
   if (topBarNode) {
-    return (
+    return safeFrame(
       <AppShellProvider value={shell}>
         <View
           {...dirProps}
@@ -871,7 +904,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
     );
   }
 
-  return (
+  return safeFrame(
     <AppShellProvider value={shell}>
       <View {...dirProps} testID={testID} onLayout={onLayout} style={[frame, rowStyle, style]}>
         {navRegion}

package/src/app-shell/types.ts

@@ -67,6 +67,14 @@ export type AppShellScroll = 'document' | 'container' | 'fixed';
 export type AppShellBarVisibility = 'compact' | 'always';
 
 export interface AppShellEngineProps {
+  /**
+   * Native: keep the shell, navigation and pages inside the device's safe area.
+   * The bottom-bar slot still owns its bottom inset; without bottom chrome the
+   * frame reserves it. Use `safeArea={false}` on descendant PageHeaders because
+   * the frame already owns their top edge. Device insets remain available to
+   * dialogs and other portaled surfaces. Defaults to false; no effect on web.
+   */
+  safeArea?: boolean;
   /**
    * The layout shape. Defaults to `dashboard` — the behaviour this component
    * had before variants existed, down to the pixel.
@@ -124,8 +132,8 @@ export interface AppShellEngineProps {
    */
   asideCollapse?: 'stack' | 'hidden';
   children?: ReactNode;
-  /** The content column's max width. Defaults to 1300. */
-  contentMaxWidth?: number;
+  /** The content column's max width. Defaults to 1300; `none` fills the available width. */
+  contentMaxWidth?: number | 'none';
   /** Floating extras rendered last, e.g. a `ProOfferCard`. */
   overlay?: ReactNode;
   /** Controlled drawer state (below `lg`). */
@@ -364,7 +372,7 @@ export interface AppShellNavigationProps {
   actions?: ReactNode;
   header?: ReactNode;
   children?: ReactNode;
-  contentMaxWidth?: number;
+  contentMaxWidth?: number | 'none';
   overlay?: ReactNode;
   style?: StyleProp<ViewStyle>;
   testID?: string;

package/src/appearance/BloomScope.tsx

@@ -3,8 +3,11 @@ import { BloomAppearanceContext } from './context';
 import type { BloomScopeProps } from './types';
 
 /** A visual environment only: never inherits actions, selection or disabled state. */
-export function BloomScope({ children, size, tone }: BloomScopeProps) {
+export function BloomScope({ children, size, tone, panelRadius }: BloomScopeProps) {
+  if (panelRadius !== undefined && (!Number.isFinite(panelRadius) || panelRadius < 0)) {
+    throw new RangeError('panelRadius must be a finite, non-negative number.');
+  }
   const parent = useContext(BloomAppearanceContext);
-  const value = useMemo(() => ({ size: size ?? parent.size, tone: tone ?? parent.tone }), [size, tone, parent]);
+  const value = useMemo(() => ({ size: size ?? parent.size, tone: tone ?? parent.tone, panelRadius: panelRadius ?? parent.panelRadius }), [size, tone, panelRadius, parent]);
   return <BloomAppearanceContext.Provider value={value}>{children}</BloomAppearanceContext.Provider>;
 }

package/src/appearance/context.ts

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
-import type { BloomAppearanceProps } from './types';
+import type { BloomAppearanceProps, BloomScopeProps } from './types';
 
-export const BloomAppearanceContext = createContext<BloomAppearanceProps>({});
+export const BloomAppearanceContext = createContext<Omit<BloomScopeProps, 'children'>>({});
 
 /** Explicit props override the nearest scope, then the family's defaults. */
 export function useBloomAppearance(

package/src/appearance/types.ts

@@ -8,4 +8,7 @@ export interface BloomAppearanceProps {
   size?: BloomSize;
   tone?: BloomTone;
 }
-export type BloomScopeProps = PropsWithChildren<BloomAppearanceProps>;
+export type BloomScopeProps = PropsWithChildren<BloomAppearanceProps & {
+  /** Shared corner radius for framed content panels and card sidebars. Defaults to 28. */
+  panelRadius?: number;
+}>;