Update On Thu May 9 20:28:58 CEST 2024

.github/update.log

@@ -641,3 +641,4 @@ Update On Sun May  5 20:28:27 CEST 2024
 Update On Mon May  6 20:31:49 CEST 2024
 Update On Tue May  7 20:29:39 CEST 2024
 Update On Thu May  9 16:22:44 CEST 2024
+Update On Thu May  9 20:28:46 CEST 2024

clash-nyanpasu/frontend/nyanpasu/package.json

@@ -12,7 +12,6 @@
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@generouted/react-router": "1.19.3",
     "@juggle/resize-observer": "3.4.0",
@@ -40,11 +39,14 @@
     "react-i18next": "14.1.1",
     "react-markdown": "9.0.1",
     "react-router-dom": "6.23.0",
+    "react-text-transition": "3.1.0",
     "react-transition-group": "4.4.5",
     "react-virtuoso": "4.7.10",
     "swr": "2.2.5"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "11.11.0",
+    "@emotion/react": "11.11.4",
     "@types/js-cookie": "3.0.6",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",

clash-nyanpasu/frontend/nyanpasu/src/components/layout/animated-logo.tsx

@@ -0,0 +1,34 @@
+import LogoSvg from "@/assets/image/logo.svg?react";
+import getSystem from "@/utils/get-system";
+import { motion } from "framer-motion";
+import { useRef } from "react";
+import { UpdateButton } from "./update-button";
+
+const OS = getSystem();
+
+const Logo = motion(LogoSvg);
+
+export default function AnimatedLogo() {
+  const constraintsRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className="the-logo" data-windrag ref={constraintsRef}>
+      <Logo
+        initial={{ opacity: 0, scale: 0.5 }}
+        animate={{ opacity: 1, scale: 1 }}
+        whileHover={{ scale: 1.1 }}
+        transition={{
+          type: "spring",
+          stiffness: 260,
+          damping: 20,
+        }}
+        drag
+        dragConstraints={constraintsRef}
+      />
+
+      {!(OS === "windows" && WIN_PORTABLE) && (
+        <UpdateButton className="the-newbtn" />
+      )}
+    </div>
+  );
+}

clash-nyanpasu/frontend/nyanpasu/src/components/log/log-item.module.scss.d.ts

@@ -3,4 +3,4 @@ declare const classNames: {
   readonly shiki: "shiki";
   readonly dark: "dark";
 };
-export = classNames;
+export default classNames;

clash-nyanpasu/frontend/nyanpasu/src/components/proxies/delay-button.tsx

@@ -0,0 +1,71 @@
+import { classNames } from "@/utils";
+import { Bolt } from "@mui/icons-material";
+import {
+  alpha,
+  Button,
+  CircularProgress,
+  Tooltip,
+  useTheme,
+} from "@mui/material";
+import { memo, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export const DelayButton = memo(function DelayButton({
+  onClick,
+}: {
+  onClick: () => Promise<void>;
+}) {
+  const { t } = useTranslation();
+
+  const { palette } = useTheme();
+
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    try {
+      setLoading(true);
+
+      await onClick();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Tooltip title={t("Delay check")}>
+      <Button
+        className="size-16 backdrop-blur !rounded-2xl !fixed z-10 bottom-16 right-16"
+        sx={{
+          boxShadow: 8,
+          backgroundColor: alpha(palette.primary.main, 0.3),
+
+          "&:hover": {
+            backgroundColor: alpha(palette.primary.main, 0.45),
+          },
+
+          "&.MuiLoadingButton-loading": {
+            backgroundColor: alpha(palette.primary.main, 0.15),
+          },
+        }}
+        onClick={handleClick}
+      >
+        <Bolt
+          className={classNames(
+            "!size-8",
+            "transition-opacity",
+            loading ? "opacity-0" : "opacity-1",
+          )}
+        />
+
+        <CircularProgress
+          size={32}
+          className={classNames(
+            "transition-opacity",
+            "absolute",
+            loading ? "opacity-1" : "opacity-0",
+          )}
+        />
+      </Button>
+    </Tooltip>
+  );
+});

clash-nyanpasu/frontend/nyanpasu/src/components/proxies/index.ts

@@ -1,2 +1,3 @@
 export * from "./group-list";
 export * from "./node-list";
+export * from "./delay-button";

clash-nyanpasu/frontend/nyanpasu/src/components/proxies/node-list.tsx

@@ -8,8 +8,8 @@ import {
 import Grid from "@mui/material/Unstable_Grid2";
 import { PaperSwitchButton } from "../setting/modules/system-proxy";
 import { Clash, useClashCore, useNyanpasu } from "@nyanpasu/interface";
-import { useAtom } from "jotai";
-import { proxyGroupAtom } from "@/store";
+import { useAtom, useAtomValue } from "jotai";
+import { proxyGroupAtom, proxyGroupSortAtom } from "@/store";
 import { memo, useMemo, useState } from "react";
 import { classNames } from "@/utils";
 
@@ -167,17 +167,43 @@ export const NodeList = () => {
 
   const [proxyGroup] = useAtom(proxyGroupAtom);
 
+  const proxyGroupSort = useAtomValue(proxyGroupSortAtom);
+
   const group = useMemo(() => {
-    if (getCurrentMode.global) {
-      return data?.global;
-    } else {
+    if (!getCurrentMode.global) {
       if (proxyGroup.selector !== null) {
-        return data?.groups[proxyGroup.selector];
-      } else {
-        return undefined;
+        const selectedGroup = data?.groups[proxyGroup.selector];
+
+        if (selectedGroup) {
+          let sortedList = selectedGroup.all?.slice();
+
+          if (proxyGroupSort === "delay") {
+            sortedList = sortedList?.sort((a, b) => {
+              const delayA = filterDelay(a.history);
+              const delayB = filterDelay(b.history);
+
+              if (delayA === -1 || delayA === -2) return 1;
+              if (delayB === -1 || delayB === -2) return -1;
+
+              return delayA - delayB;
+            });
+          } else if (proxyGroupSort === "name") {
+            sortedList = sortedList?.sort((a, b) =>
+              a.name.localeCompare(b.name),
+            );
+          }
+
+          return {
+            ...selectedGroup,
+            all: sortedList,
+          };
+        }
       }
+      return undefined;
     }
-  }, [data?.groups, proxyGroup.selector, getCurrentMode]);
+
+    return data?.global;
+  }, [data?.groups, proxyGroup.selector, getCurrentMode, proxyGroupSort]);
 
   const hendleClick = (node: string) => {
     setGroupProxy(proxyGroup.selector as number, node);

clash-nyanpasu/frontend/nyanpasu/src/pages/_app.tsx

@@ -1,7 +1,5 @@
-import LogoSvg from "@/assets/image/logo.svg?react";
 import { LayoutControl } from "@/components/layout/layout-control";
 import { LayoutTraffic } from "@/components/layout/layout-traffic";
-import { UpdateButton } from "@/components/layout/update-button";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
 import { NotificationType, useNotification } from "@/hooks/use-notification";
 import { useVerge } from "@/hooks/use-verge";
@@ -22,9 +20,11 @@ import { SWRConfig, mutate } from "swr";
 // import { routers } from "./_routers";
 import { LayoutItem } from "@/components/layout/layout-item";
 import PageTransition from "@/components/layout/page-transition";
+import { useNavigate, type Path } from "@/router";
 import { classNames } from "@/utils";
-import { Modals } from "@generouted/react-router/lazy";
-import { useNavigate, type Path } from "../router";
+
+import AnimatedLogo from "@/components/layout/animated-logo";
+import { FallbackProps } from "react-error-boundary";
 import styles from "./_app.module.scss";
 
 dayjs.extend(relativeTime);
@@ -171,14 +171,7 @@ export default function App() {
           ]}
         >
           <div className="layout__left" data-windrag>
-            <div className="the-logo" data-windrag>
-              <LogoSvg />
-
-              {!(OS === "windows" && WIN_PORTABLE) && (
-                <UpdateButton className="the-newbtn" />
-              )}
-            </div>
-
+            <AnimatedLogo />
             <List className="the-menu">
               {Object.entries(routes).map(([name, to]) => (
                 <LayoutItem key={name} to={to as Path}>
@@ -205,7 +198,6 @@ export default function App() {
               {/* {React.cloneElement(routes, { key: location.pathname })} */}
               <PageTransition />
             </AnimatePresence>
-            <Modals />
           </div>
         </Paper>
       </ThemeProvider>
@@ -213,7 +205,7 @@ export default function App() {
   );
 }
 
-export const Catch = () => {
+export const Catch = ({ error }: FallbackProps) => {
   const theme = useTheme();
   return (
     <div
@@ -223,7 +215,8 @@ export const Catch = () => {
       )}
     >
       <h1>Oops!</h1>
-      <p>Something went wrong... Caught at _app error boundary</p>
+      <p>Something went wrong... Caught at _app error boundary.</p>
+      <pre>{error.message}</pre>
     </div>
   );
 };

clash-nyanpasu/frontend/nyanpasu/src/pages/_layout.tsx

@@ -0,0 +1,19 @@
+import { FallbackProps } from "react-error-boundary";
+import { Outlet } from "react-router-dom";
+
+export default function Layout() {
+  return <Outlet />;
+}
+
+export const Catch = ({ error }: FallbackProps) => {
+  // const theme = useTheme();
+  return (
+    <div>
+      <h1>Oops!</h1>
+      <p>Something went wrong... Caught at _layout error boundary.</p>
+      <pre>{error.message}</pre>
+    </div>
+  );
+};
+
+export const Pending = () => <div>Loading from _layout...</div>;

clash-nyanpasu/frontend/nyanpasu/src/pages/connections.module.scss.d.ts

@@ -3,4 +3,4 @@ declare const classNames: {
   readonly label: "label";
   readonly value: "value";
 };
-export = classNames;
+export default classNames;

clash-nyanpasu/frontend/nyanpasu/src/pages/proxies.tsx

@@ -3,21 +3,77 @@ import {
   Box,
   Button,
   ButtonGroup,
+  Menu,
+  MenuItem,
   TextField,
-  Typography,
   alpha,
   useTheme,
 } from "@mui/material";
-import { useReactive } from "ahooks";
-import { useMemo } from "react";
+import { memo, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNyanpasu, useClashCore } from "@nyanpasu/interface";
 import { SidePage } from "@nyanpasu/ui";
-import { GroupList, NodeList } from "@/components/proxies";
-import { Bolt, Public } from "@mui/icons-material";
+import { DelayButton, GroupList, NodeList } from "@/components/proxies";
+import { Public } from "@mui/icons-material";
 import { useAtom } from "jotai";
-import { proxyGroupAtom } from "@/store";
-import LoadingButton from "@mui/lab/LoadingButton";
+import { proxyGroupAtom, proxyGroupSortAtom } from "@/store";
+import ReactTextTransition from "react-text-transition";
+
+const ProxyGroupName = memo(function ProxyGroupName({
+  name,
+}: {
+  name: string;
+}) {
+  return <ReactTextTransition inline>{name}</ReactTextTransition>;
+});
+
+const SortSelector = memo(function SortSelector() {
+  const { t } = useTranslation();
+
+  const [proxyGroupSort, setProxyGroupSort] = useAtom(proxyGroupSortAtom);
+
+  type SortType = typeof proxyGroupSort;
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleClick = (sort: SortType) => {
+    setAnchorEl(null);
+    setProxyGroupSort(sort);
+  };
+
+  const tmaps: { [key: string]: string } = {
+    default: "Sort by default",
+    delay: "Sort by delay",
+    name: "Sort by name",
+  };
+
+  return (
+    <>
+      <Button
+        size="small"
+        variant="outlined"
+        sx={{ textTransform: "none" }}
+        onClick={(e) => setAnchorEl(e.currentTarget)}
+      >
+        {t(tmaps[proxyGroupSort])}
+      </Button>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={() => setAnchorEl(null)}
+      >
+        {Object.entries(tmaps).map(([key, value], index) => {
+          return (
+            <MenuItem key={index} onClick={() => handleClick(key as SortType)}>
+              {t(value)}
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </>
+  );
+});
 
 export default function ProxyPage() {
   const { t } = useTranslation();
@@ -30,10 +86,6 @@ export default function ProxyPage() {
 
   const [proxyGroup] = useAtom(proxyGroupAtom);
 
-  const loading = useReactive({
-    delay: false,
-  });
-
   const group = useMemo(() => {
     if (getCurrentMode.global) {
       return data?.global;
@@ -49,13 +101,7 @@ export default function ProxyPage() {
   }, [proxyGroup.selector, data?.groups, getCurrentMode]);
 
   const handleDelayClick = async () => {
-    try {
-      loading.delay = true;
-
-      await updateGroupDelay(proxyGroup.selector as number);
-    } finally {
-      loading.delay = false;
-    }
+    await updateGroupDelay(proxyGroup.selector as number);
   };
 
   return (
@@ -98,16 +144,13 @@ export default function ProxyPage() {
       side={getCurrentMode.rule && <GroupList />}
       toolBar={
         !getCurrentMode.direct && (
-          <Box
-            width="100%"
-            display="flex"
-            alignItems="center"
-            justifyContent="space-between"
-          >
-            <Box>
-              <Typography>{group?.name}</Typography>
-            </Box>
-          </Box>
+          <div className="w-full flex items-center justify-between">
+            <div>{group?.name && <ProxyGroupName name={group?.name} />}</div>
+
+            <div>
+              <SortSelector />
+            </div>
+          </div>
         )
       }
     >
@@ -115,33 +158,7 @@ export default function ProxyPage() {
         <>
           <NodeList />
 
-          <LoadingButton
-            size="large"
-            sx={{
-              position: "fixed",
-              bottom: 32,
-              right: 32,
-              zIndex: 10,
-              height: 64,
-              width: 64,
-              borderRadius: 4,
-              boxShadow: 8,
-              backgroundColor: alpha(palette.primary.main, 0.3),
-              backdropFilter: "blur(8px)",
-
-              "&:hover": {
-                backgroundColor: alpha(palette.primary.main, 0.1),
-              },
-
-              "&.MuiLoadingButton-loading": {
-                backgroundColor: alpha(palette.primary.main, 0.15),
-              },
-            }}
-            loading={loading.delay}
-            onClick={handleDelayClick}
-          >
-            <Bolt />
-          </LoadingButton>
+          <DelayButton onClick={handleDelayClick} />
         </>
       ) : (
         <div className="h-full w-full flex items-center justify-center">

clash-nyanpasu/frontend/nyanpasu/src/router.ts

@@ -1,7 +1,7 @@
 // Generouted, changes to this file will be overriden
 /* eslint-disable */
 
-import { components, hooks, utils } from '@generouted/react-router/client'
+import { components, hooks, utils } from "@generouted/react-router/client";
 
 export type Path =
   | `/connections`
@@ -10,14 +10,16 @@ export type Path =
   | `/providers`
   | `/proxies`
   | `/rules`
-  | `/settings`
+  | `/settings`;
 
-export type Params = {
-  
-}
+export type Params = {};
 
-export type ModalPath = never
+export type ModalPath = never;
 
-export const { Link, Navigate } = components<Path, Params>()
-export const { useModals, useNavigate, useParams } = hooks<Path, Params, ModalPath>()
-export const { redirect } = utils<Path, Params>()
+export const { Link, Navigate } = components<Path, Params>();
+export const { useModals, useNavigate, useParams } = hooks<
+  Path,
+  Params,
+  ModalPath
+>();
+export const { redirect } = utils<Path, Params>();

clash-nyanpasu/frontend/nyanpasu/src/store/index.ts

@@ -6,6 +6,8 @@ export const proxyGroupAtom = atom<{
   selector: 0,
 });
 
+export const proxyGroupSortAtom = atom<"default" | "delay" | "name">("default");
+
 export const themeMode = atom<"light" | "dark">("light");
 
 export const atomLogData = atom<ILogItem[]>([]);

clash-nyanpasu/frontend/nyanpasu/vite.config.ts

@@ -1,5 +1,6 @@
 import generouted from "@generouted/react-router/plugin";
 import react from "@vitejs/plugin-react";
+// import react from "@vitejs/plugin-react-swc";
 import path from "node:path";
 import { defineConfig } from "vite";
 import monaco from "vite-plugin-monaco-editor";
@@ -44,12 +45,25 @@ export default defineConfig(({ command }) => {
     plugins: [
       tsconfigPaths(),
       svgr(),
-      react(),
+      react({
+        // jsxImportSource: "@emotion/react",
+        babel: {
+          plugins: ["@emotion/babel-plugin"],
+        },
+      }),
       generouted(),
       sassDts({ esmExport: true }),
       monaco({ languageWorkers: ["editorWorkerService", "typescript"] }),
       isDev && devtools(),
     ],
+    optimizeDeps: {
+      include: [
+        "@emotion/react",
+        "@emotion/styled",
+        "@mui/lab/*",
+        "@mui/material/*",
+      ],
+    },
     esbuild: {
       drop: isDev ? undefined : ["console", "debugger"],
     },

clash-nyanpasu/frontend/ui/materialYou/components/sidePage/index.tsx

@@ -53,13 +53,15 @@ export const SidePage: FC<Props> = ({
 
         <div className={style["MDYSidePage-Container"]}>
           <div className={style["MDYSidePage-Layout"]}>
-            <div className={style.LeftContainer}>
-              {sideBar && <div>{sideBar}</div>}
+            {side && (
+              <div className={style.LeftContainer}>
+                {sideBar && <div>{sideBar}</div>}
 
-              <div className={style["LeftContainer-Content"]}>
-                <section>{memoizedSide}</section>
+                <div className={style["LeftContainer-Content"]}>
+                  <section>{memoizedSide}</section>
+                </div>
               </div>
-            </div>
+            )}
 
             <div className={style.RightContainer}>
               {toolBar && (

clash-nyanpasu/pnpm-lock.yaml

@@ -170,9 +170,6 @@ importers:
       '@dnd-kit/utilities':
         specifier: 3.2.2
         version: 3.2.2(react@19.0.0-beta-e7d213dfb0-20240507)
-      '@emotion/react':
-        specifier: 11.11.4
-        version: 11.11.4(react@19.0.0-beta-e7d213dfb0-20240507)(types-react@19.0.0-beta.1)
       '@emotion/styled':
         specifier: 11.11.5
         version: 11.11.5(@emotion/react@11.11.4(react@19.0.0-beta-e7d213dfb0-20240507)(types-react@19.0.0-beta.1))(react@19.0.0-beta-e7d213dfb0-20240507)(types-react@19.0.0-beta.1)
@@ -254,6 +251,9 @@ importers:
       react-router-dom:
         specifier: 6.23.0
         version: 6.23.0(react-dom@19.0.0-beta-e7d213dfb0-20240507(react@19.0.0-beta-e7d213dfb0-20240507))(react@19.0.0-beta-e7d213dfb0-20240507)
+      react-text-transition:
+        specifier: 3.1.0
+        version: 3.1.0(react-dom@19.0.0-beta-e7d213dfb0-20240507(react@19.0.0-beta-e7d213dfb0-20240507))(react@19.0.0-beta-e7d213dfb0-20240507)
       react-transition-group:
         specifier: 4.4.5
         version: 4.4.5(react-dom@19.0.0-beta-e7d213dfb0-20240507(react@19.0.0-beta-e7d213dfb0-20240507))(react@19.0.0-beta-e7d213dfb0-20240507)
@@ -264,6 +264,12 @@ importers:
         specifier: 2.2.5
         version: 2.2.5(react@19.0.0-beta-e7d213dfb0-20240507)
     devDependencies:
+      '@emotion/babel-plugin':
+        specifier: 11.11.0
+        version: 11.11.0
+      '@emotion/react':
+        specifier: 11.11.4
+        version: 11.11.4(react@19.0.0-beta-e7d213dfb0-20240507)(types-react@19.0.0-beta.1)
       '@types/js-cookie':
         specifier: 3.0.6
         version: 3.0.6
@@ -1236,6 +1242,30 @@ packages:
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
+  '@react-spring/animated@9.7.3':
+    resolution: {integrity: sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==}
+    peerDependencies:
+      react: npm:react@beta
+
+  '@react-spring/core@9.7.3':
+    resolution: {integrity: sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==}
+    peerDependencies:
+      react: npm:react@beta
+
+  '@react-spring/shared@9.7.3':
+    resolution: {integrity: sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==}
+    peerDependencies:
+      react: npm:react@beta
+
+  '@react-spring/types@9.7.3':
+    resolution: {integrity: sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==}
+
+  '@react-spring/web@9.7.3':
+    resolution: {integrity: sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==}
+    peerDependencies:
+      react: npm:react@beta
+      react-dom: npm:react-dom@beta
+
   '@remix-run/router@1.16.0':
     resolution: {integrity: sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==}
     engines: {node: '>=14.0.0'}
@@ -1685,6 +1715,7 @@ packages:
   acorn@8.11.3:
     resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
+    hasBin: true
 
   adm-zip@0.5.12:
     resolution: {integrity: sha512-6TVU49mK6KZb4qG6xWaaM4C7sA/sgUMLy/JYMOzkcp3BvVLpW0fXDFQiIzAuxFCt/2+xD7fNIiPFAoLZPhVNLQ==}
@@ -2286,6 +2317,7 @@ packages:
 
   errno@0.1.8:
     resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
 
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
@@ -2458,6 +2490,7 @@ packages:
   eslint@8.57.0:
     resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    hasBin: true
 
   espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
@@ -2851,6 +2884,7 @@ packages:
   image-size@0.5.5:
     resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
     engines: {node: '>=0.10.0'}
+    hasBin: true
 
   immutable@4.3.5:
     resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
@@ -3194,6 +3228,7 @@ packages:
   less@4.2.0:
     resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==}
     engines: {node: '>=6'}
+    hasBin: true
 
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
@@ -3436,6 +3471,7 @@ packages:
   mime@1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
     engines: {node: '>=4'}
+    hasBin: true
 
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
@@ -3506,6 +3542,7 @@ packages:
   needle@3.3.1:
     resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==}
     engines: {node: '>= 4.4.x'}
+    hasBin: true
 
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
@@ -3868,6 +3905,7 @@ packages:
   prettier@3.2.5:
     resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
     engines: {node: '>=14'}
+    hasBin: true
 
   progress@2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
@@ -3980,6 +4018,11 @@ packages:
     peerDependencies:
       react: npm:react@beta
 
+  react-text-transition@3.1.0:
+    resolution: {integrity: sha512-NtXEVAXvSh78+8JAnrVjpbftzD4kPowacv4GB2Nyq9C/8ko6fSm6M/XvKWQLCaZi68i9F28b++Sp8uVThlzLyg==}
+    peerDependencies:
+      react: npm:react@beta
+
   react-transition-group@4.4.5:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -4089,6 +4132,7 @@ packages:
 
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    hasBin: true
 
   roarr@2.15.4:
     resolution: {integrity: sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==}
@@ -4145,6 +4189,7 @@ packages:
 
   semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
 
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
@@ -4366,6 +4411,7 @@ packages:
 
   stylus@0.62.0:
     resolution: {integrity: sha512-v3YCf31atbwJQIMtPNX8hcQ+okD4NQaTuKGUWfII8eaqn+3otrbttGL1zSMZAAtiPsBztQnujVBugg/cXFUpyg==}
+    hasBin: true
 
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
@@ -4539,6 +4585,7 @@ packages:
   typescript@5.4.5:
     resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==}
     engines: {node: '>=14.17'}
+    hasBin: true
 
   ufo@1.5.3:
     resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
@@ -4719,6 +4766,7 @@ packages:
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
+    hasBin: true
 
   widest-line@2.0.1:
     resolution: {integrity: sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==}
@@ -5656,6 +5704,35 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
+  '@react-spring/animated@9.7.3(react@19.0.0-beta-e7d213dfb0-20240507)':
+    dependencies:
+      '@react-spring/shared': 9.7.3(react@19.0.0-beta-e7d213dfb0-20240507)
+      '@react-spring/types': 9.7.3
+      react: 19.0.0-beta-e7d213dfb0-20240507
+
+  '@react-spring/core@9.7.3(react@19.0.0-beta-e7d213dfb0-20240507)':
+    dependencies:
+      '@react-spring/animated': 9.7.3(react@19.0.0-beta-e7d213dfb0-20240507)
+      '@react-spring/shared': 9.7.3(react@19.0.0-beta-e7d213dfb0-20240507)
+      '@react-spring/types': 9.7.3
+      react: 19.0.0-beta-e7d213dfb0-20240507
+
+  '@react-spring/shared@9.7.3(react@19.0.0-beta-e7d213dfb0-20240507)':
+    dependencies:
+      '@react-spring/types': 9.7.3
+      react: 19.0.0-beta-e7d213dfb0-20240507
+
+  '@react-spring/types@9.7.3': {}
+
+  '@react-spring/web@9.7.3(react-dom@19.0.0-beta-e7d213dfb0-20240507(react@19.0.0-beta-e7d213dfb0-20240507))(react@19.0.0-beta-e7d213dfb0-20240507)':
+    dependencies:
+      '@react-spring/animated': 9.7.3(react@19.0.0-beta-e7d213dfb0-20240507)
+      '@react-spring/core': 9.7.3(react@19.0.0-beta-e7d213dfb0-20240507)
+      '@react-spring/shared': 9.7.3(react@19.0.0-beta-e7d213dfb0-20240507)
+      '@react-spring/types': 9.7.3
+      react: 19.0.0-beta-e7d213dfb0-20240507
+      react-dom: 19.0.0-beta-e7d213dfb0-20240507(react@19.0.0-beta-e7d213dfb0-20240507)
+
   '@remix-run/router@1.16.0': {}
 
   '@rollup/pluginutils@5.1.0(rollup@4.17.2)':
@@ -8665,6 +8742,13 @@ snapshots:
       '@remix-run/router': 1.16.0
       react: 19.0.0-beta-e7d213dfb0-20240507
 
+  react-text-transition@3.1.0(react-dom@19.0.0-beta-e7d213dfb0-20240507(react@19.0.0-beta-e7d213dfb0-20240507))(react@19.0.0-beta-e7d213dfb0-20240507):
+    dependencies:
+      '@react-spring/web': 9.7.3(react-dom@19.0.0-beta-e7d213dfb0-20240507(react@19.0.0-beta-e7d213dfb0-20240507))(react@19.0.0-beta-e7d213dfb0-20240507)
+      react: 19.0.0-beta-e7d213dfb0-20240507
+    transitivePeerDependencies:
+      - react-dom
+
   react-transition-group@4.4.5(react-dom@19.0.0-beta-e7d213dfb0-20240507(react@19.0.0-beta-e7d213dfb0-20240507))(react@19.0.0-beta-e7d213dfb0-20240507):
     dependencies:
       '@babel/runtime': 7.24.5