@oxy.so/bloom 3.6.0 → 4.1.0

package/lib/module/sidebar/Sidebar.js

@@ -1,7 +1,8 @@
 "use strict";
 
+import { useBloomAppearance } from "../appearance/index.js";
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Pressable, ScrollView, TextInput, View } from 'react-native';
+import { Pressable, TextInput, View } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
 import { Badge } from "../badge/index.js";
 import { CloseButton } from '../button';
@@ -12,8 +13,10 @@ import { RiSearchLine } from "../icons/remix/RiSearchLine.js";
 import { RiSideBarFill } from "../icons/remix/RiSideBarFill.js";
 import { Kbd } from "../kbd/index.js";
 import { borderRadius } from "../styles/tokens.js";
+import { Z_INDEX } from "../styles/z-index.js";
 import { ThemeToggle } from "../theme-toggle/index.js";
 import { Text, TYPE_SCALE } from "../typography/index.js";
+import { resolveSidebarGeometry, SidebarGeometryProvider } from "./geometry.js";
 import { SidebarSizeProvider, SIDEBAR_METRICS } from "./metrics.js";
 import { useSidebarPalette } from "./palette.js";
 import { Collapsible, CollapseProvider, IS_WEB, MORPH_MS, useSidebarWebCss } from "./parts.js";
@@ -21,7 +24,9 @@ import { SidebarFolder } from "./SidebarFolder.js";
 import { SidebarItem } from "./SidebarItem.js";
 import { SidebarModeSwitcher } from "./SidebarModeSwitcher.js";
 import { SidebarPlanCard } from "./SidebarPlanCard.js";
+import { SidebarPrimaryAction } from "./SidebarPrimaryAction.js";
 import { SidebarRail } from "./SidebarRail.js";
+import { SidebarScrollArea } from "./SidebarScrollArea.js";
 import { SidebarTeamMenu } from "./SidebarTeamMenu.js";
 import { SidebarLogoView } from "./SidebarLogoView.js";
 import { SidebarUserMenu } from "./SidebarUserMenu.js";
@@ -31,15 +36,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  *   panel      `size` wide expanded (p12), its collapsed width at px7 py12 —
  *              with the 1px border that leaves exactly the size's item column
- *              (`metrics.ts`; `medium` is the historical 260 / 52 / 36)
+ *              (`metrics.ts`; `md` is the historical 260 / 52 / 36)
  *   surface    `card` radius 24, 1px border-button-white, shadow-sidebar,
  *              background-secondary; `plain` drops the chrome onto
  *              background-full; `docked` keeps the fill, squares the corners
  *              and leaves one hairline on the inner edge, full height
- *   top        scroller (−8 margin / 8 padding, so rings and the profile pill
- *              are not clipped), gap 12: account switcher + collapse control
- *              (a column, avatar last, when collapsed), quick search, nav
- *              (px2 expanded, gap 4)
+ *   top        fixed account/logo + collapse control, modes and quick search,
+ *              gap 12; destinations alone scroll below (px2 expanded, gap 4).
+ *              The viewport overlaps half the last control, at most 20px,
+ *              with matching content padding and 8px side room for rings.
  *   bottom     gap 12: theme toggle (segmented expanded, icon collapsed),
  *              secondary rows, team card
  *   search     pill button p8 gap8 on background-tertiary (hover tertiary-hover
@@ -53,6 +58,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * collapse through `Collapsible` — the icons never move. Reduced motion snaps.
  */
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const EASE_IN_OUT = Easing.bezier(0.4, 0, 0.2, 1);
 function matchesQuery(label, query) {
   return label.toLocaleLowerCase().includes(query);
@@ -98,7 +104,7 @@ function SearchField({
       style: inputStyle,
       testID: "sidebar-search-input"
     }), /*#__PURE__*/_jsx(CloseButton, {
-      size: "2xs",
+      size: "xs",
       accessibilityLabel: "Clear navigation search",
       onPress: () => onDismiss(true),
       style: {
@@ -109,6 +115,8 @@ function SearchField({
 }
 const SidebarPanel = ({
   items = [],
+  primaryAction,
+  footer,
   secondaryItems = [],
   modes,
   mode,
@@ -123,7 +131,7 @@ const SidebarPanel = ({
   onClose,
   fluid = false,
   surface = 'card',
-  size = 'medium',
+  size: sizeProp,
   showThemeToggle = true,
   showSearch = true,
   searchShortcutLabel = '⌘L',
@@ -142,6 +150,16 @@ const SidebarPanel = ({
   testID
 }) => {
   const palette = useSidebarPalette();
+  const canonicalSize = sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : sizeProp === 'large' ? 'lg' : sizeProp;
+  const {
+    size: scopedSize
+  } = useBloomAppearance({
+    size: canonicalSize
+  }, {
+    size: 'md',
+    tone: 'neutral'
+  });
+  const size = scopedSize === 'xs' ? 'sm' : scopedSize;
   const metrics = SIDEBAR_METRICS[size];
   useSidebarWebCss();
   const reducedMotion = useReducedMotion();
@@ -152,6 +170,7 @@ const SidebarPanel = ({
   });
   const collapsed = mobile ? false : collapsedState;
   const [searchActive, setSearchActive] = useState(false);
+  const [headerOverlap, setHeaderOverlap] = useState(10);
   const [query, setQuery] = useState('');
   const [suppressUserHover, setSuppressUserHover] = useState(false);
   const searchFieldRef = useRef(null);
@@ -169,35 +188,88 @@ const SidebarPanel = ({
       easing: EASE_IN_OUT
     });
   }, [collapsed, reducedMotion, progress]);
+  const searchGapStyle = useAnimatedStyle(() => ({
+    gap: 8 * (1 - progress.value)
+  }), [progress]);
 
   // `fluid` fills its container while expanded; the morph needs a number, so
   // the last expanded width is measured. The collapsed end is the size's own.
-  const collapsedWidth = metrics.collapsed;
+  const geometry = useMemo(() => resolveSidebarGeometry(metrics, surface, Boolean(primaryAction), Boolean(tree)), [metrics, surface, primaryAction, tree]);
+  const {
+    collapsedWidth,
+    collapsedLane,
+    expandedInset
+  } = geometry;
   const expandedWidth = useSharedValue(metrics.expanded);
+  useEffect(() => {
+    if (!fluid) expandedWidth.value = metrics.expanded;
+  }, [fluid, metrics.expanded, expandedWidth]);
   const onPanelLayout = useCallback(event => {
-    if (fluid && !collapsed) expandedWidth.value = event.nativeEvent.layout.width;
-  }, [fluid, collapsed, expandedWidth]);
+    if (fluid && !collapsed && progress.value === 0) expandedWidth.value = event.nativeEvent.layout.width;
+  }, [fluid, collapsed, expandedWidth, progress]);
+  const expandedPadding = metrics.padding;
+  const collapsedPadding = metrics.collapsedPaddingX;
   const panelStyle = useAnimatedStyle(() => {
     const p = progress.value;
-    if (fluid && p === 0) return {
-      width: '100%'
-    };
+    const padding = expandedPadding + (collapsedPadding - expandedPadding) * p;
     return {
-      width: expandedWidth.value + (collapsedWidth - expandedWidth.value) * p
+      width: fluid && p === 0 ? '100%' : expandedWidth.value + (collapsedWidth - expandedWidth.value) * p,
+      paddingLeft: padding,
+      paddingRight: padding
     };
-  }, [progress, expandedWidth, fluid, collapsedWidth]);
+  }, [progress, expandedWidth, fluid, collapsedWidth, expandedPadding, collapsedPadding]);
   const navInset = useAnimatedStyle(() => {
-    const inset = 2 * (1 - progress.value);
+    const inset = expandedInset * (1 - progress.value);
     return {
       paddingLeft: inset,
       paddingRight: inset
     };
-  }, [progress]);
+  }, [progress, expandedInset]);
+  const searchInset = useAnimatedStyle(() => {
+    const start = metrics.row.padding + expandedInset;
+    const end = metrics.row.padding;
+    const padding = start + (end - start) * progress.value;
+    return {
+      paddingLeft: padding,
+      paddingRight: padding,
+      marginLeft: (collapsedLane - metrics.row.square) / 2 * progress.value,
+      marginRight: (collapsedLane - metrics.row.square) / 2 * progress.value
+    };
+  }, [progress, metrics.row.square, metrics.row.padding, metrics.row.icon, expandedInset, collapsedLane]);
   const sideBarIconStyle = useAnimatedStyle(() => ({
     transform: [{
-      scaleX: progress.value >= 0.5 ? 1 : -1
+      scaleX: 2 * progress.value - 1
     }]
   }), [progress]);
+  const hasLogo = !!logo;
+  const hasAccount = !!account;
+  const headerGeometry = useAnimatedStyle(() => ({
+    height: hasLogo ? 36 + 30 * progress.value : hasAccount ? 32 + 30 * progress.value : 20
+  }), [progress, hasLogo, hasAccount]);
+  const headerIdentityGeometry = useAnimatedStyle(() => ({
+    top: hasLogo ? 0 : 30 * progress.value,
+    right: (hasLogo ? 28 : 20) * (1 - progress.value)
+  }), [progress, hasLogo]);
+  const headerControlGeometry = useAnimatedStyle(() => {
+    const p = progress.value;
+    return {
+      left: `${100 * (1 - p)}%`,
+      width: 20 + (collapsedLane - 20) * p,
+      top: hasLogo ? 8 + 38 * p : hasAccount ? 6 * (1 - p) : 0,
+      transform: [{
+        translateX: -20 * (1 - p)
+      }]
+    };
+  }, [progress, hasLogo, hasAccount, collapsedLane]);
+  const themeGeometry = useAnimatedStyle(() => ({
+    height: 40 - 4 * progress.value
+  }), [progress]);
+  const themeExpandedStyle = useAnimatedStyle(() => ({
+    opacity: 1 - progress.value
+  }), [progress]);
+  const themeCollapsedStyle = useAnimatedStyle(() => ({
+    opacity: progress.value
+  }), [progress]);
 
   // ---- search ------------------------------------------------------------
   const activateSearch = useCallback(() => {
@@ -258,6 +330,7 @@ const SidebarPanel = ({
       selected: isSelected,
       collapsed: collapsed,
       onPress: pressFor(item),
+      onLongPress: item.onLongPress,
       testID: `sidebar-item-${item.key}`,
       badge: item.badge !== undefined ? /*#__PURE__*/_jsx(Badge, {
         content: item.badge,
@@ -265,7 +338,7 @@ const SidebarPanel = ({
           backgroundColor: isSelected ? palette.badgePrimary : palette.badgeNeutral
         },
         textStyle: {
-          color: isSelected ? '#ffffff' : palette.textSecondary
+          color: isSelected ? palette.badgePrimaryForeground : palette.textSecondary
         }
       }) : undefined
     }, item.key);
@@ -378,11 +451,11 @@ const SidebarPanel = ({
     accessibilityLabel: collapsed ? 'Expand sidebar' : 'Collapse sidebar',
     "aria-expanded": !collapsed,
     onPress: toggleCollapse,
-    style: collapsed ? {
-      width: 36,
+    style: {
+      width: '100%',
       alignItems: 'center',
       justifyContent: 'center'
-    } : undefined,
+    },
     testID: "sidebar-collapse",
     children: /*#__PURE__*/_jsx(Animated.View, {
       style: sideBarIconStyle,
@@ -422,7 +495,7 @@ const SidebarPanel = ({
       placeholder: placeholder,
       label: "Filter navigation"
     })]
-  }) : /*#__PURE__*/_jsxs(Pressable, {
+  }) : /*#__PURE__*/_jsxs(AnimatedPressable, {
     ref: searchTriggerRef,
     ...(IS_WEB ? {
       dataSet: {
@@ -437,29 +510,34 @@ const SidebarPanel = ({
     onPress: activateSearch,
     onHoverIn: searchHover.onIn,
     onHoverOut: searchHover.onOut,
-    style: {
+    style: [{
       flexDirection: 'row',
       alignItems: 'center',
-      gap: 8,
-      padding: 8,
+      height: metrics.row.square,
+      paddingTop: metrics.row.padding,
+      paddingBottom: metrics.row.padding,
       overflow: 'hidden',
       borderRadius: borderRadius.full,
       backgroundColor: searchHover.state ? palette.searchHover : palette.tertiary,
       '--bloom-sidebar-ring': palette.ring
-    },
+    }, searchGapStyle, searchInset],
     testID: "sidebar-search",
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: {
+    children: [/*#__PURE__*/_jsxs(Animated.View, {
+      style: [{
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 8,
         minWidth: 0,
-        flex: collapsed ? undefined : 1
-      },
-      children: [/*#__PURE__*/_jsx(RiSearchLine, {
-        width: 20,
-        height: 20,
-        fill: palette.textSecondary
+        flex: 1
+      }, searchGapStyle],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          flexShrink: 0
+        },
+        children: /*#__PURE__*/_jsx(RiSearchLine, {
+          width: metrics.row.icon,
+          height: metrics.row.icon,
+          fill: palette.textSecondary
+        })
       }), /*#__PURE__*/_jsx(Collapsible, {
         collapsed: collapsed,
         children: /*#__PURE__*/_jsx(Text, {
@@ -519,24 +597,18 @@ const SidebarPanel = ({
     })
   }) : null;
 
-  // With a logo the brand leads the header and the account switcher gets its
-  // own row under it; collapsed, the mark sits on top of the expand control.
-  const headerRow = logo ? /*#__PURE__*/_jsxs(_Fragment, {
+  // Keep the same children mounted while the header changes from a row to a
+  // column. Numeric positions share the panel clock, including reversals.
+  const headerRow = mobile ? /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
-      style: collapsed ? {
-        width: '100%',
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        justifyContent: 'center',
-        gap: 10
-      } : {
+      style: {
         width: '100%',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
         gap: 8
       },
-      children: [/*#__PURE__*/_jsx(View, {
+      children: [logo ? /*#__PURE__*/_jsx(View, {
         style: {
           minWidth: 0,
           flexShrink: 1,
@@ -544,196 +616,244 @@ const SidebarPanel = ({
         },
         children: /*#__PURE__*/_jsx(SidebarLogoView, {
           logo: logo,
-          collapsed: collapsed,
+          collapsed: false,
           testID: "sidebar-logo"
         })
-      }), headerControl]
-    }), accountMenu]
-  }) : /*#__PURE__*/_jsxs(View, {
-    style: collapsed ? {
-      width: '100%',
-      flexDirection: 'column-reverse',
-      alignItems: 'flex-start',
-      justifyContent: 'center',
-      gap: 10
-    } : {
-      width: '100%',
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    },
-    children: [accountMenu ?? /*#__PURE__*/_jsx(View, {}), headerControl]
+      }) : accountMenu ?? /*#__PURE__*/_jsx(View, {}), headerControl]
+    }), logo ? accountMenu : null]
+  }) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Animated.View, {
+      testID: "sidebar-header",
+      style: [{
+        width: '100%',
+        position: 'relative'
+      }, headerGeometry],
+      children: [logo || account ? /*#__PURE__*/_jsx(Animated.View, {
+        style: [{
+          position: 'absolute',
+          left: 0,
+          minWidth: 0
+        }, headerIdentityGeometry],
+        children: logo ? /*#__PURE__*/_jsx(SidebarLogoView, {
+          logo: logo,
+          collapsed: collapsed,
+          testID: "sidebar-logo"
+        }) : accountMenu
+      }) : null, /*#__PURE__*/_jsx(Animated.View, {
+        testID: "sidebar-header-control",
+        style: [{
+          position: 'absolute',
+          height: 20
+        }, headerControlGeometry],
+        children: headerControl
+      })]
+    }), logo ? accountMenu : null]
   });
   return /*#__PURE__*/_jsx(SidebarSizeProvider, {
     value: size,
-    children: /*#__PURE__*/_jsx(CollapseProvider, {
-      value: progress,
-      children: /*#__PURE__*/_jsxs(Animated.View, {
-        role: "complementary",
-        accessibilityLabel: "Sidebar",
-        onLayout: onPanelLayout,
-        testID: testID,
-        style: [{
-          height: '100%',
-          flexShrink: 0,
-          flexDirection: 'column',
-          justifyContent: 'space-between',
-          overflow: 'hidden',
-          paddingTop: metrics.padding,
-          paddingBottom: metrics.padding,
-          paddingLeft: collapsed ? metrics.collapsedPaddingX : metrics.padding,
-          paddingRight: collapsed ? metrics.collapsedPaddingX : metrics.padding
-        }, chrome, panelStyle, style],
-        children: [hasTree ?
-        /*#__PURE__*/
-        // With a tree the header and search stay put; only the rows scroll,
-        // 24 between the primary rows and the tree section.
-        _jsxs(View, {
-          style: {
-            width: '100%',
-            minHeight: 0,
-            flexShrink: 1,
-            gap: 12
-          },
-          children: [headerRow, modeSwitcher, showSearch && !flatMobile ? searchButton : null, /*#__PURE__*/_jsxs(ScrollView, {
-            ...(IS_WEB ? {
-              dataSet: {
-                bloomSidebarScroll: 'none'
-              }
-            } : {}),
+    children: /*#__PURE__*/_jsx(SidebarGeometryProvider, {
+      value: geometry,
+      children: /*#__PURE__*/_jsx(CollapseProvider, {
+        value: progress,
+        children: /*#__PURE__*/_jsxs(Animated.View, {
+          role: "complementary",
+          accessibilityLabel: "Sidebar",
+          onLayout: onPanelLayout,
+          testID: testID,
+          style: [{
+            height: '100%',
+            flexShrink: 0,
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            overflow: 'hidden',
+            paddingTop: metrics.padding,
+            paddingBottom: metrics.padding
+          }, chrome, panelStyle, style],
+          children: [/*#__PURE__*/_jsxs(View, {
             style: {
-              flexGrow: 0,
-              flexShrink: 1,
-              minHeight: 0
-            },
-            contentContainerStyle: {
-              gap: 24
+              width: '100%',
+              minHeight: 0,
+              flexShrink: 1
             },
-            showsVerticalScrollIndicator: false,
-            children: [shownItems.length > 0 ? /*#__PURE__*/_jsx(View, {
-              role: "navigation",
+            children: [/*#__PURE__*/_jsxs(View, {
+              testID: `${testID ?? 'sidebar'}-fixed-header`,
+              pointerEvents: "box-none",
+              onLayout: event => setHeaderOverlap(Math.min(20, event.nativeEvent.layout.height / 2)),
               style: {
                 width: '100%',
-                gap: 4
+                flexShrink: 0,
+                gap: 12,
+                zIndex: Z_INDEX.floating
               },
-              children: shownItems.map(renderRow)
-            }) : null, tree && !collapsed && shownFolders.length > 0 ? /*#__PURE__*/_jsxs(View, {
+              children: [headerRow, modeSwitcher, showSearch && !flatMobile ? searchButton : null]
+            }), /*#__PURE__*/_jsxs(SidebarScrollArea, {
+              fadeColor: plain ? palette.flat : palette.panel,
+              testID: `${testID ?? 'sidebar'}-scroll`,
+              ...(IS_WEB ? {
+                dataSet: {
+                  bloomSidebarScroll: 'none'
+                }
+              } : {}),
               style: {
-                width: '100%',
-                gap: 10
+                marginTop: -headerOverlap,
+                marginBottom: -8,
+                marginLeft: -8,
+                marginRight: -8,
+                flexGrow: 0,
+                flexShrink: 1,
+                minHeight: 0
               },
-              children: [/*#__PURE__*/_jsx(Text, {
-                variant: "body-medium",
-                style: {
-                  color: palette.textSecondary
-                },
-                children: tree.label
-              }), /*#__PURE__*/_jsx(View, {
+              contentContainerStyle: {
+                paddingTop: headerOverlap + 12,
+                paddingBottom: 8,
+                paddingLeft: 8,
+                paddingRight: 8,
+                gap: hasTree ? 24 : 0
+              },
+              showsVerticalScrollIndicator: false,
+              children: [shownItems.length > 0 || !hasTree ? /*#__PURE__*/_jsx(Animated.View, {
                 role: "navigation",
-                accessibilityLabel: tree.label,
-                style: {
+                style: [{
                   width: '100%',
                   gap: 4
+                }, !hasTree && navInset],
+                children: nothingMatches && !hasTree ? /*#__PURE__*/_jsx(Text, {
+                  variant: "body-regular",
+                  style: {
+                    paddingLeft: 8,
+                    paddingRight: 8,
+                    paddingTop: 12,
+                    paddingBottom: 12,
+                    color: palette.textTertiary
+                  },
+                  children: noResultsLabel
+                }) : shownItems.map(renderRow)
+              }) : null, tree && !collapsed && shownFolders.length > 0 ? /*#__PURE__*/_jsxs(View, {
+                style: {
+                  width: '100%',
+                  gap: 10
                 },
-                children: shownFolders.map(folder => /*#__PURE__*/_jsx(SidebarFolder, {
-                  folder: folder,
-                  forceOpen: normalized.length > 0,
-                  selectedItem: selectedTreeItem,
-                  onItemPress: onTreeItemPress,
-                  testID: `sidebar-folder-${folder.key}`
-                }, folder.key))
-              })]
-            }) : null, nothingMatches ? /*#__PURE__*/_jsx(Text, {
-              variant: "body-regular",
-              style: {
-                paddingLeft: 8,
-                paddingRight: 8,
-                color: palette.textTertiary
-              },
-              children: noResultsLabel
-            }) : null]
-          })]
-        }) :
-        /*#__PURE__*/
-        /* The scroller clips on every side, so it is padded out by 8 and pulled
-            back with a matching negative margin: the selected row's ring, the
-            profile's hover pill and focus rings all land inside the clip. */
-        _jsxs(ScrollView, {
-          style: {
-            marginTop: -8,
-            marginBottom: -8,
-            marginLeft: -8,
-            marginRight: -8,
-            flexGrow: 0,
-            flexShrink: 1,
-            minHeight: 0
-          },
-          contentContainerStyle: {
-            padding: 8,
-            gap: 12
-          },
-          showsVerticalScrollIndicator: false,
-          children: [headerRow, modeSwitcher, /*#__PURE__*/_jsxs(View, {
-            style: {
-              width: '100%',
-              gap: 12
-            },
-            children: [showSearch && !flatMobile ? searchButton : null, /*#__PURE__*/_jsx(Animated.View, {
-              role: "navigation",
-              style: [{
-                width: '100%',
-                gap: 4
-              }, navInset],
-              children: nothingMatches ? /*#__PURE__*/_jsx(Text, {
+                children: [/*#__PURE__*/_jsx(Text, {
+                  variant: "body-medium",
+                  style: {
+                    color: palette.textSecondary
+                  },
+                  children: tree.label
+                }), /*#__PURE__*/_jsx(View, {
+                  role: "navigation",
+                  accessibilityLabel: tree.label,
+                  style: {
+                    width: '100%',
+                    gap: 4
+                  },
+                  children: shownFolders.map(folder => /*#__PURE__*/_jsx(SidebarFolder, {
+                    folder: folder,
+                    forceOpen: normalized.length > 0,
+                    selectedItem: selectedTreeItem,
+                    onItemPress: onTreeItemPress,
+                    testID: `sidebar-folder-${folder.key}`
+                  }, folder.key))
+                })]
+              }) : null, nothingMatches && hasTree ? /*#__PURE__*/_jsx(Text, {
                 variant: "body-regular",
                 style: {
                   paddingLeft: 8,
                   paddingRight: 8,
-                  paddingTop: 12,
-                  paddingBottom: 12,
                   color: palette.textTertiary
                 },
                 children: noResultsLabel
-              }) : shownItems.map(renderRow)
-            })]
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: {
-            width: '100%',
-            flexShrink: 0,
-            gap: 12,
-            paddingTop: hasTree ? 12 : 0
-          },
-          children: [showThemeToggle ? collapsed ? /*#__PURE__*/_jsx(ThemeToggle, {
-            collapsed: true
-          }) : /*#__PURE__*/_jsx(ThemeToggle, {
-            appearance: "sidebar-segmented",
-            style: plain ? {
-              backgroundColor: palette.panel
-            } : undefined
-          }) : null, shownSecondary.length > 0 ? /*#__PURE__*/_jsx(View, {
-            role: "navigation",
+              }) : null]
+            }), primaryAction ? /*#__PURE__*/_jsx(SidebarPrimaryAction, {
+              action: primaryAction,
+              collapsed: collapsed,
+              testID: testID ? `${testID}-primary-action` : undefined
+            }) : null]
+          }), /*#__PURE__*/_jsxs(View, {
             style: {
               width: '100%',
-              gap: 4
+              flexShrink: 0,
+              gap: 12,
+              paddingTop: hasTree ? 12 : 0
             },
-            children: shownSecondary.map(renderRow)
-          }) : null, plan ? /*#__PURE__*/_jsx(SidebarPlanCard, {
-            plan: plan,
-            collapsed: collapsed,
-            style: plain && !collapsed ? {
-              backgroundColor: palette.panel
-            } : undefined,
-            testID: "sidebar-plan"
-          }) : team ? /*#__PURE__*/_jsx(SidebarTeamMenu, {
-            team: team,
-            collapsed: collapsed,
-            style: plain && !collapsed ? {
-              backgroundColor: palette.panel
-            } : undefined,
-            testID: "sidebar-team"
-          }) : null]
-        })]
+            children: [showThemeToggle ? /*#__PURE__*/_jsxs(Animated.View, {
+              testID: "sidebar-theme-morph",
+              style: [{
+                position: 'relative',
+                overflow: 'hidden'
+              }, themeGeometry],
+              children: [/*#__PURE__*/_jsx(Animated.View, {
+                pointerEvents: collapsed ? 'none' : 'auto',
+                "aria-hidden": collapsed,
+                accessibilityElementsHidden: collapsed,
+                importantForAccessibility: collapsed ? 'no-hide-descendants' : 'auto',
+                ...(IS_WEB && collapsed ? {
+                  inert: true
+                } : {}),
+                style: [{
+                  position: 'absolute',
+                  left: 0,
+                  top: 0
+                }, themeExpandedStyle],
+                children: /*#__PURE__*/_jsx(ThemeToggle, {
+                  variant: "sidebar-segmented",
+                  style: plain ? {
+                    backgroundColor: palette.panel
+                  } : undefined
+                })
+              }), /*#__PURE__*/_jsx(Animated.View, {
+                pointerEvents: collapsed ? 'auto' : 'none',
+                "aria-hidden": !collapsed,
+                accessibilityElementsHidden: !collapsed,
+                importantForAccessibility: collapsed ? 'auto' : 'no-hide-descendants',
+                ...(IS_WEB && !collapsed ? {
+                  inert: true
+                } : {}),
+                style: [{
+                  position: 'absolute',
+                  left: 0,
+                  right: 0,
+                  top: 0
+                }, themeCollapsedStyle],
+                children: /*#__PURE__*/_jsx(ThemeToggle, {
+                  collapsed: true,
+                  style: {
+                    alignSelf: 'center'
+                  }
+                })
+              })]
+            }) : null, shownSecondary.length > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+              role: "navigation",
+              style: [{
+                width: '100%',
+                gap: 4
+              }, navInset],
+              children: shownSecondary.map(renderRow)
+            }) : null, plan ? /*#__PURE__*/_jsx(SidebarPlanCard, {
+              plan: plan,
+              collapsed: collapsed,
+              style: plain ? {
+                backgroundColor: palette.panel
+              } : undefined,
+              testID: "sidebar-plan"
+            }) : team ? /*#__PURE__*/_jsx(SidebarTeamMenu, {
+              team: team,
+              collapsed: collapsed,
+              style: plain ? {
+                backgroundColor: palette.panel
+              } : undefined,
+              testID: "sidebar-team"
+            }) : null, footer != null ? /*#__PURE__*/_jsx(View, {
+              testID: testID ? `${testID}-footer` : 'sidebar-footer',
+              style: {
+                width: '100%',
+                flexShrink: 0
+              },
+              children: typeof footer === 'function' ? footer({
+                collapsed
+              }) : footer
+            }) : null]
+          })]
+        })
       })
     })
   });