@oxy.so/bloom 4.0.0 → 4.1.0

package/lib/module/app-shell/AppShellEngine.js

@@ -1,15 +1,16 @@
 "use strict";
 
+import { StyledView } from "../styles/styled-primitives.js";
+import { SurfaceLevelProvider } from "../styles/surface-levels.js";
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { Platform, Pressable, ScrollView, View } from 'react-native';
+import { Platform, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
-import { ContentPanel } from '../content-panel';
 import { useControllableState } from "../hooks/use-controllable-state.js";
 import { Backdrop, OverlayRoot } from "../overlay/index.js";
 import { Portal } from '../portal';
 import { Sidebar } from "../sidebar/index.js";
 import { BREAKPOINTS } from "../styles/breakpoints.js";
-import { WEB_OVERFLOW_CLIP, WEB_POSITION_FIXED } from "../styles/web-view-style.js";
+import { WEB_OVERFLOW_CLIP, WEB_POSITION_FIXED, WEB_POSITION_STICKY } from "../styles/web-view-style.js";
 import { useTheme } from "../theme/use-theme.js";
 import { AppShellBottomBar, AppShellFloatingAction, AppShellTopBar, useShellInsets } from "./AppShellBars.js";
 import { AppShellHeader } from "./AppShellHeader.js";
@@ -54,7 +55,7 @@ import { useShellWidth } from "./use-shell-width.js";
  * own anchor — all inside the shell. No negative margin, no `100vw`, no
  * window-width hook, anywhere.
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const REVEAL_EASE = Easing.bezier(0.42, 0, 0.58, 1);
 const REVEAL_MS = 325;
 const REVEAL_OFFSET = 272;
@@ -95,730 +96,906 @@ function Scroller({
     children: children
   });
 }
-const AppShellComponent = ({
-  variant = 'dashboard',
-  sidebar,
-  drawer = 'overlay',
-  title,
-  breadcrumb,
-  actions,
-  header,
-  aside,
-  asideWidth = D.asideWidth,
-  asideFrom = D.asideFrom,
-  asideCollapse = 'stack',
-  children,
-  contentMaxWidth = D.contentMaxWidth,
-  contentWidth = D.contentWidth,
-  gutter: gutterProp,
-  navFrom,
-  navExpandedFrom,
-  panel = false,
-  framedFrom,
-  list,
-  info,
-  pane = 'list',
-  listWidth = D.listWidth,
-  listMinWidth = D.listMinWidth,
-  listMaxWidth = D.listMaxWidth,
-  onListWidthChange,
-  infoWidth = D.infoWidth,
-  splitFrom = D.splitFrom,
-  infoFrom = D.infoFrom,
-  resizable = true,
-  resizeLabel = 'Resize panes',
-  paneScroll = true,
-  topBar,
-  topBarVisibility = 'compact',
-  bottomBar,
-  bottomBarVisibility = 'compact',
-  floatingAction,
-  floatingActionPlacement = 'end',
-  overlay,
-  drawerOpen,
-  onDrawerOpenChange,
-  scroll = 'document',
-  style,
-  testID
-}) => {
-  const theme = useTheme();
-  const {
-    width,
-    onLayout
-  } = useShellWidth();
-  const insets = useShellInsets();
-  const mode = resolveScrollMode(variant, scroll);
-  const doc = mode === 'document';
-  const fixed = mode === 'fixed';
-  const small = width >= BREAKPOINTS.sm;
+export function createAppShellEngine(ContentPanel, BloomColorScope) {
+  const AppShellComponent = ({
+    variant = 'dashboard',
+    navigationAlign = 'edge',
+    navigationGap,
+    asideGap,
+    sidebar,
+    drawer = 'overlay',
+    title,
+    breadcrumb,
+    actions,
+    header,
+    aside,
+    asideWidth = D.asideWidth,
+    asideFrom = D.asideFrom,
+    asideCollapse = 'stack',
+    children,
+    contentMaxWidth = D.contentMaxWidth,
+    contentWidth = D.contentWidth,
+    gutter: gutterProp,
+    navFrom,
+    navExpandedFrom,
+    panel = false,
+    panelColorPreset,
+    framedFrom,
+    list,
+    info,
+    pane = 'list',
+    listWidth = D.listWidth,
+    listMinWidth = D.listMinWidth,
+    listMaxWidth = D.listMaxWidth,
+    onListWidthChange,
+    infoWidth = D.infoWidth,
+    splitFrom = D.splitFrom,
+    infoFrom = D.infoFrom,
+    resizable = true,
+    resizeLabel = 'Resize panes',
+    paneScroll = true,
+    topBar,
+    topBarVisibility = 'compact',
+    bottomBar,
+    bottomBarVisibility = 'compact',
+    reserveBottomBarSpace = true,
+    floatingAction,
+    floatingActionPlacement = 'end',
+    overlay,
+    drawerOpen,
+    onDrawerOpenChange,
+    scroll = 'document',
+    style,
+    testID
+  }) => {
+    const theme = useTheme();
+    const {
+      height: viewportHeight
+    } = useWindowDimensions();
+    const [asideHeight, setAsideHeight] = useState(0);
+    const {
+      width,
+      onLayout
+    } = useShellWidth();
+    const insets = useShellInsets();
+    const mode = resolveScrollMode(variant, scroll);
+    const doc = mode === 'document';
+    const fixed = mode === 'fixed';
+    const small = width >= BREAKPOINTS.sm;
 
-  // `dashboard` keeps the 12/16 pair it shipped with; one number drives both
-  // for every other shape.
-  const gutter = gutterProp ?? (variant === 'dashboard' ? D.dashboardGutter : D.gutter);
-  const columnGap = variant === 'dashboard' ? D.dashboardColumnGap : gutter;
+    // `dashboard` keeps the 12/16 pair it shipped with; one number drives both
+    // for every other shape.
+    const gutter = gutterProp ?? (variant === 'dashboard' ? D.dashboardGutter : D.gutter);
+    const columnGap = variant === 'dashboard' ? D.dashboardColumnGap : gutter;
 
-  // 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
-  // `sm`; the panel needs `lg`). `navFrom` overrides the tier outright.
-  const navVariant = navExpandedFrom ? width >= breakpointPx(navExpandedFrom) ? 'panel' : 'rail' : sidebar?.variant;
-  const navTier = navFrom ?? (navExpandedFrom || navVariant === 'rail' ? 'sm' : 'lg');
-  const wide = width >= breakpointPx(navTier);
-  // `focus` is the one shape with no navigation at all.
-  const hasNav = variant !== 'focus' && sidebar != null;
-  const navInFlow = hasNav && wide;
-  const flowSidebar = sidebar ? {
-    ...sidebar,
-    variant: navVariant
-  } : undefined;
-  // The drawer always opens the full panel, whatever the in-flow variant.
-  const drawerSidebar = sidebar ? {
-    ...sidebar,
-    variant: 'panel'
-  } : undefined;
+    // 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
+    // `sm`; the panel needs `lg`). `navFrom` overrides the tier outright.
+    const navVariant = navExpandedFrom ? width >= breakpointPx(navExpandedFrom) ? 'panel' : 'rail' : sidebar?.variant;
+    const navTier = navFrom ?? (navExpandedFrom || navVariant === 'rail' ? 'sm' : 'lg');
+    const wide = width >= breakpointPx(navTier);
+    // `focus` is the one shape with no navigation at all.
+    const hasNav = variant !== 'focus' && sidebar != null;
+    const navInFlow = hasNav && wide;
+    // One responsive owner: a shell panel follows its in-flow navigation unless
+    // the caller explicitly requests an independent framing breakpoint.
+    const managedPanel = panel === true && hasNav && framedFrom === undefined;
+    const compactPanel = managedPanel && !navInFlow;
+    const panelFramed = managedPanel ? navInFlow : undefined;
+    const flowSidebar = sidebar ? {
+      ...sidebar,
+      variant: navVariant
+    } : undefined;
+    // The drawer always opens the full panel, whatever the in-flow variant.
+    const drawerSidebar = sidebar ? {
+      ...sidebar,
+      variant: 'panel'
+    } : undefined;
 
-  /**
-   * `reveal` slides the WHOLE PAGE 272px sideways to uncover the rail, which is
-   * a statement about a page that is one column. A centred reading column would
-   * slide out of its own centring, and a split's panes would each leave their
-   * divider behind — so the other three shapes always get the overlay drawer.
-   */
-  const drawerStyle = variant === 'dashboard' ? drawer : 'overlay';
-  const centred = variant === 'feed' || variant === 'focus';
-  const canvas = variant === 'canvas';
-  // `focus` is a single column by definition and `split` has its `info` pane
-  // instead, so neither takes an aside in EITHER position — beside or stacked.
-  const hasAside = aside != null && variant !== 'focus' && variant !== 'split';
-  const asideBeside = hasAside && width >= breakpointPx(asideFrom);
-  // A canvas has no scrolling column to stack an aside into — the screen IS the
-  // canvas — so below `asideFrom` the aside is dropped whatever `asideCollapse`
-  // says, rather than being rendered where nothing can reach it.
-  const asideStacked = hasAside && !asideBeside && asideCollapse === 'stack' && !canvas;
-  const reducedMotion = useReducedMotion();
-  const [open, setOpen] = useControllableState({
-    value: drawerOpen,
-    defaultValue: false,
-    onChange: onDrawerOpenChange
-  });
-  const drawerAvailable = hasNav && !wide;
-  const isOpen = open && drawerAvailable;
-  const shell = useMemo(() => ({
-    drawerAvailable,
-    drawerOpen: isOpen,
-    openDrawer: () => setOpen(true),
-    closeDrawer: () => setOpen(false),
-    toggleDrawer: () => setOpen(!isOpen)
-  }), [drawerAvailable, isOpen, setOpen]);
+    // A feed may reveal its navigation while compact; its desktop column layout
+    // remains on the normal path below.
+    const drawerStyle = variant === 'dashboard' || variant === 'feed' ? drawer : 'overlay';
+    const centred = variant === 'feed' || variant === 'focus';
+    const canvas = variant === 'canvas';
+    // `focus` is a single column by definition and `split` has its `info` pane
+    // instead, so neither takes an aside in EITHER position — beside or stacked.
+    const hasAside = aside != null && variant !== 'focus' && variant !== 'split';
+    const asideBeside = hasAside && width >= breakpointPx(asideFrom);
+    // A canvas has no scrolling column to stack an aside into — the screen IS the
+    // canvas — so below `asideFrom` the aside is dropped whatever `asideCollapse`
+    // says, rather than being rendered where nothing can reach it.
+    const asideStacked = hasAside && !asideBeside && asideCollapse === 'stack' && !canvas;
+    const reducedMotion = useReducedMotion();
+    const [open, setOpen] = useControllableState({
+      value: drawerOpen,
+      defaultValue: false,
+      onChange: onDrawerOpenChange
+    });
+    const drawerAvailable = hasNav && !wide;
+    const isOpen = open && drawerAvailable;
+    useEffect(() => {
+      if (Platform.OS !== 'web' || !isOpen || drawerStyle !== 'reveal') return;
+      const dismiss = event => {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          setOpen(false);
+        }
+      };
+      document.addEventListener('keydown', dismiss);
+      return () => document.removeEventListener('keydown', dismiss);
+    }, [isOpen, drawerStyle, setOpen]);
+    const feedRevealAvailable = variant === 'feed' && drawerStyle === 'reveal' && drawerAvailable;
+    const feedRevealed = feedRevealAvailable && isOpen;
+    const shell = useMemo(() => ({
+      drawerAvailable,
+      drawerOpen: isOpen,
+      openDrawer: () => setOpen(true),
+      closeDrawer: () => setOpen(false),
+      toggleDrawer: () => setOpen(!isOpen)
+    }), [drawerAvailable, isOpen, setOpen]);
 
-  /**
-   * Closing the drawer hands focus back to whatever opened it.
-   *
-   * The drawer is a PORTAL, so when it closes the focused node leaves the
-   * document and the browser drops focus to `<body>` — a keyboard user is
-   * returned to the top of the page, and a screen reader announces nothing.
-   * Remembering `activeElement` at open time is what makes "Escape" land back
-   * on the hamburger. It reads the opener rather than a ref to Bloom's own
-   * button so a page that opens the drawer from its own control
-   * (`useAppShell().openDrawer`) gets the same behaviour.
-   *
-   * WEB ONLY, and the native gap is recorded rather than faked: the equivalent
-   * there is `useRestoreAccessibilityFocus`, which needs a ref to the trigger,
-   * and `Button` forwards none. See `docs/app-shell.mdx`.
-   */
-  const opener = useRef(null);
-  useEffect(() => {
-    if (Platform.OS !== 'web' || typeof document === 'undefined') return;
-    if (isOpen) {
-      opener.current = document.activeElement;
-      return;
-    }
-    const previous = opener.current;
-    opener.current = null;
-    if (previous && typeof previous.focus === 'function' && document.contains(previous)) previous.focus();
-  }, [isOpen]);
-  const background = theme.colors.background;
+    /**
+     * Closing the drawer hands focus back to whatever opened it.
+     *
+     * The drawer is a PORTAL, so when it closes the focused node leaves the
+     * document and the browser drops focus to `<body>` — a keyboard user is
+     * returned to the top of the page, and a screen reader announces nothing.
+     * Remembering `activeElement` at open time is what makes "Escape" land back
+     * on the hamburger. It reads the opener rather than a ref to Bloom's own
+     * button so a page that opens the drawer from its own control
+     * (`useAppShell().openDrawer`) gets the same behaviour.
+     *
+     * WEB ONLY, and the native gap is recorded rather than faked: the equivalent
+     * there is `useRestoreAccessibilityFocus`, which needs a ref to the trigger,
+     * and `Button` forwards none. See `docs/app-shell.mdx`.
+     */
+    const opener = useRef(null);
+    useEffect(() => {
+      if (Platform.OS !== 'web' || typeof document === 'undefined') return;
+      if (isOpen) {
+        opener.current = document.activeElement;
+        return;
+      }
+      const previous = opener.current;
+      opener.current = null;
+      if (previous && typeof previous.focus === 'function' && document.contains(previous)) previous.focus();
+    }, [isOpen]);
+    const background = theme.colors.background;
 
-  // ---- pinned slots -------------------------------------------------------
-  // `compact` is the phone case the slot exists for: the bar appears exactly
-  // where the nav became a drawer.
-  const barActive = visibility => visibility === 'always' || !navInFlow;
-  const showTopBar = topBar != null && barActive(topBarVisibility);
-  const showBottomBar = bottomBar != null && barActive(bottomBarVisibility);
-  const showFloatingAction = floatingAction != null;
-  const [bottomBarHeight, setBottomBarHeight] = useState(0);
-  const [floatingActionHeight, setFloatingActionHeight] = useState(0);
-  // Both slots are MEASURED rather than assumed: a bar's height is its
-  // content's, and a guess is what leaves the last row of a feed under it.
-  const bottomEdge = showBottomBar ? bottomBarHeight : insets.bottom;
-  const contentReserve = showBottomBar || showFloatingAction ? bottomEdge + (showFloatingAction ? floatingActionHeight + gutter : 0) : 0;
-  const bars = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [showBottomBar ? /*#__PURE__*/_jsx(AppShellBottomBar, {
-      doc: doc,
-      onHeightChange: setBottomBarHeight,
-      testID: testID ? `${testID}-bottom-bar` : undefined,
-      children: bottomBar
-    }) : null, showFloatingAction ? /*#__PURE__*/_jsx(AppShellFloatingAction, {
+    // ---- pinned slots -------------------------------------------------------
+    // `compact` is the phone case the slot exists for: the bar appears exactly
+    // where the nav became a drawer.
+    const barActive = visibility => visibility === 'always' || !navInFlow;
+    const showTopBar = topBar != null && barActive(topBarVisibility);
+    const showBottomBar = bottomBar != null && barActive(bottomBarVisibility);
+    const showFloatingAction = floatingAction != null;
+    const [bottomBarHeight, setBottomBarHeight] = useState(0);
+    const [floatingActionHeight, setFloatingActionHeight] = useState(0);
+    // Both slots are MEASURED rather than assumed: a bar's height is its
+    // content's, and a guess is what leaves the last row of a feed under it.
+    const bottomEdge = showBottomBar ? bottomBarHeight : insets.bottom;
+    const contentReserve = showBottomBar || showFloatingAction ? (reserveBottomBarSpace ? bottomEdge : 0) + (showFloatingAction ? floatingActionHeight + gutter : 0) : 0;
+    const bars = /*#__PURE__*/_jsxs(SurfaceLevelProvider, {
+      level: compactPanel ? 1 : 0,
+      fill: compactPanel ? theme.colors.card : background,
+      children: [showBottomBar ? /*#__PURE__*/_jsx(AppShellBottomBar, {
+        doc: doc && !feedRevealAvailable,
+        onHeightChange: setBottomBarHeight,
+        testID: testID ? `${testID}-bottom-bar` : undefined,
+        children: bottomBar
+      }) : null, showFloatingAction ? /*#__PURE__*/_jsx(AppShellFloatingAction, {
+        doc: doc && !feedRevealAvailable,
+        offset: bottomEdge + gutter,
+        gutter: gutter,
+        placement: floatingActionPlacement,
+        onHeightChange: setFloatingActionHeight,
+        testID: testID ? `${testID}-floating-action` : undefined,
+        children: floatingAction
+      }) : null]
+    });
+    const topBarNode = showTopBar ? /*#__PURE__*/_jsx(AppShellTopBar, {
       doc: doc,
-      offset: bottomEdge + gutter,
-      gutter: gutter,
-      placement: floatingActionPlacement,
-      onHeightChange: setFloatingActionHeight,
-      testID: testID ? `${testID}-floating-action` : undefined,
-      children: floatingAction
-    }) : null]
-  });
-  const topBarNode = showTopBar ? /*#__PURE__*/_jsx(AppShellTopBar, {
-    doc: doc,
-    testID: testID ? `${testID}-top-bar` : undefined,
-    children: topBar
-  }) : null;
+      testID: testID ? `${testID}-top-bar` : undefined,
+      children: topBar
+    }) : null;
 
-  // The default header renders whenever it has something to show — a menu
-  // button alone counts, so a page without a title can still open the drawer.
-  //
-  // Unless there is a `topBar`: that bar is where a phone's navigation control
-  // belongs, so the header does not add a SECOND hamburger under it. (Put an
-  // `AppShellMenuButton` in the bar; it renders itself only when there is a
-  // drawer to open.)
-  const menuInHeader = drawerAvailable && !showTopBar;
-  // `header={null}` is an ANSWER, not an absence: the page says it wants no
-  // header at all (it draws its own bar, or its own nav control). `??` would
-  // have taken `null` as "nothing given" and drawn the default one under the
-  // page's own — which is how a second hamburger appeared on a phone.
-  const headerNode = header !== undefined ? header : title != null || breadcrumb != null || actions != null || menuInHeader ? /*#__PURE__*/_jsx(AppShellHeader, {
-    title: title,
-    breadcrumb: breadcrumb,
-    actions: actions,
-    menuOpen: isOpen,
-    showMenu: menuInHeader,
-    onMenuPress: menuInHeader ? shell.toggleDrawer : undefined,
-    testID: testID ? `${testID}-header` : undefined
-  }) : null;
-  const fill = fixed ? {
-    flex: 1,
-    minHeight: 0
-  } : null;
-  const column = /*#__PURE__*/_jsxs(View, {
-    style: [{
-      width: '100%',
-      maxWidth: contentMaxWidth,
-      alignSelf: 'center',
-      gap: 10
-    }, fill],
-    children: [headerNode, /*#__PURE__*/_jsxs(View, {
+    // The default header renders whenever it has something to show — a menu
+    // button alone counts, so a page without a title can still open the drawer.
+    //
+    // Unless there is a `topBar`: that bar is where a phone's navigation control
+    // belongs, so the header does not add a SECOND hamburger under it. (Put an
+    // `AppShellMenuButton` in the bar; it renders itself only when there is a
+    // drawer to open.)
+    const menuInHeader = drawerAvailable && !showTopBar;
+    // `header={null}` is an ANSWER, not an absence: the page says it wants no
+    // header at all (it draws its own bar, or its own nav control). `??` would
+    // have taken `null` as "nothing given" and drawn the default one under the
+    // page's own — which is how a second hamburger appeared on a phone.
+    const headerNode = header !== undefined ? header : title != null || breadcrumb != null || actions != null || menuInHeader ? /*#__PURE__*/_jsx(AppShellHeader, {
+      title: title,
+      breadcrumb: breadcrumb,
+      actions: actions,
+      menuOpen: isOpen,
+      showMenu: menuInHeader,
+      onMenuPress: menuInHeader ? shell.toggleDrawer : undefined,
+      testID: testID ? `${testID}-header` : undefined
+    }) : null;
+    const fill = fixed ? {
+      flex: 1,
+      minHeight: 0
+    } : null;
+    const column = /*#__PURE__*/_jsxs(View, {
       style: [{
         width: '100%',
-        gap: 16,
-        paddingBottom: drawer === 'overlay' ? 16 : 0
+        maxWidth: contentMaxWidth,
+        alignSelf: 'center',
+        gap: 10
       }, fill],
-      children: [children, asideStacked ? /*#__PURE__*/_jsx(View, {
-        testID: testID ? `${testID}-aside` : undefined,
-        children: aside
-      }) : null]
-    })]
-  });
+      children: [headerNode, /*#__PURE__*/_jsxs(View, {
+        style: [{
+          width: '100%',
+          gap: 16,
+          paddingBottom: drawer === 'overlay' ? 16 : 0
+        }, fill],
+        children: [children, asideStacked ? /*#__PURE__*/_jsx(View, {
+          testID: testID ? `${testID}-aside` : undefined,
+          children: aside
+        }) : null]
+      })]
+    });
 
-  // Beside the content: sticky and self-scrolling with document scroll, a
-  // full-height scroller otherwise.
-  const asideColumn = inset => asideBeside ? /*#__PURE__*/_jsx(View, {
-    testID: testID ? `${testID}-aside` : undefined,
-    style: [{
-      width: asideWidth,
-      flexShrink: 0
-    }, doc ? {
-      ...stickyRail(gutter),
-      width: asideWidth
-    } : {
-      alignSelf: 'stretch'
-    }, inset],
-    children: /*#__PURE__*/_jsx(ScrollView, {
-      style: {
-        flex: 1
-      },
-      contentContainerStyle: {
-        flexGrow: 1
-      },
-      showsVerticalScrollIndicator: false,
-      children: aside
-    })
-  }) : null;
-  const frame = rootFrame(mode);
+    // Document asides grow naturally. A tall aside first travels with the page
+    // until its bottom is visible, then sticks; wheel events keep scrolling the
+    // document rather than getting trapped in a second scroll container.
+    const asideColumn = inset => asideBeside ? /*#__PURE__*/_jsx(View, {
+      testID: testID ? `${testID}-aside` : undefined,
+      onLayout: event => setAsideHeight(event.nativeEvent.layout.height),
+      style: [{
+        width: asideWidth,
+        flexShrink: 0
+      }, doc ? {
+        position: WEB_POSITION_STICKY,
+        top: Math.min(gutter, viewportHeight - asideHeight - gutter),
+        alignSelf: 'flex-start'
+      } : {
+        alignSelf: 'stretch'
+      }, inset],
+      children: doc ? aside : /*#__PURE__*/_jsx(ScrollView, {
+        style: {
+          flex: 1
+        },
+        contentContainerStyle: {
+          flexGrow: 1
+        },
+        showsVerticalScrollIndicator: false,
+        children: aside
+      })
+    }) : null;
+    const frame = rootFrame(mode);
 
-  // ---- the reveal drawer (dashboard's whole-page slide) -------------------
-  const reveal = useSharedValue(isOpen ? 1 : 0);
-  useEffect(() => {
-    const target = isOpen && drawerStyle === 'reveal' ? 1 : 0;
-    reveal.value = reducedMotion ? target : withTiming(target, {
-      duration: REVEAL_MS,
-      easing: REVEAL_EASE
-    });
-  }, [isOpen, drawerStyle, reducedMotion, reveal]);
-  const railStyle = useAnimatedStyle(() => ({
-    opacity: reveal.value,
-    transform: [{
-      scale: 0.94 + 0.06 * reveal.value
-    }]
-  }), [reveal]);
-  const pageStyle = useAnimatedStyle(() => ({
-    transform: [{
-      translateX: REVEAL_OFFSET * reveal.value
-    }],
-    borderRadius: 32 * reveal.value
-  }), [reveal]);
-  const veilStyle = useAnimatedStyle(() => ({
-    opacity: reveal.value
-  }), [reveal]);
-  if (drawerStyle === 'reveal') {
-    return /*#__PURE__*/_jsx(AppShellProvider, {
-      value: shell,
-      children: /*#__PURE__*/_jsxs(View, {
-        testID: testID,
-        onLayout: onLayout,
-        style: [frame, doc ? {
-          overflow: WEB_OVERFLOW_CLIP
-        } : null, {
-          flexDirection: 'row',
-          backgroundColor: background
-        }, style],
-        children: [navInFlow && flowSidebar ? /*#__PURE__*/_jsx(View, {
-          style: [flowSidebar.surface === 'docked' ? {
-            flexShrink: 0
-          } : {
-            paddingTop: 12,
-            paddingBottom: 12,
-            paddingLeft: 12,
-            flexShrink: 0
-          }, doc ? stickyRail(0) : null],
-          children: /*#__PURE__*/_jsx(Sidebar, {
-            ...flowSidebar
-          })
-        }) : null, drawerAvailable && drawerSidebar ? /*#__PURE__*/_jsx(View, {
-          "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,
-            left: 0,
-            width: 272,
-            paddingTop: 12,
-            paddingBottom: 12,
-            paddingLeft: 6
-          },
-          children: /*#__PURE__*/_jsx(Animated.View, {
-            style: [{
-              height: '100%',
-              width: 260,
-              transformOrigin: 'left center'
-            }, railStyle],
-            children: /*#__PURE__*/_jsx(Sidebar, {
-              ...drawerSidebar,
-              mobile: true,
-              surface: "plain",
-              onClose: () => setOpen(false)
-            })
-          })
-        }) : null, /*#__PURE__*/_jsxs(Animated.View, {
-          style: [{
-            flex: 1,
-            minWidth: 0,
+    // ---- the reveal drawer (dashboard's whole-page slide) -------------------
+    const reveal = useSharedValue(isOpen ? 1 : 0);
+    useEffect(() => {
+      const target = isOpen && drawerStyle === 'reveal' ? 1 : 0;
+      reveal.value = reducedMotion ? target : withTiming(target, {
+        duration: REVEAL_MS,
+        easing: REVEAL_EASE
+      });
+    }, [isOpen, drawerStyle, reducedMotion, reveal]);
+    const feedPageStyle = useAnimatedStyle(() => ({
+      transform: reveal.value === 0 ? [] : [{
+        translateX: (REVEAL_OFFSET + 12) * reveal.value
+      }]
+    }), [reveal]);
+    const feedChromeTransition = Platform.OS === 'web' ? {
+      '--bloom-panel-inset-duration': reducedMotion ? '0ms' : `${REVEAL_MS}ms`
+    } : {};
+    const feedInsetsStyle = useAnimatedStyle(() => ({
+      paddingTop: 12 * reveal.value,
+      paddingBottom: 12 * reveal.value
+    }), [reveal]);
+    const feedBarsStyle = useAnimatedStyle(() => ({
+      top: 12 * reveal.value,
+      bottom: 12 * reveal.value,
+      borderRadius: 28 * reveal.value
+    }), [reveal]);
+    const railStyle = useAnimatedStyle(() => ({
+      opacity: reveal.value,
+      transform: [{
+        scale: 0.94 + 0.06 * reveal.value
+      }]
+    }), [reveal]);
+    const pageStyle = useAnimatedStyle(() => ({
+      transform: reveal.value === 0 ? [] : [{
+        translateX: REVEAL_OFFSET * reveal.value
+      }],
+      borderRadius: 32 * reveal.value
+    }), [reveal]);
+    const veilStyle = useAnimatedStyle(() => ({
+      opacity: reveal.value
+    }), [reveal]);
+    if (drawerStyle === 'reveal' && variant === 'dashboard') {
+      return /*#__PURE__*/_jsx(AppShellProvider, {
+        value: shell,
+        children: /*#__PURE__*/_jsxs(View, {
+          testID: testID,
+          onLayout: onLayout,
+          style: [frame, doc ? {
+            overflow: WEB_OVERFLOW_CLIP
+          } : null, {
             flexDirection: 'row',
-            overflow: doc ? WEB_OVERFLOW_CLIP : 'hidden',
             backgroundColor: background
-          }, wide ? null : pageStyle],
-          children: [/*#__PURE__*/_jsx(Scroller, {
-            mode: mode,
-            testID: testID ? `${testID}-page` : undefined,
+          }, style],
+          children: [navInFlow && flowSidebar ? /*#__PURE__*/_jsx(View, {
+            style: [flowSidebar.surface === 'docked' ? {
+              flexShrink: 0
+            } : {
+              paddingTop: 12,
+              paddingBottom: 12,
+              paddingLeft: 12,
+              flexShrink: 0
+            }, doc ? stickyRail(0) : null],
+            children: /*#__PURE__*/_jsx(Sidebar, {
+              ...flowSidebar
+            })
+          }) : null, drawerAvailable && drawerSidebar ? /*#__PURE__*/_jsx(View, {
+            "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: {
-              flex: doc ? undefined : 1,
+              position: doc ? WEB_POSITION_FIXED : 'absolute',
+              top: 0,
+              bottom: 0,
+              left: 0,
+              width: 272,
+              paddingTop: 12,
+              paddingBottom: 12,
+              paddingLeft: 6
+            },
+            children: /*#__PURE__*/_jsx(Animated.View, {
+              style: [{
+                height: '100%',
+                width: 260,
+                transformOrigin: 'left center'
+              }, railStyle],
+              children: /*#__PURE__*/_jsx(Sidebar, {
+                ...drawerSidebar,
+                mobile: true,
+                surface: "plain",
+                onClose: () => setOpen(false)
+              })
+            })
+          }) : null, /*#__PURE__*/_jsxs(Animated.View, {
+            style: [{
+              flex: 1,
+              minWidth: 0,
+              flexDirection: 'row',
+              overflow: doc ? WEB_OVERFLOW_CLIP : 'hidden',
+              backgroundColor: background
+            }, wide ? null : pageStyle],
+            children: [/*#__PURE__*/_jsx(Scroller, {
+              mode: mode,
+              testID: testID ? `${testID}-page` : undefined,
+              style: {
+                flex: doc ? undefined : 1,
+                flexGrow: 1,
+                flexShrink: 1,
+                flexBasis: 0,
+                minWidth: 0
+              }
+              // `padding: 12` is a SHORTHAND, and react-native-web ranks its CSS
+              // shorthand against `padding-bottom` by sheet order rather than by
+              // the array's — so the reserve is spelled in longhands instead of
+              // 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
+              },
+              children: column
+            }), asideColumn({
+              paddingTop: small ? 24 : 12,
+              paddingBottom: 12,
+              paddingRight: 12
+            }), !wide ? /*#__PURE__*/_jsx(Animated.View, {
+              pointerEvents: isOpen ? 'auto' : 'none',
+              style: [{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0
+              }, veilStyle],
+              children: /*#__PURE__*/_jsx(Pressable, {
+                role: "button",
+                accessibilityLabel: "Close navigation",
+                focusable: isOpen,
+                onPress: () => setOpen(false),
+                style: {
+                  flex: 1,
+                  backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.1)'
+                },
+                testID: testID ? `${testID}-veil` : undefined
+              })
+            }) : null]
+          }), overlay, bars]
+        })
+      });
+    }
+
+    // A `panel` only FILLS when the shell was ASKED to bound it — `fixed` or
+    // `container`. With document scroll the page itself is the scroller and there
+    // is no height to fill, so the panel keeps growing with its content (and the
+    // frame is its own box, which is what stops it drifting under scroll).
+    //
+    // The test is the PROP, not the resolved mode: native resolves `document` to
+    // `container` because it has no document, and a page that asked for document
+    // scroll still wants its header to travel with the content there.
+    const panelFills = panel === true && scroll !== 'document' && mode !== 'document';
+
+    // ---- the page region, per variant ---------------------------------------
+    /** `feed` / `focus`: a fixed reading column, centred in what the nav leaves. */
+    const contentAligned = navigationAlign === 'content' && centred;
+    // Plain navigation belongs to the viewport; only the reading surfaces are inset.
+    const plainDocumentFrame = doc && contentAligned && flowSidebar?.surface === 'plain' && !topBarNode;
+    const readingGap = Math.max(0, asideGap ?? columnGap);
+    const readingGroupWidth = contentWidth + (asideBeside ? asideWidth + readingGap : 0);
+    const centredBody = /*#__PURE__*/_jsxs(View, {
+      style: [{
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 0,
+        minWidth: 0,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: readingGap,
+        // Document scroll: each column carries its own height (the centre
+        // grows the page, the aside is sticky). Bounded: they stretch.
+        alignItems: doc ? 'flex-start' : 'stretch',
+        ...(contentAligned ? {
+          flexGrow: compactPanel ? 1 : 0,
+          flexBasis: compactPanel ? 'auto' : readingGroupWidth,
+          maxWidth: compactPanel ? undefined : readingGroupWidth
+        } : {}),
+        ...(plainDocumentFrame ? {
+          paddingTop: compactPanel ? 0 : gutter,
+          paddingBottom: compactPanel ? 0 : gutter
+        } : {})
+      }, fill],
+      children: [/*#__PURE__*/_jsx(View, {
+        testID: testID ? `${testID}-content` : undefined,
+        style: [
+        // `flexBasis` is the reading width and `flexShrink: 1` is what keeps a
+        // 600px column inside a 360px phone — a `width` would overflow.
+        {
+          flexGrow: compactPanel ? 1 : 0,
+          flexShrink: 1,
+          flexBasis: compactPanel ? 'auto' : contentWidth,
+          maxWidth: compactPanel ? undefined : contentWidth,
+          minWidth: 0
+        }, doc ? null : {
+          alignSelf: 'stretch'
+        }],
+        children: panelFills ?
+        /*#__PURE__*/
+        // A bounded panel fills the screen. Container mode scrolls its body;
+        // fixed mode leaves scrolling to the child navigator/list.
+        _jsx(BloomColorScope, {
+          colorPreset: panelColorPreset,
+          asChild: true,
+          children: /*#__PURE__*/_jsx(ContentPanel, {
+            maskColor: background,
+            framed: panelFramed,
+            framedFrom: framedFrom,
+            fill: true
+            // The panel's box already IS the visible area here, so the frame is
+            // that box — no viewport maths, nothing to line up.
+            ,
+            overlaySizing: "panel",
+            surfaceStyle: {
               flexGrow: 1,
               flexShrink: 1,
-              flexBasis: 0,
-              minWidth: 0
-            }
-            // `padding: 12` is a SHORTHAND, and react-native-web ranks its CSS
-            // shorthand against `padding-bottom` by sheet order rather than by
-            // the array's — so the reserve is spelled in longhands instead of
-            // 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
+              flexBasis: 'auto',
+              minHeight: 0
             },
-            children: column
-          }), asideColumn({
-            paddingTop: small ? 24 : 12,
-            paddingBottom: 12,
-            paddingRight: 12
-          }), !wide ? /*#__PURE__*/_jsx(Animated.View, {
-            pointerEvents: isOpen ? 'auto' : 'none',
-            style: [{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0
-            }, veilStyle],
-            children: /*#__PURE__*/_jsx(Pressable, {
-              role: "button",
-              accessibilityLabel: "Close navigation",
-              focusable: isOpen,
-              onPress: () => setOpen(false),
+            contentStyle: {
+              flexGrow: 1,
+              flexShrink: 1,
+              flexBasis: 'auto',
+              minHeight: 0
+            },
+            children: /*#__PURE__*/_jsxs(View, {
               style: {
                 flex: 1,
-                backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.1)'
+                minHeight: 0
+              },
+              children: [headerNode, /*#__PURE__*/_jsx(Scroller, {
+                mode: mode,
+                testID: testID ? `${testID}-page` : undefined,
+                style: {
+                  flex: 1,
+                  minHeight: 0
+                }
+                // A fixed page owns its list and edge clearance. Padding its
+                // navigator here would charge the same occupied edge twice.
+                ,
+                contentStyle: mode === 'fixed' ? {} : {
+                  paddingBottom: contentReserve
+                },
+                children: children
+              })]
+            })
+          })
+        }) : /*#__PURE__*/_jsxs(Scroller, {
+          mode: mode,
+          testID: testID ? `${testID}-page` : undefined,
+          style: {},
+          contentStyle: {
+            paddingBottom: panel ? 0 : contentReserve
+          },
+          children: [/*#__PURE__*/_jsx(BloomColorScope, {
+            colorPreset: panelColorPreset,
+            asChild: true,
+            children: panel ? /*#__PURE__*/_jsxs(ContentPanel, {
+              maskColor: background,
+              framed: feedRevealed || panelFramed,
+              chrome: feedRevealed ? "none" : undefined,
+              framedFrom: framedFrom
+              // The sticky frame is pinned at the shell's OWN gutter, which is
+              // exactly where the panel starts. Left at the 8px default it
+              // would sit 8px above the panel's real top edge and snap down on
+              // the first scroll — the panel appearing to breathe.
+              ,
+              overlayInset: feedRevealed ? 12 : gutter
+              // The panel's own `flex-1` (basis 0) would collapse to nothing in
+              // a document-flow column, which has no free space to distribute.
+              ,
+              surfaceStyle: {
+                flexGrow: 1,
+                flexShrink: 1,
+                flexBasis: 'auto'
+              },
+              contentStyle: {
+                flexGrow: 1,
+                flexShrink: 1,
+                flexBasis: 'auto'
               },
-              testID: testID ? `${testID}-veil` : undefined
+              children: [headerNode, /*#__PURE__*/_jsx(View, {
+                style: [{
+                  paddingBottom: contentReserve
+                }, fill],
+                children: children
+              }), feedRevealed && /*#__PURE__*/_jsx(StyledView, {
+                pointerEvents: "none",
+                className: "absolute inset-0 z-20",
+                style: {
+                  backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.1)'
+                }
+              })]
+            }) : /*#__PURE__*/_jsxs(View, {
+              style: [{
+                gap: 16
+              }, fill],
+              children: [headerNode, children]
             })
+          }), asideStacked ? /*#__PURE__*/_jsx(View, {
+            testID: testID ? `${testID}-aside` : undefined,
+            children: aside
           }) : null]
-        }), overlay, bars]
-      })
+        })
+      }), asideColumn({})]
     });
-  }
-
-  // A `panel` only FILLS when the shell was ASKED to bound it — `fixed` or
-  // `container`. With document scroll the page itself is the scroller and there
-  // is no height to fill, so the panel keeps growing with its content (and the
-  // frame is its own box, which is what stops it drifting under scroll).
-  //
-  // The test is the PROP, not the resolved mode: native resolves `document` to
-  // `container` because it has no document, and a page that asked for document
-  // scroll still wants its header to travel with the content there.
-  const panelFills = panel === true && scroll !== 'document' && mode !== 'document';
-
-  // ---- the page region, per variant ---------------------------------------
-  /** `feed` / `focus`: a fixed reading column, centred in what the nav leaves. */
-  const centredBody = /*#__PURE__*/_jsxs(View, {
-    style: [{
-      flexGrow: 1,
-      flexShrink: 1,
-      flexBasis: 0,
-      minWidth: 0,
-      flexDirection: 'row',
-      justifyContent: 'center',
-      gap: columnGap,
-      // Document scroll: each column carries its own height (the centre
-      // grows the page, the aside is sticky). Bounded: they stretch.
-      alignItems: doc ? 'flex-start' : 'stretch'
-    }, fill],
-    children: [/*#__PURE__*/_jsx(View, {
-      testID: testID ? `${testID}-content` : undefined,
-      style: [
-      // `flexBasis` is the reading width and `flexShrink: 1` is what keeps a
-      // 600px column inside a 360px phone — a `width` would overflow.
-      {
-        flexGrow: 0,
+    const splitWide = width >= breakpointPx(splitFrom);
+    // Below the breakpoint exactly one pane renders — the one `pane` names, or
+    // the detail pane when that one was never given any content.
+    const solePane = pane === 'list' && list == null || pane === 'info' && info == null ? 'detail' : pane;
+    const splitBody = /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexGrow: 1,
         flexShrink: 1,
-        flexBasis: contentWidth,
-        maxWidth: contentWidth,
-        minWidth: 0
-      }, doc ? null : {
-        alignSelf: 'stretch'
-      }],
-      children: panelFills ?
-      /*#__PURE__*/
-      // A panel in a BOUNDED shell is the height of the screen and scrolls
-      // its own content: that is what makes it read as a panel — it reaches
-      // the bottom and closes there, like the rail beside it — instead of
-      // an open-ended column whose bottom edge is somewhere past the fold.
-      // The header is pinned inside it and only the routed content moves.
-      _jsx(ContentPanel, {
-        framedFrom: framedFrom,
-        fill: true
-        // The panel's box already IS the visible area here, so the frame is
-        // that box — no viewport maths, nothing to line up.
-        ,
-        overlaySizing: "panel",
-        surfaceStyle: {
-          flexGrow: 1,
-          flexShrink: 1,
-          flexBasis: 'auto',
-          minHeight: 0
+        flexBasis: 0,
+        minWidth: 0,
+        minHeight: 0
+      },
+      children: [headerNode ? /*#__PURE__*/_jsx(View, {
+        style: {
+          paddingBottom: gutter
         },
-        contentStyle: {
+        children: headerNode
+      }) : null, /*#__PURE__*/_jsx(View, {
+        style: {
           flexGrow: 1,
           flexShrink: 1,
-          flexBasis: 'auto',
-          minHeight: 0
+          minHeight: 0,
+          borderRadius: 16,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.card,
+          overflow: 'hidden'
         },
-        children: /*#__PURE__*/_jsxs(View, {
-          style: {
-            flex: 1,
-            minHeight: 0,
-            padding: gutter,
-            gap: 16
-          },
-          children: [headerNode, /*#__PURE__*/_jsx(ScrollView, {
-            testID: testID ? `${testID}-page` : undefined,
-            style: {
-              flex: 1,
-              minHeight: 0
-            },
-            contentContainerStyle: {
-              gap: 16,
-              paddingBottom: contentReserve
-            },
-            children: children
-          })]
+        children: /*#__PURE__*/_jsx(AppShellSplitPanes, {
+          list: list,
+          detail: children,
+          info: info,
+          showList: splitWide ? list != null : solePane === 'list',
+          showDetail: splitWide ? true : solePane === 'detail',
+          showInfo: splitWide ? info != null && width >= breakpointPx(infoFrom) : solePane === 'info',
+          listWidth: listWidth,
+          listMinWidth: listMinWidth,
+          listMaxWidth: listMaxWidth,
+          onListWidthChange: onListWidthChange,
+          infoWidth: infoWidth,
+          resizable: resizable,
+          paneScroll: paneScroll,
+          resizeLabel: resizeLabel,
+          testID: testID
         })
-      }) : /*#__PURE__*/_jsxs(Scroller, {
+      })]
+    });
+    const dashboardBody = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Scroller, {
         mode: mode,
         testID: testID ? `${testID}-page` : undefined,
-        style: {},
+        style: {
+          flex: 1,
+          minWidth: 0,
+          backgroundColor: background
+        },
         contentStyle: {
+          paddingTop: small ? 12 : 0,
           paddingBottom: contentReserve
         },
-        children: [panel ? /*#__PURE__*/_jsx(ContentPanel, {
-          framedFrom: framedFrom
-          // The sticky frame is pinned at the shell's OWN gutter, which is
-          // exactly where the panel starts. Left at the 8px default it
-          // would sit 8px above the panel's real top edge and snap down on
-          // the first scroll — the panel appearing to breathe.
-          ,
-          overlayInset: gutter
-          // The panel's own `flex-1` (basis 0) would collapse to nothing in
-          // a document-flow column, which has no free space to distribute.
-          ,
-          surfaceStyle: {
-            flexGrow: 1,
-            flexShrink: 1,
-            flexBasis: 'auto'
-          },
-          contentStyle: {
-            flexGrow: 1,
-            flexShrink: 1,
-            flexBasis: 'auto'
-          },
-          children: /*#__PURE__*/_jsxs(View, {
-            style: [{
-              gap: 16,
-              padding: gutter
-            }, fill],
-            children: [headerNode, children]
-          })
-        }) : /*#__PURE__*/_jsxs(View, {
-          style: [{
-            gap: 16
-          }, fill],
-          children: [headerNode, children]
-        }), asideStacked ? /*#__PURE__*/_jsx(View, {
-          testID: testID ? `${testID}-aside` : undefined,
-          children: aside
-        }) : null]
-      })
-    }), asideColumn({})]
-  });
-  const splitWide = width >= breakpointPx(splitFrom);
-  // Below the breakpoint exactly one pane renders — the one `pane` names, or
-  // the detail pane when that one was never given any content.
-  const solePane = pane === 'list' && list == null || pane === 'info' && info == null ? 'detail' : pane;
-  const splitBody = /*#__PURE__*/_jsxs(View, {
-    style: {
-      flexGrow: 1,
-      flexShrink: 1,
-      flexBasis: 0,
-      minWidth: 0,
-      minHeight: 0
-    },
-    children: [headerNode ? /*#__PURE__*/_jsx(View, {
-      style: {
-        paddingBottom: gutter
-      },
-      children: headerNode
-    }) : null, /*#__PURE__*/_jsx(View, {
-      style: {
-        flexGrow: 1,
-        flexShrink: 1,
-        minHeight: 0,
-        borderRadius: 16,
-        borderWidth: 1,
-        borderColor: theme.colors.border,
-        backgroundColor: theme.colors.card,
-        overflow: 'hidden'
-      },
-      children: /*#__PURE__*/_jsx(AppShellSplitPanes, {
-        list: list,
-        detail: children,
-        info: info,
-        showList: splitWide ? list != null : solePane === 'list',
-        showDetail: splitWide ? true : solePane === 'detail',
-        showInfo: splitWide ? info != null && width >= breakpointPx(infoFrom) : solePane === 'info',
-        listWidth: listWidth,
-        listMinWidth: listMinWidth,
-        listMaxWidth: listMaxWidth,
-        onListWidthChange: onListWidthChange,
-        infoWidth: infoWidth,
-        resizable: resizable,
-        paneScroll: paneScroll,
-        resizeLabel: resizeLabel,
-        testID: testID
-      })
-    })]
-  });
-  const dashboardBody = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Scroller, {
-      mode: mode,
-      testID: testID ? `${testID}-page` : undefined,
-      style: {
-        flex: 1,
-        minWidth: 0,
-        backgroundColor: background
-      },
-      contentStyle: {
-        paddingTop: small ? 12 : 0,
-        paddingBottom: contentReserve
-      },
-      children: column
-    }), asideColumn({})]
-  });
+        children: column
+      }), asideColumn({})]
+    });
 
-  /**
-   * `canvas`: the content IS the screen. One area, edge to edge — no reading
-   * column, no max width, no padding — with the header (if any) above it in
-   * flow, because a toolbar over a map belongs to the map. The `topBar`,
-   * `bottomBar`, `floatingAction` and `overlay` slots float over it as they do
-   * everywhere else, which is how a canvas gets its chrome without the canvas
-   * giving up its area.
-   *
-   * The shell's own padding moves OUT of the row and onto the regions here
-   * (below), so the nav is still a card with a gutter around it while the
-   * canvas runs to the window's edge. No negative margins: each region states
-   * its own inset.
-   */
-  const canvasBody = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(View, {
-      testID: testID ? `${testID}-page` : undefined,
-      style: {
-        flex: 1,
-        minWidth: 0,
-        minHeight: 0,
-        backgroundColor: background
-      },
-      children: [headerNode, /*#__PURE__*/_jsx(View, {
+    /**
+     * `canvas`: the content IS the screen. One area, edge to edge — no reading
+     * column, no max width, no padding — with the header (if any) above it in
+     * flow, because a toolbar over a map belongs to the map. The `topBar`,
+     * `bottomBar`, `floatingAction` and `overlay` slots float over it as they do
+     * everywhere else, which is how a canvas gets its chrome without the canvas
+     * giving up its area.
+     *
+     * The shell's own padding moves OUT of the row and onto the regions here
+     * (below), so the nav is still a card with a gutter around it while the
+     * canvas runs to the window's edge. No negative margins: each region states
+     * its own inset.
+     */
+    const canvasBody = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(View, {
+        testID: testID ? `${testID}-page` : undefined,
         style: {
           flex: 1,
+          minWidth: 0,
           minHeight: 0,
-          minWidth: 0
+          backgroundColor: background
         },
-        children: children
-      })]
-    }), asideColumn(canvas ? {
-      padding: gutter,
-      paddingLeft: 0
-    } : {})]
-  });
-  const body = variant === 'split' ? splitBody : canvas ? canvasBody : centred ? centredBody : dashboardBody;
+        children: [headerNode, /*#__PURE__*/_jsx(View, {
+          style: {
+            flex: 1,
+            minHeight: 0,
+            minWidth: 0
+          },
+          children: children
+        })]
+      }), asideColumn(canvas ? {
+        padding: gutter,
+        paddingLeft: 0
+      } : {})]
+    });
+    const body = variant === 'split' ? splitBody : canvas ? canvasBody : centred ? centredBody : dashboardBody;
 
-  // A DOCKED nav is flush to the window: it takes the shell's whole height and
-  // its own hairline is the separator, so the shell gives up its left and
-  // vertical padding around that column rather than framing it like a card.
-  const dockedNav = navInFlow && flowSidebar?.surface === 'docked';
-  const navRegion = navInFlow && flowSidebar ? doc ? /*#__PURE__*/_jsx(View, {
-    style: stickyRail(dockedNav ? 0 : gutter),
-    children: /*#__PURE__*/_jsx(Sidebar, {
-      ...flowSidebar
-    })
-  }) : canvas && !dockedNav ?
-  /*#__PURE__*/
-  // The canvas row has no padding of its own, so the nav states its.
-  _jsx(View, {
-    style: {
-      padding: gutter,
-      paddingRight: 0,
-      flexShrink: 0
-    },
-    children: /*#__PURE__*/_jsx(Sidebar, {
+    // A DOCKED nav is flush to the window: it takes the shell's whole height and
+    // its own hairline is the separator, so the shell gives up its left and
+    // vertical padding around that column rather than framing it like a card.
+    const dockedNav = navInFlow && flowSidebar?.surface === 'docked';
+    const navRegion = navInFlow && flowSidebar ? doc ? /*#__PURE__*/_jsx(View, {
+      testID: testID ? `${testID}-navigation` : undefined,
+      style: stickyRail(dockedNav || plainDocumentFrame ? 0 : gutter),
+      children: /*#__PURE__*/_jsx(Sidebar, {
+        ...flowSidebar
+      })
+    }) : canvas && !dockedNav ?
+    /*#__PURE__*/
+    // The canvas row has no padding of its own, so the nav states its.
+    _jsx(View, {
+      style: {
+        padding: gutter,
+        paddingRight: 0,
+        flexShrink: 0
+      },
+      children: /*#__PURE__*/_jsx(Sidebar, {
+        ...flowSidebar
+      })
+    }) : /*#__PURE__*/_jsx(Sidebar, {
       ...flowSidebar
-    })
-  }) : /*#__PURE__*/_jsx(Sidebar, {
-    ...flowSidebar
-  }) : null;
-  const drawerRegion = drawerAvailable && isOpen && drawerSidebar ? /*#__PURE__*/_jsx(Portal, {
-    children: /*#__PURE__*/_jsxs(OverlayRoot, {
-      children: [/*#__PURE__*/_jsx(Backdrop, {
-        onPress: () => setOpen(false),
-        blurIntensity: 0,
-        dimOpacity: 0.4,
-        accessibilityLabel: "Close navigation"
-      }), /*#__PURE__*/_jsx(View, {
-        pointerEvents: "box-none",
-        style: {
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          flexDirection: 'row',
-          padding: 12
-        },
-        children: /*#__PURE__*/_jsx(View, {
-          pointerEvents: "auto",
+    }) : null;
+    const drawerRegion = drawerAvailable && isOpen && drawerSidebar ? /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsxs(OverlayRoot, {
+        children: [/*#__PURE__*/_jsx(Backdrop, {
+          onPress: () => setOpen(false),
+          blurIntensity: 0,
+          dimOpacity: 0.4,
+          accessibilityLabel: "Close navigation"
+        }), /*#__PURE__*/_jsx(View, {
+          pointerEvents: "box-none",
           style: {
-            height: '100%'
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            flexDirection: 'row',
+            padding: 12
           },
-          children: /*#__PURE__*/_jsx(Sidebar, {
-            ...drawerSidebar,
-            mobile: true,
-            onClose: () => setOpen(false)
+          children: /*#__PURE__*/_jsx(View, {
+            pointerEvents: "auto",
+            style: {
+              height: '100%'
+            },
+            children: /*#__PURE__*/_jsx(Sidebar, {
+              ...drawerSidebar,
+              mobile: true,
+              onClose: () => setOpen(false)
+            })
           })
+        })]
+      })
+    }) : null;
+    const rowStyle = {
+      flexDirection: 'row',
+      ...(contentAligned ? {
+        justifyContent: 'center'
+      } : {}),
+      gap: dockedNav || canvas ? 0 : Math.max(0, navigationGap ?? columnGap),
+      // A canvas runs to the window's edge, so the row keeps no padding at all
+      // and each region carries its own (the nav below, the aside in `canvasBody`).
+      padding: canvas || plainDocumentFrame ? 0 : gutter,
+      ...(dockedNav ? {
+        paddingLeft: 0,
+        paddingTop: 0,
+        paddingBottom: 0
+      } : null),
+      backgroundColor: background
+    };
+    if (variant === 'feed' && drawerStyle === 'reveal' && drawerAvailable) {
+      return /*#__PURE__*/_jsx(AppShellProvider, {
+        value: shell,
+        children: /*#__PURE__*/_jsxs(View, {
+          testID: testID,
+          onLayout: onLayout,
+          style: [frame, {
+            overflow: doc ? WEB_OVERFLOW_CLIP : 'hidden',
+            backgroundColor: background
+          }, style],
+          children: [/*#__PURE__*/_jsx(View, {
+            "aria-hidden": !isOpen,
+            pointerEvents: isOpen ? 'auto' : 'none',
+            style: {
+              position: doc ? WEB_POSITION_FIXED : 'absolute',
+              top: 0,
+              bottom: 0,
+              left: 0,
+              width: 272,
+              paddingTop: 12,
+              paddingBottom: 12,
+              paddingLeft: 6
+            },
+            children: /*#__PURE__*/_jsx(Animated.View, {
+              style: [{
+                height: '100%',
+                width: 260,
+                transformOrigin: 'left center'
+              }, railStyle],
+              children: drawerSidebar && /*#__PURE__*/_jsx(Sidebar, {
+                ...drawerSidebar,
+                mobile: true,
+                surface: "plain",
+                onClose: () => setOpen(false)
+              })
+            })
+          }), /*#__PURE__*/_jsxs(Animated.View, {
+            testID: testID ? `${testID}-reveal-page` : undefined,
+            style: [{
+              flexGrow: 1,
+              minWidth: 0,
+              overflow: doc ? WEB_OVERFLOW_CLIP : 'hidden',
+              backgroundColor: background
+            }, feedChromeTransition, feedPageStyle, feedInsetsStyle],
+            children: [topBarNode, /*#__PURE__*/_jsx(StyledView, {
+              className: doc ? undefined : "flex-1 min-h-0",
+              children: /*#__PURE__*/_jsx(View, {
+                style: [rowStyle, {
+                  flexGrow: 1,
+                  minWidth: 0
+                }],
+                children: body
+              })
+            }), /*#__PURE__*/_jsx(Animated.View, {
+              pointerEvents: isOpen ? 'auto' : 'none',
+              style: [{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0
+              }, veilStyle],
+              children: /*#__PURE__*/_jsx(Pressable, {
+                role: "button",
+                accessibilityLabel: "Close navigation",
+                focusable: isOpen,
+                onPress: () => setOpen(false),
+                testID: testID ? `${testID}-veil` : undefined,
+                style: {
+                  flex: 1
+                }
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(Animated.View, {
+            pointerEvents: isOpen ? 'none' : 'box-none',
+            testID: testID ? `${testID}-reveal-bars` : undefined,
+            style: [{
+              position: doc ? WEB_POSITION_FIXED : 'absolute',
+              left: 0,
+              right: 0,
+              overflow: 'hidden'
+            }, feedPageStyle, feedBarsStyle],
+            children: [bars, isOpen && /*#__PURE__*/_jsx(StyledView, {
+              pointerEvents: "none",
+              className: "absolute bottom-0 left-0 right-0",
+              style: {
+                height: contentReserve,
+                backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.1)'
+              }
+            })]
+          }), overlay]
         })
-      })]
-    })
-  }) : null;
-  const rowStyle = {
-    flexDirection: 'row',
-    gap: dockedNav || canvas ? 0 : columnGap,
-    // A canvas runs to the window's edge, so the row keeps no padding at all
-    // and each region carries its own (the nav below, the aside in `canvasBody`).
-    padding: canvas ? 0 : gutter,
-    ...(dockedNav ? {
-      paddingLeft: 0,
-      paddingTop: 0,
-      paddingBottom: 0
-    } : null),
-    backgroundColor: background
-  };
+      });
+    }
 
-  // The top bar is a SIBLING above the columns, so it spans the shell edge to
-  // 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) {
+    // The top bar is a SIBLING above the columns, so it spans the shell edge to
+    // 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 /*#__PURE__*/_jsx(AppShellProvider, {
+        value: shell,
+        children: /*#__PURE__*/_jsxs(View, {
+          testID: testID,
+          onLayout: onLayout,
+          style: [frame, {
+            flexDirection: 'column',
+            backgroundColor: background
+          }, style],
+          children: [topBarNode, /*#__PURE__*/_jsxs(View, {
+            style: [rowStyle, {
+              flexGrow: 1,
+              flexShrink: 1,
+              minHeight: 0
+            }],
+            children: [navRegion, drawerRegion, body]
+          }), overlay, bars]
+        })
+      });
+    }
     return /*#__PURE__*/_jsx(AppShellProvider, {
       value: shell,
       children: /*#__PURE__*/_jsxs(View, {
         testID: testID,
         onLayout: onLayout,
-        style: [frame, {
-          flexDirection: 'column',
-          backgroundColor: background
-        }, style],
-        children: [topBarNode, /*#__PURE__*/_jsxs(View, {
-          style: [rowStyle, {
-            flexGrow: 1,
-            flexShrink: 1,
-            minHeight: 0
-          }],
-          children: [navRegion, drawerRegion, body]
-        }), overlay, bars]
+        style: [frame, rowStyle, style],
+        children: [navRegion, drawerRegion, body, overlay, bars]
       })
     });
-  }
-  return /*#__PURE__*/_jsx(AppShellProvider, {
-    value: shell,
-    children: /*#__PURE__*/_jsxs(View, {
-      testID: testID,
-      onLayout: onLayout,
-      style: [frame, rowStyle, style],
-      children: [navRegion, drawerRegion, body, overlay, bars]
-    })
-  });
-};
-export const AppShellEngine = /*#__PURE__*/memo(AppShellComponent);
-AppShellEngine.displayName = 'AppShellEngine';
+  };
+  const AppShellEngine = /*#__PURE__*/memo(AppShellComponent);
+  AppShellEngine.displayName = 'AppShellEngine';
+  return AppShellEngine;
+}
 //# sourceMappingURL=AppShellEngine.js.map