@storybook/react-native-ui-lite 10.2.0 → 10.2.2-alpha.0

package/dist/index.js

@@ -319,7 +319,7 @@ function StoryIcon({
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var BranchNodeText = import_react_native_theming2.styled.Text(({ theme }) => ({
   textAlign: "left",
-  fontSize: theme.typography.size.s2,
+  fontSize: theme.typography.size.s2 + 1,
   flexShrink: 1,
   color: theme.color.defaultText
 }));
@@ -329,15 +329,15 @@ var BranchNode = import_react_native_theming2.styled.TouchableOpacity(({ depth =
   cursor: "pointer",
   display: "flex",
   flexDirection: "row",
-  alignItems: "flex-start",
+  alignItems: "center",
   alignSelf: "flex-start",
   paddingLeft: (isExpandable ? 8 : 22) + depth * 18,
   backgroundColor: "transparent",
-  minHeight: 28,
+  minHeight: 34,
   borderRadius: 4,
   gap: 6,
-  paddingTop: 5,
-  paddingBottom: 4,
+  paddingTop: 8,
+  paddingBottom: 7,
   // will this actually do anything?
   "&:hover, &:focus": {
     backgroundColor: (0, import_polished.transparentize)(0.93, theme.color.secondary),
@@ -352,20 +352,20 @@ var LeafNode = import_react_native_theming2.styled.TouchableOpacity(
     display: "flex",
     gap: 6,
     flexDirection: "row",
-    alignItems: "flex-start",
+    alignItems: "center",
     paddingLeft: 22 + depth * 18,
-    paddingTop: 5,
-    paddingBottom: 4,
+    paddingTop: 8,
+    paddingBottom: 7,
     backgroundColor: selected ? theme.color.secondary : void 0,
     // not sure 👇
     width: "100%",
     borderRadius: 4,
     paddingRight: 20,
-    minHeight: 28
+    minHeight: 34
   })
 );
 var LeafNodeText = import_react_native_theming2.styled.Text(({ theme, selected }) => ({
-  fontSize: theme.typography.size.s2,
+  fontSize: theme.typography.size.s2 + 1,
   flexShrink: 1,
   fontWeight: selected ? "bold" : "normal",
   color: selected ? theme.color.lightest : theme.color.defaultText
@@ -374,8 +374,7 @@ var Wrapper = import_react_native_theming2.styled.View({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
-  gap: 6,
-  marginTop: 2
+  gap: 6
 });
 var GroupNode = import_react2.default.memo(function GroupNode2({
   children,
@@ -392,7 +391,7 @@ var GroupNode = import_react2.default.memo(function GroupNode2({
       isExpandable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapseIcon, { isExpanded }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GroupIcon, { width: 14, height: 14, color })
     ] }, `group-${props.id}-${color}`),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BranchNodeText, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BranchNodeText, { numberOfLines: 1, children })
   ] });
 });
 var ComponentNode = import_react2.default.memo(
@@ -406,7 +405,7 @@ var ComponentNode = import_react2.default.memo(
         isExpandable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapseIcon, { isExpanded }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComponentIcon, { width: 12, height: 12, color })
       ] }, `component-${props.id}-${color}`),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BranchNodeText, { children })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BranchNodeText, { numberOfLines: 1, children })
     ] });
   }
 );
@@ -418,7 +417,7 @@ var StoryNode = import_react2.default.memo(
     }, [props.selected, theme.color.lightest, theme.color.seafoam]);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(LeafNode, { ...props, ref, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryIcon, { width: 14, height: 14, color }) }, `story-${props.id}-${color}`),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LeafNodeText, { selected: props.selected, children })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LeafNodeText, { selected: props.selected, numberOfLines: 1, children })
     ] });
   })
 );
@@ -428,44 +427,36 @@ StoryNode.displayName = "StoryNode";
 var import_react_native_theming3 = require("@storybook/react-native-theming");
 var import_react_native_ui_common = require("@storybook/react-native-ui-common");
 var import_react4 = __toESM(require("react"));
+var import_react_native2 = require("react-native");
+var import_list = require("@legendapp/list");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
 
 // src/SelectedNodeProvider.tsx
 var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var SelectedNodeContext = (0, import_react3.createContext)({
-  nodeRef: { current: null },
-  setNodeRef: () => {
-  },
-  scrollToSelectedNode: () => {
+  registerCallback: () => {
   },
-  scrollRef: null
+  scrollCallback: () => {
+  }
 });
 var SelectedNodeProvider = ({ children }) => {
-  const nodeRef = (0, import_react3.useRef)(null);
-  const setNodeRef = (0, import_react3.useCallback)((node) => {
-    nodeRef.current = node;
-  }, []);
-  const scrollRef = (0, import_react3.useRef)(null);
-  const scrollToSelectedNode = (0, import_react3.useCallback)(() => {
-    setTimeout(() => {
-      if (nodeRef?.current && scrollRef?.current) {
-        try {
-          nodeRef.current.measureLayout?.(scrollRef.current, (_x, y) => {
-            scrollRef.current?.scrollTo({ y: y - 100, animated: true });
-          });
-        } catch (_error) {
-        }
-      }
-    }, 500);
+  const [scrollCallbackValue, setScrollCallback] = (0, import_react3.useState)(null);
+  const registerCallback = (0, import_react3.useCallback)((callback) => {
+    setScrollCallback(() => callback);
   }, []);
+  const scrollCallback = (0, import_react3.useCallback)(
+    (options) => {
+      scrollCallbackValue?.(options);
+    },
+    [scrollCallbackValue]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     SelectedNodeContext.Provider,
     {
       value: {
-        nodeRef,
-        setNodeRef,
-        scrollToSelectedNode,
-        scrollRef
+        scrollCallback,
+        registerCallback
       },
       children
     }
@@ -482,7 +473,7 @@ var Node = import_react4.default.memo(function Node2({
   item,
   refId,
   isOrphan,
-  isDisplayed,
+  isDisplayed: _isDisplayed,
   isSelected,
   isFullyExpanded,
   color: _2,
@@ -491,24 +482,11 @@ var Node = import_react4.default.memo(function Node2({
   setExpanded,
   onSelectStoryId
 }) {
-  const { setNodeRef } = useSelectedNode();
-  const setRef = (0, import_react4.useCallback)(
-    (node) => {
-      if (isSelected && node) {
-        setNodeRef(node);
-      }
-    },
-    [isSelected, setNodeRef]
-  );
-  if (!isDisplayed) {
-    return null;
-  }
   const id = (0, import_react_native_ui_common.createId)(item.id, refId);
   if (item.type === "story") {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LeafNodeStyleWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       StoryNode,
       {
-        ref: setRef,
         selected: isSelected,
         id,
         depth: isOrphan ? item.depth : item.depth - 1,
@@ -526,6 +504,7 @@ var Node = import_react4.default.memo(function Node2({
         CollapseButton,
         {
           "data-action": "collapse-root",
+          hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
           onPress: (event) => {
             event.preventDefault();
             setExpanded({ ids: [item.id], value: !isExpanded });
@@ -543,6 +522,7 @@ var Node = import_react4.default.memo(function Node2({
           "aria-label": isFullyExpanded ? "Expand" : "Collapse",
           "data-action": "expand-all",
           "data-expanded": isFullyExpanded,
+          hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
           onPress: (event) => {
             event.preventDefault();
             setFullyExpanded();
@@ -584,7 +564,7 @@ var LeafNodeStyleWrapper = import_react_native_theming3.styled.View(({ theme })
   paddingRight: 20,
   color: theme.color.defaultText,
   backgroundColor: "transparent",
-  minHeight: 28,
+  minHeight: 34,
   borderRadius: 4
 }));
 var RootNode = import_react_native_theming3.styled.View(() => ({
@@ -594,7 +574,7 @@ var RootNode = import_react_native_theming3.styled.View(() => ({
   justifyContent: "space-between",
   marginTop: 16,
   marginBottom: 4,
-  minHeight: 28
+  minHeight: 34
 }));
 var RootNodeText = import_react_native_theming3.styled.Text(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
@@ -613,10 +593,19 @@ var CollapseButton = import_react_native_theming3.styled.TouchableOpacity(() =>
   gap: 6,
   alignItems: "center",
   cursor: "pointer",
-  height: 28
+  height: 34
 }));
+var flexStyle = { flex: 1 };
+var ITEM_HEIGHT = 34;
+var ROOT_ITEM_HEIGHT = 54;
+var getEstimatedItemSize = (item, _index) => {
+  return item?.isRoot ? ROOT_ITEM_HEIGHT : ITEM_HEIGHT;
+};
 var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
-  const containerRef = (0, import_react4.useRef)(null);
+  const { registerCallback } = useSelectedNode();
+  const [idToScrolllOnMount, setIdToScrolllOnMount] = (0, import_react4.useState)(null);
+  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const listRef = (0, import_react4.useRef)(null);
   const [rootIds, orphanIds, initialExpanded] = (0, import_react4.useMemo)(
     () => Object.keys(data).reduce(
       (acc, id) => {
@@ -655,9 +644,7 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
   }, [data]);
   const collapsedItems = (0, import_react4.useMemo)(
     () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
-    // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [singleStoryComponentIds]
+    [singleStoryComponentIds, data]
   );
   const collapsedData = (0, import_react4.useMemo)(() => {
     return singleStoryComponentIds.reduce(
@@ -679,13 +666,7 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
       },
       { ...data }
     );
-  }, [data]);
-  const ancestry = (0, import_react4.useMemo)(() => {
-    return collapsedItems.reduce(
-      (acc, id) => Object.assign(acc, { [id]: (0, import_react_native_ui_common.getAncestorIds)(collapsedData, id) }),
-      {}
-    );
-  }, [collapsedItems, collapsedData]);
+  }, [data, singleStoryComponentIds]);
   const [expanded, setExpanded] = (0, import_react_native_ui_common.useExpanded)({
     refId,
     data: collapsedData,
@@ -694,13 +675,58 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
     selectedStoryId,
     onSelectStoryId
   });
-  const treeItems = (0, import_react4.useMemo)(() => {
+  const parentMap = (0, import_react4.useMemo)(() => {
+    const map = {};
+    collapsedItems.forEach((id) => {
+      const item = collapsedData[id];
+      map[id] = "parent" in item && item.parent || null;
+    });
+    return map;
+  }, [collapsedItems, collapsedData]);
+  const isItemVisible = (0, import_react4.useCallback)(
+    (itemId) => {
+      const item = collapsedData[itemId];
+      if (item.type === "root") return true;
+      if (!("parent" in item) || !item.parent) return true;
+      let currentId = item.parent;
+      while (currentId) {
+        if (!expanded[currentId]) return false;
+        currentId = parentMap[currentId];
+      }
+      return true;
+    },
+    [collapsedData, expanded, parentMap]
+  );
+  const treeData = (0, import_react4.useMemo)(() => {
     return collapsedItems.map((itemId) => {
       const item = collapsedData[itemId];
-      const id = (0, import_react_native_ui_common.createId)(itemId, refId);
+      if (!isItemVisible(itemId)) {
+        return null;
+      }
       if (item.type === "root") {
         const descendants = expandableDescendants[item.id];
         const isFullyExpanded = descendants.every((d) => expanded[d]);
+        return {
+          itemId,
+          item,
+          isRoot: true,
+          isFullyExpanded,
+          descendants
+        };
+      }
+      return {
+        itemId,
+        item,
+        isRoot: false,
+        isOrphan: orphanIds.some((oid) => itemId === oid || itemId.startsWith(`${oid}-`))
+      };
+    }).filter(Boolean);
+  }, [collapsedData, collapsedItems, expandableDescendants, expanded, isItemVisible, orphanIds]);
+  const renderItem = (0, import_react4.useCallback)(
+    ({ item: treeItem }) => {
+      const { itemId, item, isRoot } = treeItem;
+      const id = (0, import_react_native_ui_common.createId)(itemId, refId);
+      if (isRoot) {
         return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Root,
           {
@@ -711,8 +737,8 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
             isSelected: selectedStoryId === itemId,
             isExpanded: !!expanded[itemId],
             setExpanded,
-            isFullyExpanded,
-            expandableDescendants: descendants,
+            isFullyExpanded: treeItem.isFullyExpanded,
+            expandableDescendants: treeItem.descendants,
             onSelectStoryId,
             docsMode: false,
             color: "",
@@ -721,7 +747,6 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
           id
         );
       }
-      const isDisplayed = !item.parent || ancestry[itemId].every((a) => expanded[a]);
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         Node,
         {
@@ -730,8 +755,8 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
           refId,
           color: null,
           docsMode,
-          isOrphan: orphanIds.some((oid) => itemId === oid || itemId.startsWith(`${oid}-`)),
-          isDisplayed,
+          isOrphan: treeItem.isOrphan,
+          isDisplayed: true,
           isSelected: selectedStoryId === itemId,
           isExpanded: !!expanded[itemId],
           setExpanded,
@@ -739,27 +764,62 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
         },
         id
       );
+    },
+    [docsMode, expanded, onSelectStoryId, refId, selectedStoryId, setExpanded, status]
+  );
+  const keyExtractor = (0, import_react4.useCallback)(
+    (item) => {
+      return (0, import_react_native_ui_common.createId)(item.itemId, refId);
+    },
+    [refId]
+  );
+  const contentContainerStyle2 = (0, import_react4.useMemo)(
+    () => ({
+      marginTop: isMain && orphanIds.length > 0 ? 20 : 0,
+      paddingBottom: insets.bottom + 20,
+      paddingLeft: 6
+    }),
+    [isMain, orphanIds.length, insets.bottom]
+  );
+  (0, import_react4.useLayoutEffect)(() => {
+    registerCallback(({ id: nextId, animated }) => {
+      const targetId = nextId ?? selectedStoryId;
+      const ancestorIds = (0, import_react_native_ui_common.getAncestorIds)(collapsedData, targetId);
+      setExpanded({ ids: [...ancestorIds, targetId], value: true });
+      setIdToScrolllOnMount(targetId);
     });
-  }, [
-    ancestry,
-    collapsedData,
-    collapsedItems,
-    docsMode,
-    expandableDescendants,
-    expanded,
-    onSelectStoryId,
-    orphanIds,
-    refId,
-    selectedStoryId,
-    setExpanded,
-    status
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Container, { ref: containerRef, hasOrphans: isMain && orphanIds.length > 0, children: treeItems });
+  }, [collapsedData, registerCallback, selectedStoryId, setExpanded]);
+  (0, import_react4.useEffect)(() => {
+    if (idToScrolllOnMount) {
+      const index = treeData.findIndex((item) => {
+        return item.itemId === idToScrolllOnMount;
+      });
+      if (index >= 0) {
+        listRef.current?.scrollToIndex({
+          index,
+          animated: false,
+          viewPosition: 0.5,
+          viewOffset: 100
+        });
+        setIdToScrolllOnMount(null);
+      }
+    }
+  }, [idToScrolllOnMount, treeData]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: flexStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_list.LegendList,
+    {
+      ref: listRef,
+      style: flexStyle,
+      data: treeData,
+      renderItem,
+      keyExtractor,
+      contentContainerStyle: contentContainerStyle2,
+      getFixedItemSize: getEstimatedItemSize,
+      keyboardShouldPersistTaps: "handled",
+      recycleItems: true
+    }
+  ) });
 });
-var Container = import_react_native_theming3.styled.View((props) => ({
-  marginTop: props.hasOrphans ? 20 : 0,
-  marginBottom: 20
-}));
 var Root = import_react4.default.memo(function Root2({
   setExpanded,
   isFullyExpanded,
@@ -790,7 +850,7 @@ var import_react_native_theming4 = require("@storybook/react-native-theming");
 var import_react_native_ui_common2 = require("@storybook/react-native-ui-common");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Wrapper2 = import_react_native_theming4.styled.View(() => ({
-  position: "relative"
+  flex: 1
 }));
 var Ref = import_react5.default.memo(
   function Ref2(props) {
@@ -844,9 +904,10 @@ var Ref = import_react5.default.memo(
 );
 
 // src/Explorer.tsx
-var import_react_native2 = require("react-native");
+var import_react_native3 = require("react-native");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var import_react7 = require("react");
+var containerStyle = { flex: 1 };
 var Explorer = import_react6.default.memo(function Explorer2({
   isLoading,
   isBrowsing,
@@ -855,7 +916,7 @@ var Explorer = import_react6.default.memo(function Explorer2({
   setSelection
 }) {
   const containerRef = (0, import_react6.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react7.createElement)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native3.View, { ref: containerRef, style: containerStyle, children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react7.createElement)(
     Ref,
     {
       ...ref,
@@ -872,7 +933,7 @@ var Explorer = import_react6.default.memo(function Explorer2({
 var import_react_native_theming7 = require("@storybook/react-native-theming");
 var import_react_native_ui_common5 = require("@storybook/react-native-ui-common");
 var import_react11 = __toESM(require("react"));
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 
 // src/constants.ts
 var BREAKPOINT = 1e3;
@@ -881,28 +942,12 @@ var DEFAULT_REF_ID = "storybook_internal";
 
 // src/Search.tsx
 var import_react_native_theming5 = require("@storybook/react-native-theming");
-var import_fuse = __toESM(require("fuse.js"));
-var import_react8 = __toESM(require("react"));
-var import_react_native3 = require("react-native");
+var import_react8 = require("@nozbe/microfuzz/react");
+var import_react9 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
 var import_react_native_ui_common3 = require("@storybook/react-native-ui-common");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_MAX_SEARCH_RESULTS = 50;
-var options = {
-  shouldSort: true,
-  tokenize: true,
-  findAllMatches: true,
-  includeScore: true,
-  includeMatches: true,
-  threshold: 0.2,
-  location: 0,
-  distance: 100,
-  maxPatternLength: 32,
-  minMatchCharLength: 1,
-  keys: [
-    { name: "name", weight: 0.7 },
-    { name: "path", weight: 0.3 }
-  ]
-};
 var SearchIconWrapper = import_react_native_theming5.styled.View({
   position: "absolute",
   top: 0,
@@ -915,11 +960,9 @@ var SearchIconWrapper = import_react_native_theming5.styled.View({
   height: "100%"
 });
 var SearchField = import_react_native_theming5.styled.View({
-  display: "flex",
-  flexDirection: "column",
-  position: "relative"
+  flexShrink: 0
 });
-var inputPlatformSpecificStyles = import_react_native3.Platform.select({
+var inputPlatformSpecificStyles = import_react_native4.Platform.select({
   macos: {
     paddingVertical: 6
   },
@@ -931,7 +974,7 @@ var inputPlatformSpecificStyles = import_react_native3.Platform.select({
     height: 32
   }
 });
-var Input = (0, import_react_native_theming5.styled)(import_react_native3.TextInput)(({ theme }) => ({
+var Input = (0, import_react_native_theming5.styled)(import_react_native4.TextInput)(({ theme }) => ({
   ...inputPlatformSpecificStyles,
   paddingLeft: 28,
   paddingRight: 28,
@@ -947,36 +990,39 @@ var ClearIcon = import_react_native_theming5.styled.TouchableOpacity(({ theme })
   position: "absolute",
   top: 0,
   bottom: 0,
-  right: 8,
+  right: 0,
   zIndex: 1,
   color: theme.textMutedColor,
   cursor: "pointer",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  height: "100%"
+  height: "100%",
+  paddingHorizontal: 12
 }));
-var Search = import_react8.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
-  const inputRef = (0, import_react8.useRef)(null);
-  const [inputValue, setInputValue] = (0, import_react8.useState)(initialQuery);
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-  const [allComponents, showAllComponents] = (0, import_react8.useState)(false);
-  const { scrollToSelectedNode } = useSelectedNode();
-  const selectStory = (0, import_react8.useCallback)(
+var flexStyle2 = { flex: 1 };
+var searchFieldWrapperStyle = { paddingHorizontal: 10, marginBottom: 4 };
+var Search = import_react9.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
+  const theme = (0, import_react_native_theming5.useTheme)();
+  const inputRef = (0, import_react9.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react9.useState)(initialQuery);
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
+  const [allComponents, showAllComponents] = (0, import_react9.useState)(false);
+  const { scrollCallback } = useSelectedNode();
+  const selectStory = (0, import_react9.useCallback)(
     (id, refId) => {
       setSelection({ storyId: id, refId });
       inputRef.current?.blur();
       setIsOpen(false);
       showAllComponents(false);
-      scrollToSelectedNode();
+      scrollCallback({ id, animated: false });
     },
-    [scrollToSelectedNode, setSelection]
+    [scrollCallback, setSelection]
   );
-  const getItemProps = (0, import_react8.useCallback)(
+  const getItemProps = (0, import_react9.useCallback)(
     ({ item: result }) => {
       return {
         icon: result?.item?.type === "component" ? "component" : "story",
-        result,
         onPress: () => {
           if (result?.item?.type === "story") {
             selectStory(result.item.id, result.item.refId);
@@ -987,7 +1033,6 @@ var Search = import_react8.default.memo(function Search2({ children, dataset, se
           }
         },
         score: result.score,
-        refIndex: result.refIndex,
         item: result.item,
         matches: result.matches,
         isHighlighted: false
@@ -995,65 +1040,71 @@ var Search = import_react8.default.memo(function Search2({ children, dataset, se
     },
     [selectStory]
   );
-  const makeFuse = (0, import_react8.useCallback)(() => {
-    const list = dataset.entries.reduce((acc, [refId, { index }]) => {
+  const deferredDataset = (0, import_react9.useDeferredValue)(dataset);
+  const searchList = (0, import_react9.useMemo)(() => {
+    return deferredDataset.entries.reduce((acc, [refId, { index }]) => {
       if (index) {
         acc.push(
           ...Object.values(index).map((item) => {
-            return (0, import_react_native_ui_common3.searchItem)(item, dataset.hash[refId]);
+            return (0, import_react_native_ui_common3.searchItem)(item, deferredDataset.hash[refId]);
           })
         );
       }
       return acc;
     }, []);
-    return new import_fuse.default(list, options);
-  }, [dataset]);
-  const getResults = (0, import_react8.useCallback)(
-    (input2) => {
-      const fuse = makeFuse();
-      if (!input2) return [];
-      let results2 = [];
-      const resultIds = /* @__PURE__ */ new Set();
-      const distinctResults = fuse.search(input2).filter(({ item }) => {
-        if (!(item.type === "component" || item.type === "docs" || item.type === "story") || resultIds.has(item.parent)) {
-          return false;
-        }
-        resultIds.add(item.id);
-        return true;
-      });
-      if (distinctResults.length) {
-        results2 = distinctResults.slice(0, allComponents ? 1e3 : DEFAULT_MAX_SEARCH_RESULTS);
-        if (distinctResults.length > DEFAULT_MAX_SEARCH_RESULTS && !allComponents) {
-          results2.push({
-            showAll: () => showAllComponents(true),
-            totalCount: distinctResults.length,
-            moreCount: distinctResults.length - DEFAULT_MAX_SEARCH_RESULTS
-          });
-        }
+  }, [deferredDataset]);
+  const deferredQuery = (0, import_react9.useDeferredValue)(inputValue);
+  const queryText = (0, import_react9.useMemo)(() => deferredQuery ? deferredQuery.trim() : "", [deferredQuery]);
+  const getText = (0, import_react9.useCallback)((item) => [item.name, item.path?.join(" ") ?? ""], []);
+  const mapResultItem = (0, import_react9.useCallback)(
+    ({
+      item,
+      score,
+      matches
+    }) => ({
+      item,
+      score,
+      matches: matches ?? []
+    }),
+    []
+  );
+  const fuzzyResults = (0, import_react8.useFuzzySearchList)({
+    list: searchList,
+    queryText,
+    getText,
+    mapResultItem
+  });
+  const results = (0, import_react9.useMemo)(() => {
+    if (!queryText) return [];
+    const maxResults = allComponents ? 1e3 : DEFAULT_MAX_SEARCH_RESULTS;
+    const processedResults = [];
+    const resultIds = /* @__PURE__ */ new Set();
+    let totalDistinctCount = 0;
+    for (const result of fuzzyResults) {
+      const { item } = result;
+      if (!(item.type === "component" || item.type === "docs" || item.type === "story") || resultIds.has(item.parent)) {
+        continue;
       }
-      const lastViewed = !input2 && getLastViewed();
-      if (lastViewed && lastViewed.length) {
-        results2 = lastViewed.reduce((acc, { storyId, refId }) => {
-          const data = dataset.hash[refId];
-          if (data && data.index && data.index[storyId]) {
-            const story = data.index[storyId];
-            const item = story.type === "story" ? data.index[story.parent] : story;
-            if (!acc.some((res) => res.item.refId === refId && res.item.id === item.id)) {
-              acc.push({ item: (0, import_react_native_ui_common3.searchItem)(item, dataset.hash[refId]), matches: [], score: 0 });
-            }
-          }
-          return acc;
-        }, []);
+      resultIds.add(item.id);
+      totalDistinctCount++;
+      if (processedResults.length < maxResults) {
+        processedResults.push(result);
       }
-      return results2;
-    },
-    [allComponents, dataset.hash, getLastViewed, makeFuse]
-  );
-  const deferredQuery = (0, import_react8.useDeferredValue)(inputValue);
-  const input = deferredQuery ? deferredQuery.trim() : "";
-  const results = input ? getResults(input) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native3.View, { style: { flex: 1 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SearchField, { children: [
+      if (allComponents && processedResults.length >= maxResults) {
+        break;
+      }
+    }
+    if (!allComponents && totalDistinctCount > DEFAULT_MAX_SEARCH_RESULTS) {
+      processedResults.push({
+        showAll: () => showAllComponents(true),
+        totalCount: totalDistinctCount,
+        moreCount: totalDistinctCount - DEFAULT_MAX_SEARCH_RESULTS
+      });
+    }
+    return processedResults;
+  }, [queryText, fuzzyResults, allComponents]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native4.View, { style: flexStyle2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native4.View, { style: searchFieldWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SearchField, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIcon, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Input,
@@ -1071,35 +1122,34 @@ var Search = import_react8.default.memo(function Search2({ children, dataset, se
             setInputValue("");
             inputRef.current.clear();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, { color: theme.textMutedColor })
         }
       )
-    ] }),
-    children({
-      query: input,
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native4.View, { style: flexStyle2, children: children({
+      query: queryText,
       results,
       isBrowsing: !isOpen || !inputValue.length,
       closeMenu: () => {
       },
       getItemProps,
       highlightedIndex: null
-    })
+    }) })
   ] });
 });
 
 // src/SearchResults.tsx
+var import_list2 = require("@legendapp/list");
 var import_react_native_theming6 = require("@storybook/react-native-theming");
 var import_react_native_ui_common4 = require("@storybook/react-native-ui-common");
 var import_polished2 = require("polished");
-var import_react9 = __toESM(require("react"));
-var import_react_native4 = require("react-native");
+var import_react10 = __toESM(require("react"));
+var import_react_native5 = require("react-native");
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var import_react10 = require("react");
-var ResultsList = import_react_native_theming6.styled.View({
-  margin: 0,
-  padding: 0,
-  marginTop: 8
-});
+var isWeb = import_react_native5.Platform.OS === "web";
+var noResultsFirstLineStyle = { marginBottom: 4 };
+var flexStyle3 = { flex: 1 };
 var ResultRow = import_react_native_theming6.styled.TouchableOpacity(
   ({ theme, isHighlighted }) => ({
     width: "100%",
@@ -1112,10 +1162,10 @@ var ResultRow = import_react_native_theming6.styled.TouchableOpacity(
     color: theme.color.defaultText,
     fontSize: theme.typography.size.s2,
     backgroundColor: isHighlighted ? theme.background.hoverable : "transparent",
-    minHeight: 28,
+    minHeight: 34,
     borderRadius: 4,
     gap: 6,
-    paddingTop: 7,
+    paddingTop: 8,
     paddingBottom: 7,
     paddingLeft: 8,
     paddingRight: 8,
@@ -1134,11 +1184,16 @@ var ResultRowContent = import_react_native_theming6.styled.View(() => ({
 }));
 var NoResults = import_react_native_theming6.styled.View(({ theme }) => ({
   marginTop: 20,
-  textAlign: "center",
+  alignItems: "center",
   fontSize: theme.typography.size.s2,
   lineHeight: 18,
   color: theme.color.defaultText
 }));
+var NoResultsText = import_react_native_theming6.styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+  color: theme.textMutedColor,
+  textAlign: "center"
+}));
 var Mark = import_react_native_theming6.styled.Text(({ theme }) => ({
   backgroundColor: "transparent",
   color: theme.color.secondary
@@ -1152,7 +1207,7 @@ var RecentlyOpenedTitle = import_react_native_theming6.styled.View(({ theme }) =
   justifyContent: "space-between",
   fontSize: theme.typography.size.s1 - 1,
   fontWeight: theme.typography.weight.bold,
-  minHeight: 28,
+  minHeight: 34,
   // letterSpacing: '0.16em', <-- todo
   textTransform: "uppercase",
   color: theme.textMutedColor,
@@ -1160,28 +1215,29 @@ var RecentlyOpenedTitle = import_react_native_theming6.styled.View(({ theme }) =
   marginBottom: 4,
   alignItems: "center"
 }));
-var Highlight = import_react9.default.memo(
-  function Highlight2({ children, match }) {
-    if (!match) return children;
-    const { value, indices } = match;
-    const { nodes: result } = indices.reduce(
+var Highlight = import_react10.default.memo(
+  function Highlight2({ children, text, ranges }) {
+    if (!ranges || ranges.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: children ?? text });
+    const { nodes: result } = ranges.reduce(
       ({ cursor, nodes }, [start, end], index, { length }) => {
-        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: value.slice(cursor, start) }, `text-${index}`));
-        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Mark, { children: value.slice(start, end + 1) }, `mark-${index}`));
-        if (index === length - 1) {
-          nodes.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: value.slice(end + 1) }, `last-${index}`));
+        if (cursor < start) {
+          nodes.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: text.slice(cursor, start) }, `text-${index}`));
+        }
+        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Mark, { children: text.slice(start, end + 1) }, `mark-${index}`));
+        if (index === length - 1 && end + 1 < text.length) {
+          nodes.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: text.slice(end + 1) }, `last-${index}`));
         }
         return { cursor: end + 1, nodes };
       },
       { cursor: 0, nodes: [] }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: result }, `end-${match.key}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: result });
   }
 );
 var Title = import_react_native_theming6.styled.Text(({ theme }) => ({
   justifyContent: "flex-start",
   color: theme.textMutedColor,
-  fontSize: theme.typography.size.s2
+  fontSize: theme.typography.size.s2 + 1
 }));
 var Path = import_react_native_theming6.styled.View(({ theme }) => ({
   justifyContent: "flex-start",
@@ -1194,46 +1250,38 @@ var PathText = import_react_native_theming6.styled.Text(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   color: theme.textMutedColor
 }));
-var Result = import_react9.default.memo(function Result2({
+var Result = import_react10.default.memo(function Result2({
   item,
   matches,
   icon: _icon,
   onPress,
   ...props
 }) {
-  const press = (0, import_react9.useCallback)(
+  const theme = (0, import_react_native_theming6.useTheme)();
+  const press = (0, import_react10.useCallback)(
     (event) => {
       event.preventDefault();
       onPress?.(event);
     },
     [onPress]
   );
-  const nameMatch = matches.find((match) => match.key === "name");
-  const pathMatches = matches.filter((match) => match.key === "path");
+  const nameHighlights = matches?.[0];
+  const pathString = item.path?.join(" ") ?? "";
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ResultRow, { ...props, onPress: press, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(IconWrapper, { children: [
-      item.type === "component" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComponentIcon, { width: 14, height: 14 }),
-      item.type === "story" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StoryIcon, { width: 14, height: 14 })
+      item.type === "component" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComponentIcon, { width: 14, height: 14, color: theme.color.secondary }),
+      item.type === "story" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StoryIcon, { width: 14, height: 14, color: theme.color.seafoam })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ResultRowContent, { testID: "search-result-item--label", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Highlight, { match: nameMatch, children: item.name }, "search-result-item--label-highlight") }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Path, { children: item.path.map((group, index) => {
-        const pathSeparator = index === item.path.length - 1 ? "" : "/";
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native4.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          Highlight,
-          {
-            match: pathMatches.find((match) => match.refIndex === index),
-            children: `${group}${pathSeparator}`
-          }
-        ) }) }, index);
-      }) })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Highlight, { text: item.name, ranges: nameHighlights, children: item.name }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Path, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Highlight, { text: pathString, ranges: matches?.[1], children: item.path?.join(" / ") }) }) })
     ] })
   ] });
 });
 var Text = import_react_native_theming6.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
 }));
-var SearchResults = import_react9.default.memo(function SearchResults2({
+var SearchResults = import_react10.default.memo(function SearchResults2({
   query,
   results,
   closeMenu,
@@ -1241,70 +1289,140 @@ var SearchResults = import_react9.default.memo(function SearchResults2({
   highlightedIndex,
   clearLastViewed
 }) {
-  const handleClearLastViewed = () => {
+  const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
+  const handleClearLastViewed = (0, import_react10.useCallback)(() => {
     clearLastViewed();
     closeMenu();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ResultsList, { children: [
-    results.length > 0 && !query ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(RecentlyOpenedTitle, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: "Recently opened" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_ui_common4.IconButton, { onPress: handleClearLastViewed })
-    ] }) : null,
-    results.length === 0 && query ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native4.View, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(NoResults, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { style: { marginBottom: 8 }, children: "No components found" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: "Find components by name or path." })
-    ] }) }) : null,
-    results.map((result, index) => {
+  }, [clearLastViewed, closeMenu]);
+  const contentContainerStyle2 = (0, import_react10.useMemo)(
+    () => ({
+      paddingHorizontal: 10,
+      paddingTop: 8,
+      paddingBottom: insets.bottom + 20
+    }),
+    [insets.bottom]
+  );
+  const listData = (0, import_react10.useMemo)(() => {
+    const items = [];
+    if (results.length > 0 && !query) {
+      items.push({ type: "header", clearLastViewed: handleClearLastViewed });
+    }
+    if (results.length === 0 && query) {
+      items.push({ type: "noResults" });
+    }
+    results.forEach((result, index) => {
       if ((0, import_react_native_ui_common4.isExpandType)(result)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MoreWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_react_native_ui_common4.Button,
-          {
-            ...result,
-            ...getItemProps({ key: `${index}`, index, item: result }),
-            size: "small",
-            text: `Show ${result.moreCount} more results`
-          }
-        ) }, "search-result-expand");
+        items.push({ type: "expand", result, index });
+      } else {
+        items.push({ type: "result", result, index });
       }
-      const { item } = result;
-      const key = `${item.refId}::${item.id}`;
-      return /* @__PURE__ */ (0, import_react10.createElement)(
-        Result,
-        {
-          ...result,
-          ...getItemProps({ key, index, item: result }),
-          isHighlighted: highlightedIndex === index,
-          key: item.id
+    });
+    return items;
+  }, [results, query, handleClearLastViewed]);
+  const keyExtractor = (0, import_react10.useCallback)((item) => {
+    switch (item.type) {
+      case "header":
+        return "header";
+      case "noResults":
+        return "no-results";
+      case "expand":
+        return "expand";
+      case "result": {
+        const { item: resultItem } = item.result;
+        return `${resultItem.refId}::${resultItem.id}`;
+      }
+    }
+  }, []);
+  const renderItem = (0, import_react10.useCallback)(
+    ({ item: listItem }) => {
+      switch (listItem.type) {
+        case "header":
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(RecentlyOpenedTitle, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: "Recently opened" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_ui_common4.IconButton, { onPress: listItem.clearLastViewed })
+          ] });
+        case "noResults":
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(NoResults, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NoResultsText, { style: noResultsFirstLineStyle, children: "No components found" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NoResultsText, { children: "Find components by name or path." })
+          ] });
+        case "expand": {
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MoreWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_react_native_ui_common4.Button,
+            {
+              ...listItem.result,
+              ...getItemProps({
+                key: `${listItem.index}`,
+                index: listItem.index,
+                item: listItem.result
+              }),
+              size: "small",
+              text: `Show ${listItem.result.moreCount} more results`
+            }
+          ) });
         }
-      );
-    })
-  ] });
+        case "result": {
+          const { item: resultItem } = listItem.result;
+          const key = `${resultItem.refId}::${resultItem.id}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Result,
+            {
+              ...listItem.result,
+              ...getItemProps({ key, index: listItem.index, item: listItem.result }),
+              isHighlighted: highlightedIndex === listItem.index
+            }
+          );
+        }
+      }
+    },
+    [getItemProps, highlightedIndex]
+  );
+  if (isWeb) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.View, { style: flexStyle3, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, overflow: "auto", ...contentContainerStyle2 }, children: listData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: renderItem({ item }) }, keyExtractor(item))) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.View, { style: flexStyle3, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_list2.LegendList,
+    {
+      style: flexStyle3,
+      data: listData,
+      renderItem,
+      keyExtractor,
+      contentContainerStyle: contentContainerStyle2,
+      estimatedItemSize: 50,
+      keyboardShouldPersistTaps: "handled",
+      recycleItems: true
+    }
+  ) });
 });
 
 // src/Sidebar.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Container2 = import_react_native_theming7.styled.View(({ theme }) => ({
-  width: "100%",
-  height: "100%",
-  display: "flex",
+var Container = import_react_native_theming7.styled.View(({ theme }) => ({
+  flex: 1,
   flexDirection: "column",
   backgroundColor: theme.background.content
 }));
 var Top = import_react_native_theming7.styled.View({
-  paddingLeft: 4,
-  paddingRight: 4,
-  paddingTop: 16,
-  flex: 1,
-  flexDirection: "row"
+  paddingTop: 8,
+  flex: 1
 });
+var flexStyle4 = { flex: 1 };
+var noneStyle = {
+  // display: 'none',
+  height: 1,
+  width: 0,
+  opacity: 0
+};
 var Swap = import_react11.default.memo(function Swap2({
   children,
   condition
 }) {
   const [a, b] = import_react11.default.Children.toArray(children);
+  const aStyle = (0, import_react11.useMemo)(() => condition ? flexStyle4 : noneStyle, [condition]);
+  const bStyle = (0, import_react11.useMemo)(() => condition ? noneStyle : flexStyle4, [condition]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native5.View, { style: { display: condition ? "flex" : "none" }, children: a }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native5.View, { style: { display: condition ? "none" : "flex" }, children: b })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native6.View, { style: aStyle, children: a }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native6.View, { style: bStyle, children: b })
   ] });
 });
 var useCombination = (index, indexError, previewInitialized, status, refs) => {
@@ -1338,7 +1456,7 @@ var Sidebar = import_react11.default.memo(function Sidebar2({
   const selected = (0, import_react11.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
   const dataset = useCombination(index, indexError, previewInitialized, status, refs);
   const lastViewedProps = (0, import_react_native_ui_common5.useLastViewed)(selected);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Container2, { style: { paddingHorizontal: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Top, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Search, { dataset, setSelection, ...lastViewedProps, children: ({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Swap, { condition: isBrowsing, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Container, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Top, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Search, { dataset, setSelection, ...lastViewedProps, children: ({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Swap, { condition: isBrowsing, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Explorer,
       {
@@ -1365,12 +1483,12 @@ var Sidebar = import_react11.default.memo(function Sidebar2({
 });
 
 // src/Layout.tsx
-var import_portal = require("@gorhom/portal");
+var import_portal2 = require("@gorhom/portal");
 var import_react_native_theming10 = require("@storybook/react-native-theming");
 var import_react_native_ui_common7 = require("@storybook/react-native-ui-common");
 var import_react16 = require("react");
-var import_react_native10 = require("react-native");
-var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
+var import_react_native11 = require("react-native");
+var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 var import_core_events = require("storybook/internal/core-events");
 var import_manager_api2 = require("storybook/manager-api");
 
@@ -1378,28 +1496,28 @@ var import_manager_api2 = require("storybook/manager-api");
 var import_react_native_theming8 = require("@storybook/react-native-theming");
 var import_react_native_ui_common6 = require("@storybook/react-native-ui-common");
 var import_react13 = require("react");
-var import_react_native7 = require("react-native");
+var import_react_native8 = require("react-native");
 var import_manager_api = require("storybook/manager-api");
 var import_types = require("storybook/internal/types");
 
 // src/useAnimatedValue.ts
 var import_react12 = require("react");
-var import_react_native6 = require("react-native");
+var import_react_native7 = require("react-native");
 function useAnimatedValue(initialValue, config) {
   const ref = (0, import_react12.useRef)(null);
   if (ref.current == null) {
-    ref.current = new import_react_native6.Animated.Value(initialValue, config);
+    ref.current = new import_react_native7.Animated.Value(initialValue, config);
   }
   return ref.current;
 }
 
 // src/MobileAddonsPanel.tsx
-var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var MobileAddonsPanel = (0, import_react13.forwardRef)(
   ({ storyId }, ref) => {
     const theme = (0, import_react_native_theming8.useTheme)();
-    const { height } = (0, import_react_native7.useWindowDimensions)();
+    const { height } = (0, import_react_native8.useWindowDimensions)();
     const panelHeight = useAnimatedValue(0);
     const positionBottomAnimation = useAnimatedValue(height / 2);
     const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
@@ -1407,34 +1525,34 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
       (open) => {
         setIsOpen(open);
         if (open) {
-          import_react_native7.Animated.parallel([
-            import_react_native7.Animated.timing(positionBottomAnimation, {
+          import_react_native8.Animated.parallel([
+            import_react_native8.Animated.timing(positionBottomAnimation, {
               toValue: 0,
               // Negative to move up
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
+              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
             }),
-            import_react_native7.Animated.timing(panelHeight, {
+            import_react_native8.Animated.timing(panelHeight, {
               toValue: height / 2,
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
+              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
             })
           ]).start();
         } else {
-          import_react_native7.Animated.parallel([
-            import_react_native7.Animated.timing(positionBottomAnimation, {
+          import_react_native8.Animated.parallel([
+            import_react_native8.Animated.timing(positionBottomAnimation, {
               toValue: height / 2,
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
+              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
             }),
-            import_react_native7.Animated.timing(panelHeight, {
+            import_react_native8.Animated.timing(panelHeight, {
               toValue: 0,
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
+              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
             })
           ]).start();
         }
@@ -1444,46 +1562,46 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
     (0, import_react13.useEffect)(() => {
       const handleKeyboardShow = ({ endCoordinates, duration, easing }) => {
         if (isOpen) {
-          import_react_native7.Animated.parallel([
-            import_react_native7.Animated.timing(panelHeight, {
+          import_react_native8.Animated.parallel([
+            import_react_native8.Animated.timing(panelHeight, {
               toValue: (height - endCoordinates.height) / 2,
               duration,
               useNativeDriver: false,
-              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
+              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
             }),
-            import_react_native7.Animated.timing(positionBottomAnimation, {
+            import_react_native8.Animated.timing(positionBottomAnimation, {
               toValue: -endCoordinates.height,
               // Negative to move up
               duration,
               useNativeDriver: false,
-              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
+              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
             })
           ]).start();
         }
       };
       const handleKeyboardHide = ({ duration, easing }) => {
         if (isOpen) {
-          import_react_native7.Animated.parallel([
-            import_react_native7.Animated.timing(positionBottomAnimation, {
+          import_react_native8.Animated.parallel([
+            import_react_native8.Animated.timing(positionBottomAnimation, {
               toValue: 0,
               // Back to original position
               duration,
               useNativeDriver: false,
-              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
+              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
             }),
-            import_react_native7.Animated.timing(panelHeight, {
+            import_react_native8.Animated.timing(panelHeight, {
               toValue: height / 2,
               duration,
               useNativeDriver: false,
-              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
+              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
             })
           ]).start();
         }
       };
-      const showSubscription = import_react_native7.Keyboard.addListener("keyboardDidShow", handleKeyboardShow);
-      const willShowSubscription = import_react_native7.Keyboard.addListener("keyboardWillShow", handleKeyboardShow);
-      const hideSubscription = import_react_native7.Keyboard.addListener("keyboardWillHide", handleKeyboardHide);
-      const didHideSubscription = import_react_native7.Keyboard.addListener("keyboardDidHide", handleKeyboardHide);
+      const showSubscription = import_react_native8.Keyboard.addListener("keyboardDidShow", handleKeyboardShow);
+      const willShowSubscription = import_react_native8.Keyboard.addListener("keyboardWillShow", handleKeyboardShow);
+      const hideSubscription = import_react_native8.Keyboard.addListener("keyboardWillHide", handleKeyboardHide);
+      const didHideSubscription = import_react_native8.Keyboard.addListener("keyboardDidHide", handleKeyboardHide);
       return () => {
         showSubscription.remove();
         willShowSubscription.remove();
@@ -1501,7 +1619,7 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
       }
     }));
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_native7.Animated.View,
+      import_react_native8.Animated.View,
       {
         style: {
           position: "absolute",
@@ -1512,13 +1630,13 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
           transform: [{ translateY: positionBottomAnimation }]
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native7.View,
+          import_react_native8.View,
           {
             style: {
               justifyContent: "flex-end"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_react_native7.View,
+              import_react_native8.View,
               {
                 style: {
                   height: "100%",
@@ -1526,14 +1644,14 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
                   paddingTop: 10,
                   borderTopColor: theme.appBorderColor,
                   borderTopWidth: 1,
-                  paddingBottom: import_react_native7.Platform.OS === "android" ? 16 : 0
+                  paddingBottom: import_react_native8.Platform.OS === "android" ? 16 : 0
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   AddonsTabs,
                   {
                     onClose: () => {
                       setMobileMenuOpen(false);
-                      import_react_native7.Keyboard.dismiss();
+                      import_react_native8.Keyboard.dismiss();
                     },
                     storyId
                   }
@@ -1574,14 +1692,14 @@ var centeredStyle = {
 var hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
 var AddonsTabs = ({ onClose, storyId }) => {
   const panels = import_manager_api.addons.getElements(import_types.Addon_TypesEnum.PANEL);
-  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const [addonSelected, setAddonSelected] = (0, import_react13.useState)(Object.keys(panels)[0]);
   const panel = (0, import_react13.useMemo)(() => {
     if (!storyId) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.Text, { children: "No Story Selected" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Text, { children: "No Story Selected" }) });
     }
     if (Object.keys(panels).length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.Text, { children: "No addons loaded." }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Text, { children: "No addons loaded." }) });
     }
     return panels[addonSelected].render({ active: true });
   }, [addonSelected, panels, storyId]);
@@ -1591,10 +1709,10 @@ var AddonsTabs = ({ onClose, storyId }) => {
     }),
     [insets]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native7.View, { style: addonsTabsContainerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native7.View, { style: addonsTabsStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native8.View, { style: addonsTabsContainerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native8.View, { style: addonsTabsStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_react_native7.ScrollView,
+        import_react_native8.ScrollView,
         {
           horizontal: true,
           showsHorizontalScrollIndicator: false,
@@ -1625,7 +1743,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_native7.ScrollView,
+      import_react_native8.ScrollView,
       {
         style: addonsScrollStyle,
         contentContainerStyle: scrollContentContainerStyle,
@@ -1655,51 +1773,64 @@ var TabText = import_react_native_theming8.styled.Text(({ theme, active }) => ({
 }));
 
 // src/MobileMenuDrawer.tsx
+var import_portal = require("@gorhom/portal");
 var import_react_native_theming9 = require("@storybook/react-native-theming");
 var import_react14 = require("react");
-var import_react_native8 = require("react-native");
+var import_react_native9 = require("react-native");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var flexStyle5 = { flex: 1 };
+var portalContainerStyle = {
+  flex: 1,
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 1e3
+};
 var useAnimatedModalHeight = () => {
-  const { height } = (0, import_react_native8.useWindowDimensions)();
+  const { height } = (0, import_react_native9.useWindowDimensions)();
   const animatedHeight = useAnimatedValue(0.65 * height);
   (0, import_react14.useEffect)(() => {
     const modalHeight = 0.65 * height;
     const maxModalHeight = 0.85 * height;
-    const expand = (duration = 250) => import_react_native8.Animated.timing(animatedHeight, {
+    const expand = (duration = 250) => import_react_native9.Animated.timing(animatedHeight, {
       toValue: maxModalHeight,
       duration,
+      easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
       useNativeDriver: false
     }).start();
-    const collapse = (duration = 250) => import_react_native8.Animated.timing(animatedHeight, {
+    const collapse = (duration = 250) => import_react_native9.Animated.timing(animatedHeight, {
       toValue: modalHeight,
       duration,
+      easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
       useNativeDriver: false
     }).start();
     const handleKeyboardWillShow = (e) => {
-      if (import_react_native8.Platform.OS === "ios") {
+      if (import_react_native9.Platform.OS === "ios") {
         expand(e.duration);
       }
     };
     const handleKeyboardDidShow = (e) => {
-      if (import_react_native8.Platform.OS === "android") {
+      if (import_react_native9.Platform.OS === "android") {
         expand();
       }
     };
     const handleKeyboardWillHide = (e) => {
-      if (import_react_native8.Platform.OS === "ios") {
+      if (import_react_native9.Platform.OS === "ios") {
         collapse(e.duration);
       }
     };
     const handleKeyboardDidHide = (e) => {
-      if (import_react_native8.Platform.OS === "android") {
+      if (import_react_native9.Platform.OS === "android") {
         collapse();
       }
     };
     const subscriptions = [
-      import_react_native8.Keyboard.addListener("keyboardWillShow", handleKeyboardWillShow),
-      import_react_native8.Keyboard.addListener("keyboardDidShow", handleKeyboardDidShow),
-      import_react_native8.Keyboard.addListener("keyboardWillHide", handleKeyboardWillHide),
-      import_react_native8.Keyboard.addListener("keyboardDidHide", handleKeyboardDidHide)
+      import_react_native9.Keyboard.addListener("keyboardWillShow", handleKeyboardWillShow),
+      import_react_native9.Keyboard.addListener("keyboardDidShow", handleKeyboardDidShow),
+      import_react_native9.Keyboard.addListener("keyboardWillHide", handleKeyboardWillHide),
+      import_react_native9.Keyboard.addListener("keyboardDidHide", handleKeyboardDidHide)
     ];
     return () => {
       subscriptions.forEach((subscription) => subscription.remove());
@@ -1709,13 +1840,43 @@ var useAnimatedModalHeight = () => {
 };
 var MobileMenuDrawer = (0, import_react14.memo)(
   (0, import_react14.forwardRef)(({ children }, ref) => {
-    const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react14.useState)(false);
-    const { scrollToSelectedNode, scrollRef } = useSelectedNode();
+    const [isVisible, setIsVisible] = (0, import_react14.useState)(false);
+    const { scrollCallback } = useSelectedNode();
     const theme = (0, import_react_native_theming9.useTheme)();
+    const { height } = (0, import_react_native9.useWindowDimensions)();
     const animatedHeight = useAnimatedModalHeight();
+    const slideAnim = useAnimatedValue(height);
     const dragY = useAnimatedValue(0);
-    const panResponder = (0, import_react14.useRef)(
-      import_react_native8.PanResponder.create({
+    const openDrawer = (0, import_react14.useCallback)(() => {
+      dragY.setValue(0);
+      slideAnim.setValue(height);
+      setIsVisible(true);
+      import_react_native9.Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 300,
+        easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
+        useNativeDriver: true
+      }).start(({ finished }) => {
+        if (finished) {
+          scrollCallback({ animated: false, id: void 0 });
+        }
+      });
+    }, [dragY, height, scrollCallback, slideAnim]);
+    const closeDrawer = (0, import_react14.useCallback)(() => {
+      import_react_native9.Keyboard.dismiss();
+      import_react_native9.Animated.timing(slideAnim, {
+        toValue: height,
+        duration: 300,
+        easing: import_react_native9.Easing.in(import_react_native9.Easing.quad),
+        useNativeDriver: true
+      }).start(({ finished }) => {
+        if (finished) {
+          setIsVisible(false);
+        }
+      });
+    }, [height, slideAnim]);
+    const panResponder = (0, import_react14.useMemo)(
+      () => import_react_native9.PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_, gestureState) => {
           return gestureState.dy > 0;
@@ -1727,26 +1888,25 @@ var MobileMenuDrawer = (0, import_react14.memo)(
         },
         onPanResponderRelease: (_, gestureState) => {
           if (gestureState.dy > 50) {
-            import_react_native8.Keyboard.dismiss();
-            setMobileMenuOpen(false);
+            closeDrawer();
+          } else {
+            import_react_native9.Animated.timing(dragY, {
+              toValue: 0,
+              duration: 300,
+              easing: import_react_native9.Easing.out(import_react_native9.Easing.quad),
+              useNativeDriver: true
+            }).start();
           }
-          import_react_native8.Animated.timing(dragY, {
-            toValue: 0,
-            duration: 300,
-            useNativeDriver: true
-          }).start();
         }
-      })
-    ).current;
+      }),
+      [closeDrawer, dragY]
+    );
     (0, import_react14.useImperativeHandle)(ref, () => ({
       setMobileMenuOpen: (open) => {
         if (open) {
-          dragY.setValue(0);
-          scrollToSelectedNode();
-          setMobileMenuOpen(true);
+          openDrawer();
         } else {
-          import_react_native8.Keyboard.dismiss();
-          setMobileMenuOpen(false);
+          closeDrawer();
         }
       }
     }));
@@ -1756,76 +1916,67 @@ var MobileMenuDrawer = (0, import_react14.memo)(
         height: 5,
         backgroundColor: theme.color.mediumdark,
         borderRadius: 2.5,
-        alignSelf: "center",
-        // TypeScript needs this to recognize 'center' as a valid FlexAlignType
-        marginVertical: 8
+        alignSelf: "center"
       }),
       [theme.color.mediumdark]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react_native8.Modal,
+    const drawerContainerStyle = (0, import_react14.useMemo)(
+      () => ({
+        flex: 1,
+        borderTopColor: theme.appBorderColor,
+        borderTopWidth: 1,
+        borderStyle: "solid",
+        backgroundColor: theme.background.content,
+        elevation: 8,
+        boxShadow: `0 16px 32px 0 ${theme.color.border}`
+      }),
+      [theme.appBorderColor, theme.background.content, theme.color.border]
+    );
+    const dragHandleWrapperStyle = (0, import_react14.useMemo)(
+      () => ({
+        alignItems: "center",
+        justifyContent: "center",
+        paddingBottom: 16,
+        paddingTop: 10,
+        backgroundColor: theme.background.content
+      }),
+      [theme.background.content]
+    );
+    const childrenWrapperStyle = (0, import_react14.useMemo)(
+      () => ({
+        flex: 1,
+        backgroundColor: theme.background.content
+      }),
+      [theme.background.content]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_portal.Portal, { hostName: "storybook-lite-ui-root", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_react_native9.Animated.View,
       {
-        visible: mobileMenuOpen,
-        animationType: "slide",
-        transparent: true,
-        statusBarTranslucent: true,
-        onRequestClose: () => setMobileMenuOpen(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native8.Animated.View, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.Pressable, { style: { flex: 1 }, onPress: () => setMobileMenuOpen(false) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.Animated.View, { style: { height: animatedHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-            import_react_native8.Animated.View,
+        style: [portalContainerStyle, { transform: [{ translateY: slideAnim }] }],
+        pointerEvents: isVisible ? "auto" : "none",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: flexStyle5, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Pressable, { style: flexStyle5, onPress: closeDrawer }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_react_native9.Animated.View,
             {
-              style: [
-                {
-                  flex: 1,
-                  borderTopColor: theme.appBorderColor,
-                  borderTopWidth: 1,
-                  borderStyle: "solid",
-                  backgroundColor: theme.background.content,
-                  elevation: 8
-                },
-                { transform: [{ translateY: dragY }] }
-              ],
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_react_native8.View,
-                  {
-                    ...panResponder.panHandlers,
-                    style: {
-                      alignItems: "center",
-                      justifyContent: "center",
-                      backgroundColor: theme.background.content
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.View, { style: handleStyle })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_react_native8.ScrollView,
-                  {
-                    ref: scrollRef,
-                    keyboardShouldPersistTaps: "handled",
-                    style: {
-                      flex: 1,
-                      paddingBottom: 150,
-                      alignSelf: "flex-end",
-                      width: "100%",
-                      backgroundColor: theme.background.content
-                    },
-                    children
-                  }
-                )
-              ]
+              style: {
+                height: animatedHeight
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.Animated.View, { style: [drawerContainerStyle, { transform: [{ translateY: dragY }] }], children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { ...panResponder.panHandlers, style: dragHandleWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: handleStyle }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: childrenWrapperStyle, children })
+              ] })
             }
-          ) })
-        ] })
+          )
+        ]
       }
-    );
+    ) });
   })
 );
 
 // src/StorybookLogo.tsx
 var import_react15 = require("react");
-var import_react_native9 = require("react-native");
+var import_react_native10 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var WIDTH = 125;
 var HEIGHT = 25;
@@ -1849,7 +2000,7 @@ var BrandLogo = ({ theme }) => {
     return theme.brand.image;
   }
   const image = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_native9.Image,
+    import_react_native10.Image,
     {
       source: theme.brand.image,
       resizeMode: theme.brand.resizeMode ?? "contain",
@@ -1858,10 +2009,10 @@ var BrandLogo = ({ theme }) => {
   );
   if (theme.brand.url) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_native9.TouchableOpacity,
+      import_react_native10.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native9.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native10.Linking.openURL(theme.brand.url);
         },
         children: image
       }
@@ -1879,13 +2030,13 @@ var BrandTitle = ({ theme }) => {
       fontSize: theme.typography.size.m1
     };
   }, [theme]);
-  const title = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native9.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
+  const title = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native10.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
   if (theme.brand.url) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_native9.TouchableOpacity,
+      import_react_native10.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native9.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native10.Linking.openURL(theme.brand.url);
         },
         children: title
       }
@@ -1921,17 +2072,18 @@ var contentContainerStyle = { flex: 1, overflow: "hidden" };
 var mobileContentStyle = { flex: 1, overflow: "hidden" };
 var placeholderObject = {};
 var iconFloatRightStyle = { marginLeft: "auto" };
-var navButtonStyle = { flexShrink: 1 };
-var navButtonHitSlop = { bottom: 10, left: 10, right: 10, top: 10 };
+var navButtonStyle = { flex: 1 };
+var navButtonHitSlop = { bottom: 10, left: 10, top: 10 };
+var addonButtonHitSlop = { bottom: 10, left: 10, right: 10, top: 10 };
 var mobileMenuDrawerContentStyle = {
   paddingLeft: 16,
-  paddingTop: 4,
   paddingBottom: 4
 };
-var LiteUI = ({ storage, theme, storyHash, story, children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_safe_area_context2.SafeAreaProvider, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_theming10.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_portal.PortalProvider, { shouldAddRootHost: false, children: [
+var flexStyle6 = { flex: 1 };
+var LiteUI = ({ storage, theme, storyHash, story, children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_safe_area_context4.SafeAreaProvider, { style: flexStyle6, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectedNodeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_theming10.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_portal2.PortalProvider, { shouldAddRootHost: false, children: [
   /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Layout, { storyHash, story, children }),
-  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_portal.PortalHost, { name: "storybook-lite-ui-root" })
-] }) }) }) }) });
+  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_portal2.PortalHost, { name: "storybook-lite-ui-root" })
+] }) }) }) }) }) });
 var Layout = ({
   storyHash,
   story,
@@ -1939,7 +2091,7 @@ var Layout = ({
 }) => {
   const theme = (0, import_react_native_theming10.useTheme)();
   const { isDesktop } = (0, import_react_native_ui_common7.useLayout)();
-  const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
+  const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
   const [desktopSidebarOpen, setDesktopSidebarOpen] = (0, import_react_native_ui_common7.useStoreBooleanState)(
     "desktopSidebarState",
     true
@@ -1971,7 +2123,7 @@ var Layout = ({
     }),
     [desktopAddonsPanelOpen, theme.appBorderColor]
   );
-  const containerStyle = (0, import_react_native_ui_common7.useStyle)(() => {
+  const containerStyle2 = (0, import_react_native_ui_common7.useStyle)(() => {
     if (isDesktop) {
       return {
         flex: 1,
@@ -2017,13 +2169,13 @@ var Layout = ({
     const channel = import_manager_api2.addons.getChannel();
     channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.View, { style: containerStyle, children: [
-    isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.ScrollView, { keyboardShouldPersistTaps: "handled", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.View, { style: desktopLogoContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: containerStyle2, children: [
+    isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: desktopLogoContainer, children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StorybookLogo, { theme }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: flexStyle6, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         Sidebar,
         {
           previewInitialized: true,
@@ -2035,19 +2187,20 @@ var Layout = ({
           storyId: story?.id,
           refId: DEFAULT_REF_ID
         }
-      )
+      ) })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.View, { style: mobileContentStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: contentContainerStyle, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: mobileContentStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: contentContainerStyle, children }),
       story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_react_native10.TouchableOpacity,
+        import_react_native11.TouchableOpacity,
         {
           style: fullScreenButtonStyle,
+          hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
           onPress: () => setUiHidden((prev) => !prev),
           children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
         }
       ),
-      isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         import_react_native_ui_common7.IconButton,
         {
           style: iconFloatRightStyle,
@@ -2056,7 +2209,7 @@ var Layout = ({
         }
       ) }) : null
     ] }),
-    !uiHidden && !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Container3, { style: navContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Nav, { children: [
+    !uiHidden && !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Container2, { style: navContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Nav, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         Button2,
         {
@@ -2066,7 +2219,7 @@ var Layout = ({
           onPress: () => mobileMenuDrawerRef.current?.setMobileMenuOpen(true),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuIcon, { color: theme.color.mediumdark }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
               story?.title,
               "/",
               story?.name
@@ -2078,13 +2231,14 @@ var Layout = ({
         import_react_native_ui_common7.IconButton,
         {
           testID: "mobile-addons-button",
+          hitSlop: addonButtonHitSlop,
           onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
           Icon: BottomBarToggleIcon
         }
       )
     ] }) }) : null,
-    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectedNodeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StorybookLogo, { theme }) }),
+    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StorybookLogo, { theme }) }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         Sidebar,
         {
@@ -2098,7 +2252,7 @@ var Layout = ({
           refId: DEFAULT_REF_ID
         }
       )
-    ] }) }),
+    ] }),
     isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
   ] });
 };
@@ -2111,7 +2265,7 @@ var Nav = import_react_native_theming10.styled.View({
   height: 40,
   paddingHorizontal: 6
 });
-var Container3 = import_react_native_theming10.styled.View(({ theme }) => ({
+var Container2 = import_react_native_theming10.styled.View(({ theme }) => ({
   alignSelf: "flex-end",
   width: "100%",
   backgroundColor: theme.barBg,