@rsdoctor/components 1.5.17 → 1.6.0

package/dist/components/Layout/header_module.css

@@ -1,12 +1,10 @@
 .root-nAtwJx {
-  --bg-color: white;
   --height: var(--layout-nav-height, 54px);
   width: 100%;
   height: var(--height);
   padding: 0;
   padding-inline: var(--spacing-base);
   z-index: 999;
-  background-color: var(--bg-color);
   transition: none;
   position: fixed;
 }
@@ -15,10 +13,6 @@
   top: 1px !important;
 }
 
-.rootDark-X_YzXd {
-  --bg-color: #141414;
-}
-
 .innerRoot-b2vAK8 {
   height: var(--height);
   flex-wrap: nowrap;

package/dist/components/Layout/header_module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./src/components/Layout/header.module.scss"],"names":[],"mappings":"AAAA;EACE,iBAAiB;EACjB,wCAAwC;EACxC,WAAW;EACX,qBAAqB;EACrB,UAAU;EACV,mCAAmC;EACnC,YAAY;EACZ,iCAAiC;EACjC,gBAAgB;EAChB,eAAe;AACjB;;AAX0N;EAcxN,mBAAmB;AACrB;;AAf8Q;EAkB5Q,mBAAmB;AACrB;;AAnB4S;EAsB1S,qBAAqB;EACrB,iBAAiB;EACjB,8BAA8B;EAC9B,mBAAmB;EACnB,aAAa;AACf;;AA3B2Z;EA8BzZ,qBAAqB;EACrB,sCAAsC;AACxC;;AAhC+d;EAmC7d,8BAA8B;EAC9B,mBAAmB;EACnB,YAAY;EACZ,aAAa;AACf;;AAvCujB;EA0CrjB,OAAO;AACT;;AA3CwkB;EA8CtkB,yBAAyB;EACzB,mBAAmB;EACnB,uCAAuC;EACvC,qBAAqB;EACrB,iBAAiB;EACjB,aAAa;AACf;;AApD6tB;EAuD3tB,eAAe;EACf,WAAW;EACX,YAAY;AACd;;AA1DixB;EA6D/wB,WAAW;AACb;;AA9DizB;EAiE/yB,uBAAuB;EACvB,sBAAsB;EACtB,kBAAkB;EAClB,sBAAsB;EACtB,eAAe;EACf,yBAAyB;EACzB,iBAAiB;EACjB,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,qBAAqB;AACvB;;AA5EigC;EA+E//B,yBAAyB;AAC3B;;AAhFkjC;EAmFhjC,0BAA0B;AAC5B","sourcesContent":[".root{--bg-color: white;--height: var(--layout-nav-height, 54px);width:100%;height:var(--height);position:fixed;padding:0;padding-inline:var(--spacing-base);z-index:999;background-color:var(--bg-color);transition:none}.root :global .ant-switch-handle{top:1px !important}.rootDark{--bg-color: #141414}.innerRoot{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;height:var(--height)}.leftCol{height:var(--height);line-height:calc(var(--height) + 2px)}.leftColInner{display:flex;justify-content:space-between;align-items:center;height:100%}.rightCol{flex:1}.rightColInner{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;column-gap:calc(var(--spacing-base)/3);height:var(--height)}.rsdoctorLogo{width:auto;height:30px;cursor:pointer}.rsdoctorLogo:active{opacity:.8}.translationsIcon{--color-active: #40a9ff;--color-hover: #1668dc;display:inline-block;font-size:20px;text-align:center;vertical-align:middle;cursor:pointer;width:30px;transition:all .3s ease;user-select:none}.translationsIcon:hover{color:var(--color-hover)}.translationsIcon:active{color:var(--color-active)}"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./src/components/Layout/header.module.scss"],"names":[],"mappings":"AAAA;EACE,wCAAwC;EACxC,WAAW;EACX,qBAAqB;EACrB,UAAU;EACV,mCAAmC;EACnC,YAAY;EACZ,gBAAgB;EAChB,eAAe;AACjB;;AATuK;EAYrK,mBAAmB;AACrB;;AAb2N;EAgBzN,qBAAqB;EACrB,iBAAiB;EACjB,8BAA8B;EAC9B,mBAAmB;EACnB,aAAa;AACf;;AArB0U;EAwBxU,qBAAqB;EACrB,sCAAsC;AACxC;;AA1B8Y;EA6B5Y,8BAA8B;EAC9B,mBAAmB;EACnB,YAAY;EACZ,aAAa;AACf;;AAjCse;EAoCpe,OAAO;AACT;;AArCuf;EAwCrf,yBAAyB;EACzB,mBAAmB;EACnB,uCAAuC;EACvC,qBAAqB;EACrB,iBAAiB;EACjB,aAAa;AACf;;AA9C4oB;EAiD1oB,eAAe;EACf,WAAW;EACX,YAAY;AACd;;AApDgsB;EAuD9rB,WAAW;AACb;;AAxDguB;EA2D9tB,uBAAuB;EACvB,sBAAsB;EACtB,kBAAkB;EAClB,sBAAsB;EACtB,eAAe;EACf,yBAAyB;EACzB,iBAAiB;EACjB,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,qBAAqB;AACvB;;AAtEg7B;EAyE96B,yBAAyB;AAC3B;;AA1Ei+B;EA6E/9B,0BAA0B;AAC5B","sourcesContent":[".root{--height: var(--layout-nav-height, 54px);width:100%;height:var(--height);position:fixed;padding:0;padding-inline:var(--spacing-base);z-index:999;transition:none}.root :global .ant-switch-handle{top:1px !important}.innerRoot{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;height:var(--height)}.leftCol{height:var(--height);line-height:calc(var(--height) + 2px)}.leftColInner{display:flex;justify-content:space-between;align-items:center;height:100%}.rightCol{flex:1}.rightColInner{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;column-gap:calc(var(--spacing-base)/3);height:var(--height)}.rsdoctorLogo{width:auto;height:30px;cursor:pointer}.rsdoctorLogo:active{opacity:.8}.translationsIcon{--color-active: #40a9ff;--color-hover: #1668dc;display:inline-block;font-size:20px;text-align:center;vertical-align:middle;cursor:pointer;width:30px;transition:all .3s ease;user-select:none}.translationsIcon:hover{color:var(--color-hover)}.translationsIcon:active{color:var(--color-active)}"],"sourceRoot":""}

package/dist/components/Layout/index.mjs

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useLayoutEffect, useState } from "react";
 import { FloatButton, Layout } from "antd";
 import { Language, MAIN_BG, Size } from "../../constants.mjs";
 import { Header } from "./header.mjs";
-import { getEnableRoutesFromUrlQuery, getFirstVisitFromStorage, getLanguage, setFirstVisitToStorage, useI18n, useLocale, useUrlQuery } from "../../utils/index.mjs";
+import { getEnableRoutesFromUrlQuery, getFirstVisitFromStorage, getLanguage, setFirstVisitToStorage, useI18n, useLocale, useTheme, useThemeToken, useUrlQuery } from "../../utils/index.mjs";
 import { Progress } from "./progress.mjs";
 import { ConfigContext } from "../../config.mjs";
 import { SDK } from "@rsdoctor/types";
@@ -20,6 +20,8 @@ const TitleUpdater = ({ name })=>{
     return null;
 };
 const Layout_Layout = (props)=>{
+    const { isLight } = useTheme();
+    const themeToken = useThemeToken();
     const locale = useLocale();
     const { i18n } = useI18n();
     const { children } = props;
@@ -46,11 +48,29 @@ const Layout_Layout = (props)=>{
     ]);
     const ctx = useContext(ConfigContext);
     const showHeader = !ctx.embedded;
-    const globalCssVars = {
-        '--spacing-base': Size.BasePadding + 'px',
-        '--layout-nav-height': showHeader ? Size.NavBarHeight + 'px' : '0px',
-        '--color-bg-main': MAIN_BG
-    };
+    useLayoutEffect(()=>{
+        const $root = document.documentElement;
+        const globalCssVars = {
+            '--spacing-base': Size.BasePadding + 'px',
+            '--layout-nav-height': showHeader ? Size.NavBarHeight + 'px' : '0px',
+            '--color-bg-main': MAIN_BG,
+            '--color-bg-box': themeToken.colorBgContainer,
+            '--color-bg-box-elevated': themeToken.colorBgLayout,
+            '--color-border': themeToken.colorBorder,
+            '--color-border-secondary': themeToken.colorBorderSecondary,
+            '--color-divider': themeToken.colorBorder,
+            '--color-scrollbar': isLight ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255,255,255, 0.5)',
+            '--text-color': themeToken.colorText,
+            '--text-color-secondary': themeToken.colorTextSecondary,
+            '--border-radius': themeToken.borderRadius + 'px',
+            '--border-radius-lg': themeToken.borderRadiusLG + 'px'
+        };
+        for (const [name, value] of Object.entries(globalCssVars))$root.style.setProperty(name, value);
+    }, [
+        showHeader,
+        themeToken,
+        isLight
+    ]);
     return /*#__PURE__*/ jsx(ServerAPIProvider, {
         api: SDK.ServerAPI.API.GetProjectInfo,
         showSkeleton: false,
@@ -59,7 +79,6 @@ const Layout_Layout = (props)=>{
                     project
                 },
                 children: /*#__PURE__*/ jsxs(Layout, {
-                    style: globalCssVars,
                     children: [
                         /*#__PURE__*/ jsx(TitleUpdater, {
                             name: project?.name

package/dist/components/Layout/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Layout/index.mjs","sources":["../../../src/components/Layout/index.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useState } from 'react';\nimport { FloatButton, Layout as L } from 'antd';\nimport { Language, MAIN_BG, Size } from '../../constants';\nimport { Header } from './header';\nimport {\n  useLocale,\n  useI18n,\n  getFirstVisitFromStorage,\n  setFirstVisitToStorage,\n  getLanguage,\n  useUrlQuery,\n  getEnableRoutesFromUrlQuery,\n} from '../../utils';\nimport { Progress } from './progress';\nimport { ConfigContext } from '../../config';\nimport { SDK } from '@rsdoctor/types';\nimport { ServerAPIProvider } from '../Manifest';\nimport { ProjectInfoContext } from './project-info-context';\nimport styles from './index.module.scss';\n\nexport interface LayoutProps {\n  children: React.JSX.Element;\n}\n\nconst TitleUpdater: React.FC<{\n  name?: string;\n}> = ({ name }) => {\n  useEffect(() => {\n    if (name) {\n      document.title = `Rsdoctor - ${name}`;\n    } else {\n      document.title = 'Rsdoctor';\n    }\n  }, [name]);\n\n  return null;\n};\n\nexport const Layout = (\n  props: PropsWithChildren<LayoutProps>,\n): React.JSX.Element => {\n  const locale = useLocale();\n  const { i18n } = useI18n();\n  const { children } = props;\n  const query = useUrlQuery();\n  const [enableRoutes, setEnableRoutes] = useState<string[] | undefined>(\n    () => getEnableRoutesFromUrlQuery() || undefined,\n  );\n\n  useEffect(() => {\n    let currentLocale = locale;\n    // Check if the user is visiting the site for the first time\n    const visited = getFirstVisitFromStorage();\n    if (!visited) {\n      setFirstVisitToStorage('1');\n      const targetLang = window.navigator.language.split('-')[0];\n      const userLang = getLanguage(targetLang);\n\n      if (Object.values(Language).includes(userLang)) {\n        currentLocale = userLang;\n      }\n    }\n\n    if (i18n.language !== currentLocale) {\n      i18n.changeLanguage(currentLocale);\n    }\n  }, [locale]);\n\n  // Listen for enableRoutes changes in URL query parameters\n  useEffect(() => {\n    const newEnableRoutes = getEnableRoutesFromUrlQuery();\n    setEnableRoutes(newEnableRoutes || undefined);\n  }, [query]);\n\n  const ctx = useContext(ConfigContext);\n  const showHeader = !ctx.embedded;\n\n  const globalCssVars = {\n    '--spacing-base': Size.BasePadding + 'px',\n    '--layout-nav-height': showHeader ? Size.NavBarHeight + 'px' : '0px',\n    '--color-bg-main': MAIN_BG,\n  } as React.CSSProperties;\n\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetProjectInfo}\n      showSkeleton={false}\n    >\n      {(project) => (\n        <ProjectInfoContext.Provider value={{ project }}>\n          <L style={globalCssVars}>\n            <TitleUpdater name={project?.name} />\n            {showHeader && <Header enableRoutes={enableRoutes} />}\n            <Progress />\n            <L.Content className={styles.content}>\n              {children}\n              <FloatButton.BackTop />\n            </L.Content>\n          </L>\n        </ProjectInfoContext.Provider>\n      )}\n    </ServerAPIProvider>\n  );\n};\n"],"names":["TitleUpdater","name","useEffect","document","Layout","props","locale","useLocale","i18n","useI18n","children","query","useUrlQuery","enableRoutes","setEnableRoutes","useState","getEnableRoutesFromUrlQuery","undefined","currentLocale","visited","getFirstVisitFromStorage","setFirstVisitToStorage","targetLang","window","userLang","getLanguage","Object","Language","newEnableRoutes","ctx","useContext","ConfigContext","showHeader","globalCssVars","Size","MAIN_BG","ServerAPIProvider","SDK","project","ProjectInfoContext","L","Header","Progress","styles","FloatButton"],"mappings":";;;;;;;;;;;;AAwBA,MAAMA,eAED,CAAC,EAAEC,IAAI,EAAE;IACZC,UAAU;QACR,IAAID,MACFE,SAAS,KAAK,GAAG,CAAC,WAAW,EAAEF,MAAM;aAErCE,SAAS,KAAK,GAAG;IAErB,GAAG;QAACF;KAAK;IAET,OAAO;AACT;AAEO,MAAMG,gBAAS,CACpBC;IAEA,MAAMC,SAASC;IACf,MAAM,EAAEC,IAAI,EAAE,GAAGC;IACjB,MAAM,EAAEC,QAAQ,EAAE,GAAGL;IACrB,MAAMM,QAAQC;IACd,MAAM,CAACC,cAAcC,gBAAgB,GAAGC,SACtC,IAAMC,iCAAiCC;IAGzCf,UAAU;QACR,IAAIgB,gBAAgBZ;QAEpB,MAAMa,UAAUC;QAChB,IAAI,CAACD,SAAS;YACZE,uBAAuB;YACvB,MAAMC,aAAaC,OAAO,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;YAC1D,MAAMC,WAAWC,YAAYH;YAE7B,IAAII,OAAO,MAAM,CAACC,UAAU,QAAQ,CAACH,WACnCN,gBAAgBM;QAEpB;QAEA,IAAIhB,KAAK,QAAQ,KAAKU,eACpBV,KAAK,cAAc,CAACU;IAExB,GAAG;QAACZ;KAAO;IAGXJ,UAAU;QACR,MAAM0B,kBAAkBZ;QACxBF,gBAAgBc,mBAAmBX;IACrC,GAAG;QAACN;KAAM;IAEV,MAAMkB,MAAMC,WAAWC;IACvB,MAAMC,aAAa,CAACH,IAAI,QAAQ;IAEhC,MAAMI,gBAAgB;QACpB,kBAAkBC,KAAK,WAAW,GAAG;QACrC,uBAAuBF,aAAaE,KAAK,YAAY,GAAG,OAAO;QAC/D,mBAAmBC;IACrB;IAEA,OAAO,WAAP,GACE,IAACC,mBAAiBA;QAChB,KAAKC,IAAI,SAAS,CAAC,GAAG,CAAC,cAAc;QACrC,cAAc;kBAEb,CAACC,UAAAA,WAAAA,GACA,IAACC,mBAAmB,QAAQ;gBAAC,OAAO;oBAAED;gBAAQ;0BAC5C,mBAACE,QAACA;oBAAC,OAAOP;;sCACR,IAACjC,cAAYA;4BAAC,MAAMsC,SAAS;;wBAC5BN,cAAc,WAAdA,GAAc,IAACS,QAAMA;4BAAC,cAAc5B;;sCACrC,IAAC6B,UAAQA,CAAAA;sCACT,KAACF,OAAAA,OAAS;4BAAC,WAAWG,aAAAA,OAAc;;gCACjCjC;8CACD,IAACkC,YAAY,OAAO;;;;;;;AAOlC"}
+{"version":3,"file":"components/Layout/index.mjs","sources":["../../../src/components/Layout/index.tsx"],"sourcesContent":["import {\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { FloatButton, Layout as L } from 'antd';\nimport { Language, MAIN_BG, Size } from '../../constants';\nimport { Header } from './header';\nimport {\n  useLocale,\n  useI18n,\n  getFirstVisitFromStorage,\n  setFirstVisitToStorage,\n  getLanguage,\n  useUrlQuery,\n  getEnableRoutesFromUrlQuery,\n  useThemeToken,\n  useTheme,\n} from '../../utils';\nimport { Progress } from './progress';\nimport { ConfigContext } from '../../config';\nimport { SDK } from '@rsdoctor/types';\nimport { ServerAPIProvider } from '../Manifest';\nimport { ProjectInfoContext } from './project-info-context';\nimport styles from './index.module.scss';\n\nexport interface LayoutProps {\n  children: React.JSX.Element;\n}\n\nconst TitleUpdater: React.FC<{\n  name?: string;\n}> = ({ name }) => {\n  useEffect(() => {\n    if (name) {\n      document.title = `Rsdoctor - ${name}`;\n    } else {\n      document.title = 'Rsdoctor';\n    }\n  }, [name]);\n\n  return null;\n};\n\nexport const Layout = (\n  props: PropsWithChildren<LayoutProps>,\n): React.JSX.Element => {\n  const { isLight } = useTheme();\n  const themeToken = useThemeToken();\n  const locale = useLocale();\n  const { i18n } = useI18n();\n  const { children } = props;\n  const query = useUrlQuery();\n  const [enableRoutes, setEnableRoutes] = useState<string[] | undefined>(\n    () => getEnableRoutesFromUrlQuery() || undefined,\n  );\n\n  useEffect(() => {\n    let currentLocale = locale;\n    // Check if the user is visiting the site for the first time\n    const visited = getFirstVisitFromStorage();\n    if (!visited) {\n      setFirstVisitToStorage('1');\n      const targetLang = window.navigator.language.split('-')[0];\n      const userLang = getLanguage(targetLang);\n\n      if (Object.values(Language).includes(userLang)) {\n        currentLocale = userLang;\n      }\n    }\n\n    if (i18n.language !== currentLocale) {\n      i18n.changeLanguage(currentLocale);\n    }\n  }, [locale]);\n\n  // Listen for enableRoutes changes in URL query parameters\n  useEffect(() => {\n    const newEnableRoutes = getEnableRoutesFromUrlQuery();\n    setEnableRoutes(newEnableRoutes || undefined);\n  }, [query]);\n\n  const ctx = useContext(ConfigContext);\n  const showHeader = !ctx.embedded;\n\n  useLayoutEffect(() => {\n    const $root = document.documentElement;\n    const globalCssVars = {\n      '--spacing-base': Size.BasePadding + 'px',\n      '--layout-nav-height': showHeader ? Size.NavBarHeight + 'px' : '0px',\n      '--color-bg-main': MAIN_BG,\n      '--color-bg-box': themeToken.colorBgContainer,\n      '--color-bg-box-elevated': themeToken.colorBgLayout,\n      '--color-border': themeToken.colorBorder,\n      '--color-border-secondary': themeToken.colorBorderSecondary,\n      '--color-divider': themeToken.colorBorder,\n      '--color-scrollbar': isLight\n        ? 'rgba(0, 0, 0, 0.5)'\n        : 'rgba(255,255,255, 0.5)',\n      '--text-color': themeToken.colorText,\n      '--text-color-secondary': themeToken.colorTextSecondary,\n      '--border-radius': themeToken.borderRadius + 'px',\n      '--border-radius-lg': themeToken.borderRadiusLG + 'px',\n    };\n    for (const [name, value] of Object.entries(globalCssVars)) {\n      $root.style.setProperty(name, value);\n    }\n  }, [showHeader, themeToken, isLight]);\n\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetProjectInfo}\n      showSkeleton={false}\n    >\n      {(project) => (\n        <ProjectInfoContext.Provider value={{ project }}>\n          <L>\n            <TitleUpdater name={project?.name} />\n            {showHeader && <Header enableRoutes={enableRoutes} />}\n            <Progress />\n            <L.Content className={styles.content}>\n              {children}\n              <FloatButton.BackTop />\n            </L.Content>\n          </L>\n        </ProjectInfoContext.Provider>\n      )}\n    </ServerAPIProvider>\n  );\n};\n"],"names":["TitleUpdater","name","useEffect","document","Layout","props","isLight","useTheme","themeToken","useThemeToken","locale","useLocale","i18n","useI18n","children","query","useUrlQuery","enableRoutes","setEnableRoutes","useState","getEnableRoutesFromUrlQuery","undefined","currentLocale","visited","getFirstVisitFromStorage","setFirstVisitToStorage","targetLang","window","userLang","getLanguage","Object","Language","newEnableRoutes","ctx","useContext","ConfigContext","showHeader","useLayoutEffect","$root","globalCssVars","Size","MAIN_BG","value","ServerAPIProvider","SDK","project","ProjectInfoContext","L","Header","Progress","styles","FloatButton"],"mappings":";;;;;;;;;;;;AAgCA,MAAMA,eAED,CAAC,EAAEC,IAAI,EAAE;IACZC,UAAU;QACR,IAAID,MACFE,SAAS,KAAK,GAAG,CAAC,WAAW,EAAEF,MAAM;aAErCE,SAAS,KAAK,GAAG;IAErB,GAAG;QAACF;KAAK;IAET,OAAO;AACT;AAEO,MAAMG,gBAAS,CACpBC;IAEA,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAMC,aAAaC;IACnB,MAAMC,SAASC;IACf,MAAM,EAAEC,IAAI,EAAE,GAAGC;IACjB,MAAM,EAAEC,QAAQ,EAAE,GAAGT;IACrB,MAAMU,QAAQC;IACd,MAAM,CAACC,cAAcC,gBAAgB,GAAGC,SACtC,IAAMC,iCAAiCC;IAGzCnB,UAAU;QACR,IAAIoB,gBAAgBZ;QAEpB,MAAMa,UAAUC;QAChB,IAAI,CAACD,SAAS;YACZE,uBAAuB;YACvB,MAAMC,aAAaC,OAAO,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;YAC1D,MAAMC,WAAWC,YAAYH;YAE7B,IAAII,OAAO,MAAM,CAACC,UAAU,QAAQ,CAACH,WACnCN,gBAAgBM;QAEpB;QAEA,IAAIhB,KAAK,QAAQ,KAAKU,eACpBV,KAAK,cAAc,CAACU;IAExB,GAAG;QAACZ;KAAO;IAGXR,UAAU;QACR,MAAM8B,kBAAkBZ;QACxBF,gBAAgBc,mBAAmBX;IACrC,GAAG;QAACN;KAAM;IAEV,MAAMkB,MAAMC,WAAWC;IACvB,MAAMC,aAAa,CAACH,IAAI,QAAQ;IAEhCI,gBAAgB;QACd,MAAMC,QAAQnC,SAAS,eAAe;QACtC,MAAMoC,gBAAgB;YACpB,kBAAkBC,KAAK,WAAW,GAAG;YACrC,uBAAuBJ,aAAaI,KAAK,YAAY,GAAG,OAAO;YAC/D,mBAAmBC;YACnB,kBAAkBjC,WAAW,gBAAgB;YAC7C,2BAA2BA,WAAW,aAAa;YACnD,kBAAkBA,WAAW,WAAW;YACxC,4BAA4BA,WAAW,oBAAoB;YAC3D,mBAAmBA,WAAW,WAAW;YACzC,qBAAqBF,UACjB,uBACA;YACJ,gBAAgBE,WAAW,SAAS;YACpC,0BAA0BA,WAAW,kBAAkB;YACvD,mBAAmBA,WAAW,YAAY,GAAG;YAC7C,sBAAsBA,WAAW,cAAc,GAAG;QACpD;QACA,KAAK,MAAM,CAACP,MAAMyC,MAAM,IAAIZ,OAAO,OAAO,CAACS,eACzCD,MAAM,KAAK,CAAC,WAAW,CAACrC,MAAMyC;IAElC,GAAG;QAACN;QAAY5B;QAAYF;KAAQ;IAEpC,OAAO,WAAP,GACE,IAACqC,mBAAiBA;QAChB,KAAKC,IAAI,SAAS,CAAC,GAAG,CAAC,cAAc;QACrC,cAAc;kBAEb,CAACC,UAAAA,WAAAA,GACA,IAACC,mBAAmB,QAAQ;gBAAC,OAAO;oBAAED;gBAAQ;0BAC5C,mBAACE,QAACA;;sCACA,IAAC/C,cAAYA;4BAAC,MAAM6C,SAAS;;wBAC5BT,cAAc,WAAdA,GAAc,IAACY,QAAMA;4BAAC,cAAc/B;;sCACrC,IAACgC,UAAQA,CAAAA;sCACT,KAACF,OAAAA,OAAS;4BAAC,WAAWG,aAAAA,OAAc;;gCACjCpC;8CACD,IAACqC,YAAY,OAAO;;;;;;;AAOlC"}

package/dist/components/Layout/menus.mjs

@@ -5,7 +5,7 @@ import { Menu } from "antd";
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Size } from "../../constants.mjs";
-import { getEnableRoutesFromUrlQuery, hasBundle, hasCompile, useI18n } from "../../utils/index.mjs";
+import { getEnableRoutesFromUrlQuery, hasBundle, hasCompile, useI18n, useTheme } from "../../utils/index.mjs";
 import { withServerAPI } from "../Manifest/index.mjs";
 import overall_active from "../../common/svg/navbar/overall-active.mjs";
 import overall_inactive from "../../common/svg/navbar/overall-inactive.mjs";
@@ -103,8 +103,10 @@ const MenusBase = (props)=>{
             navigate(BundleSize.route);
         }
     });
+    const { theme } = useTheme();
     const MenuComponent = /*#__PURE__*/ jsx(Menu, {
         items: items,
+        theme: theme,
         mode: "horizontal",
         onClick: (e)=>{
             if (!e.keyPath.includes(BuilderSwitchName)) navigate(e.key);

package/dist/components/Layout/menus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Layout/menus.mjs","sources":["../../../src/components/Layout/menus.tsx"],"sourcesContent":["import {\n  BoxPlotFilled,\n  MenuOutlined,\n  FundFilled,\n  ApiFilled,\n  NodeIndexOutlined,\n} from '@ant-design/icons';\nimport { Manifest, SDK } from '@rsdoctor/types';\nimport { Menu, MenuProps } from 'antd';\nimport React, { useEffect, useState } from 'react';\nimport { useLocation, useNavigate } from 'react-router-dom';\nimport { Size } from '../../constants';\nimport * as OverallConstants from '../../pages/Overall/constants';\nimport {\n  useI18n,\n  hasBundle,\n  hasCompile,\n  getEnableRoutesFromUrlQuery,\n} from '../../utils';\nimport { withServerAPI } from '../Manifest';\nimport OverallActive from 'src/common/svg/navbar/overall-active.svg';\nimport OverallInActive from 'src/common/svg/navbar/overall-inactive.svg';\nimport CompileAnalysisActive from 'src/common/svg/navbar/compile-analysis-active.svg';\nimport CompileAnalysisInActive from 'src/common/svg/navbar/compile-analysis-inactive.svg';\nimport BundleSizeActive from 'src/common/svg/navbar/bundle-size-active.svg';\nimport BundleSizeInActive from 'src/common/svg/navbar/bundle-size-inactive.svg';\nimport {\n  BundleSize,\n  LoaderFiles,\n  PluginsAnalyze,\n  ModuleResolve,\n  LoaderTimeline,\n} from 'src/pages';\nimport { CompileName } from './constants';\n\nconst BuilderSwitchName = 'builder-switcher';\n\nconst defaultInActive = {\n  overall: <OverallInActive />,\n  webpack: <CompileAnalysisInActive />,\n  bundle: <BundleSizeInActive />,\n};\nconst MenusBase: React.FC<{\n  style?: React.CSSProperties;\n  routes: Manifest.RsdoctorManifestClientRoutes[];\n}> = (props) => {\n  const { t } = useI18n();\n  const { pathname } = useLocation();\n  const navigate = useNavigate();\n  const [navIcon, setNavIcon] = useState(defaultInActive);\n  const { routes: apiRoutes } = props;\n\n  // Get enableRoutes from URL query as fallback\n  const urlEnableRoutes = getEnableRoutesFromUrlQuery();\n  const enableRoutes =\n    apiRoutes && apiRoutes.length > 0\n      ? apiRoutes\n      : (urlEnableRoutes as Manifest.RsdoctorManifestClientRoutes[]) || [];\n\n  useEffect(() => {\n    if (pathname.includes('webpack')) {\n      setNavIcon({\n        ...defaultInActive,\n        webpack: <CompileAnalysisActive />,\n      });\n    } else if (pathname.includes('overall') || pathname === '/') {\n      setNavIcon({\n        ...defaultInActive,\n        overall: <OverallActive />,\n      });\n    } else if (pathname.includes('bundle')) {\n      setNavIcon({\n        ...defaultInActive,\n        bundle: <BundleSizeActive />,\n      });\n    }\n  }, [pathname]);\n\n  const iconStyle: React.CSSProperties = {\n    color: 'rgba(96, 102, 114)',\n  };\n  const items: MenuProps['items'] = [];\n\n  if (enableRoutes.includes(Manifest.RsdoctorManifestClientRoutes.Overall)) {\n    items.push({\n      label: t(OverallConstants.name),\n      key: OverallConstants.route,\n      icon: navIcon.overall,\n      children: [],\n      onTitleClick(e) {\n        navigate(e.key);\n      },\n    });\n  }\n\n  if (hasCompile(enableRoutes)) {\n    items.push({\n      label: t(CompileName),\n      key: CompileName,\n      icon: navIcon.webpack,\n      children: [\n        enableRoutes.includes(\n          Manifest.RsdoctorManifestClientRoutes.WebpackLoaders,\n        ) && {\n          label: t(LoaderTimeline.name),\n          key: LoaderTimeline.route,\n          icon: <BoxPlotFilled style={iconStyle} />,\n        },\n        enableRoutes.includes(\n          Manifest.RsdoctorManifestClientRoutes.WebpackLoaders,\n        ) && {\n          label: t(LoaderFiles.name),\n          key: LoaderFiles.route,\n          icon: <FundFilled style={iconStyle} />,\n        },\n        enableRoutes.includes(\n          Manifest.RsdoctorManifestClientRoutes.ModuleResolve,\n        ) && {\n          label: t(ModuleResolve.name),\n          key: ModuleResolve.route,\n          icon: <NodeIndexOutlined style={iconStyle} />,\n        },\n        enableRoutes.includes(\n          Manifest.RsdoctorManifestClientRoutes.WebpackPlugins,\n        ) && {\n          label: t(PluginsAnalyze.name),\n          key: PluginsAnalyze.route,\n          icon: <ApiFilled style={iconStyle} />,\n        },\n      ].filter((e) => Boolean(e)) as MenuProps['items'],\n    });\n  }\n\n  if (hasBundle(enableRoutes)) {\n    items.push({\n      label: t(BundleSize.name),\n      key: BundleSize.name,\n      icon: navIcon.bundle,\n      children: [],\n      onTitleClick() {\n        navigate(BundleSize.route);\n      },\n    });\n  }\n\n  const MenuComponent = (\n    <Menu\n      items={items}\n      mode=\"horizontal\"\n      key={enableRoutes.join('')}\n      onClick={(e) => {\n        if (!e.keyPath.includes(BuilderSwitchName)) {\n          navigate(e.key);\n        }\n      }}\n      disabledOverflow\n      overflowedIndicator={<MenuOutlined />}\n      style={{\n        height: Size.NavBarHeight,\n        lineHeight: `${Size.NavBarHeight}px`,\n        minWidth: 0,\n        justifyContent: 'flex-end',\n        ...props.style,\n      }}\n      selectedKeys={[pathname === '/' ? OverallConstants.route : pathname]}\n    />\n  );\n\n  return <div style={{ marginLeft: '30px' }}>{MenuComponent}</div>;\n};\n\nexport const Menus = withServerAPI({\n  api: SDK.ServerAPI.API.GetClientRoutes,\n  responsePropName: 'routes',\n  Component: MenusBase,\n  fallbackComponent: () => null,\n  showSkeleton: false,\n});\n"],"names":["BuilderSwitchName","defaultInActive","OverallInActive","CompileAnalysisInActive","BundleSizeInActive","MenusBase","props","t","useI18n","pathname","useLocation","navigate","useNavigate","navIcon","setNavIcon","useState","apiRoutes","urlEnableRoutes","getEnableRoutesFromUrlQuery","enableRoutes","useEffect","CompileAnalysisActive","OverallActive","BundleSizeActive","iconStyle","items","Manifest","OverallConstants","e","hasCompile","CompileName","LoaderTimeline","BoxPlotFilled","LoaderFiles","FundFilled","ModuleResolve","NodeIndexOutlined","PluginsAnalyze","ApiFilled","Boolean","hasBundle","BundleSize","MenuComponent","Menu","MenuOutlined","Size","Menus","withServerAPI","SDK"],"mappings":"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"}
+{"version":3,"file":"components/Layout/menus.mjs","sources":["../../../src/components/Layout/menus.tsx"],"sourcesContent":["import {\n  BoxPlotFilled,\n  MenuOutlined,\n  FundFilled,\n  ApiFilled,\n  NodeIndexOutlined,\n} from '@ant-design/icons';\nimport { Manifest, SDK } from '@rsdoctor/types';\nimport { Menu, MenuProps } from 'antd';\nimport React, { useEffect, useState } from 'react';\nimport { useLocation, useNavigate } from 'react-router-dom';\nimport { Size } from '../../constants';\nimport * as OverallConstants from '../../pages/Overall/constants';\nimport {\n  useI18n,\n  hasBundle,\n  hasCompile,\n  getEnableRoutesFromUrlQuery,\n  useTheme,\n} from '../../utils';\nimport { withServerAPI } from '../Manifest';\nimport OverallActive from 'src/common/svg/navbar/overall-active.svg';\nimport OverallInActive from 'src/common/svg/navbar/overall-inactive.svg';\nimport CompileAnalysisActive from 'src/common/svg/navbar/compile-analysis-active.svg';\nimport CompileAnalysisInActive from 'src/common/svg/navbar/compile-analysis-inactive.svg';\nimport BundleSizeActive from 'src/common/svg/navbar/bundle-size-active.svg';\nimport BundleSizeInActive from 'src/common/svg/navbar/bundle-size-inactive.svg';\nimport {\n  BundleSize,\n  LoaderFiles,\n  PluginsAnalyze,\n  ModuleResolve,\n  LoaderTimeline,\n} from 'src/pages';\nimport { CompileName } from './constants';\n\nconst BuilderSwitchName = 'builder-switcher';\n\nconst defaultInActive = {\n  overall: <OverallInActive />,\n  webpack: <CompileAnalysisInActive />,\n  bundle: <BundleSizeInActive />,\n};\nconst MenusBase: React.FC<{\n  style?: React.CSSProperties;\n  routes: Manifest.RsdoctorManifestClientRoutes[];\n}> = (props) => {\n  const { t } = useI18n();\n  const { pathname } = useLocation();\n  const navigate = useNavigate();\n  const [navIcon, setNavIcon] = useState(defaultInActive);\n  const { routes: apiRoutes } = props;\n\n  // Get enableRoutes from URL query as fallback\n  const urlEnableRoutes = getEnableRoutesFromUrlQuery();\n  const enableRoutes =\n    apiRoutes && apiRoutes.length > 0\n      ? apiRoutes\n      : (urlEnableRoutes as Manifest.RsdoctorManifestClientRoutes[]) || [];\n\n  useEffect(() => {\n    if (pathname.includes('webpack')) {\n      setNavIcon({\n        ...defaultInActive,\n        webpack: <CompileAnalysisActive />,\n      });\n    } else if (pathname.includes('overall') || pathname === '/') {\n      setNavIcon({\n        ...defaultInActive,\n        overall: <OverallActive />,\n      });\n    } else if (pathname.includes('bundle')) {\n      setNavIcon({\n        ...defaultInActive,\n        bundle: <BundleSizeActive />,\n      });\n    }\n  }, [pathname]);\n\n  const iconStyle: React.CSSProperties = {\n    color: 'rgba(96, 102, 114)',\n  };\n  const items: MenuProps['items'] = [];\n\n  if (enableRoutes.includes(Manifest.RsdoctorManifestClientRoutes.Overall)) {\n    items.push({\n      label: t(OverallConstants.name),\n      key: OverallConstants.route,\n      icon: navIcon.overall,\n      children: [],\n      onTitleClick(e) {\n        navigate(e.key);\n      },\n    });\n  }\n\n  if (hasCompile(enableRoutes)) {\n    items.push({\n      label: t(CompileName),\n      key: CompileName,\n      icon: navIcon.webpack,\n      children: [\n        enableRoutes.includes(\n          Manifest.RsdoctorManifestClientRoutes.WebpackLoaders,\n        ) && {\n          label: t(LoaderTimeline.name),\n          key: LoaderTimeline.route,\n          icon: <BoxPlotFilled style={iconStyle} />,\n        },\n        enableRoutes.includes(\n          Manifest.RsdoctorManifestClientRoutes.WebpackLoaders,\n        ) && {\n          label: t(LoaderFiles.name),\n          key: LoaderFiles.route,\n          icon: <FundFilled style={iconStyle} />,\n        },\n        enableRoutes.includes(\n          Manifest.RsdoctorManifestClientRoutes.ModuleResolve,\n        ) && {\n          label: t(ModuleResolve.name),\n          key: ModuleResolve.route,\n          icon: <NodeIndexOutlined style={iconStyle} />,\n        },\n        enableRoutes.includes(\n          Manifest.RsdoctorManifestClientRoutes.WebpackPlugins,\n        ) && {\n          label: t(PluginsAnalyze.name),\n          key: PluginsAnalyze.route,\n          icon: <ApiFilled style={iconStyle} />,\n        },\n      ].filter((e) => Boolean(e)) as MenuProps['items'],\n    });\n  }\n\n  if (hasBundle(enableRoutes)) {\n    items.push({\n      label: t(BundleSize.name),\n      key: BundleSize.name,\n      icon: navIcon.bundle,\n      children: [],\n      onTitleClick() {\n        navigate(BundleSize.route);\n      },\n    });\n  }\n\n  const { theme } = useTheme();\n  const MenuComponent = (\n    <Menu\n      items={items}\n      theme={theme}\n      mode=\"horizontal\"\n      key={enableRoutes.join('')}\n      onClick={(e) => {\n        if (!e.keyPath.includes(BuilderSwitchName)) {\n          navigate(e.key);\n        }\n      }}\n      disabledOverflow\n      overflowedIndicator={<MenuOutlined />}\n      style={{\n        height: Size.NavBarHeight,\n        lineHeight: `${Size.NavBarHeight}px`,\n        minWidth: 0,\n        justifyContent: 'flex-end',\n        ...props.style,\n      }}\n      selectedKeys={[pathname === '/' ? OverallConstants.route : pathname]}\n    />\n  );\n\n  return <div style={{ marginLeft: '30px' }}>{MenuComponent}</div>;\n};\n\nexport const Menus = withServerAPI({\n  api: SDK.ServerAPI.API.GetClientRoutes,\n  responsePropName: 'routes',\n  Component: MenusBase,\n  fallbackComponent: () => null,\n  showSkeleton: false,\n});\n"],"names":["BuilderSwitchName","defaultInActive","OverallInActive","CompileAnalysisInActive","BundleSizeInActive","MenusBase","props","t","useI18n","pathname","useLocation","navigate","useNavigate","navIcon","setNavIcon","useState","apiRoutes","urlEnableRoutes","getEnableRoutesFromUrlQuery","enableRoutes","useEffect","CompileAnalysisActive","OverallActive","BundleSizeActive","iconStyle","items","Manifest","OverallConstants","e","hasCompile","CompileName","LoaderTimeline","BoxPlotFilled","LoaderFiles","FundFilled","ModuleResolve","NodeIndexOutlined","PluginsAnalyze","ApiFilled","Boolean","hasBundle","BundleSize","theme","useTheme","MenuComponent","Menu","MenuOutlined","Size","Menus","withServerAPI","SDK"],"mappings":"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"}

package/dist/components/Layout/rsdoctor-title-logo-dark.mjs

@@ -0,0 +1,2 @@
+import rsdoctor_title_logo_dark_namespaceObject from "../../static/image/rsdoctor-title-logo-dark.png";
+export default rsdoctor_title_logo_dark_namespaceObject;

package/dist/components/Loader/Analysis/files.mjs

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CloseCircleOutlined } from "@ant-design/icons";
 import { SDK } from "@rsdoctor/types";
 import { Card, Col, Divider, Drawer, List, Popover, Row, Space, Table, Tag, Tooltip, Typography } from "antd";
@@ -76,17 +76,17 @@ const LoaderFiles = (props)=>{
                                     const key = `${file}_${e.loader}_${i}`;
                                     if (i <= ADDITION_LOADER_NUMBER) return /*#__PURE__*/ jsx(Tooltip, {
                                         title: e.path,
-                                        children: /*#__PURE__*/ jsxs(Typography.Text, {
-                                            className: style_module.textBox,
-                                            style: {
-                                                color: isError ? '#f50' : 'inherit'
-                                            },
+                                        children: /*#__PURE__*/ jsxs(Tag, {
                                             onClick: (ev)=>{
                                                 ev.stopPropagation();
                                                 setResourcePath(file);
                                                 setLoaderIndex(i);
                                                 setDrawerVisible(true);
                                             },
+                                            className: style_module.textBox,
+                                            style: {
+                                                color: isError ? '#f50' : 'inherit'
+                                            },
                                             children: [
                                                 /*#__PURE__*/ jsx(Typography.Text, {
                                                     className: style_module.text,
@@ -104,7 +104,7 @@ const LoaderFiles = (props)=>{
                                         })
                                     }, key);
                                 }),
-                                additionalLoaders?.length ? /*#__PURE__*/ jsx(Popover, {
+                                additionalLoaders?.length > 0 && /*#__PURE__*/ jsx(Popover, {
                                     content: /*#__PURE__*/ jsx(List, {
                                         dataSource: additionalLoaders,
                                         renderItem: (e, i)=>{
@@ -117,17 +117,17 @@ const LoaderFiles = (props)=>{
                                                         style: {
                                                             paddingBottom: 5
                                                         },
-                                                        children: /*#__PURE__*/ jsxs(Typography.Text, {
-                                                            className: style_module.textBox,
-                                                            style: {
-                                                                color: isError ? '#f50' : 'inherit'
-                                                            },
+                                                        children: /*#__PURE__*/ jsxs(Tag, {
                                                             onClick: (ev)=>{
                                                                 ev.stopPropagation();
                                                                 setResourcePath(file);
                                                                 setLoaderIndex(i);
                                                                 setDrawerVisible(true);
                                                             },
+                                                            className: style_module.textBox,
+                                                            style: {
+                                                                color: isError ? '#f50' : 'inherit'
+                                                            },
                                                             children: [
                                                                 /*#__PURE__*/ jsx(Typography.Text, {
                                                                     className: style_module.text,
@@ -148,13 +148,13 @@ const LoaderFiles = (props)=>{
                                             });
                                         }
                                     }),
-                                    children: /*#__PURE__*/ jsx("div", {
+                                    children: /*#__PURE__*/ jsx(Tag, {
                                         className: style_module.textBox,
                                         children: /*#__PURE__*/ jsx(Typography.Text, {
                                             children: "\xb7\xb7\xb7"
                                         })
                                     })
-                                }) : /*#__PURE__*/ jsx(Fragment, {})
+                                })
                             ]
                         })
                     ]
@@ -192,11 +192,10 @@ const LoaderFiles = (props)=>{
                                 children: "Files"
                             }),
                             /*#__PURE__*/ jsxs(Typography.Text, {
+                                type: "secondary",
                                 style: {
                                     fontSize: 12,
-                                    fontWeight: 400,
-                                    color: '#1C1F2399',
-                                    opacity: 0.6
+                                    fontWeight: 400
                                 },
                                 children: [
                                     "Total Files: ",

package/dist/components/Loader/Analysis/files.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Loader/Analysis/files.mjs","sources":["../../../../src/components/Loader/Analysis/files.tsx"],"sourcesContent":["import { CloseCircleOutlined } from '@ant-design/icons';\nimport { SDK } from '@rsdoctor/types';\nimport {\n  Card,\n  Col,\n  Divider,\n  Drawer,\n  List,\n  Popover,\n  Row,\n  Space,\n  Table,\n  Tag,\n  Tooltip,\n  Typography,\n} from 'antd';\nimport { get } from 'es-toolkit/compat';\nimport React, { useMemo, useState } from 'react';\nimport { drawerWidth, Size } from '../../../constants';\nimport {\n  createFileStructures,\n  DataNode,\n  filterLoader,\n  formatCosts,\n  mapFileKey,\n} from '../../../utils';\nimport { FileTree } from '../../FileTree';\nimport { Keyword } from '../../Keyword';\nimport { ServerAPIProvider } from '../../Manifest';\nimport { LoaderExecutions } from '../executions';\nimport styles from './style.module.scss';\n\nconst ADDITION_LOADER_NUMBER = 3;\n\nexport const LoaderFiles: React.FC<{\n  filetree: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetLoaderFileTree>;\n  cwd: string;\n  loaders: string[];\n  filename: string;\n  layer?: string;\n}> = (props) => {\n  const { cwd, filetree } = props;\n  const [drawerVisible, setDrawerVisible] = useState(false);\n  const [resourcePath, setResourcePath] = useState('');\n  const [loaderIndex, setLoaderIndex] = useState(0);\n  const [selectedNode, setSelectedNode] = useState<DataNode | null>(null);\n\n  const maxHeight = 800;\n\n  const filteredFiles = useMemo(\n    () =>\n      filetree.filter((e) =>\n        e.loaders.some((l) =>\n          filterLoader(\n            e.path,\n            l.loader,\n            props.filename,\n            props.loaders,\n            e.layer,\n            props?.layer,\n          ),\n        ),\n      ),\n    [props.filename, props.loaders, props.layer],\n  );\n\n  const inlinedResourcePathKey = '__RESOURCEPATH__';\n\n  const files = useMemo(() => {\n    return createFileStructures({\n      files: filteredFiles.map((e) => e.path),\n      cwd,\n      fileTitle(file, basename) {\n        const { loaders, layer } = filetree.find((e) => e.path === file)!;\n\n        const additionalLoaders: (Pick<\n          SDK.LoaderTransformData,\n          'path' | 'loader' | 'errors'\n        > & { costs: number })[] = [];\n\n        loaders.forEach(\n          (l, i) => i > ADDITION_LOADER_NUMBER && additionalLoaders.push(l),\n        );\n\n        return (\n          <div\n            style={{\n              wordBreak: 'break-all',\n              display: 'flex',\n              cursor: 'pointer',\n            }}\n            onClick={() => {\n              setLoaderIndex(0);\n              setResourcePath(file);\n              setDrawerVisible(true);\n            }}\n          >\n            <div className={styles.box}>\n              <div className={styles.keywords}>\n                <Keyword text={basename.replace(/\\[.*?\\]/g, '')} keyword={''} />\n              </div>\n            </div>\n            <div className={styles.dividerDiv} style={{ flex: 1 }}>\n              <Divider className={styles.divider} dashed />\n            </div>\n\n            {layer && (\n              <Tag color=\"cyan\" bordered={false}>\n                {layer}\n              </Tag>\n            )}\n            <Space>\n              {loaders.slice(0, ADDITION_LOADER_NUMBER).map((e, i) => {\n                const isError = e.errors && e.errors.length;\n                const key = `${file}_${e.loader}_${i}`;\n                if (i <= ADDITION_LOADER_NUMBER) {\n                  return (\n                    <Tooltip title={e.path} key={key}>\n                      <Typography.Text\n                        className={styles.textBox}\n                        style={{ color: isError ? '#f50' : 'inherit' }}\n                        onClick={(ev) => {\n                          ev.stopPropagation();\n                          setResourcePath(file);\n                          setLoaderIndex(i);\n                          setDrawerVisible(true);\n                        }}\n                      >\n                        <Typography.Text className={styles.text} ellipsis>\n                          {e.loader.match(/([^/]+-loader)/g)?.[0] || e.loader}\n                        </Typography.Text>\n                        <Divider type=\"vertical\" />\n                        {isError ? (\n                          <CloseCircleOutlined />\n                        ) : (\n                          <Typography.Text className={styles.text}>\n                            {formatCosts(e.costs)}\n                          </Typography.Text>\n                        )}\n                      </Typography.Text>\n                    </Tooltip>\n                  );\n                }\n              })}\n              {additionalLoaders?.length ? (\n                <Popover\n                  content={\n                    <List\n                      dataSource={additionalLoaders}\n                      renderItem={(e, i) => {\n                        const isError = e.errors && e.errors.length;\n                        const key = `${file}_${e.loader}_${i + ADDITION_LOADER_NUMBER}`;\n\n                        return (\n                          <List.Item>\n                            <Tooltip title={e.path} key={key}>\n                              <div style={{ paddingBottom: 5 }}>\n                                <Typography.Text\n                                  className={styles.textBox}\n                                  style={{\n                                    color: isError ? '#f50' : 'inherit',\n                                  }}\n                                  onClick={(ev) => {\n                                    ev.stopPropagation();\n                                    setResourcePath(file);\n                                    setLoaderIndex(i);\n                                    setDrawerVisible(true);\n                                  }}\n                                >\n                                  <Typography.Text\n                                    className={styles.text}\n                                    ellipsis\n                                  >\n                                    {e.loader.match(/([^/]+-loader)/g)?.[0] ||\n                                      e.loader}\n                                  </Typography.Text>\n                                  <Divider type=\"vertical\" />\n                                  <Typography.Text className={styles.text}>\n                                    {formatCosts(e.costs)}\n                                  </Typography.Text>\n                                </Typography.Text>\n                              </div>\n                            </Tooltip>\n                          </List.Item>\n                        );\n                      }}\n                    />\n                  }\n                >\n                  <div className={styles.textBox}>\n                    <Typography.Text>···</Typography.Text>\n                  </div>\n                </Popover>\n              ) : (\n                <></>\n              )}\n            </Space>\n          </div>\n        );\n      },\n      dirTitle(_dir, defaultTitle) {\n        return (\n          <div style={{ display: 'flex', cursor: 'pointer' }}>\n            <Keyword text={defaultTitle} keyword={''} />\n          </div>\n        );\n      },\n    });\n  }, [filteredFiles]);\n\n  return (\n    <Row style={{ width: '100%', marginLeft: 0 }} gutter={Size.BasePadding}>\n      <Col span={24}>\n        <Card\n          title={\n            <Space>\n              <Typography.Text strong>Files</Typography.Text>\n              <Typography.Text\n                style={{\n                  fontSize: 12,\n                  fontWeight: 400,\n                  color: '#1C1F2399',\n                  opacity: 0.6,\n                }}\n              >\n                Total Files: {filteredFiles.length}\n              </Typography.Text>\n            </Space>\n          }\n          bodyStyle={{\n            overflow: 'auto',\n            maxHeight,\n            minHeight: '40rem',\n            padding: 14,\n          }}\n        >\n          <FileTree\n            defaultExpandedKeys={mapFileKey(\n              files,\n              filteredFiles.length >= 100 ? 3 : 4,\n              (node) => {\n                const resourcePath: string = get(node, inlinedResourcePathKey)!;\n                const isNodeModules =\n                  resourcePath.indexOf('/node_modules/') > -1;\n\n                return !isNodeModules;\n              },\n            )}\n            treeData={files}\n            key={`${props.loaders.join('|')}_${props.filename}`}\n            onSelect={(_e, info) => {\n              if (!info.node.isLeaf) {\n                setSelectedNode(info.node);\n              }\n            }}\n            selectedKeys={selectedNode ? [selectedNode.key] : undefined}\n            expandAction=\"click\"\n          />\n          <Drawer\n            open={drawerVisible}\n            onClose={() => setDrawerVisible(false)}\n            maskClosable\n            width={drawerWidth}\n            zIndex={999}\n            bodyStyle={{ padding: 0 }}\n          >\n            {drawerVisible ? (\n              <ServerAPIProvider\n                api={SDK.ServerAPI.API.GetLoaderFileDetails}\n                body={{ path: resourcePath }}\n              >\n                {(data) => (\n                  <LoaderExecutions data={data} cwd={cwd} index={loaderIndex} />\n                )}\n              </ServerAPIProvider>\n            ) : null}\n          </Drawer>\n        </Card>\n      </Col>\n\n      <Drawer\n        open={!!selectedNode}\n        onClose={() => setSelectedNode(null)}\n        maskClosable\n        width={drawerWidth}\n        zIndex={999}\n        bodyStyle={{ padding: 0 }}\n      >\n        {selectedNode && (\n          <Row>\n            <Col span={24}>\n              <Card\n                title={\n                  <Tooltip\n                    title={React.cloneElement(\n                      selectedNode.title as React.ReactElement<{\n                        style?: React.CSSProperties;\n                      }>,\n                      { style: { color: '#fff' } },\n                    )}\n                  >\n                    <Typography.Text>\n                      {`Statistics of`}\n                      {selectedNode.title as React.ReactNode}\n                    </Typography.Text>\n                  </Tooltip>\n                }\n              >\n                <ServerAPIProvider\n                  api={SDK.ServerAPI.API.GetLoaderFolderStatistics}\n                  body={{ folder: selectedNode[inlinedResourcePathKey] }}\n                >\n                  {(tableData) => (\n                    <Table\n                      style={{\n                        width: '100%',\n                        maxHeight,\n                        height: '40rem',\n                        overflowY: 'scroll',\n                        wordBreak: 'break-all',\n                      }}\n                      pagination={false}\n                      bordered\n                      rowKey={(e) => e.loader}\n                      columns={[\n                        {\n                          title: 'Loader Name',\n                          dataIndex: 'loader',\n                        },\n                        {\n                          title: 'Files',\n                          dataIndex: 'files',\n                        },\n                        {\n                          title: 'Total Duration',\n                          dataIndex: 'costs',\n                          render: (v) => (\n                            <Typography.Text strong>\n                              {formatCosts(v)}\n                            </Typography.Text>\n                          ),\n                          sorter: (a, b) => a.costs - b.costs,\n                          defaultSortOrder: 'descend',\n                          sortDirections: ['descend', 'ascend'],\n                        },\n                      ]}\n                      dataSource={tableData!}\n                    />\n                  )}\n                </ServerAPIProvider>\n              </Card>\n            </Col>\n          </Row>\n        )}\n      </Drawer>\n    </Row>\n  );\n};\n"],"names":["ADDITION_LOADER_NUMBER","LoaderFiles","props","cwd","filetree","drawerVisible","setDrawerVisible","useState","resourcePath","setResourcePath","loaderIndex","setLoaderIndex","selectedNode","setSelectedNode","maxHeight","filteredFiles","useMemo","e","l","filterLoader","inlinedResourcePathKey","files","createFileStructures","file","basename","loaders","layer","additionalLoaders","i","styles","Keyword","Divider","Tag","Space","isError","key","Tooltip","Typography","ev","CloseCircleOutlined","formatCosts","Popover","List","_dir","defaultTitle","Row","Size","Col","Card","FileTree","mapFileKey","node","get","isNodeModules","_e","info","undefined","Drawer","drawerWidth","ServerAPIProvider","SDK","data","LoaderExecutions","React","tableData","Table","v","a","b"],"mappings":"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"}
+{"version":3,"file":"components/Loader/Analysis/files.mjs","sources":["../../../../src/components/Loader/Analysis/files.tsx"],"sourcesContent":["import { CloseCircleOutlined } from '@ant-design/icons';\nimport { SDK } from '@rsdoctor/types';\nimport {\n  Card,\n  Col,\n  Divider,\n  Drawer,\n  List,\n  Popover,\n  Row,\n  Space,\n  Table,\n  Tag,\n  Tooltip,\n  Typography,\n} from 'antd';\nimport { get } from 'es-toolkit/compat';\nimport React, { useMemo, useState } from 'react';\nimport { drawerWidth, Size } from '../../../constants';\nimport {\n  createFileStructures,\n  DataNode,\n  filterLoader,\n  formatCosts,\n  mapFileKey,\n} from '../../../utils';\nimport { FileTree } from '../../FileTree';\nimport { Keyword } from '../../Keyword';\nimport { ServerAPIProvider } from '../../Manifest';\nimport { LoaderExecutions } from '../executions';\nimport styles from './style.module.scss';\n\nconst ADDITION_LOADER_NUMBER = 3;\n\nexport const LoaderFiles: React.FC<{\n  filetree: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetLoaderFileTree>;\n  cwd: string;\n  loaders: string[];\n  filename: string;\n  layer?: string;\n}> = (props) => {\n  const { cwd, filetree } = props;\n  const [drawerVisible, setDrawerVisible] = useState(false);\n  const [resourcePath, setResourcePath] = useState('');\n  const [loaderIndex, setLoaderIndex] = useState(0);\n  const [selectedNode, setSelectedNode] = useState<DataNode | null>(null);\n\n  const maxHeight = 800;\n\n  const filteredFiles = useMemo(\n    () =>\n      filetree.filter((e) =>\n        e.loaders.some((l) =>\n          filterLoader(\n            e.path,\n            l.loader,\n            props.filename,\n            props.loaders,\n            e.layer,\n            props?.layer,\n          ),\n        ),\n      ),\n    [props.filename, props.loaders, props.layer],\n  );\n\n  const inlinedResourcePathKey = '__RESOURCEPATH__';\n\n  const files = useMemo(() => {\n    return createFileStructures({\n      files: filteredFiles.map((e) => e.path),\n      cwd,\n      fileTitle(file, basename) {\n        const { loaders, layer } = filetree.find((e) => e.path === file)!;\n\n        const additionalLoaders: (Pick<\n          SDK.LoaderTransformData,\n          'path' | 'loader' | 'errors'\n        > & { costs: number })[] = [];\n\n        loaders.forEach(\n          (l, i) => i > ADDITION_LOADER_NUMBER && additionalLoaders.push(l),\n        );\n\n        return (\n          <div\n            style={{\n              wordBreak: 'break-all',\n              display: 'flex',\n              cursor: 'pointer',\n            }}\n            onClick={() => {\n              setLoaderIndex(0);\n              setResourcePath(file);\n              setDrawerVisible(true);\n            }}\n          >\n            <div className={styles.box}>\n              <div className={styles.keywords}>\n                <Keyword text={basename.replace(/\\[.*?\\]/g, '')} keyword={''} />\n              </div>\n            </div>\n            <div className={styles.dividerDiv} style={{ flex: 1 }}>\n              <Divider className={styles.divider} dashed />\n            </div>\n\n            {layer && (\n              <Tag color=\"cyan\" bordered={false}>\n                {layer}\n              </Tag>\n            )}\n            <Space>\n              {loaders.slice(0, ADDITION_LOADER_NUMBER).map((e, i) => {\n                const isError = e.errors && e.errors.length;\n                const key = `${file}_${e.loader}_${i}`;\n                if (i <= ADDITION_LOADER_NUMBER) {\n                  return (\n                    <Tooltip title={e.path} key={key}>\n                      <Tag\n                        onClick={(ev) => {\n                          ev.stopPropagation();\n                          setResourcePath(file);\n                          setLoaderIndex(i);\n                          setDrawerVisible(true);\n                        }}\n                        className={styles.textBox}\n                        style={{ color: isError ? '#f50' : 'inherit' }}\n                      >\n                        <Typography.Text className={styles.text} ellipsis>\n                          {e.loader.match(/([^/]+-loader)/g)?.[0] || e.loader}\n                        </Typography.Text>\n                        <Divider type=\"vertical\" />\n                        {isError ? (\n                          <CloseCircleOutlined />\n                        ) : (\n                          <Typography.Text className={styles.text}>\n                            {formatCosts(e.costs)}\n                          </Typography.Text>\n                        )}\n                      </Tag>\n                    </Tooltip>\n                  );\n                }\n              })}\n              {additionalLoaders?.length > 0 && (\n                <Popover\n                  content={\n                    <List\n                      dataSource={additionalLoaders}\n                      renderItem={(e, i) => {\n                        const isError = e.errors && e.errors.length;\n                        const key = `${file}_${e.loader}_${i + ADDITION_LOADER_NUMBER}`;\n\n                        return (\n                          <List.Item>\n                            <Tooltip title={e.path} key={key}>\n                              <div style={{ paddingBottom: 5 }}>\n                                <Tag\n                                  onClick={(ev) => {\n                                    ev.stopPropagation();\n                                    setResourcePath(file);\n                                    setLoaderIndex(i);\n                                    setDrawerVisible(true);\n                                  }}\n                                  className={styles.textBox}\n                                  style={{\n                                    color: isError ? '#f50' : 'inherit',\n                                  }}\n                                >\n                                  <Typography.Text\n                                    className={styles.text}\n                                    ellipsis\n                                  >\n                                    {e.loader.match(/([^/]+-loader)/g)?.[0] ||\n                                      e.loader}\n                                  </Typography.Text>\n                                  <Divider type=\"vertical\" />\n                                  <Typography.Text className={styles.text}>\n                                    {formatCosts(e.costs)}\n                                  </Typography.Text>\n                                </Tag>\n                              </div>\n                            </Tooltip>\n                          </List.Item>\n                        );\n                      }}\n                    />\n                  }\n                >\n                  <Tag className={styles.textBox}>\n                    <Typography.Text>···</Typography.Text>\n                  </Tag>\n                </Popover>\n              )}\n            </Space>\n          </div>\n        );\n      },\n      dirTitle(_dir, defaultTitle) {\n        return (\n          <div style={{ display: 'flex', cursor: 'pointer' }}>\n            <Keyword text={defaultTitle} keyword={''} />\n          </div>\n        );\n      },\n    });\n  }, [filteredFiles]);\n\n  return (\n    <Row style={{ width: '100%', marginLeft: 0 }} gutter={Size.BasePadding}>\n      <Col span={24}>\n        <Card\n          title={\n            <Space>\n              <Typography.Text strong>Files</Typography.Text>\n              <Typography.Text\n                type=\"secondary\"\n                style={{\n                  fontSize: 12,\n                  fontWeight: 400,\n                }}\n              >\n                Total Files: {filteredFiles.length}\n              </Typography.Text>\n            </Space>\n          }\n          bodyStyle={{\n            overflow: 'auto',\n            maxHeight,\n            minHeight: '40rem',\n            padding: 14,\n          }}\n        >\n          <FileTree\n            defaultExpandedKeys={mapFileKey(\n              files,\n              filteredFiles.length >= 100 ? 3 : 4,\n              (node) => {\n                const resourcePath: string = get(node, inlinedResourcePathKey)!;\n                const isNodeModules =\n                  resourcePath.indexOf('/node_modules/') > -1;\n\n                return !isNodeModules;\n              },\n            )}\n            treeData={files}\n            key={`${props.loaders.join('|')}_${props.filename}`}\n            onSelect={(_e, info) => {\n              if (!info.node.isLeaf) {\n                setSelectedNode(info.node);\n              }\n            }}\n            selectedKeys={selectedNode ? [selectedNode.key] : undefined}\n            expandAction=\"click\"\n          />\n          <Drawer\n            open={drawerVisible}\n            onClose={() => setDrawerVisible(false)}\n            maskClosable\n            width={drawerWidth}\n            zIndex={999}\n            bodyStyle={{ padding: 0 }}\n          >\n            {drawerVisible ? (\n              <ServerAPIProvider\n                api={SDK.ServerAPI.API.GetLoaderFileDetails}\n                body={{ path: resourcePath }}\n              >\n                {(data) => (\n                  <LoaderExecutions data={data} cwd={cwd} index={loaderIndex} />\n                )}\n              </ServerAPIProvider>\n            ) : null}\n          </Drawer>\n        </Card>\n      </Col>\n\n      <Drawer\n        open={!!selectedNode}\n        onClose={() => setSelectedNode(null)}\n        maskClosable\n        width={drawerWidth}\n        zIndex={999}\n        bodyStyle={{ padding: 0 }}\n      >\n        {selectedNode && (\n          <Row>\n            <Col span={24}>\n              <Card\n                title={\n                  <Tooltip\n                    title={React.cloneElement(\n                      selectedNode.title as React.ReactElement<{\n                        style?: React.CSSProperties;\n                      }>,\n                      { style: { color: '#fff' } },\n                    )}\n                  >\n                    <Typography.Text>\n                      {`Statistics of`}\n                      {selectedNode.title as React.ReactNode}\n                    </Typography.Text>\n                  </Tooltip>\n                }\n              >\n                <ServerAPIProvider\n                  api={SDK.ServerAPI.API.GetLoaderFolderStatistics}\n                  body={{ folder: selectedNode[inlinedResourcePathKey] }}\n                >\n                  {(tableData) => (\n                    <Table\n                      style={{\n                        width: '100%',\n                        maxHeight,\n                        height: '40rem',\n                        overflowY: 'scroll',\n                        wordBreak: 'break-all',\n                      }}\n                      pagination={false}\n                      bordered\n                      rowKey={(e) => e.loader}\n                      columns={[\n                        {\n                          title: 'Loader Name',\n                          dataIndex: 'loader',\n                        },\n                        {\n                          title: 'Files',\n                          dataIndex: 'files',\n                        },\n                        {\n                          title: 'Total Duration',\n                          dataIndex: 'costs',\n                          render: (v) => (\n                            <Typography.Text strong>\n                              {formatCosts(v)}\n                            </Typography.Text>\n                          ),\n                          sorter: (a, b) => a.costs - b.costs,\n                          defaultSortOrder: 'descend',\n                          sortDirections: ['descend', 'ascend'],\n                        },\n                      ]}\n                      dataSource={tableData!}\n                    />\n                  )}\n                </ServerAPIProvider>\n              </Card>\n            </Col>\n          </Row>\n        )}\n      </Drawer>\n    </Row>\n  );\n};\n"],"names":["ADDITION_LOADER_NUMBER","LoaderFiles","props","cwd","filetree","drawerVisible","setDrawerVisible","useState","resourcePath","setResourcePath","loaderIndex","setLoaderIndex","selectedNode","setSelectedNode","maxHeight","filteredFiles","useMemo","e","l","filterLoader","inlinedResourcePathKey","files","createFileStructures","file","basename","loaders","layer","additionalLoaders","i","styles","Keyword","Divider","Tag","Space","isError","key","Tooltip","ev","Typography","CloseCircleOutlined","formatCosts","Popover","List","_dir","defaultTitle","Row","Size","Col","Card","FileTree","mapFileKey","node","get","isNodeModules","_e","info","undefined","Drawer","drawerWidth","ServerAPIProvider","SDK","data","LoaderExecutions","React","tableData","Table","v","a","b"],"mappings":"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"}

package/dist/components/Loader/Analysis/style_module.css

@@ -39,7 +39,7 @@
 }
 
 .divider-hnPRxv {
-  border-color: #0000001f;
+  border-color: var(--color-divider);
   margin: auto;
   position: relative;
   top: 50%;
@@ -55,15 +55,10 @@
 }
 
 .textBox-sVZZ_A {
-  color: #000000d9;
-  background-color: #fafafa;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
   justify-content: center;
   align-items: center;
   max-width: 320px;
   height: 22px;
-  padding: 1px 8px;
   display: flex;
 }
 
@@ -86,27 +81,31 @@
   display: flex;
 }
 
-.executions-uZxmQC .timeline-wMFXyU .box-lFdvrG:active {
-  background-color: #f2f8ff;
-  border: 1px solid #0079ff;
-}
-
 .executions-uZxmQC .timeline-wMFXyU .box-lFdvrG .ant-typography {
-  color: #000000a6;
   font-size: 14px;
 }
 
 .executions-uZxmQC .timeline-wMFXyU .box-lFdvrG .loader-PHR4ca {
-  color: inherit;
   align-content: center;
   height: 72px;
   font-size: 14px;
 }
 
 .executions-uZxmQC .timeline-wMFXyU .selected-wUMOH3 {
-  background-color: #f2f8ff;
+  --bg: #f2f8ff;
+  background-color: var(--bg);
   border: 1px solid #0079ff;
 }
 
+.executions-uZxmQC .timeline-wMFXyU .selected-wUMOH3 * {
+  color: #000;
+}
+
+@supports (color: contrast-color(red)) {
+  .executions-uZxmQC .timeline-wMFXyU .selected-wUMOH3 * {
+    color: contrast-color(var(--bg));
+  }
+}
+
 
 /*# sourceMappingURL=style_module.css.map */

package/dist/components/Loader/Analysis/style_module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./src/components/Loader/Analysis/style.module.scss"],"names":[],"mappings":"AAAA;EACE,gBAAgB;AAClB;;AAFiD;EAK/C,mBAAmB;EACnB,gBAAgB;EAChB,aAAa;AACf;;AARoJ;EAWlJ,YAAY;EACZ,cAAc;EACd,aAAa;AACf;;AAd8P;EAiB5P,eAAe;EACf,YAAY;EACZ,cAAc;AAChB;;AApB4W;EAuB1W,gBAAgB;EAChB,iBAAiB;EACjB,cAAc;AAChB;;AA1B2e;EA6Bze,OAAO;EACP,YAAY;AACd;;AA/B+kB;EAkC7kB,OAAO;EACP,iBAAiB;EACjB,kBAAkB;EAClB,kBAAkB;AACpB;;AAtCupB;EAyCrpB,uBAAuB;EACvB,YAAY;EACZ,kBAAkB;EAClB,QAAQ;AACV;;AA7CmuB;EAgDjuB,cAAc;AAChB;;AAjDsvB;EAoDpvB,UAAU;EACV,kBAAkB;AACpB;;AAtDkyB;EAyDhyB,gBAAgB;EAChB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;EAClB,uBAAuB;EACvB,mBAAmB;EACnB,gBAAgB;EAChB,YAAY;EACZ,gBAAgB;EAChB,aAAa;AACf;;AAnEg/B;EAsE9+B,eAAe;EACf,gBAAgB;AAClB;;AAxE8hC;EA2E5hC,aAAa;AACf;;AA5E0kC;EA+ExkC,yBAAyB;EACzB,kBAAkB;EAClB,sBAAsB;EACtB,UAAU;EACV,YAAY;EACZ,aAAa;EACb,aAAa;AACf;;AAtFstC;EAyFptC,yBAAyB;EACzB,yBAAyB;AAC3B;;AA3F0yC;EA8FxyC,gBAAgB;EAChB,eAAe;AACjB;;AAhGk4C;EAmGh4C,cAAc;EACd,qBAAqB;EACrB,YAAY;EACZ,eAAe;AACjB;;AAvGm+C;EA0Gj+C,yBAAyB;EACzB,yBAAyB;AAC3B","sourcesContent":[".loaderAnalysis :global .rc-tree{min-width:900px}.loaderAnalysis :global .rc-tree .rc-tree-treenode{display:flex;align-items:center;min-height:30px}.loaderAnalysis :global .rc-tree .rc-tree-treenode .rc-tree-indent{display:flex;flex-shrink:0;flex-grow:0}.loaderAnalysis :global .rc-tree .rc-tree-treenode .rc-tree-switcher{flex-shrink:0;flex-grow:0;cursor:pointer}.loaderAnalysis :global .rc-tree .rc-tree-treenode .rc-tree-switcher .file-icon{display:block;margin-left:8px;line-height:14px}.loaderAnalysis :global .rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{flex:1;min-width:0}.dividerDiv{flex:1;margin-left:10px;margin-right:10px;position:relative}.divider{border-color:rgba(0,0,0,.12);top:50%;margin:auto;position:relative}.box{flex-shrink:0}.box .keyword{flex:0 0 auto;padding-right:5}.textBox{max-width:320px;color:rgba(0,0,0,.85);height:22px;border:1px #d9d9d9 solid;justify-content:center;display:flex;padding:1px 8px 1px 8px;align-items:center;border-radius:2px;background-color:#fafafa}.textBox .text{font-size:12px;font-weight:400}.space :global .ant-space-item{display:flex}.executions .timeline .box{border:1px solid #eaedf1;border-radius:8px;width:80%;height:74px;display:flex;flex-direction:column;padding:16px}.executions .timeline .box:active{background-color:#f2f8ff;border:1px solid #0079ff}.executions .timeline .box :global .ant-typography{color:rgba(0,0,0,.65);font-size:14px}.executions .timeline .box .loader{color:inherit;font-size:14px;height:72px;align-content:center}.executions .timeline .selected{background-color:#f2f8ff;border:1px solid #0079ff}"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./src/components/Loader/Analysis/style.module.scss"],"names":[],"mappings":"AAAA;EACE,gBAAgB;AAClB;;AAFiD;EAK/C,mBAAmB;EACnB,gBAAgB;EAChB,aAAa;AACf;;AARoJ;EAWlJ,YAAY;EACZ,cAAc;EACd,aAAa;AACf;;AAd8P;EAiB5P,eAAe;EACf,YAAY;EACZ,cAAc;AAChB;;AApB4W;EAuB1W,gBAAgB;EAChB,iBAAiB;EACjB,cAAc;AAChB;;AA1B2e;EA6Bze,OAAO;EACP,YAAY;AACd;;AA/B+kB;EAkC7kB,OAAO;EACP,iBAAiB;EACjB,kBAAkB;EAClB,kBAAkB;AACpB;;AAtCupB;EAyCrpB,kCAAkC;EAClC,YAAY;EACZ,kBAAkB;EAClB,QAAQ;AACV;;AA7CwuB;EAgDtuB,cAAc;AAChB;;AAjD2vB;EAoDzvB,UAAU;EACV,kBAAkB;AACpB;;AAtDuyB;EAyDryB,uBAAuB;EACvB,mBAAmB;EACnB,gBAAgB;EAChB,YAAY;EACZ,aAAa;AACf;;AA9Dm4B;EAiEj4B,eAAe;EACf,gBAAgB;AAClB;;AAnEi7B;EAsE/6B,aAAa;AACf;;AAvE69B;EA0E39B,yBAAyB;EACzB,kBAAkB;EAClB,sBAAsB;EACtB,UAAU;EACV,YAAY;EACZ,aAAa;EACb,aAAa;AACf;;AAjFymC;EAoFvmC,eAAe;AACjB;;AArF2qC;EAwFzqC,qBAAqB;EACrB,YAAY;EACZ,eAAe;AACjB;;AA3F8vC;EA8F5vC,aAAa;EACb,2BAA2B;EAC3B,yBAAyB;AAC3B;;AAjGg2C;EAoG91C,WAAW;AACb;;AArG64C;EAAsC;IAyG/6C,gCAAgC;EAClC;AACF","sourcesContent":[".loaderAnalysis :global .rc-tree{min-width:900px}.loaderAnalysis :global .rc-tree .rc-tree-treenode{display:flex;align-items:center;min-height:30px}.loaderAnalysis :global .rc-tree .rc-tree-treenode .rc-tree-indent{display:flex;flex-shrink:0;flex-grow:0}.loaderAnalysis :global .rc-tree .rc-tree-treenode .rc-tree-switcher{flex-shrink:0;flex-grow:0;cursor:pointer}.loaderAnalysis :global .rc-tree .rc-tree-treenode .rc-tree-switcher .file-icon{display:block;margin-left:8px;line-height:14px}.loaderAnalysis :global .rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{flex:1;min-width:0}.dividerDiv{flex:1;margin-left:10px;margin-right:10px;position:relative}.divider{border-color:var(--color-divider);top:50%;margin:auto;position:relative}.box{flex-shrink:0}.box .keyword{flex:0 0 auto;padding-right:5}.textBox{max-width:320px;height:22px;justify-content:center;display:flex;align-items:center}.textBox .text{font-size:12px;font-weight:400}.space :global .ant-space-item{display:flex}.executions .timeline .box{border:1px solid #eaedf1;border-radius:8px;width:80%;height:74px;display:flex;flex-direction:column;padding:16px}.executions .timeline .box :global .ant-typography{font-size:14px}.executions .timeline .box .loader{font-size:14px;height:72px;align-content:center}.executions .timeline .selected{--bg: #f2f8ff;background-color:var(--bg);border:1px solid #0079ff}.executions .timeline .selected *{color:#000}@supports(color: contrast-color(red)){.executions .timeline .selected *{color:contrast-color(var(--bg))}}"],"sourceRoot":""}

package/dist/components/Loader/executions.mjs

@@ -15,6 +15,7 @@ import { CodeOpener } from "../Opener/index.mjs";
 import { Title } from "../Title/index.mjs";
 import { ServerAPIProvider } from "../Manifest/index.mjs";
 import style_module from "./Analysis/style.module.mjs";
+import clsx from "clsx";
 const LoaderPropsItem = ({ loader, resource, cwd })=>/*#__PURE__*/ jsx(Card, {
         title: 'Loader Details',
         style: {
@@ -280,8 +281,7 @@ const LoaderDetailsContent = ({ loader, resource, isLight, codeData })=>{
 const LoaderExecutions = ({ data, cwd, index })=>{
     const { loaders, resource } = data;
     const [currentIndex, setCurrentIndex] = useState(index || 0);
-    const { theme } = useTheme();
-    const isLight = 'light' === theme;
+    const { isLight } = useTheme();
     const loader = loaders[currentIndex];
     const leftSpan = 5;
     const [activeKey, setActiveKey] = useState('loaderDetails');
@@ -297,7 +297,7 @@ const LoaderExecutions = ({ data, cwd, index })=>{
             /*#__PURE__*/ jsx(Col, {
                 span: leftSpan,
                 style: {
-                    borderRight: isLight ? "1px solid #f0f0f0" : void 0,
+                    borderRight: "1px solid var(--color-border-secondary)",
                     padding: Size.BasePadding
                 },
                 children: /*#__PURE__*/ jsxs(Space, {
@@ -344,7 +344,7 @@ const LoaderExecutions = ({ data, cwd, index })=>{
                                                     title: loader,
                                                     trigger: "hover",
                                                     children: /*#__PURE__*/ jsxs("div", {
-                                                        className: `${style_module.box} ${currentIndex === i ? style_module.selected : ''}`,
+                                                        className: clsx(style_module.box, currentIndex === i && style_module.selected),
                                                         onClick: ()=>{
                                                             setCurrentIndex(i);
                                                         },
@@ -355,24 +355,16 @@ const LoaderExecutions = ({ data, cwd, index })=>{
                                                             /*#__PURE__*/ jsxs("div", {
                                                                 children: [
                                                                     /*#__PURE__*/ jsx(Typography.Text, {
-                                                                        style: {
-                                                                            color: '#000'
-                                                                        },
                                                                         children: costs.match(/[0-9]*\.?[0-9]+/g)?.[0]
                                                                     }),
                                                                     " ",
                                                                     /*#__PURE__*/ jsx(Typography.Text, {
-                                                                        style: {
-                                                                            color: 'rgba(0,0,0,0.45)'
-                                                                        },
+                                                                        type: "secondary",
                                                                         children: costs.match(/[a-zA-Z]+/g)
                                                                     })
                                                                 ]
                                                             }),
                                                             /*#__PURE__*/ jsx(Typography.Text, {
-                                                                style: {
-                                                                    color: 'rgba(0,0,0,0.65)'
-                                                                },
                                                                 className: style_module.loader,
                                                                 children: loader
                                                             })