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

package/dist/index.js

@@ -330,7 +330,6 @@ var BranchNode = import_react_native_theming2.styled.TouchableOpacity(({ depth =
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
-  alignSelf: "flex-start",
   paddingLeft: (isExpandable ? 8 : 22) + depth * 18,
   backgroundColor: "transparent",
   minHeight: 34,
@@ -346,7 +345,6 @@ var BranchNode = import_react_native_theming2.styled.TouchableOpacity(({ depth =
 }));
 var LeafNode = import_react_native_theming2.styled.TouchableOpacity(
   ({ depth = 0, selected, theme }) => ({
-    alignSelf: "flex-start",
     cursor: "pointer",
     color: "inherit",
     display: "flex",
@@ -467,12 +465,13 @@ var useSelectedNode = () => (0, import_react3.useContext)(SelectedNodeContext);
 // src/Tree.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var TextItem = import_react_native_theming3.styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s2 + 1,
   color: theme.color.defaultText
 }));
 var Node = import_react4.default.memo(function Node2({
   item,
   refId,
-  isOrphan,
+  isOrphan: _isOrphan,
   isDisplayed: _isDisplayed,
   isSelected,
   isFullyExpanded,
@@ -489,7 +488,7 @@ var Node = import_react4.default.memo(function Node2({
       {
         selected: isSelected,
         id,
-        depth: isOrphan ? item.depth : item.depth - 1,
+        depth: item.depth,
         onPress: () => {
           onSelectStoryId(item.id);
         },
@@ -540,7 +539,7 @@ var Node = import_react4.default.memo(function Node2({
         id,
         "aria-controls": item.children && item.children[0],
         "aria-expanded": isExpanded,
-        depth: isOrphan ? item.depth : item.depth - 1,
+        depth: item.depth,
         isComponent: item.type === "component",
         isExpandable: item.children && item.children.length > 0,
         isExpanded,
@@ -585,15 +584,17 @@ var RootNodeText = import_react_native_theming3.styled.Text(({ theme }) => ({
   textTransform: "uppercase"
 }));
 var CollapseButton = import_react_native_theming3.styled.TouchableOpacity(() => ({
+  flex: 1,
   display: "flex",
   flexDirection: "row",
-  paddingVertical: 0,
   paddingHorizontal: 8,
+  paddingTop: 8,
+  paddingBottom: 7,
   borderRadius: 4,
   gap: 6,
   alignItems: "center",
   cursor: "pointer",
-  height: 34
+  minHeight: 34
 }));
 var flexStyle = { flex: 1 };
 var ITEM_HEIGHT = 34;
@@ -1484,10 +1485,10 @@ var Sidebar = import_react11.default.memo(function Sidebar2({
 
 // src/Layout.tsx
 var import_portal2 = require("@gorhom/portal");
-var import_react_native_theming10 = require("@storybook/react-native-theming");
+var import_react_native_theming11 = 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_native11 = require("react-native");
+var import_react17 = require("react");
+var import_react_native12 = 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");
@@ -1974,19 +1975,90 @@ var MobileMenuDrawer = (0, import_react14.memo)(
   })
 );
 
-// src/StorybookLogo.tsx
+// src/ResizeHandle.tsx
+var import_react_native_theming10 = require("@storybook/react-native-theming");
 var import_react15 = require("react");
 var import_react_native10 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var ResizeHandle = (0, import_react15.memo)(function ResizeHandle2({
+  direction,
+  onResize,
+  onResizeStart,
+  onResizeEnd
+}) {
+  const theme = (0, import_react_native_theming10.useTheme)();
+  const [active, setActive] = (0, import_react15.useState)(false);
+  const startValueRef = (0, import_react15.useRef)(0);
+  const isHorizontal = direction === "horizontal";
+  const panResponder = (0, import_react15.useMemo)(
+    () => import_react_native10.PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderTerminationRequest: () => false,
+      onShouldBlockNativeResponder: () => true,
+      onPanResponderGrant: () => {
+        startValueRef.current = 0;
+        setActive(true);
+        onResizeStart?.();
+      },
+      onPanResponderMove: (_, gestureState) => {
+        const delta = isHorizontal ? gestureState.dx : gestureState.dy;
+        const diff = delta - startValueRef.current;
+        startValueRef.current = delta;
+        onResize(diff);
+      },
+      onPanResponderRelease: () => {
+        setActive(false);
+        onResizeEnd?.();
+      },
+      onPanResponderTerminate: () => {
+        setActive(false);
+        onResizeEnd?.();
+      }
+    }),
+    [isHorizontal, onResize, onResizeStart, onResizeEnd]
+  );
+  const style = (0, import_react15.useMemo)(() => {
+    const borderColor = active ? theme.barSelectedColor : theme.appBorderColor;
+    if (isHorizontal) {
+      return {
+        width: 5,
+        alignSelf: "stretch",
+        justifyContent: "center",
+        borderLeftWidth: 1,
+        borderLeftColor: borderColor,
+        backgroundColor: active ? theme.barSelectedColor : "transparent",
+        // @ts-expect-error - cursor is supported on web and desktop platforms
+        cursor: "col-resize"
+      };
+    }
+    return {
+      height: 5,
+      alignSelf: "stretch",
+      justifyContent: "center",
+      borderTopWidth: 1,
+      borderTopColor: borderColor,
+      backgroundColor: active ? theme.barSelectedColor : "transparent",
+      // @ts-expect-error - cursor is supported on web and desktop platforms
+      cursor: "row-resize"
+    };
+  }, [active, isHorizontal, theme.appBorderColor, theme.barSelectedColor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native10.View, { ...panResponder.panHandlers, style });
+});
+
+// src/StorybookLogo.tsx
+var import_react16 = require("react");
+var import_react_native11 = require("react-native");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var WIDTH = 125;
 var HEIGHT = 25;
-var NoBrandLogo = ({ theme }) => theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Logo, { height: HEIGHT, width: WIDTH }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DarkLogo, { height: HEIGHT, width: WIDTH });
+var NoBrandLogo = ({ theme }) => theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Logo, { height: HEIGHT, width: WIDTH }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DarkLogo, { height: HEIGHT, width: WIDTH });
 function isElement(value) {
-  return (0, import_react15.isValidElement)(value);
+  return (0, import_react16.isValidElement)(value);
 }
 var BrandLogo = ({ theme }) => {
   const imageHasNoWidthOrHeight = typeof theme.brand.image === "object" && typeof theme.brand.image === "object" && "uri" in theme.brand.image && (!("height" in theme.brand.image) || !("width" in theme.brand.image));
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (imageHasNoWidthOrHeight) {
       console.warn(
         "STORYBOOK: When using a remote image as the brand logo, you must also set the width and height.\nFor example:  brand: { image: { uri: 'https://sb.com/img.png', height: 25, width: 25}}"
@@ -1999,8 +2071,8 @@ var BrandLogo = ({ theme }) => {
   if (isElement(theme.brand.image)) {
     return theme.brand.image;
   }
-  const image = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_native10.Image,
+  const image = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_native11.Image,
     {
       source: theme.brand.image,
       resizeMode: theme.brand.resizeMode ?? "contain",
@@ -2008,11 +2080,11 @@ var BrandLogo = ({ theme }) => {
     }
   );
   if (theme.brand.url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_native10.TouchableOpacity,
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_react_native11.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native10.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native11.Linking.openURL(theme.brand.url);
         },
         children: image
       }
@@ -2022,7 +2094,7 @@ var BrandLogo = ({ theme }) => {
   }
 };
 var BrandTitle = ({ theme }) => {
-  const brandTitleStyle = (0, import_react15.useMemo)(() => {
+  const brandTitleStyle = (0, import_react16.useMemo)(() => {
     return {
       width: WIDTH,
       height: HEIGHT,
@@ -2030,13 +2102,13 @@ var BrandTitle = ({ theme }) => {
       fontSize: theme.typography.size.m1
     };
   }, [theme]);
-  const title = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native10.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
+  const title = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
   if (theme.brand.url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_native10.TouchableOpacity,
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_react_native11.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native10.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native11.Linking.openURL(theme.brand.url);
         },
         children: title
       }
@@ -2046,19 +2118,19 @@ var BrandTitle = ({ theme }) => {
   }
 };
 var StorybookLogo = ({ theme }) => {
-  const image = (0, import_react15.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
-  const title = (0, import_react15.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
+  const image = (0, import_react16.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
+  const title = (0, import_react16.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
   if (image) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BrandLogo, { theme });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BrandLogo, { theme });
   } else if (title) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BrandTitle, { theme });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BrandTitle, { theme });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NoBrandLogo, { theme });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NoBrandLogo, { theme });
   }
 };
 
 // src/Layout.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var desktopLogoContainer = {
   flexDirection: "row",
   alignItems: "center",
@@ -2080,16 +2152,16 @@ var mobileMenuDrawerContentStyle = {
   paddingBottom: 4
 };
 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_portal2.PortalHost, { name: "storybook-lite-ui-root" })
+var LiteUI = ({ storage, theme, storyHash, story, children }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_safe_area_context4.SafeAreaProvider, { style: flexStyle6, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectedNodeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_theming11.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_ui_common7.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_portal2.PortalProvider, { shouldAddRootHost: false, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Layout, { storyHash, story, children }),
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_portal2.PortalHost, { name: "storybook-lite-ui-root" })
 ] }) }) }) }) }) });
 var Layout = ({
   storyHash,
   story,
   children
 }) => {
-  const theme = (0, import_react_native_theming10.useTheme)();
+  const theme = (0, import_react_native_theming11.useTheme)();
   const { isDesktop } = (0, import_react_native_ui_common7.useLayout)();
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
   const [desktopSidebarOpen, setDesktopSidebarOpen] = (0, import_react_native_ui_common7.useStoreBooleanState)(
@@ -2100,28 +2172,49 @@ var Layout = ({
     "desktopPanelState",
     true
   );
-  const [uiHidden, setUiHidden] = (0, import_react16.useState)(false);
-  (0, import_react16.useLayoutEffect)(() => {
+  const [sidebarWidth, setSidebarWidth] = (0, import_react_native_ui_common7.useStoreNumberState)("desktopSidebarWidth", 240);
+  const [addonsPanelHeight, setAddonsPanelHeight] = (0, import_react_native_ui_common7.useStoreNumberState)(
+    "desktopAddonsPanelHeight",
+    300
+  );
+  const { width: windowWidth, height: windowHeight } = (0, import_react_native12.useWindowDimensions)();
+  const handleSidebarResize = (0, import_react17.useCallback)(
+    (delta) => {
+      setSidebarWidth((prev) => Math.min(Math.max(prev + delta, 180), windowWidth * 0.5));
+    },
+    [setSidebarWidth, windowWidth]
+  );
+  const handleAddonsPanelResize = (0, import_react17.useCallback)(
+    (delta) => {
+      setAddonsPanelHeight((prev) => Math.min(Math.max(prev - delta, 100), windowHeight * 0.6));
+    },
+    [setAddonsPanelHeight, windowHeight]
+  );
+  const [isResizing, setIsResizing] = (0, import_react17.useState)(false);
+  const onResizeStart = (0, import_react17.useCallback)(() => setIsResizing(true), []);
+  const onResizeEnd = (0, import_react17.useCallback)(() => setIsResizing(false), []);
+  const [uiHidden, setUiHidden] = (0, import_react17.useState)(false);
+  (0, import_react17.useLayoutEffect)(() => {
     setUiHidden(story?.parameters?.storybookUIVisibility === "hidden");
   }, [story?.parameters?.storybookUIVisibility]);
   const desktopSidebarStyle = (0, import_react_native_ui_common7.useStyle)(
     () => ({
-      width: desktopSidebarOpen ? 240 : void 0,
+      width: desktopSidebarOpen ? sidebarWidth : void 0,
       padding: desktopSidebarOpen ? 0 : 10,
       borderColor: theme.appBorderColor,
-      borderRightWidth: 1
+      borderRightWidth: desktopSidebarOpen ? 0 : 1
     }),
-    [desktopSidebarOpen, theme.appBorderColor]
+    [desktopSidebarOpen, sidebarWidth, theme.appBorderColor]
   );
   const desktopAddonsPanelStyle = (0, import_react_native_ui_common7.useStyle)(
     () => ({
-      height: desktopAddonsPanelOpen ? 300 : void 0,
-      borderTopWidth: 1,
+      height: desktopAddonsPanelOpen ? addonsPanelHeight : void 0,
+      borderTopWidth: desktopAddonsPanelOpen ? 0 : 1,
       borderColor: theme.appBorderColor,
       paddingTop: desktopAddonsPanelOpen ? 4 : 0,
       padding: desktopAddonsPanelOpen ? 0 : 10
     }),
-    [desktopAddonsPanelOpen, theme.appBorderColor]
+    [desktopAddonsPanelOpen, addonsPanelHeight, theme.appBorderColor]
   );
   const containerStyle2 = (0, import_react_native_ui_common7.useStyle)(() => {
     if (isDesktop) {
@@ -2163,54 +2256,76 @@ var Layout = ({
     }),
     [theme.barTextColor]
   );
-  const mobileMenuDrawerRef = (0, import_react16.useRef)(null);
-  const addonPanelRef = (0, import_react16.useRef)(null);
-  const setSelection = (0, import_react16.useCallback)(({ storyId: newStoryId }) => {
+  const mobileMenuDrawerRef = (0, import_react17.useRef)(null);
+  const addonPanelRef = (0, import_react17.useRef)(null);
+  const setSelection = (0, import_react17.useCallback)(({ storyId: newStoryId }) => {
     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_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)(import_react_native11.View, { style: flexStyle6, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        Sidebar,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: containerStyle2, children: [
+    isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: desktopSidebarStyle, pointerEvents: isResizing ? "none" : "auto", children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: desktopLogoContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StorybookLogo, { theme }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_ui_common7.IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: flexStyle6, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Sidebar,
+          {
+            previewInitialized: true,
+            indexError: void 0,
+            refs: placeholderObject,
+            setSelection,
+            status: placeholderObject,
+            index: storyHash,
+            storyId: story?.id,
+            refId: DEFAULT_REF_ID
+          }
+        ) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_ui_common7.IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon }) }),
+      desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        ResizeHandle,
         {
-          previewInitialized: true,
-          indexError: void 0,
-          refs: placeholderObject,
-          setSelection,
-          status: placeholderObject,
-          index: storyHash,
-          storyId: story?.id,
-          refId: DEFAULT_REF_ID
+          direction: "horizontal",
+          onResize: handleSidebarResize,
+          onResizeStart,
+          onResizeEnd
         }
-      ) })
-    ] }) : /* @__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_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_native11.TouchableOpacity,
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.View, { style: mobileContentStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: contentContainerStyle, pointerEvents: isResizing ? "none" : "auto", children }),
+      story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_react_native12.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 })
+          children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
         }
       ),
-      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,
-          onPress: () => setDesktopAddonsPanelOpen(true),
-          Icon: BottomBarToggleIcon
-        }
-      ) }) : null
+      isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          ResizeHandle,
+          {
+            direction: "vertical",
+            onResize: handleAddonsPanelResize,
+            onResizeStart,
+            onResizeEnd
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: desktopAddonsPanelStyle, pointerEvents: isResizing ? "none" : "auto", children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_react_native_ui_common7.IconButton,
+          {
+            style: iconFloatRightStyle,
+            onPress: () => setDesktopAddonsPanelOpen(true),
+            Icon: BottomBarToggleIcon
+          }
+        ) })
+      ] }) : null
     ] }),
-    !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)(
+    !uiHidden && !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Container2, { style: navContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Nav, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         Button2,
         {
           testID: "mobile-menu-button",
@@ -2218,8 +2333,8 @@ var Layout = ({
           hitSlop: navButtonHitSlop,
           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_native11.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuIcon, { color: theme.color.mediumdark }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native12.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
               story?.title,
               "/",
               story?.name
@@ -2227,7 +2342,7 @@ var Layout = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         import_react_native_ui_common7.IconButton,
         {
           testID: "mobile-addons-button",
@@ -2237,9 +2352,9 @@ var Layout = ({
         }
       )
     ] }) }) : null,
-    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)(
+    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native12.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StorybookLogo, { theme }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Sidebar,
         {
           previewInitialized: true,
@@ -2253,10 +2368,10 @@ var Layout = ({
         }
       )
     ] }),
-    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
+    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
   ] });
 };
-var Nav = import_react_native_theming10.styled.View({
+var Nav = import_react_native_theming11.styled.View({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
@@ -2265,14 +2380,14 @@ var Nav = import_react_native_theming10.styled.View({
   height: 40,
   paddingHorizontal: 6
 });
-var Container2 = import_react_native_theming10.styled.View(({ theme }) => ({
+var Container2 = import_react_native_theming11.styled.View(({ theme }) => ({
   alignSelf: "flex-end",
   width: "100%",
   backgroundColor: theme.barBg,
   borderTopColor: theme.appBorderColor,
   borderTopWidth: 1
 }));
-var Button2 = import_react_native_theming10.styled.TouchableOpacity(({ theme }) => ({
+var Button2 = import_react_native_theming11.styled.TouchableOpacity(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.2.2-alpha.0",
+  "version": "10.2.2-alpha.2",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -42,8 +42,8 @@
     "@legendapp/list": "3.0.0-beta.31",
     "@nozbe/microfuzz": "^1.0.0",
     "@storybook/react": "^10.2.2",
-    "@storybook/react-native-theming": "^10.2.2-alpha.0",
-    "@storybook/react-native-ui-common": "^10.2.2-alpha.0",
+    "@storybook/react-native-theming": "^10.2.2-alpha.2",
+    "@storybook/react-native-ui-common": "^10.2.2-alpha.2",
     "polished": "^4.3.1",
     "react-native-safe-area-context": "^5"
   },
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5e99a2f9de73aa3b88e6517f1016e933cac67c19"
+  "gitHead": "af294af11927af3754f6958f0f6f2a358897f7b9"
 }

package/src/Layout.tsx

@@ -8,10 +8,11 @@ import {
   StorageProvider,
   useLayout,
   useStoreBooleanState,
+  useStoreNumberState,
   useStyle,
 } from '@storybook/react-native-ui-common';
 import { ReactElement, ReactNode, useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { Text, TouchableOpacity, useWindowDimensions, View, ViewStyle } from 'react-native';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { SET_CURRENT_STORY } from 'storybook/internal/core-events';
 import type { Args, StoryContext } from 'storybook/internal/csf';
@@ -19,6 +20,7 @@ import { type API_IndexHash } from 'storybook/internal/types';
 import { addons } from 'storybook/manager-api';
 import { AddonsTabs, MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
 import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
+import { ResizeHandle } from './ResizeHandle';
 import { SelectedNodeProvider } from './SelectedNodeProvider';
 import { Sidebar } from './Sidebar';
 import { StorybookLogo } from './StorybookLogo';
@@ -105,6 +107,34 @@ export const Layout = ({
     true
   );
 
+  const [sidebarWidth, setSidebarWidth] = useStoreNumberState('desktopSidebarWidth', 240);
+  const [addonsPanelHeight, setAddonsPanelHeight] = useStoreNumberState(
+    'desktopAddonsPanelHeight',
+    300
+  );
+
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+
+  const handleSidebarResize = useCallback(
+    (delta: number) => {
+      setSidebarWidth((prev) => Math.min(Math.max(prev + delta, 180), windowWidth * 0.5));
+    },
+    [setSidebarWidth, windowWidth]
+  );
+
+  const handleAddonsPanelResize = useCallback(
+    (delta: number) => {
+      // Negative delta = dragging up = panel gets larger
+      setAddonsPanelHeight((prev) => Math.min(Math.max(prev - delta, 100), windowHeight * 0.6));
+    },
+    [setAddonsPanelHeight, windowHeight]
+  );
+
+  const [isResizing, setIsResizing] = useState(false);
+
+  const onResizeStart = useCallback(() => setIsResizing(true), []);
+  const onResizeEnd = useCallback(() => setIsResizing(false), []);
+
   const [uiHidden, setUiHidden] = useState(false);
 
   useLayoutEffect(() => {
@@ -113,23 +143,23 @@ export const Layout = ({
 
   const desktopSidebarStyle = useStyle(
     () => ({
-      width: desktopSidebarOpen ? 240 : undefined,
+      width: desktopSidebarOpen ? sidebarWidth : undefined,
       padding: desktopSidebarOpen ? 0 : 10,
       borderColor: theme.appBorderColor,
-      borderRightWidth: 1,
+      borderRightWidth: desktopSidebarOpen ? 0 : 1,
     }),
-    [desktopSidebarOpen, theme.appBorderColor]
+    [desktopSidebarOpen, sidebarWidth, theme.appBorderColor]
   );
 
   const desktopAddonsPanelStyle = useStyle(
     () => ({
-      height: desktopAddonsPanelOpen ? 300 : undefined,
-      borderTopWidth: 1,
+      height: desktopAddonsPanelOpen ? addonsPanelHeight : undefined,
+      borderTopWidth: desktopAddonsPanelOpen ? 0 : 1,
       borderColor: theme.appBorderColor,
       paddingTop: desktopAddonsPanelOpen ? 4 : 0,
       padding: desktopAddonsPanelOpen ? 0 : 10,
     }),
-    [desktopAddonsPanelOpen, theme.appBorderColor]
+    [desktopAddonsPanelOpen, addonsPanelHeight, theme.appBorderColor]
   );
 
   const containerStyle = useStyle(() => {
@@ -189,36 +219,48 @@ export const Layout = ({
   return (
     <View style={containerStyle}>
       {isDesktop ? (
-        <View style={desktopSidebarStyle}>
+        <>
+          <View style={desktopSidebarStyle} pointerEvents={isResizing ? 'none' : 'auto'}>
+            {desktopSidebarOpen ? (
+              <>
+                <View style={desktopLogoContainer}>
+                  <StorybookLogo theme={theme} />
+
+                  <IconButton onPress={() => setDesktopSidebarOpen(false)} Icon={MenuIcon} />
+                </View>
+
+                <View style={flexStyle}>
+                  <Sidebar
+                    previewInitialized
+                    indexError={undefined}
+                    refs={placeholderObject}
+                    setSelection={setSelection}
+                    status={placeholderObject}
+                    index={storyHash}
+                    storyId={story?.id}
+                    refId={DEFAULT_REF_ID}
+                  />
+                </View>
+              </>
+            ) : (
+              <IconButton onPress={() => setDesktopSidebarOpen(true)} Icon={MenuIcon} />
+            )}
+          </View>
           {desktopSidebarOpen ? (
-            <>
-              <View style={desktopLogoContainer}>
-                <StorybookLogo theme={theme} />
-
-                <IconButton onPress={() => setDesktopSidebarOpen(false)} Icon={MenuIcon} />
-              </View>
-
-              <View style={flexStyle}>
-                <Sidebar
-                  previewInitialized
-                  indexError={undefined}
-                  refs={placeholderObject}
-                  setSelection={setSelection}
-                  status={placeholderObject}
-                  index={storyHash}
-                  storyId={story?.id}
-                  refId={DEFAULT_REF_ID}
-                />
-              </View>
-            </>
-          ) : (
-            <IconButton onPress={() => setDesktopSidebarOpen(true)} Icon={MenuIcon} />
-          )}
-        </View>
+            <ResizeHandle
+              direction="horizontal"
+              onResize={handleSidebarResize}
+              onResizeStart={onResizeStart}
+              onResizeEnd={onResizeEnd}
+            />
+          ) : null}
+        </>
       ) : null}
 
       <View style={mobileContentStyle}>
-        <View style={contentContainerStyle}>{children}</View>
+        <View style={contentContainerStyle} pointerEvents={isResizing ? 'none' : 'auto'}>
+          {children}
+        </View>
 
         {story?.parameters?.hideFullScreenButton || isDesktop ? null : (
           <TouchableOpacity
@@ -235,17 +277,27 @@ export const Layout = ({
         )}
 
         {isDesktop ? (
-          <View style={desktopAddonsPanelStyle}>
+          <>
             {desktopAddonsPanelOpen ? (
-              <AddonsTabs storyId={story?.id} onClose={() => setDesktopAddonsPanelOpen(false)} />
-            ) : (
-              <IconButton
-                style={iconFloatRightStyle}
-                onPress={() => setDesktopAddonsPanelOpen(true)}
-                Icon={BottomBarToggleIcon}
+              <ResizeHandle
+                direction="vertical"
+                onResize={handleAddonsPanelResize}
+                onResizeStart={onResizeStart}
+                onResizeEnd={onResizeEnd}
               />
-            )}
-          </View>
+            ) : null}
+            <View style={desktopAddonsPanelStyle} pointerEvents={isResizing ? 'none' : 'auto'}>
+              {desktopAddonsPanelOpen ? (
+                <AddonsTabs storyId={story?.id} onClose={() => setDesktopAddonsPanelOpen(false)} />
+              ) : (
+                <IconButton
+                  style={iconFloatRightStyle}
+                  onPress={() => setDesktopAddonsPanelOpen(true)}
+                  Icon={BottomBarToggleIcon}
+                />
+              )}
+            </View>
+          </>
         ) : null}
       </View>
 

package/src/ResizeHandle.tsx

@@ -0,0 +1,83 @@
+import { useTheme } from '@storybook/react-native-theming';
+import { memo, useMemo, useRef, useState } from 'react';
+import { PanResponder, View, ViewStyle } from 'react-native';
+
+interface ResizeHandleProps {
+  direction: 'horizontal' | 'vertical';
+  onResize: (delta: number) => void;
+  onResizeStart?: () => void;
+  onResizeEnd?: () => void;
+}
+
+export const ResizeHandle = memo(function ResizeHandle({
+  direction,
+  onResize,
+  onResizeStart,
+  onResizeEnd,
+}: ResizeHandleProps) {
+  const theme = useTheme();
+  const [active, setActive] = useState(false);
+  const startValueRef = useRef(0);
+
+  const isHorizontal = direction === 'horizontal';
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => true,
+        onPanResponderGrant: () => {
+          startValueRef.current = 0;
+          setActive(true);
+          onResizeStart?.();
+        },
+        onPanResponderMove: (_, gestureState) => {
+          const delta = isHorizontal ? gestureState.dx : gestureState.dy;
+          const diff = delta - startValueRef.current;
+          startValueRef.current = delta;
+          onResize(diff);
+        },
+        onPanResponderRelease: () => {
+          setActive(false);
+          onResizeEnd?.();
+        },
+        onPanResponderTerminate: () => {
+          setActive(false);
+          onResizeEnd?.();
+        },
+      }),
+    [isHorizontal, onResize, onResizeStart, onResizeEnd]
+  );
+
+  const style = useMemo((): ViewStyle => {
+    const borderColor = active ? theme.barSelectedColor : theme.appBorderColor;
+
+    if (isHorizontal) {
+      return {
+        width: 5,
+        alignSelf: 'stretch',
+        justifyContent: 'center',
+        borderLeftWidth: 1,
+        borderLeftColor: borderColor,
+        backgroundColor: active ? theme.barSelectedColor : 'transparent',
+        // @ts-expect-error - cursor is supported on web and desktop platforms
+        cursor: 'col-resize',
+      };
+    }
+
+    return {
+      height: 5,
+      alignSelf: 'stretch',
+      justifyContent: 'center',
+      borderTopWidth: 1,
+      borderTopColor: borderColor,
+      backgroundColor: active ? theme.barSelectedColor : 'transparent',
+      // @ts-expect-error - cursor is supported on web and desktop platforms
+      cursor: 'row-resize',
+    };
+  }, [active, isHorizontal, theme.appBorderColor, theme.barSelectedColor]);
+
+  return <View {...panResponder.panHandlers} style={style} />;
+});

package/src/Tree.tsx

@@ -41,13 +41,14 @@ interface NodeProps {
 }
 
 const TextItem = styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s2 + 1,
   color: theme.color.defaultText,
 }));
 
 export const Node = React.memo<NodeProps>(function Node({
   item,
   refId,
-  isOrphan,
+  isOrphan: _isOrphan,
   isDisplayed: _isDisplayed,
   isSelected,
   isFullyExpanded,
@@ -66,7 +67,7 @@ export const Node = React.memo<NodeProps>(function Node({
           selected={isSelected}
           key={id}
           id={id}
-          depth={isOrphan ? item.depth : item.depth - 1}
+          depth={item.depth}
           onPress={() => {
             onSelectStoryId(item.id);
           }}
@@ -118,7 +119,7 @@ export const Node = React.memo<NodeProps>(function Node({
         id={id}
         aria-controls={item.children && item.children[0]}
         aria-expanded={isExpanded}
-        depth={isOrphan ? item.depth : item.depth - 1}
+        depth={item.depth}
         isComponent={item.type === 'component'}
         isExpandable={item.children && item.children.length > 0}
         isExpanded={isExpanded}
@@ -168,15 +169,17 @@ export const RootNodeText = styled.Text(({ theme }) => ({
 }));
 
 const CollapseButton = styled.TouchableOpacity(() => ({
+  flex: 1,
   display: 'flex',
   flexDirection: 'row',
-  paddingVertical: 0,
   paddingHorizontal: 8,
+  paddingTop: 8,
+  paddingBottom: 7,
   borderRadius: 4,
   gap: 6,
   alignItems: 'center',
   cursor: 'pointer',
-  height: 34,
+  minHeight: 34,
 }));
 
 const flexStyle: ViewStyle = { flex: 1 };

package/src/TreeNode.tsx

@@ -31,7 +31,6 @@ const BranchNode = styled.TouchableOpacity<{
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
-  alignSelf: 'flex-start',
   paddingLeft: (isExpandable ? 8 : 22) + depth * 18,
 
   backgroundColor: 'transparent',
@@ -50,7 +49,6 @@ const BranchNode = styled.TouchableOpacity<{
 
 const LeafNode = styled.TouchableOpacity<{ depth?: number; selected?: boolean }>(
   ({ depth = 0, selected, theme }) => ({
-    alignSelf: 'flex-start',
     cursor: 'pointer',
     color: 'inherit',
     display: 'flex',