feat(directory): add changelogs page

Version

@@ -1 +1 @@
-3.3.13
+3.3.25

changelogs.yaml

@@ -0,0 +1,6 @@
+showcase:
+  2023/03/01: 
+    - Under Construction :)
+directory:
+  2023/03/01: 
+    - Under Construction :)

directory/Version

@@ -1 +1 @@
-0.5.12
+0.5.21

directory/src/App.jsx

@@ -11,9 +11,6 @@ import ErrorPage from "@/routes/error-page";
 import routes from "@/routes";
 import '@/App.css';
 import 'reset-css';
-import { LanguageProvider } from '@/context/useLanguageContext';
-import { ConfigProvider } from '@/context/useConfigContext';
-import { HeaderProvider } from '@/context/useHeaderContext';
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -42,12 +39,6 @@ const router = createBrowserRouter(
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <ConfigProvider>
-      <LanguageProvider>
-        <HeaderProvider>
-          <RouterProvider router={router} />
-        </HeaderProvider>
-      </LanguageProvider>
-    </ConfigProvider>
+    <RouterProvider router={router} />
   </React.StrictMode>
 )

directory/src/component/char_icon.jsx

@@ -5,7 +5,7 @@ export default function CharIcon(props) {
         props.type === 'operator' ?
           <g><path d="M89 17.5 30.4 57 24.3 71.4 82.9 32.6Z"></path><path d="M0 17.5 58.6 57 64.7 71.4 6.1 32.7Z"> </path><path d="M89 0 30.4 39.5 24.3 53.9 82.9 15.1Z"> </path><path d="M0 0 58.6 39.5 64.7 53.9 6.1 15.2Z"> </path></g>
           :
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.563 67.437"><path d="M90.4 50.6l-39.8-23.5v-4c0-4.5-5-6.5-5-6.5a5.4 5.4 0 012.2-10.1c2.7 0 5.3 1.5 5.5 4.8.4 5.3 6.4 3.9 6.4-.3a11.7 11.7 0 00-12-11c-9 0-11.6 8.8-11.6 11.6a11.5 11.5 0 001.6 6.2c2.2 3.8 6.6 4.3 6.6 6.8v2.5L4.2 50.7c-4 2.3-4.7 7.3-3.8 10.3a9.1 9.1 0 009.1 6.4h75.2c5.9 0 8.6-3.4 9.5-6.3C95 58.1 95 53.4 90.4 50.6Zm-5.6 10.3h-75.2c-2.4.1-4-3.3-1.5-4.8l39.2-22.9 39 22.8A2.7 2.7 0 0184.7 60.8Z" /></svg>
+          <path d="M90.4 50.6l-39.8-23.5v-4c0-4.5-5-6.5-5-6.5a5.4 5.4 0 012.2-10.1c2.7 0 5.3 1.5 5.5 4.8.4 5.3 6.4 3.9 6.4-.3a11.7 11.7 0 00-12-11c-9 0-11.6 8.8-11.6 11.6a11.5 11.5 0 001.6 6.2c2.2 3.8 6.6 4.3 6.6 6.8v2.5L4.2 50.7c-4 2.3-4.7 7.3-3.8 10.3a9.1 9.1 0 009.1 6.4h75.2c5.9 0 8.6-3.4 9.5-6.3C95 58.1 95 53.4 90.4 50.6Zm-5.6 10.3h-75.2c-2.4.1-4-3.3-1.5-4.8l39.2-22.9 39 22.8A2.7 2.7 0 0184.7 60.8Z" />
       }
     </svg>
 

directory/src/component/popup.css

@@ -50,6 +50,11 @@
     font-family: "Geometos", "Noto Sans SC", sans-serif;
 }
 
+.popup .text {
+    flex-grow: 1;
+    margin-right: 3rem;
+}
+
 .popup .content {
   line-height: 1.3em;
   padding: 1rem 1rem 0 1rem;

directory/src/component/popup.jsx

@@ -1,6 +1,6 @@
 import {
   useState,
-  useEffect
+  useCallback
 } from 'react'
 import './popup.css'
 import ReturnButton from '@/component/return_button';
@@ -9,16 +9,16 @@ import MainBorder from '@/component/main_border';
 export default function Popup(props) {
   const [hidden, setHidden] = useState(true)
 
-  const toggle = () => {
+  const toggle = useCallback(() => {
     setHidden(!hidden)
-  }
+  }, [hidden])
 
   return (
     <>
       <section className={`popup ${hidden ? '' : 'active'}`}>
         <section className='wrapper'>
           <section className='title'>
-            <span>{props.title}</span>
+            <section className="text">{props.title}</section>
             <ReturnButton onClick={toggle} className="return-button"/>
           </section>
           <MainBorder/>

directory/src/context/useConfigContext.jsx

@@ -1,92 +0,0 @@
-import { createContext, useState, useEffect, useCallback } from "react"
-import db, { invalidateCache } from "@/db"
-
-const versionCompare = (v1, v2) => {
-  const v1Arr = v1.split(".")
-  const v2Arr = v2.split(".")
-  for (let i = 0; i < v1Arr.length; i++) {
-    if (v1Arr[i] > v2Arr[i]) {
-      return 1
-    } else if (v1Arr[i] < v2Arr[i]) {
-      return -1
-    }
-  }
-  return 0
-}
-
-const invalidateRules = (local, version) => {
-  if (local === undefined) {
-    // no local version
-    return true
-  }
-  if (version === undefined) {
-    // no remote version
-    return false
-  }
-  return versionCompare(local, version) < 0
-}
-
-export const ConfigContext = createContext()
-
-export function ConfigProvider(props) {
-  const [config, setConfig] = useState([])
-  const [operators, setOperators] = useState([])
-  const [version, setVersion] = useState({})
-
-  const fetchConfig = (version) => {
-    fetch("/_assets/directory.json").then(res => res.json()).then(data => {
-      setConfig(data)
-      db.config.put({ key: "config", value: data })
-      resolveOperators(data)
-      db.config.put({ key: "version", value: version })
-    })
-  }
-
-  const resolveOperators = useCallback((data) => {
-    let operatorsList = []
-    data.operators.forEach((item) => {
-      operatorsList = [...operatorsList, ...item]
-    })
-    setOperators(operatorsList)
-  }, [])
-
-  useEffect(() => {
-    fetch("/_assets/version.json").then(res => res.json()).then(data => {
-      db.config.get({ key: "version" }).then((local) => {
-        if (local === undefined || invalidateRules(local.value.directory, data.directory) || invalidateRules(local.value.showcase, data.showcase)) {
-          invalidateCache()
-          fetchConfig(data)
-        } else {
-          db.config.get({ key: "config" }).then((local) => {
-            if (local) {
-              setConfig(local.value)
-              resolveOperators(local.value)
-            } else {
-              fetchConfig(data)
-            }
-          })
-        }
-      })
-      setVersion(data)
-    })
-    /*
-        local.directory | version.directory | action
-        --------------- | ----------------- | ------
-        1.0.0           | 1.0.0             | use cache
-        1.0.0           | 1.0.1             | invalidate cache
-        1.0.1           | 1.0.0             | impossible
-
-        local.showcase | version.showcase | action
-        -------------- | ---------------- | ------
-        1.0.0          | 1.0.0            | use cache
-        1.0.0          | 1.0.1            | invalidate cache
-        1.0.1          | 1.0.0            | use cache
-    */
-  }, [])
-
-  return (
-    <ConfigContext.Provider value={{ config, operators, version }}>
-      {props.children}
-    </ConfigContext.Provider>
-  )
-}

directory/src/context/useHeaderContext.jsx

@@ -1,38 +0,0 @@
-import {
-  createContext,
-  useState,
-  useEffect,
-  useContext
-} from "react"
-import { LanguageContext } from "@/context/useLanguageContext"
-
-export const HeaderContext = createContext()
-
-export function HeaderProvider(props) {
-  const [key, setTitle] = useState('')
-  const [title, setRealTitle] = useState('')
-  const {
-    language,
-    i18n
-  } = useContext(LanguageContext)
-  const [tabs, setTabs] = useState([])
-  const [currentTab, setCurrentTab] = useState([])
-  const [appbarExtraArea, setAppbarExtraArea] = useState([])
-
-  useEffect(() => {
-    const newTitle = i18n(key)
-    document.title = `${newTitle} - ${import.meta.env.VITE_APP_TITLE}`;
-    setRealTitle(newTitle)
-  }, [key, language])
-
-  return (
-    <HeaderContext.Provider value={{
-      title, setTitle,
-      tabs, setTabs,
-      currentTab, setCurrentTab,
-      appbarExtraArea, setAppbarExtraArea
-    }}>
-      {props.children}
-    </HeaderContext.Provider>
-  )
-}

directory/src/context/useLanguageContext.jsx

@@ -1,34 +0,0 @@
-import { createContext, useState, useEffect, useCallback } from "react"
-import i18nValues from '@/i18n'
-
-export const LanguageContext = createContext()
-
-export function LanguageProvider(props) {
-    const textDefaultLang = "en-US"
-    const [language, setLanguage] = useState(i18nValues.available.includes(navigator.language) ? navigator.language : "en-US") // language will be default to en-US if not available
-    const [alternateLang, setAlternateLang] = useState(null) // drawerAlternateLang will be default to zh-CN if language is en-*
-
-    useEffect(() => {
-        setAlternateLang(language.startsWith("en") ? "zh-CN" : language)
-    }, [language])
-
-    const i18n = useCallback((key, preferredLanguage = language) => {
-        if (i18nValues.key[key]) {
-            return i18nValues.key[key][preferredLanguage]
-        }
-        return key
-    }, [language])
-
-    return (
-        <LanguageContext.Provider
-            value={{
-                language, setLanguage,
-                textDefaultLang,
-                alternateLang,
-                i18n, i18nValues
-            }}
-        >
-            {props.children}
-        </LanguageContext.Provider>
-    )
-}

directory/src/db/index.js

@@ -1,16 +0,0 @@
-import Dexie from 'dexie';
-
-const db = new Dexie('aklive2dDatabase');
-db.version(2).stores({
-    image: '++key, blob',
-    voice: '++key, blob',
-    config: '++key, value',
-});
-
-export function invalidateCache() {
-    db.image.clear();
-    db.voice.clear();
-    db.config.clear();
-}
-
-export default db;

directory/src/i18n.json

@@ -51,6 +51,14 @@
         "zh-CN": "语音",
         "en-US": "Voice"
       },
+      "showcase": {
+        "zh-CN": "壁纸",
+        "en-US": "Wallpaper"
+      }, 
+      "directory": {
+        "zh-CN": "目录页",
+        "en-US": "Directory Page"
+      },
       "zh-CN": {
         "zh-CN": "简体中文",
         "en-US": "Chinese (Simplified)"

directory/src/libs/stable_navigate.jsx

@@ -0,0 +1,30 @@
+// taken from: https://shallowdepth.online/posts/2022/04/why-usenavigate-hook-in-react-router-v6-triggers-waste-re-renders-and-how-to-solve-it/
+import { createContext, useContext, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+const StableNavigateContext = createContext(null)
+
+const StableNavigateContextProvider = ({ children }) => {
+    const navigate = useNavigate()
+    const navigateRef = useRef(navigate)
+
+    return (
+        <StableNavigateContext.Provider value={navigateRef}>
+            {children}
+        </StableNavigateContext.Provider>
+    )
+}
+
+const useStableNavigate = () => {
+    const navigateRef = useContext(StableNavigateContext)
+    if (navigateRef.current === null)
+        throw new Error('StableNavigate context is not initialized')
+
+    return navigateRef.current
+}
+
+export {
+    StableNavigateContext,
+    StableNavigateContextProvider,
+    useStableNavigate,
+}

directory/src/routes/path/changelogs.css

@@ -0,0 +1,17 @@
+.changelogs .item-group {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.changelogs .item-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding-left: 1rem;
+}
+
+.changelogs .item-info-content {
+    font-size: 1.5rem;
+    display: list-item;
+}

directory/src/routes/path/changelogs.jsx

@@ -1,32 +1,65 @@
 import {
   useState,
   useEffect,
-  useContext
 } from 'react'
 import './changelogs.css'
-import { HeaderContext } from '@/context/useHeaderContext';
-import { LanguageContext } from '@/context/useLanguageContext';
+import { useHeader } from '@/state/header';
 import useUmami from '@parcellab/react-use-umami'
+import MainBorder from '@/component/main_border';
 
 export default function Changelogs(props) {
   const _trackEvt = useUmami('/changelogs')
   const {
     setTitle,
     setTabs,
-    currentTab, setCurrentTab
-  } = useContext(HeaderContext)
-  const { language, i18n } = useContext(LanguageContext)
+    currentTab,
+    setHeaderIcon,
+  } = useHeader()
+  const [changelogs, setChangelogs] = useState([])
 
   useEffect(() => {
     setTitle('changelogs')
-    setTabs([])
+    setHeaderIcon(null)
+    fetch('/_assets/changelogs.json').then(res => res.json()).then(data => {
+      setChangelogs(data)
+    })
   }, [])
 
+  useEffect(() => {
+    setTabs(changelogs.map((item) => {
+      return {
+        key: item[0].key
+      }
+    }))
+  }, [changelogs])
+
   return (
-    <section>
-      <section>
-        Under Construction :(
-      </section>
+    <section className="changelogs">
+      {
+        changelogs.map((v) => {
+          return (
+            v.map((item) => {
+              return (
+                <section className="item-group-wrapper" key={item.date} hidden={currentTab !== item.key}>
+                  <section className="item-group">
+                    <section className="item-info">
+                      {item.content.map((entry, index) => {
+                        return (
+                          <section className="item-info-content" key={index}>
+                            {entry}
+                          </section>
+                        )
+                      })}
+                    </section>
+                    <section className='item-group-date'>{item.date}</section>
+                  </section>
+                  <MainBorder />
+                </section>
+              )
+            })
+          )
+        })
+      }
     </section>
   )
 }

directory/src/routes/path/home.css

@@ -1,11 +1,11 @@
-.home .item-group {
+.item-group {
     padding: 1rem;
     display: flex;
     align-items: flex-end;
     flex-wrap: wrap;
 }
 
-.home .item-group-date {
+.item-group-date {
     margin: 1.5rem;
     font-family: "Bender";
     font-weight: bold;
@@ -17,7 +17,7 @@
     user-select: none;
 }
 
-.home .item-group .item {
+.item-group .item {
     position: relative;
     cursor: pointer;
     width: 180px;
@@ -25,7 +25,7 @@
     background-image: repeating-linear-gradient(90deg, var(--home-item-background-linear-gradient-color) 0, var(--home-item-background-linear-gradient-color) 1px, transparent 1px, transparent 5px);
 }
 
-.home .item-group .item .item-background-filler {
+.item-group .item .item-background-filler {
     border-right: 1px solid var(--home-item-background-linear-gradient-color);
     position: absolute;
     top: 0;
@@ -34,7 +34,7 @@
     bottom: 0;
 }
 
-.home .item-group .item .item-outline {
+.item-group .item .item-outline {
     display: block;
     position: absolute;
     opacity: 0;
@@ -42,7 +42,7 @@
     transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
 }
 
-.home .item-group .item .item-outline {
+.item-group .item .item-outline {
     width: 100%;
     height: 100%;
     left: -6px;
@@ -51,8 +51,8 @@
     padding: 6px;
 }
 
-.home .item-group .item .item-outline::before,
-.home .item-group .item .item-outline::after {
+.item-group .item .item-outline::before,
+.item-group .item .item-outline::after {
     content: "";
     display: block;
     position: absolute;
@@ -63,31 +63,31 @@
     border-right: var(--text-color) solid 3px;
 }
 
-.home .item-group .item .item-outline::before {
+.item-group .item .item-outline::before {
     top: -3px;
 }
 
-.home .item-group .item .item-outline::after {
+.item-group .item .item-outline::after {
     bottom: -3px;
 }
 
-.home .item-group .item:hover .item-outline,
-.home .item-group .item:hover .item-info .item-info-background {
+.item-group .item:hover .item-outline,
+.item-group .item:hover .item-info .item-info-background {
     opacity: 1;
     visibility: visible;
 }
 
-.home .item-group .item .item-img {
+.item-group .item .item-img {
     height: 360px;
     width: 100%;
     transition: background-color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
 }
 
-.home .item-group .item:hover .item-img {
+.item-group .item:hover .item-img {
     background-color: var(--home-item-hover-background-color);
 }
 
-.home .item-group .item .item-info {
+.item-group .item .item-info {
     white-space: nowrap;
     position: relative;
     padding: 0.8rem 0.4rem;
@@ -95,7 +95,7 @@
     height: 36px;
 }
 
-.home .item-group .item .item-info .item-title-container {
+.item-group .item .item-info .item-title-container {
     color: white;
     display: flex;
     justify-content: space-between;
@@ -104,18 +104,18 @@
     font-weight: bold;
 }
 
-.home .item-group .item .item-info .item-title-container .item-title {
+.item-group .item .item-info .item-title-container .item-title {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.home .item-group .item .item-info .item-title-container .item-title {
+.item-group .item .item-info .item-title-container .item-title {
     line-height: 1.3em;
     height: auto;
 }
 
-.home .item-group .item .item-info .item-title-container .item-type {
+.item-group .item .item-info .item-title-container .item-type {
     display: flex;
     flex-direction: row;
     align-items: baseline;
@@ -124,13 +124,13 @@
     fill: var(--text-color)
 }
 
-.home .item-group .item .item-info .item-text {
+.item-group .item .item-info .item-text {
     font-size: 0.75rem;
     font-family: "Geometos";
     margin-top: 1rem; 
 }
 
-.home .item-group .item .item-info .item-info-background {
+.item-group .item .item-info .item-info-background {
     position: absolute;
     top: 0;
     left: 0;
@@ -142,7 +142,7 @@
     background-image: linear-gradient(70deg, transparent 40%, currentColor 150%);
 }
 
-.home .item-group .item .item-info .item-text-wrapper {
+.item-group .item .item-info .item-text-wrapper {
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--secondary-text-color);

directory/src/routes/path/home.jsx

@@ -1,23 +1,28 @@
 import {
   useState,
   useEffect,
-  useContext,
   useCallback
 } from 'react'
 import {
   NavLink,
 } from "react-router-dom";
 import './home.css'
-import { ConfigContext } from '@/context/useConfigContext';
-import { LanguageContext } from '@/context/useLanguageContext';
-import { HeaderContext } from '@/context/useHeaderContext';
+import { useConfig } from '@/state/config';
+import {
+  useLanguage,
+  useI18n
+} from '@/state/language'
+import { useHeader } from '@/state/header';
+import { useAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils';
 import CharIcon from '@/component/char_icon';
 import MainBorder from '@/component/main_border';
 import useUmami from '@parcellab/react-use-umami';
 import Switch from '@/component/switch';
-import db from '@/db';
 
 const audioEl = new Audio()
+let isPlaying = false
+const voiceOnAtom = atomWithStorage('voiceOn', false)
 
 export default function Home() {
   const _trackEvt = useUmami('/')
@@ -25,30 +30,34 @@ export default function Home() {
     setTitle,
     setTabs,
     currentTab,
-    setAppbarExtraArea
-  } = useContext(HeaderContext)
-  const { config } = useContext(ConfigContext)
-  const {
-    language,
-    textDefaultLang,
-    alternateLang,
-    i18n
-  } = useContext(LanguageContext)
+    setAppbarExtraArea,
+    setHeaderIcon
+  } = useHeader()
+  const { config } = useConfig()
+  const { textDefaultLang, language, alternateLang } = useLanguage()
   const [content, setContent] = useState([])
-  const [voiceOn, setVoiceOn] = useState(false)
+  const [voiceOn, setVoiceOn] = useAtom(voiceOnAtom)
+  const { i18n } = useI18n()
 
   useEffect(() => {
     setTitle('dynamic_compile')
-    setTabs(['all', 'operator', 'skin'])
+    setTabs([{
+      key: 'all'
+    }, {
+      key: 'operator'
+    }, {
+      key: 'skin'
+    }])
+    setHeaderIcon(null)
   }, [])
 
   useEffect(() => {
     setContent(config?.operators || [])
   }, [config])
 
-  const toggleVoice = () => {
+  const toggleVoice = useCallback(() => {
     setVoiceOn(!voiceOn)
-  }
+  }, [voiceOn])
 
   useEffect(() => {
     setAppbarExtraArea([
@@ -63,42 +72,29 @@ export default function Home() {
     ])
   }, [voiceOn, language])
 
-  const isShown = (type) => currentTab === 'all' || currentTab === type
+  const isShown = useCallback((type) => currentTab === 'all' || currentTab === type, [currentTab])
 
-  const playVoice = useCallback((blob) => {
-    const audioUrl = URL.createObjectURL(blob)
+  const playVoice = useCallback((link) => {
+    const audioUrl = `/${link}/assets/voice/${import.meta.env.VITE_APP_VOICE_URL}`
+    if (!voiceOn || (audioEl.src === (window.location.href.replace(/\/$/g, '') + audioUrl) && isPlaying)) return
     audioEl.src = audioUrl
     let startPlayPromise = audioEl.play()
     if (startPlayPromise !== undefined) {
       startPlayPromise
         .then(() => {
+          isPlaying = true
           const audioEndedFunc = () => {
             audioEl.removeEventListener('ended', audioEndedFunc)
-            URL.revokeObjectURL(audioUrl)
+            isPlaying = false
           }
           audioEl.addEventListener('ended', audioEndedFunc)
         })
-        .catch(() => {
+        .catch((e) => {
+          console.log(e)
           return
         })
     }
-  }, [])
-
-  const loadVoice = (link) => {
-    if (!voiceOn) return
-    db.voice.get({ key: link }).then((v) => {
-      if (v) {
-        playVoice(v.blob)
-      } else {
-        fetch(`/${link}/assets/voice/${import.meta.env.VITE_APP_VOICE_URL}`)
-          .then(res => res.blob())
-          .then(blob => {
-            db.voice.put({ key: link, blob: blob })
-            playVoice(blob)
-          })
-      }
-    })
-  }
+  }, [voiceOn])
 
   return (
     <section className="home">
@@ -115,7 +111,7 @@ export default function Home() {
                       className="item"
                       key={item.link}
                       hidden={!isShown(item.type)}
-                      onMouseEnter={() => loadVoice(item.link)}
+                      onMouseEnter={() => playVoice(item.link)}
                     >
                       <section className="item-background-filler" />
                       <section className="item-outline" />
@@ -158,22 +154,5 @@ export default function Home() {
 }
 
 function ImageElement({ item, language }) {
-  const [blobUrl, setBlobUrl] = useState(null)
-
-  useEffect(() => {
-    db.image.get({ key: item.link }).then((v) => {
-      if (v) {
-        setBlobUrl(URL.createObjectURL(v.blob))
-      } else {
-        fetch(`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`)
-          .then(res => res.blob())
-          .then(blob => {
-            db.image.put({ key: item.link, blob: blob })
-            setBlobUrl(URL.createObjectURL(blob))
-          })
-      }
-    })
-  }, [item.link])
-
-  return blobUrl ? <img src={blobUrl} alt={item.codename[language]} /> : null
+  return <img src={`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`} alt={item.codename[language]} />
 }

directory/src/routes/path/operator.jsx

@@ -1,35 +1,38 @@
 import {
   useState,
   useEffect,
-  useContext
+  useContext,
+  useCallback,
+  useMemo
 } from 'react'
 import {
   useParams,
+  useNavigate
 } from "react-router-dom";
 import './operator.css'
-import { ConfigContext } from '@/context/useConfigContext';
-import { LanguageContext } from '@/context/useLanguageContext';
-import { HeaderContext } from '@/context/useHeaderContext';
+import { useConfig } from '@/state/config';
+import {
+  useLanguage,
+} from '@/state/language'
+import { useHeader } from '@/state/header';
 import useUmami from '@parcellab/react-use-umami'
 
 export default function Operator(props) {
-  const _trackEvt = useUmami('/operator/:key')
-  const { operators } = useContext(ConfigContext)
-  const {
-    language,
-    i18n
-  } = useContext(LanguageContext)
+  const navigate = useNavigate()
+  const { operators } = useConfig()
+  const { language } = useLanguage()
   const { key } = useParams();
   const {
     setTitle,
     setTabs,
-    setAppbarExtraArea
-  } = useContext(HeaderContext)
+    setAppbarExtraArea,
+    setHeaderIcon
+  } = useHeader()
   const [config, setConfig] = useState(null)
   const [spineData, setSpineData] = useState({})
+  const _trackEvt = useUmami(`/operator/${key}`)
 
   useEffect(() => {
-    setTabs([])
     setAppbarExtraArea([])
   }, [])
 
@@ -40,14 +43,54 @@ export default function Operator(props) {
       fetch(`/_assets/${config.filename.replace("#", "%23")}.json`).then(res => res.json()).then(data => {
         setSpineData(data)
       })
+      setHeaderIcon(config.type)
     }
-  }, [operators])
+  }, [operators, key])
+
+  const getTabName = (item) => {
+    if (item.type === 'operator') {
+      return 'operator'
+    } else {
+      return item.codename[language].replace(/^(.+)( )(·|\/)()(.+)$/, '$1')
+    }
+  }
+
+  const coverToTab = (item) => {
+    const key = getTabName(item)
+    return {
+      key: key,
+      style: {
+        color: item.color
+      },
+      onClick: (e, tab) => {
+        if (tab === key) return
+        navigate(`/operator/${item.link}`)
+      }
+    }
+  }
+
+  const getOtherEntries = () => {
+    return operators.filter((item) => item.id === config.id && item.link !== config.link).map((item) => {
+      return coverToTab(item)
+    })
+  }
+
+  useEffect(() => {
+    if (config) {
+      setTabs(
+        [
+          coverToTab(config),
+          ...getOtherEntries()
+        ]
+      )
+    }
+  }, [config, language, key])
 
   useEffect(() => {
     if (config) {
       setTitle(config.codename[language])
     }
-  }, [config, language])
+  }, [config, language, key])
 
   return (
     <section>

directory/src/routes/root.css

@@ -147,26 +147,63 @@
   line-height: 1.2em;
 }
 
+@media (max-width: 600px) {
+  .main .main-header .main-title {
+    font-size: 2.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .main .main-header .main-title {
+    font-size: 2rem;
+  }
+}
+
 .main .main-header .main-tab {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+    flex: auto;
+    text-align: right;
+    white-space: nowrap;
+    user-select: none;
 }
 
 .main .main-header .main-tab .main-tab-item {
-    font-size: 1em;
+    font-size: 1.25rem;
     line-height: 3em;
     font-weight: 700;
     padding: 0 1rem;
     text-transform: uppercase;
-    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
     cursor: pointer; 
     border-bottom: 0.3rem solid transparent;
+    display: inline-block;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.main .main-header .main-tab .main-tab-item.active .text,
+.main .main-header .main-tab .main-tab-item:hover .text {
+    color: currentColor;
+}
+
+.main .main-header .main-tab .main-tab-item.active,
+.main .main-header .main-tab .main-tab-item:hover {
+    color: var(--link-highlight-color);
 }
 
 .main .main-header .main-tab .main-tab-item.active {
-    color: var(--link-highlight-color);
-    border-bottom-color: var(--link-highlight-color);
+    border-bottom-color: currentColor;
+}
+
+.main .main-header .main-tab .main-tab-item .text {
+    color: var(--text-color);
+    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+}
+
+.main .main-icon {
+  width: 3.88rem;
+  margin-right: 1.88rem;
+  fill: var(--text-color);
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .main .return-button {

directory/src/routes/root.jsx

@@ -1,65 +1,67 @@
 import {
   useState,
   useEffect,
-  useContext
+  useContext,
+  useMemo,
+  useCallback
 } from 'react'
 import {
   Outlet,
   Link,
   NavLink,
   useNavigate,
-  ScrollRestoration
 } from "react-router-dom";
 import './root.css'
 import routes from '@/routes'
-import { ConfigContext } from '@/context/useConfigContext';
-import { HeaderContext } from '@/context/useHeaderContext';
-import { LanguageContext } from '@/context/useLanguageContext';
+import { useConfig } from '@/state/config';
+import { useHeader } from '@/state/header';
+import {
+  useI18n,
+  useLanguage,
+} from '@/state/language'
 import Dropdown from '@/component/dropdown';
 import Popup from '@/component/popup';
 import ReturnButton from '@/component/return_button';
 import MainBorder from '@/component/main_border';
+import CharIcon from '@/component/char_icon';
 
 export default function Root(props) {
-  const navigate = useNavigate()
   const [drawerHidden, setDrawerHidden] = useState(true)
-  const {
-    language, setLanguage,
-    textDefaultLang,
-    alternateLang,
-    i18n, i18nValues
-  } = useContext(LanguageContext)
+  const { textDefaultLang, language, alternateLang } = useLanguage()
   const {
     title,
     tabs,
     currentTab, setCurrentTab,
-    appbarExtraArea
-  } = useContext(HeaderContext)
-  const { version } = useContext(ConfigContext)
+    appbarExtraArea,
+    headerIcon
+  } = useHeader()
+  const { version } = useConfig()
   const [drawerDestinations, setDrawerDestinations] = useState(null)
-  const currentYear = new Date().getFullYear()
+  const currentYear = useMemo(() => new Date().getFullYear(), [])
   const [headerTabs, setHeaderTabs] = useState(null)
+  const { i18n } = useI18n()
 
   const renderHeaderTabs = (tabs) => {
     setHeaderTabs(tabs?.map((item) => {
       return (
         <section
-          key={item}
-          className={`main-tab-item ${currentTab === item ? 'active' : ''}`}
+          key={item.key}
+          className={`main-tab-item ${currentTab === item.key ? 'active' : ''}`}
           onClick={(e) => {
-            setCurrentTab(item)
-            item.onClick && item.onClick(e, item)
+            setCurrentTab(item.key)
+            item.onClick && item.onClick(e, currentTab)
           }}
+          style={item.style}
         >
-          {i18n(item)}
+          <span className='text'>{i18n(item.key)}</span>
         </section>
       )
     }))
   }
 
-  const toggleDrawer = (value) => {
+  const toggleDrawer = useCallback((value) => {
     setDrawerHidden(value || !drawerHidden)
-  }
+  }, [drawerHidden])
 
   const renderDrawerDestinations = () => {
     return routes.filter((item) => item.inDrawer).map((item) => {
@@ -110,7 +112,7 @@ export default function Root(props) {
 
   useEffect(() => {
     if (tabs.length > 0) {
-      setCurrentTab(tabs[0])
+      setCurrentTab(tabs[0].key)
     } else {
       setCurrentTab(null)
     }
@@ -129,18 +131,7 @@ export default function Root(props) {
         </section>
         <section className='spacer' />
         {appbarExtraArea}
-        <Dropdown 
-          text={i18n(language)}
-          menu={i18nValues.available.map((item) => {
-            return {
-              name: i18n(item),
-              value: item
-            }
-          })}
-          onClick={(item) => {
-            setLanguage(item.value)
-          }}
-        />
+        <LanguageDropdown />
       </header>
       <nav className={`drawer ${drawerHidden ? '' : 'active'}`}>
         <section
@@ -155,19 +146,24 @@ export default function Root(props) {
       </nav>
       <main className='main'>
         <section className='main-header'>
-          <section className='main-title'>{title}</section>
+          <section className='main-title'>
+              {headerIcon && (
+              <section className='main-icon'>
+                <CharIcon
+                  type={headerIcon}
+                  viewBox={
+                    headerIcon === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
+                  }
+                />
+              </section>
+              )}
+              {title}
+          </section>
           <section className='main-tab'>
             {headerTabs}
           </section>
         </section>
-        <MainBorder>
-          <ReturnButton
-            className='return-button'
-            onClick={() => {
-              navigate("/")
-            }}
-          />
-        </MainBorder>
+        <HeaderReturnButton />
         <Outlet />
       </main>
       <footer className='footer'>
@@ -203,7 +199,49 @@ export default function Root(props) {
           <span>Showcase @ {version.showcase}</span>
         </section>
       </footer>
-      <ScrollRestoration />
     </>
   )
 }
+
+function LanguageDropdown() {
+  const { language, setLanguage } = useLanguage()
+  const { i18n, i18nValues } = useI18n()
+
+  return (
+    <Dropdown
+      text={i18n(language)}
+      menu={i18nValues.available.map((item) => {
+        return {
+          name: i18n(item),
+          value: item
+        }
+      })}
+      onClick={(item) => {
+        setLanguage(item.value)
+      }}
+    />
+  )
+}
+
+function HeaderReturnButton() {
+  const navigate = useNavigate()
+
+  const onClick = useCallback(() => {
+    navigate("/")
+  }, [])
+
+  const children = useMemo(() => {
+    return (
+      <ReturnButton
+        className='return-button'
+        onClick={onClick}
+      />
+    )
+  }, [])
+
+  return (
+    <MainBorder>
+      {children}
+    </MainBorder>
+  )
+}

directory/src/state/config.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { atom, useAtom } from 'jotai';
+
+const fetcher = (...args) => fetch(...args).then(res => res.json())
+const configAtom = atom([]);
+const operatorsAtom = atom([]);
+const versionAtom = atom({});
+
+export function useConfig() {
+  const [config, setConfig] = useAtom(configAtom);
+  const [version, setVersion] = useAtom(versionAtom);
+  const [operators, setOperators] = useAtom(operatorsAtom);
+
+
+  useEffect(() => {
+    fetcher('/_assets/directory.json').then(data => {
+      setConfig(data);
+      let operatorsList = []
+      data.operators.forEach((item) => {
+        operatorsList = [...operatorsList, ...item]
+      })
+      setOperators(operatorsList)
+    })
+    fetcher('/_assets/version.json').then(data => {
+      setVersion(data);
+    })
+  }, []);
+
+  return { config, version, operators };
+}

directory/src/state/header.js

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { atom, useAtom } from 'jotai';
+import { useLanguage, useI18n } from "@/state/language"
+
+const keyAtom = atom('');
+const titleAtom = atom('');
+const tabsAtom = atom([]);
+const currentTabAtom = atom(null);
+const appbarExtraAreaAtom = atom([]);
+const headerIconAtom = atom(null);
+
+export function useHeader() {
+  const [key, setTitle] = useAtom(keyAtom);
+  const [title, setRealTitle] = useAtom(titleAtom);
+  const [tabs, setTabs] = useAtom(tabsAtom);
+  const [currentTab, setCurrentTab] = useAtom(currentTabAtom);
+  const [appbarExtraArea, setAppbarExtraArea] = useAtom(appbarExtraAreaAtom);
+  const [headerIcon, setHeaderIcon] = useAtom(headerIconAtom);
+  const { i18n } = useI18n()
+  const { language } = useLanguage()
+
+  useEffect(() => {
+    const newTitle = i18n(key)
+    document.title = `${newTitle} - ${import.meta.env.VITE_APP_TITLE}`;
+    setRealTitle(newTitle)
+  }, [key, language])
+
+  return {
+    title, setTitle,
+    tabs, setTabs,
+    currentTab, setCurrentTab,
+    appbarExtraArea, setAppbarExtraArea,
+    headerIcon, setHeaderIcon
+  }
+}

directory/src/state/language.js

@@ -0,0 +1,35 @@
+import { atom, useAtom, useAtomValue } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+import i18nObject from '@/i18n'
+
+const language = i18nObject.available.includes(navigator.language) ? navigator.language : "en-US"
+
+const textDefaultLang = "en-US"
+const languageAtom = atomWithStorage('language', language)
+const alternateLangAtom = atom((get) => {
+  const language = get(languageAtom)
+  return language.startsWith("en") ? "zh-CN" : language
+})
+
+export function useI18n() {
+  const language = useAtomValue(languageAtom)
+  return {
+    i18n: (key, preferredLanguage = language) => {
+      if (i18nObject.key[key]) {
+        return i18nObject.key[key][preferredLanguage]
+      }
+      return key
+    },
+    i18nValues: i18nObject,
+  }
+}
+
+export function useLanguage() {
+  const [language, setLanguage] = useAtom(languageAtom)
+  const alternateLang = useAtomValue(alternateLangAtom)
+  return {
+    textDefaultLang,
+    language, setLanguage,
+    alternateLang,
+  }
+}

libs/charword_table.js

@@ -16,8 +16,12 @@ const NICKNAME = {
   "zh_TW": "博士",
 }
 
+export function getOperatorId(operatorConfig) {
+  return operatorConfig.filename.replace(/^(dyn_illust_)(char_[\d]+)(_[\w]+)(|(_.+))$/g, '$2$3$4')
+}
+
 export default class CharwordTable {
-  #operatorIDs = Object.values(__config.operators).map(operator => { return this.#getOperatorId(operator) })
+  #operatorIDs = Object.values(__config.operators).map(operator => { return getOperatorId(operator) })
   #charwordTablePath = path.join(__projetRoot, __config.folder.operator, __config.folder.share)
   #charwordTableFile = path.join(this.#charwordTablePath, 'charword_table.json')
   #charwordTable = JSON.parse(readSync(this.#charwordTableFile)) || {
@@ -43,7 +47,7 @@ export default class CharwordTable {
   }
 
   lookup(operatorName) {
-    const operatorId = this.#getOperatorId(__config.operators[operatorName])
+    const operatorId = getOperatorId(__config.operators[operatorName])
     const operatorBlock = this.#charwordTable.operators[operatorId]
     return {
       config: this.#charwordTable.config,
@@ -51,10 +55,6 @@ export default class CharwordTable {
     }
   }
 
-  #getOperatorId(operatorConfig) {
-    return operatorConfig.filename.replace(/^(dyn_illust_)(char_[\d]+)(_[\w]+)(|(_.+))$/g, '$2$3$4')
-  }
-
   async #load(region) {
     if (region === 'zh_TW') {
       return await this.#zhTWLoad()

libs/config.js

@@ -1,6 +1,7 @@
 import path from 'path'
 import { read } from './yaml.js'
 import { read as readVersion } from './version.js'
+import { getOperatorId } from './charword_table.js'
 
 export default function () {
     return process(read(path.join(__projetRoot, 'config.yaml')))
@@ -15,6 +16,9 @@ function process(config) {
 
         // add link
         operator.link = operatorName
+
+        // id
+        operator.id = getOperatorId(operator).replace(/^(char_)(\d+)(_.+)$/g, '$2')
     }
 
     // version

libs/directory.js

@@ -1,5 +1,6 @@
 import path from 'path'
 import { writeSync, copy, rmdir } from './file.js'
+import { read } from './yaml.js';
 
 /**
  * TODO: 
@@ -26,8 +27,24 @@ export default function () {
       .sort((a, b) => Date.parse(b[0].date) - Date.parse(a[0].date)),
   }
   const versionJson = __config.version
+
+  const changelogs = read(path.join(__projetRoot, 'changelogs.yaml'))
+  const changelogsArray = Object.keys(changelogs).reduce((acc, cur) => {
+    const array = []
+    Object.keys(changelogs[cur]).map((item) => {
+      array.push({
+        key: cur,
+        date: item,
+        content: [...changelogs[cur][item]]
+      })
+    })
+    acc.push(array)
+    return acc
+  }, [])
+
   writeSync(JSON.stringify(directoryJson, null), path.join(targetFolder, "directory.json"))
   writeSync(JSON.stringify(versionJson, null), path.join(targetFolder, "version.json"))
+  writeSync(JSON.stringify(changelogsArray, null), path.join(targetFolder, "changelogs.json"))
   filesToCopy.forEach((key) => {
     copy(path.join(sourceFolder, key, 'assets.json'), path.join(targetFolder, `${__config.operators[key].filename}.json`))
   })

package.json

@@ -21,16 +21,17 @@
     "vite:directory:preview": "vite preview"
   },
   "devDependencies": {
+    "@perfsee/rollup": "^1.3.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.2.0",
+    "rollup": "^3.17.3",
     "vite": "^4.1.4"
   },
   "dependencies": {
     "@parcellab/react-use-umami": "^2.0.1",
-    "dexie": "^3.2.3",
-    "dexie-react-hooks": "^1.1.1",
     "dotenv": "^16.0.3",
+    "jotai": "^2.0.2",
     "node-fetch": "^3.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

pnpm-lock.yaml

@@ -2,27 +2,27 @@ lockfileVersion: 5.4
 
 specifiers:
   '@parcellab/react-use-umami': ^2.0.1
+  '@perfsee/rollup': ^1.3.0
   '@types/react': ^18.0.28
   '@types/react-dom': ^18.0.11
   '@vitejs/plugin-react-swc': ^3.2.0
-  dexie: ^3.2.3
-  dexie-react-hooks: ^1.1.1
   dotenv: ^16.0.3
+  jotai: ^2.0.2
   node-fetch: ^3.3.0
   react: ^18.2.0
   react-dom: ^18.2.0
   react-refresh: ^0.14.0
   react-router-dom: ^6.8.1
   reset-css: ^5.0.1
+  rollup: ^3.17.3
   sharp: ^0.31.3
   vite: ^4.1.4
   yaml: ^2.2.1
 
 dependencies:
   '@parcellab/react-use-umami': 2.0.1_react@18.2.0
-  dexie: 3.2.3
-  dexie-react-hooks: 1.1.1_oyoivydq6d62bcmmdhna6akh5q
   dotenv: 16.0.3
+  jotai: 2.0.2_react@18.2.0
   node-fetch: 3.3.0
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
@@ -33,9 +33,11 @@ dependencies:
   yaml: 2.2.1
 
 devDependencies:
+  '@perfsee/rollup': 1.3.0_rollup@3.17.3
   '@types/react': 18.0.28
   '@types/react-dom': 18.0.11
   '@vitejs/plugin-react-swc': 3.2.0_vite@4.1.4
+  rollup: 3.17.3
   vite: 4.1.4
 
 packages:
@@ -238,6 +240,23 @@ packages:
     dev: true
     optional: true
 
+  /@eyhn/msgpack-stream/2.8.4:
+    resolution: {integrity: sha512-Xx2/IEg+fLzzLH1t8sVr+UIQ3TK56lKOPxfxPCSZru8BkojW7xCXvRBCrYKVdm/BTgXYMQW5RaVIKk2HcQ4yrw==}
+    engines: {node: '>= 10'}
+    dev: true
+
+  /@kwsites/file-exists/1.1.1:
+    resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
+    dependencies:
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@kwsites/promise-deferred/1.1.1:
+    resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
+    dev: true
+
   /@parcellab/react-use-umami/2.0.1_react@18.2.0:
     resolution: {integrity: sha512-C/EdfRm7OyFVmMhrrSITZ79VXLreNZEJnAdpmJ9NaTcy+Wijjf0+wHF8JA5ex+J5/Owv7gVBIj6i/+Kv04nlKA==}
     peerDependencies:
@@ -246,6 +265,65 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@perfsee/bundle-analyzer/1.3.0:
+    resolution: {integrity: sha512-saB1D08c2jEZ0oMTkWWLp+vSiLLWFN6ALrU2F3DIb+NC1rmSZWDzne++6kyZkuaPpzRZu7SR2LhfhiRi79Wsqg==}
+    dependencies:
+      '@eyhn/msgpack-stream': 2.8.4
+      '@perfsee/utils': 1.3.0
+      acorn: 8.8.2
+      acorn-walk: 8.2.0
+      htmlparser2: 8.0.1
+      lodash: 4.17.21
+      query-string: 7.1.3
+      tar: 6.1.13
+      tslib: 2.5.0
+    dev: true
+
+  /@perfsee/plugin-utils/1.3.0:
+    resolution: {integrity: sha512-2s8yH3LmYHDC9ya72fbgb8QwR7rBmlHsNz/wNmbibao9fofxSQlRpASTga4W0jccUf1XzCwo9wmEXuYjmBmCnA==}
+    dependencies:
+      '@eyhn/msgpack-stream': 2.8.4
+      '@perfsee/bundle-analyzer': 1.3.0
+      '@perfsee/utils': 1.3.0
+      chalk: 4.1.2
+      debug: 4.3.4
+      env-ci: 7.3.0
+      file-type: 16.5.4
+      lodash: 4.17.21
+      node-fetch: 2.6.9
+      query-string: 7.1.3
+      simple-git: 3.16.1
+      table: 6.8.1
+      tar: 6.1.13
+      tslib: 2.5.0
+      uuid: 9.0.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+
+  /@perfsee/rollup/1.3.0_rollup@3.17.3:
+    resolution: {integrity: sha512-4SqQqUyJ+zoRa+MMKgstXBu3lPm2cF8h2rChz32FriMQ0lPun/x5JxXBYP3GtmqmaTFdMuVCPfdr9L8gWdzGBA==}
+    peerDependencies:
+      rollup: '>2'
+    dependencies:
+      '@perfsee/bundle-analyzer': 1.3.0
+      '@perfsee/plugin-utils': 1.3.0
+      chalk: 4.1.2
+      lodash: 4.17.21
+      rollup: 3.17.3
+      tslib: 2.5.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+
+  /@perfsee/utils/1.3.0:
+    resolution: {integrity: sha512-Qla/tiqM6Ct5fMEFfWXoRTPXo/T/n5lkRd0yHl3jmSUMvDhIH0EIAzL0L5IoVdha8H4de5ly/FhVv2p9zZ3o9g==}
+    dependencies:
+      tslib: 2.5.0
+    dev: true
+
   /@remix-run/router/1.3.2:
     resolution: {integrity: sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==}
     engines: {node: '>=14'}
@@ -358,8 +436,13 @@ packages:
       '@swc/core-win32-x64-msvc': 1.3.36
     dev: true
 
+  /@tokenizer/token/0.3.0:
+    resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
+    dev: true
+
   /@types/prop-types/15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: true
 
   /@types/react-dom/18.0.11:
     resolution: {integrity: sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==}
@@ -373,9 +456,11 @@ packages:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
       csstype: 3.1.1
+    dev: true
 
   /@types/scheduler/0.16.2:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
+    dev: true
 
   /@vitejs/plugin-react-swc/3.2.0_vite@4.1.4:
     resolution: {integrity: sha512-IcBoXL/mcH7JdQr/nfDlDwTdIaH8Rg7LpfQDF4nAht+juHWIuv6WhpKPCSfY4+zztAaB07qdBoFz1XCZsgo3pQ==}
@@ -386,6 +471,43 @@ packages:
       vite: 4.1.4
     dev: true
 
+  /acorn-walk/8.2.0:
+    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
+  /acorn/8.8.2:
+    resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /ajv/8.12.0:
+    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+    dev: true
+
+  /ansi-regex/5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /ansi-styles/4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+    dev: true
+
+  /astral-regex/2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+    dev: true
+
   /base64-js/1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: false
@@ -405,20 +527,31 @@ packages:
       ieee754: 1.2.1
     dev: false
 
+  /chalk/4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
   /chownr/1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
     dev: false
 
+  /chownr/2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
+    engines: {node: '>=10'}
+    dev: true
+
   /color-convert/2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: false
 
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: false
 
   /color-string/1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
@@ -435,14 +568,41 @@ packages:
       color-string: 1.9.1
     dev: false
 
+  /cross-spawn/7.0.3:
+    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+    dev: true
+
   /csstype/3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
+    dev: true
 
   /data-uri-to-buffer/4.0.1:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
     dev: false
 
+  /debug/4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
+  /decode-uri-component/0.2.2:
+    resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
+    engines: {node: '>=0.10'}
+    dev: true
+
   /decompress-response/6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
@@ -460,34 +620,62 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
-  /dexie-react-hooks/1.1.1_oyoivydq6d62bcmmdhna6akh5q:
-    resolution: {integrity: sha512-Cam5JP6PxHN564RvWEoe8cqLhosW0O4CAZ9XEVYeGHJBa6KEJlOpd9CUpV3kmU9dm2MrW97/lk7qkf1xpij7gA==}
-    peerDependencies:
-      '@types/react': '>=16'
-      dexie: '>=3.1.0-alpha.1 <5.0.0'
-      react: '>=16'
+  /dom-serializer/2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
     dependencies:
-      '@types/react': 18.0.28
-      dexie: 3.2.3
-      react: 18.2.0
-    dev: false
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.4.0
+    dev: true
 
-  /dexie/3.2.3:
-    resolution: {integrity: sha512-iHayBd4UYryDCVUNa3PMsJMEnd8yjyh5p7a+RFeC8i8n476BC9wMhVvqiImq5zJZJf5Tuer+s4SSj+AA3x+ZbQ==}
-    engines: {node: '>=6.0'}
-    dev: false
+  /domelementtype/2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+    dev: true
+
+  /domhandler/5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: true
+
+  /domutils/3.0.1:
+    resolution: {integrity: sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==}
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+    dev: true
 
   /dotenv/16.0.3:
     resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
     engines: {node: '>=12'}
     dev: false
 
+  /emoji-regex/8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    dev: true
+
   /end-of-stream/1.4.4:
     resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
     dependencies:
       once: 1.4.0
     dev: false
 
+  /entities/4.4.0:
+    resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
+    engines: {node: '>=0.12'}
+    dev: true
+
+  /env-ci/7.3.0:
+    resolution: {integrity: sha512-L8vK54CSjKB4pwlwx0YaqeBdUSGufaLHl/pEgD+EqnMrYCVUA8HzMjURALSyvOlC57e953yN7KyXS63qDoc3Rg==}
+    engines: {node: '>=12.20'}
+    dependencies:
+      execa: 5.1.1
+      fromentries: 1.3.2
+      java-properties: 1.0.2
+    dev: true
+
   /esbuild/0.16.17:
     resolution: {integrity: sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==}
     engines: {node: '>=12'}
@@ -518,11 +706,30 @@ packages:
       '@esbuild/win32-x64': 0.16.17
     dev: true
 
+  /execa/5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+    dev: true
+
   /expand-template/2.0.3:
     resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
     engines: {node: '>=6'}
     dev: false
 
+  /fast-deep-equal/3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+    dev: true
+
   /fetch-blob/3.2.0:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
@@ -531,6 +738,20 @@ packages:
       web-streams-polyfill: 3.2.1
     dev: false
 
+  /file-type/16.5.4:
+    resolution: {integrity: sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw==}
+    engines: {node: '>=10'}
+    dependencies:
+      readable-web-to-node-stream: 3.0.2
+      strtok3: 6.3.0
+      token-types: 4.2.1
+    dev: true
+
+  /filter-obj/1.1.0:
+    resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /formdata-polyfill/4.0.10:
     resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
     engines: {node: '>=12.20.0'}
@@ -538,10 +759,21 @@ packages:
       fetch-blob: 3.2.0
     dev: false
 
+  /fromentries/1.3.2:
+    resolution: {integrity: sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==}
+    dev: true
+
   /fs-constants/1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
     dev: false
 
+  /fs-minipass/2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      minipass: 3.3.6
+    dev: true
+
   /fsevents/2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -554,10 +786,20 @@ packages:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
     dev: true
 
+  /get-stream/6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+    dev: true
+
   /github-from-package/0.0.0:
     resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
     dev: false
 
+  /has-flag/4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
   /has/1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
     engines: {node: '>= 0.4.0'}
@@ -565,13 +807,25 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /htmlparser2/8.0.1:
+    resolution: {integrity: sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.0.1
+      entities: 4.4.0
+    dev: true
+
+  /human-signals/2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+    dev: true
+
   /ieee754/1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
-    dev: false
 
   /inherits/2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: false
 
   /ini/1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
@@ -587,10 +841,53 @@ packages:
       has: 1.0.3
     dev: true
 
+  /is-fullwidth-code-point/3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-stream/2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /isexe/2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: true
+
+  /java-properties/1.0.2:
+    resolution: {integrity: sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ==}
+    engines: {node: '>= 0.6.0'}
+    dev: true
+
+  /jotai/2.0.2_react@18.2.0:
+    resolution: {integrity: sha512-0yOked08Swa84LUbBjtj7ZLZrE05n3u50rHeZ+bsT86thUjcy0kFgQz9GmEWhYbQDFoT1G8Ww6edSj/MBJHO4A==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      react: '>=17.0.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: false
 
+  /json-schema-traverse/1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    dev: true
+
+  /lodash.truncate/4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+    dev: true
+
+  /lodash/4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: true
+
   /loose-envify/1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -605,6 +902,15 @@ packages:
       yallist: 4.0.0
     dev: false
 
+  /merge-stream/2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+    dev: true
+
+  /mimic-fn/2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+    dev: true
+
   /mimic-response/3.1.0:
     resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
     engines: {node: '>=10'}
@@ -614,10 +920,40 @@ packages:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: false
 
+  /minipass/3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
+    engines: {node: '>=8'}
+    dependencies:
+      yallist: 4.0.0
+    dev: true
+
+  /minipass/4.2.4:
+    resolution: {integrity: sha512-lwycX3cBMTvcejsHITUgYj6Gy6A7Nh4Q6h9NP4sTHY1ccJlC7yKzDmiShEHsJ16Jf1nKGDEaiHxiltsJEvk0nQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /minizlib/2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      minipass: 3.3.6
+      yallist: 4.0.0
+    dev: true
+
   /mkdirp-classic/0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
     dev: false
 
+  /mkdirp/1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
+  /ms/2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: true
+
   /nanoid/3.3.4:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -644,6 +980,18 @@ packages:
     engines: {node: '>=10.5.0'}
     dev: false
 
+  /node-fetch/2.6.9:
+    resolution: {integrity: sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: true
+
   /node-fetch/3.3.0:
     resolution: {integrity: sha512-BKwRP/O0UvoMKp7GNdwPlObhYGB5DQqwhEDQlNKuoqwVYSxkSZCSbHjnFFmUEtwSKRPU4kNK8PbDYYitwaE3QA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -653,16 +1001,40 @@ packages:
       formdata-polyfill: 4.0.10
     dev: false
 
+  /npm-run-path/4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-key: 3.1.1
+    dev: true
+
   /once/1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
       wrappy: 1.0.2
     dev: false
 
+  /onetime/5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+    dependencies:
+      mimic-fn: 2.1.0
+    dev: true
+
+  /path-key/3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+    dev: true
+
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: true
 
+  /peek-readable/4.1.0:
+    resolution: {integrity: sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg==}
+    engines: {node: '>=8'}
+    dev: true
+
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
     dev: true
@@ -702,6 +1074,21 @@ packages:
       once: 1.4.0
     dev: false
 
+  /punycode/2.3.0:
+    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /query-string/7.1.3:
+    resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
+    engines: {node: '>=6'}
+    dependencies:
+      decode-uri-component: 0.2.2
+      filter-obj: 1.1.0
+      split-on-first: 1.1.0
+      strict-uri-encode: 2.0.0
+    dev: true
+
   /rc/1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
@@ -764,7 +1151,18 @@ packages:
       inherits: 2.0.4
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
-    dev: false
+
+  /readable-web-to-node-stream/3.0.2:
+    resolution: {integrity: sha512-ePeK6cc1EcKLEhJFt/AebMCLL+GgSKhuygrZ/GLaKZYEecIgIECf4UaUuaByiGtzckwR4ain9VzUh95T1exYGw==}
+    engines: {node: '>=8'}
+    dependencies:
+      readable-stream: 3.6.0
+    dev: true
+
+  /require-from-string/2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
 
   /reset-css/5.0.1:
     resolution: {integrity: sha512-VyuJdNFfp5x/W6e5wauJM59C02Vs0P22sxzZGhQMPaqu/NGTeFxlBFOOw3eq9vQd19gIDdZp7zi89ylyKOJ33Q==}
@@ -779,8 +1177,8 @@ packages:
       supports-preserve-symlinks-flag: 1.0.0
     dev: true
 
-  /rollup/3.17.2:
-    resolution: {integrity: sha512-qMNZdlQPCkWodrAZ3qnJtvCAl4vpQ8q77uEujVCCbC/6CLB7Lcmvjq7HyiOSnf4fxTT9XgsE36oLHJBH49xjqA==}
+  /rollup/3.17.3:
+    resolution: {integrity: sha512-p5LaCXiiOL/wrOkj8djsIDFmyU9ysUxcyW+EKRLHb6TKldJzXpImjcRSR+vgo09DBdofGcOoLOsRyxxG2n5/qQ==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
@@ -789,7 +1187,6 @@ packages:
 
   /safe-buffer/5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
-    dev: false
 
   /scheduler/0.23.0:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
@@ -820,6 +1217,22 @@ packages:
       tunnel-agent: 0.6.0
     dev: false
 
+  /shebang-command/2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+    dependencies:
+      shebang-regex: 3.0.0
+    dev: true
+
+  /shebang-regex/3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /signal-exit/3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    dev: true
+
   /simple-concat/1.0.1:
     resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
     dev: false
@@ -832,33 +1245,108 @@ packages:
       simple-concat: 1.0.1
     dev: false
 
+  /simple-git/3.16.1:
+    resolution: {integrity: sha512-xzRxMKiy1zEYeHGXgAzvuXffDS0xgsq07Oi4LWEEcVH29vLpcZ2tyQRWyK0NLLlCVaKysZeem5tC1qHEOxsKwA==}
+    dependencies:
+      '@kwsites/file-exists': 1.1.1
+      '@kwsites/promise-deferred': 1.1.1
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /simple-swizzle/0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
     dependencies:
       is-arrayish: 0.3.2
     dev: false
 
+  /slice-ansi/4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+    dev: true
+
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /split-on-first/1.1.0:
+    resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /strict-uri-encode/2.0.0:
+    resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /string-width/4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+    dev: true
+
   /string_decoder/1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
     dependencies:
       safe-buffer: 5.2.1
-    dev: false
+
+  /strip-ansi/6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+    dev: true
+
+  /strip-final-newline/2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+    dev: true
 
   /strip-json-comments/2.0.1:
     resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /strtok3/6.3.0:
+    resolution: {integrity: sha512-fZtbhtvI9I48xDSywd/somNqgUHl2L2cstmXCCif0itOf96jeW18MBSyrLuNicYQVkvpOxkZtkzujiTJ9LW5Jw==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@tokenizer/token': 0.3.0
+      peek-readable: 4.1.0
+    dev: true
+
+  /supports-color/7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
     dev: true
 
+  /table/6.8.1:
+    resolution: {integrity: sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      ajv: 8.12.0
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    dev: true
+
   /tar-fs/2.1.1:
     resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
     dependencies:
@@ -879,15 +1367,53 @@ packages:
       readable-stream: 3.6.0
     dev: false
 
+  /tar/6.1.13:
+    resolution: {integrity: sha512-jdIBIN6LTIe2jqzay/2vtYLlBHa3JF42ot3h1dW8Q0PaAG4v8rm0cvpVePtau5C6OKXGGcgO9q2AMNSWxiLqKw==}
+    engines: {node: '>=10'}
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 4.2.4
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+    dev: true
+
+  /token-types/4.2.1:
+    resolution: {integrity: sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@tokenizer/token': 0.3.0
+      ieee754: 1.2.1
+    dev: true
+
+  /tr46/0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: true
+
+  /tslib/2.5.0:
+    resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
+    dev: true
+
   /tunnel-agent/0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
     dependencies:
       safe-buffer: 5.2.1
     dev: false
 
+  /uri-js/4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+    dependencies:
+      punycode: 2.3.0
+    dev: true
+
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: false
+
+  /uuid/9.0.0:
+    resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
+    hasBin: true
+    dev: true
 
   /vite/4.1.4:
     resolution: {integrity: sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==}
@@ -917,7 +1443,7 @@ packages:
       esbuild: 0.16.17
       postcss: 8.4.21
       resolve: 1.22.1
-      rollup: 3.17.2
+      rollup: 3.17.3
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -927,13 +1453,31 @@ packages:
     engines: {node: '>= 8'}
     dev: false
 
+  /webidl-conversions/3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: true
+
+  /whatwg-url/5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: true
+
+  /which/2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: true
+
   /wrappy/1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: false
 
   /yallist/4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-    dev: false
 
   /yaml/2.2.1:
     resolution: {integrity: sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==}

vite.config.js

@@ -8,6 +8,7 @@ import { rmdir, writeSync } from './libs/file.js'
 import { increase } from './libs/version.js'
 import EnvGenerator from './libs/env_generator.js'
 import directory from './libs/directory.js'
+import { PerfseePlugin } from '@perfsee/rollup'
 
 global.__projetRoot = path.dirname(fileURLToPath(import.meta.url))
 
@@ -152,7 +153,13 @@ class ViteRunner {
     return {
       ...this.#baseViteConfig,
       envDir: directoryDir,
-      plugins: [react()],
+      plugins: [
+        react(),
+        // PerfseePlugin({
+        //   project: 'aklive2d',
+        //   artifactName: 'directory',
+        // }),
+      ],
       publicDir: path.resolve(__projetRoot, this.#globalConfig.folder.release),
       root: directoryDir,
       server: {