update

.npmrc

@@ -1,2 +1,2 @@
-public-hoist-pattern[]=*@nextui-org/*
+public-hoist-pattern[]=*@heroui/*
 public-hoist-pattern[]=*eslint-*

chrome/.npmrc

@@ -1,2 +1,2 @@
-public-hoist-pattern[]=*@nextui-org/*
+public-hoist-pattern[]=*@heroui/*
 public-hoist-pattern[]=*eslint-*

chrome/package.json

@@ -20,7 +20,7 @@
     "@my-react/react": "^0.3.4",
     "@my-react/react-dom": "^0.3.4",
     "@my-react/react-reconciler": "^0.3.4",
-    "@nextui-org/react": "^2.6.11",
+    "@heroui/react": "2.6.14",
     "@radix-ui/react-icons": "^1.3.2",
     "allotment": "^1.20.2",
     "framer-motion": "11.15.0",
@@ -76,4 +76,4 @@
       ]
     }
   }
-}
+}

chrome/src/components/CodePreview.tsx

@@ -1,4 +1,4 @@
-import { Card, CardBody, CardHeader, Code, Divider, Spinner } from "@nextui-org/react";
+import { Card, CardBody, CardHeader, Code, Divider, Spinner } from "@heroui/react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { codeToHtml } from "shiki";

chrome/src/components/CopyButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Tooltip } from "@nextui-org/react";
+import { Button, Tooltip } from "@heroui/react";
 import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 

chrome/src/components/ExtendView.tsx

@@ -1,4 +1,4 @@
-import { Spacer, Divider } from "@nextui-org/react";
+import { Spacer, Divider } from "@heroui/react";
 
 import { useCallbackRef } from "@/hooks/useCallbackRef";
 import { useHighlightNode } from "@/hooks/useHighlightNode";

chrome/src/components/HookView.tsx

@@ -1,4 +1,4 @@
-import { Chip, Divider, Spacer } from "@nextui-org/react";
+import { Chip, Divider, Spacer } from "@heroui/react";
 import { TriangleDownIcon, TriangleRightIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 

chrome/src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import { Card, CardBody } from "@nextui-org/react";
+import { Card, CardBody } from "@heroui/react";
 import { Allotment } from "allotment";
 
 import type { ReactNode } from "react";

chrome/src/components/NameView.tsx

@@ -1,5 +1,5 @@
-import { Button, ButtonGroup, Divider, Tooltip } from "@nextui-org/react";
-import { CubeIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { Button, ButtonGroup, Divider, Tooltip } from "@heroui/react";
+import { Crosshair1Icon, CubeIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
 
 import { useDetailNode } from "@/hooks/useDetailNode";
 import { useTreeNode } from "@/hooks/useTreeNode";
@@ -9,7 +9,7 @@ import { TreeItem } from "./TreeItem";
 
 import type { PlainNode } from "@my-react-devtool/core";
 
-const { forceReload, storeFiber, triggerFiber } = useTreeNode.getActions();
+const { forceReload, storeFiber, triggerFiber, scrollIntoView } = useTreeNode.getActions();
 
 export const NameView = () => {
   const select = useTreeNode((s) => s.select);
@@ -27,6 +27,11 @@ export const NameView = () => {
       <div className={`p-2 ${sizeClass} sticky top-0 bg-content1 transition-transform-background z-50`}>
         <TreeItem node={currentSelectDetail} withCollapse={false} withSelect={false} withKey={false} />
         <ButtonGroup className="absolute right-4 top-0">
+          <Tooltip content='force scroll to select' showArrow color='foreground' placement='bottom-end'>
+            <Button isIconOnly size='sm' variant='flat' onPress={scrollIntoView}>
+              <Crosshair1Icon width='11' height='11' />
+            </Button>
+          </Tooltip>
           <Tooltip content="store fiber node" showArrow color="foreground" placement="bottom-end">
             <Button isIconOnly size="sm" variant="flat" onPress={storeFiber}>
               <CubeIcon width="11" height="11" />

chrome/src/components/NodeValue.tsx

@@ -1,4 +1,4 @@
-import { Spinner } from "@nextui-org/react";
+import { Spinner } from "@heroui/react";
 import { TriangleDownIcon, TriangleRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
 import { useState, useRef, useMemo, useEffect } from "react";
 

chrome/src/components/NodeView.tsx

@@ -1,4 +1,4 @@
-import { Spinner } from "@nextui-org/react";
+import { Spinner } from "@heroui/react";
 
 import { useDetailNode } from "@/hooks/useDetailNode";
 

chrome/src/components/PropsView.tsx

@@ -1,4 +1,4 @@
-import { Divider, Spacer } from "@nextui-org/react";
+import { Divider, Spacer } from "@heroui/react";
 
 import { useCallbackRef } from "@/hooks/useCallbackRef";
 import { useDetailNode } from "@/hooks/useDetailNode";

chrome/src/components/RenderView.tsx

@@ -1,4 +1,4 @@
-import { Divider, Spacer } from "@nextui-org/react";
+import { Divider, Spacer } from "@heroui/react";
 import { useMemo } from "react";
 // import { Virtuoso } from "react-virtuoso";
 

chrome/src/components/SourceView.tsx

@@ -1,4 +1,4 @@
-import { Spacer } from "@nextui-org/react";
+import { Spacer } from "@heroui/react";
 
 import { useDetailNode } from "@/hooks/useDetailNode";
 import { useTreeNode } from "@/hooks/useTreeNode";

chrome/src/components/StateView.tsx

@@ -1,4 +1,4 @@
-import { Divider, Spacer } from "@nextui-org/react";
+import { Divider, Spacer } from "@heroui/react";
 
 import { useCallbackRef } from "@/hooks/useCallbackRef";
 import { useDetailNode } from "@/hooks/useDetailNode";

chrome/src/components/TreeItem.tsx

@@ -1,6 +1,6 @@
 // import { NODE_TYPE } from "@my-react/react-reconciler";
+import { Chip, Spacer, Tooltip } from "@heroui/react";
 import { getFiberTag } from "@my-react-devtool/core";
-import { Chip, Spacer, Tooltip } from "@nextui-org/react";
 import { TriangleDownIcon, TriangleRightIcon } from "@radix-ui/react-icons";
 import { memo, useCallback, useMemo } from "react";
 

chrome/src/components/TreeView.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Virtuoso } from "react-virtuoso";
 
 import { useAppTree } from "@/hooks/useAppTree";
@@ -52,7 +52,9 @@ const TreeViewImpl = memo(({ onScroll, data, onMount }: { onScroll: () => void;
 
   const ref = useRef<VirtuosoHandle>(null);
 
-  const select = useTreeNode.useShallowStableSelector((s) => s.select);
+  const dataRef = useRef(data);
+
+  dataRef.current = data;
 
   const size = useUISize.useShallowStableSelector((s) => s.state);
 
@@ -66,13 +68,20 @@ const TreeViewImpl = memo(({ onScroll, data, onMount }: { onScroll: () => void;
     );
   });
 
-  const index = useMemo(() => data.findIndex((item) => item.i === select), [data, select]);
-
   useEffect(() => {
-    if (index !== -1) {
-      ref.current?.scrollIntoView({ index });
-    }
-  }, [index]);
+    const cb = useTreeNode.subscribe(
+      (s) => s.scroll,
+      () => {
+        const select = useTreeNode.getReadonlyState().select;
+        const index = dataRef.current?.findIndex((item) => item.i === select);
+        if (index !== -1) {
+          ref.current?.scrollIntoView({ index, align: "center" });
+        }
+      }
+    );
+
+    return cb;
+  }, []);
 
   const hasLength = data.length > 0;
 

chrome/src/components/TreeViewSearch.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Input, Spacer, Tooltip } from "@nextui-org/react";
+import { Button, ButtonGroup, Input, Spacer, Tooltip } from "@heroui/react";
 import { ArrowDownIcon, ArrowUpIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { memo, useEffect, useState } from "react";
 import { toast } from "sonner";

chrome/src/components/TreeViewSetting.tsx

@@ -1,4 +1,3 @@
-import { color, getTypeName, typeKeys } from "@my-react-devtool/core";
 import {
   Button,
   Modal,
@@ -18,7 +17,8 @@ import {
   Divider,
   Chip,
   Code,
-} from "@nextui-org/react";
+} from "@heroui/react";
+import { color, getTypeName, typeKeys } from "@my-react-devtool/core";
 import { CheckCircledIcon, CrossCircledIcon, GearIcon, MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 import { memo } from "react";
@@ -74,7 +74,7 @@ export const TreeViewSetting = memo(({ handle }: { handle?: VirtuosoHandle }) =>
         </ButtonGroup>
       </div>
 
-      <Modal isOpen={isOpen} size="2xl" onClose={onClose} onOpenChange={onOpenChange} isDismissable={false} placement="top">
+      <Modal isOpen={isOpen} size="2xl" onClose={onClose} onOpenChange={onOpenChange} placement="top">
         <ModalContent>
           <ModalHeader>
             <h3 className="text-[1em]">
@@ -92,9 +92,6 @@ export const TreeViewSetting = memo(({ handle }: { handle?: VirtuosoHandle }) =>
                     selectedKeys={values}
                     aria-label="Filter Node"
                     className="flex items-center"
-                    radius="sm"
-                    variant="bordered"
-                    size="lg"
                     onChange={handleSelectionChange}
                   >
                     {typeKeys.map((type) => (
@@ -118,7 +115,7 @@ export const TreeViewSetting = memo(({ handle }: { handle?: VirtuosoHandle }) =>
               <div className="flex flex-col gap-y-2">
                 <p className="whitespace-nowrap text-[14px] text-foreground-500">Config: </p>
                 <Checkbox isSelected={configState.enableUpdate} onValueChange={setEnableUpdate} color="primary">
-                  <div className="flex">
+                  <div className="flex items-center">
                     Highlight Update
                     <div className="ml-4 gap-x-2 flex">
                       <Chip style={{ backgroundColor: color.update, mixBlendMode: "difference" }}>update</Chip>

chrome/src/hooks/useTreeNode.ts

@@ -14,12 +14,13 @@ const delNode = useDetailNode.getActions().delNode;
 
 export const useTreeNode = createState(
   () =>
-    ({ select: null, hover: null, closeList: {}, selectList: {}, reload: 0, store: 0, trigger: 0 }) as {
+    ({ select: null, hover: null, closeList: {}, selectList: {}, reload: 0, store: 0, trigger: 0, scroll: 0 }) as {
       select: string | null;
       hover: string | null;
       reload: number;
       trigger: number;
       store: number;
+      scroll: number;
       closeList: Record<string, boolean>;
       selectList: Record<string, boolean>;
     },
@@ -71,6 +72,11 @@ export const useTreeNode = createState(
             toast.success("trigger fiber success");
           }
         },
+        scrollIntoView: () => {
+          if (s.select) {
+            s.scroll++;
+          }
+        },
         updateSelectList,
         setHover: (node: string | null) => {
           if (node === s.hover) {

chrome/src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { Code, NextUIProvider, Snippet, Spacer, Spinner, Tooltip, Button } from "@nextui-org/react";
+import { Code, HeroUIProvider, Snippet, Spacer, Spinner, Tooltip, Button } from "@heroui/react";
 import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons";
 import { Fira_Code } from "next/font/google";
 import { useRouter } from "next/router";
@@ -131,7 +131,7 @@ export default function App({ Component, pageProps, router }: AppProps) {
   );
 
   return (
-    <NextUIProvider>
+    <HeroUIProvider>
       <style jsx global>{`
         html {
           font-family: ${roboto.style.fontFamily} !important;
@@ -144,6 +144,6 @@ export default function App({ Component, pageProps, router }: AppProps) {
       <ThemeProvider attribute="class" defaultTheme="light">
         {rendered}
       </ThemeProvider>
-    </NextUIProvider>
+    </HeroUIProvider>
   );
 }

chrome/tailwind.config.ts

@@ -1,18 +1,18 @@
-import { nextui } from "@nextui-org/react";
+import { heroui } from "@heroui/react";
 
 import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
     "./src/components/**/*",
     "./src/pages/**/*",
-    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
-    "../node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
+    "../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
   },
   darkMode: "class",
-  plugins: [nextui()],
+  plugins: [heroui()],
 };
 export default config;