@rsdoctor/components 1.6.0 → 1.6.1

package/dist/components/Charts/treeMapSize.test.mjs

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "@rstest/core";
+import { calculateTreeNodeTotalSize, calculateTreeNodesTotalSize } from "./treeMapSize.mjs";
+describe('treeMapSize', ()=>{
+    it('uses the asset size instead of summing module sizes', ()=>{
+        expect(calculateTreeNodeTotalSize({
+            gzipSize: 100,
+            children: [
+                {
+                    gzipSize: 40
+                },
+                {
+                    gzipSize: 50
+                }
+            ]
+        }, 'gzip')).toBe(100);
+    });
+    it('sums children when a directory has no own size', ()=>{
+        expect(calculateTreeNodeTotalSize({
+            children: [
+                {
+                    bundledSize: 40
+                },
+                {
+                    bundledSize: 50
+                }
+            ]
+        }, 'parsed')).toBe(90);
+    });
+    it('sums all visible assets using the selected size type', ()=>{
+        expect(calculateTreeNodesTotalSize([
+            {
+                gzipSize: 100
+            },
+            {
+                gzipSize: 25
+            },
+            {
+                gzipSize: 5
+            }
+        ], 'gzip')).toBe(130);
+    });
+});
+
+//# sourceMappingURL=treeMapSize.test.mjs.map

package/dist/components/Charts/treeMapSize.test.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Charts/treeMapSize.test.mjs","sources":["../../../src/components/Charts/treeMapSize.test.ts"],"sourcesContent":["import { describe, expect, it } from '@rstest/core';\nimport {\n  calculateTreeNodeTotalSize,\n  calculateTreeNodesTotalSize,\n} from './treeMapSize';\n\ndescribe('treeMapSize', () => {\n  it('uses the asset size instead of summing module sizes', () => {\n    expect(\n      calculateTreeNodeTotalSize(\n        {\n          gzipSize: 100,\n          children: [{ gzipSize: 40 }, { gzipSize: 50 }],\n        },\n        'gzip',\n      ),\n    ).toBe(100);\n  });\n\n  it('sums children when a directory has no own size', () => {\n    expect(\n      calculateTreeNodeTotalSize(\n        {\n          children: [{ bundledSize: 40 }, { bundledSize: 50 }],\n        },\n        'parsed',\n      ),\n    ).toBe(90);\n  });\n\n  it('sums all visible assets using the selected size type', () => {\n    expect(\n      calculateTreeNodesTotalSize(\n        [{ gzipSize: 100 }, { gzipSize: 25 }, { gzipSize: 5 }],\n        'gzip',\n      ),\n    ).toBe(130);\n  });\n});\n"],"names":["describe","it","expect","calculateTreeNodeTotalSize","calculateTreeNodesTotalSize"],"mappings":";;AAMAA,SAAS,eAAe;IACtBC,GAAG,uDAAuD;QACxDC,OACEC,2BACE;YACE,UAAU;YACV,UAAU;gBAAC;oBAAE,UAAU;gBAAG;gBAAG;oBAAE,UAAU;gBAAG;aAAE;QAChD,GACA,SAEF,IAAI,CAAC;IACT;IAEAF,GAAG,kDAAkD;QACnDC,OACEC,2BACE;YACE,UAAU;gBAAC;oBAAE,aAAa;gBAAG;gBAAG;oBAAE,aAAa;gBAAG;aAAE;QACtD,GACA,WAEF,IAAI,CAAC;IACT;IAEAF,GAAG,wDAAwD;QACzDC,OACEE,4BACE;YAAC;gBAAE,UAAU;YAAI;YAAG;gBAAE,UAAU;YAAG;YAAG;gBAAE,UAAU;YAAE;SAAE,EACtD,SAEF,IAAI,CAAC;IACT;AACF"}

package/dist/components/Layout/header.mjs

@@ -1,17 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { TranslationOutlined } from "@ant-design/icons";
-import { Col, Dropdown, Layout, Row, Switch } from "antd";
+import { Client } from "@rsdoctor/types";
+import { Button, Col, Dropdown, Layout, Row, Switch } from "antd";
 import "react";
+import { useNavigate } from "react-router-dom";
 import { Language, Theme } from "../../constants.mjs";
 import { useI18n, useTheme } from "../../utils/index.mjs";
 import { OverlayAlertsWithButton } from "../Alerts/index.mjs";
 import { BuilderSelect } from "./builder-select.mjs";
 import { Menus } from "./menus.mjs";
-import { Client } from "@rsdoctor/types";
-import { useNavigate } from "react-router-dom";
 import header_module from "./header.module.mjs";
-import rsdoctor_title_logo_dark from "./rsdoctor-title-logo-dark.mjs";
 const logoLight = 'https://assets.rspack.rs/rsdoctor/rsdoctor-title-logo.png';
+const logoDark = 'https://assets.rspack.rs/rsdoctor/rsdoctor-logo-dark.png';
 const Header = ({ enableRoutes })=>{
     const { i18n } = useI18n();
     const navigate = useNavigate();
@@ -36,16 +36,22 @@ const Header = ({ enableRoutes })=>{
                     children: /*#__PURE__*/ jsxs("div", {
                         className: header_module.leftColInner,
                         children: [
-                            /*#__PURE__*/ jsx("img", {
-                                width: "1604",
-                                height: "380",
-                                src: isLight ? logoLight : rsdoctor_title_logo_dark,
-                                className: header_module.rsdoctorLogo,
-                                alt: "logo",
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: header_module.logoButton,
+                                "aria-label": "Go to Rsdoctor home",
                                 onClick: ()=>{
                                     if (location.hash.includes(Client.RsdoctorClientRoutes.Uploader) && location.pathname.includes('/preview')) location.href = 'http://rsdoctor.rs';
                                     else navigate(Client.RsdoctorClientRoutes.Home);
-                                }
+                                },
+                                children: /*#__PURE__*/ jsx("img", {
+                                    width: "1604",
+                                    height: "380",
+                                    src: isLight ? logoLight : logoDark,
+                                    className: header_module.rsdoctorLogo,
+                                    alt: "Rsdoctor",
+                                    draggable: false
+                                })
                             }),
                             /*#__PURE__*/ jsx(BuilderSelect, {})
                         ]
@@ -66,16 +72,13 @@ const Header = ({ enableRoutes })=>{
                             }),
                             /*#__PURE__*/ jsx(Col, {
                                 children: /*#__PURE__*/ jsx(Switch, {
-                                    className: "header-switch",
+                                    className: header_module.themeSwitch,
+                                    "aria-label": isDark ? 'Use light theme' : 'Use dark theme',
                                     checkedChildren: "\uD83C\uDF1B",
                                     unCheckedChildren: "\uD83C\uDF1E",
                                     checked: isDark,
                                     onChange: (checked)=>{
                                         setTheme(checked ? Theme.Dark : Theme.Light);
-                                    },
-                                    style: {
-                                        border: `1px solid ${isLight ? '#ddd' : '#fff'}`,
-                                        background: isLight ? '#eee' : '#141414'
                                     }
                                 })
                             }),
@@ -96,8 +99,11 @@ const Header = ({ enableRoutes })=>{
                                             i18n.language
                                         ]
                                     },
-                                    children: /*#__PURE__*/ jsx(TranslationOutlined, {
-                                        className: header_module.translationsIcon
+                                    children: /*#__PURE__*/ jsx(Button, {
+                                        type: "text",
+                                        className: header_module.utilityButton,
+                                        "aria-label": "Change language",
+                                        icon: /*#__PURE__*/ jsx(TranslationOutlined, {})
                                     })
                                 })
                             })

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

@@ -1 +1 @@
-{"version":3,"file":"components/Layout/header.mjs","sources":["../../../src/components/Layout/header.tsx"],"sourcesContent":["import { TranslationOutlined } from '@ant-design/icons';\nimport { Col, Dropdown, Layout, Row, Switch } from 'antd';\nimport React from 'react';\nimport { Language, Theme } from '../../constants';\nimport { useI18n, useTheme } from '../../utils';\nimport { OverlayAlertsWithButton } from '../Alerts';\nimport { BuilderSelect } from './builder-select';\nimport { Menus } from './menus';\nimport { Client } from '@rsdoctor/types';\nimport { useNavigate } from 'react-router-dom';\nimport styles from './header.module.scss';\nimport logoDark from './rsdoctor-title-logo-dark.png';\nconst logoLight = 'https://assets.rspack.rs/rsdoctor/rsdoctor-title-logo.png';\n\nexport interface HeaderProps {\n  enableRoutes?: string[];\n}\n\nexport const Header: React.FC<HeaderProps> = ({ enableRoutes }) => {\n  const { i18n } = useI18n();\n\n  const navigate = useNavigate();\n  const { setTheme, isLight, isDark } = useTheme();\n  const languages = [\n    { value: Language.Cn, label: '中文' },\n    { value: Language.En, label: 'English' },\n  ];\n\n  return (\n    <Layout.Header className={styles.root}>\n      <Row className={styles.innerRoot}>\n        <Col className={styles.leftCol}>\n          <div className={styles.leftColInner}>\n            <img\n              width=\"1604\"\n              height=\"380\"\n              src={isLight ? logoLight : logoDark}\n              className={styles.rsdoctorLogo}\n              alt=\"logo\"\n              onClick={() => {\n                if (\n                  location.hash.includes(\n                    Client.RsdoctorClientRoutes.Uploader,\n                  ) &&\n                  location.pathname.includes('/preview')\n                ) {\n                  location.href = 'http://rsdoctor.rs';\n                } else {\n                  navigate(Client.RsdoctorClientRoutes.Home);\n                }\n              }}\n            />\n            <BuilderSelect />\n          </div>\n        </Col>\n        <Menus\n          key={enableRoutes ? JSON.stringify(enableRoutes) : 'default'}\n          style={{ transition: 'none' }}\n        />\n\n        <Col className={styles.rightCol}>\n          <Row className={styles.rightColInner}>\n            <Col>\n              <OverlayAlertsWithButton />\n            </Col>\n\n            <Col>\n              <Switch\n                className=\"header-switch\"\n                checkedChildren=\"🌛\"\n                unCheckedChildren=\"🌞\"\n                checked={isDark}\n                onChange={(checked) => {\n                  setTheme(checked ? Theme.Dark : Theme.Light);\n                }}\n                style={{\n                  border: `1px solid ${isLight ? '#ddd' : '#fff'}`,\n                  background: isLight ? '#eee' : '#141414',\n                }}\n              />\n            </Col>\n            <Col>\n              <Dropdown\n                overlayStyle={{ zIndex: 1000 }}\n                menu={{\n                  items: languages.map((e) => ({\n                    label: e.label,\n                    key: e.value,\n                    onClick() {\n                      i18n.changeLanguage(e.value);\n                    },\n                  })),\n                  selectedKeys: [i18n.language],\n                }}\n              >\n                <TranslationOutlined className={styles.translationsIcon} />\n              </Dropdown>\n            </Col>\n          </Row>\n        </Col>\n      </Row>\n    </Layout.Header>\n  );\n};\n"],"names":["logoLight","Header","enableRoutes","i18n","useI18n","navigate","useNavigate","setTheme","isLight","isDark","useTheme","languages","Language","Layout","styles","Row","Col","logoDark","location","Client","BuilderSelect","Menus","JSON","OverlayAlertsWithButton","Switch","checked","Theme","Dropdown","e","TranslationOutlined"],"mappings":";;;;;;;;;;;;;AAYA,MAAMA,YAAY;AAMX,MAAMC,SAAgC,CAAC,EAAEC,YAAY,EAAE;IAC5D,MAAM,EAAEC,IAAI,EAAE,GAAGC;IAEjB,MAAMC,WAAWC;IACjB,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,MAAM,EAAE,GAAGC;IACtC,MAAMC,YAAY;QAChB;YAAE,OAAOC,SAAS,EAAE;YAAE,OAAO;QAAK;QAClC;YAAE,OAAOA,SAAS,EAAE;YAAE,OAAO;QAAU;KACxC;IAED,OAAO,WAAP,GACE,IAACC,OAAO,MAAM;QAAC,WAAWC,cAAAA,IAAW;kBACnC,mBAACC,KAAGA;YAAC,WAAWD,cAAAA,SAAgB;;8BAC9B,IAACE,KAAGA;oBAAC,WAAWF,cAAAA,OAAc;8BAC5B,mBAAC;wBAAI,WAAWA,cAAAA,YAAmB;;0CACjC,IAAC;gCACC,OAAM;gCACN,QAAO;gCACP,KAAKN,UAAUR,YAAYiB;gCAC3B,WAAWH,cAAAA,YAAmB;gCAC9B,KAAI;gCACJ,SAAS;oCACP,IACEI,SAAS,IAAI,CAAC,QAAQ,CACpBC,OAAO,oBAAoB,CAAC,QAAQ,KAEtCD,SAAS,QAAQ,CAAC,QAAQ,CAAC,aAE3BA,SAAS,IAAI,GAAG;yCAEhBb,SAASc,OAAO,oBAAoB,CAAC,IAAI;gCAE7C;;0CAEF,IAACC,eAAaA,CAAAA;;;;8BAGlB,IAACC,OAAKA;oBAEJ,OAAO;wBAAE,YAAY;oBAAO;mBADvBnB,eAAeoB,KAAK,SAAS,CAACpB,gBAAgB;8BAIrD,IAACc,KAAGA;oBAAC,WAAWF,cAAAA,QAAe;8BAC7B,mBAACC,KAAGA;wBAAC,WAAWD,cAAAA,aAAoB;;0CAClC,IAACE,KAAGA;0CACF,kBAACO,yBAAuBA,CAAAA;;0CAG1B,IAACP,KAAGA;0CACF,kBAACQ,QAAMA;oCACL,WAAU;oCACV,iBAAgB;oCAChB,mBAAkB;oCAClB,SAASf;oCACT,UAAU,CAACgB;wCACTlB,SAASkB,UAAUC,MAAM,IAAI,GAAGA,MAAM,KAAK;oCAC7C;oCACA,OAAO;wCACL,QAAQ,CAAC,UAAU,EAAElB,UAAU,SAAS,QAAQ;wCAChD,YAAYA,UAAU,SAAS;oCACjC;;;0CAGJ,IAACQ,KAAGA;0CACF,kBAACW,UAAQA;oCACP,cAAc;wCAAE,QAAQ;oCAAK;oCAC7B,MAAM;wCACJ,OAAOhB,UAAU,GAAG,CAAC,CAACiB,IAAO;gDAC3B,OAAOA,EAAE,KAAK;gDACd,KAAKA,EAAE,KAAK;gDACZ;oDACEzB,KAAK,cAAc,CAACyB,EAAE,KAAK;gDAC7B;4CACF;wCACA,cAAc;4CAACzB,KAAK,QAAQ;yCAAC;oCAC/B;8CAEA,kBAAC0B,qBAAmBA;wCAAC,WAAWf,cAAAA,gBAAuB;;;;;;;;;;AAQvE"}
+{"version":3,"file":"components/Layout/header.mjs","sources":["../../../src/components/Layout/header.tsx"],"sourcesContent":["import { TranslationOutlined } from '@ant-design/icons';\nimport { Client } from '@rsdoctor/types';\nimport { Button, Col, Dropdown, Layout, Row, Switch } from 'antd';\nimport React from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Language, Theme } from '../../constants';\nimport { useI18n, useTheme } from '../../utils';\nimport { OverlayAlertsWithButton } from '../Alerts';\nimport { BuilderSelect } from './builder-select';\nimport { Menus } from './menus';\nimport styles from './header.module.scss';\n\nconst logoLight = 'https://assets.rspack.rs/rsdoctor/rsdoctor-title-logo.png';\nconst logoDark = 'https://assets.rspack.rs/rsdoctor/rsdoctor-logo-dark.png';\n\nexport interface HeaderProps {\n  enableRoutes?: string[];\n}\n\nexport const Header: React.FC<HeaderProps> = ({ enableRoutes }) => {\n  const { i18n } = useI18n();\n\n  const navigate = useNavigate();\n  const { setTheme, isLight, isDark } = useTheme();\n  const languages = [\n    { value: Language.Cn, label: '中文' },\n    { value: Language.En, label: 'English' },\n  ];\n\n  return (\n    <Layout.Header className={styles.root}>\n      <Row className={styles.innerRoot}>\n        <Col className={styles.leftCol}>\n          <div className={styles.leftColInner}>\n            <button\n              type=\"button\"\n              className={styles.logoButton}\n              aria-label=\"Go to Rsdoctor home\"\n              onClick={() => {\n                if (\n                  location.hash.includes(\n                    Client.RsdoctorClientRoutes.Uploader,\n                  ) &&\n                  location.pathname.includes('/preview')\n                ) {\n                  location.href = 'http://rsdoctor.rs';\n                } else {\n                  navigate(Client.RsdoctorClientRoutes.Home);\n                }\n              }}\n            >\n              <img\n                width=\"1604\"\n                height=\"380\"\n                src={isLight ? logoLight : logoDark}\n                className={styles.rsdoctorLogo}\n                alt=\"Rsdoctor\"\n                draggable={false}\n              />\n            </button>\n            <BuilderSelect />\n          </div>\n        </Col>\n        <Menus\n          key={enableRoutes ? JSON.stringify(enableRoutes) : 'default'}\n          style={{ transition: 'none' }}\n        />\n\n        <Col className={styles.rightCol}>\n          <Row className={styles.rightColInner}>\n            <Col>\n              <OverlayAlertsWithButton />\n            </Col>\n\n            <Col>\n              <Switch\n                className={styles.themeSwitch}\n                aria-label={isDark ? 'Use light theme' : 'Use dark theme'}\n                checkedChildren=\"🌛\"\n                unCheckedChildren=\"🌞\"\n                checked={isDark}\n                onChange={(checked) => {\n                  setTheme(checked ? Theme.Dark : Theme.Light);\n                }}\n              />\n            </Col>\n            <Col>\n              <Dropdown\n                overlayStyle={{ zIndex: 1000 }}\n                menu={{\n                  items: languages.map((e) => ({\n                    label: e.label,\n                    key: e.value,\n                    onClick() {\n                      i18n.changeLanguage(e.value);\n                    },\n                  })),\n                  selectedKeys: [i18n.language],\n                }}\n              >\n                <Button\n                  type=\"text\"\n                  className={styles.utilityButton}\n                  aria-label=\"Change language\"\n                  icon={<TranslationOutlined />}\n                />\n              </Dropdown>\n            </Col>\n          </Row>\n        </Col>\n      </Row>\n    </Layout.Header>\n  );\n};\n"],"names":["logoLight","logoDark","Header","enableRoutes","i18n","useI18n","navigate","useNavigate","setTheme","isLight","isDark","useTheme","languages","Language","Layout","styles","Row","Col","location","Client","BuilderSelect","Menus","JSON","OverlayAlertsWithButton","Switch","checked","Theme","Dropdown","e","Button","TranslationOutlined"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,YAAY;AAClB,MAAMC,WAAW;AAMV,MAAMC,SAAgC,CAAC,EAAEC,YAAY,EAAE;IAC5D,MAAM,EAAEC,IAAI,EAAE,GAAGC;IAEjB,MAAMC,WAAWC;IACjB,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,MAAM,EAAE,GAAGC;IACtC,MAAMC,YAAY;QAChB;YAAE,OAAOC,SAAS,EAAE;YAAE,OAAO;QAAK;QAClC;YAAE,OAAOA,SAAS,EAAE;YAAE,OAAO;QAAU;KACxC;IAED,OAAO,WAAP,GACE,IAACC,OAAO,MAAM;QAAC,WAAWC,cAAAA,IAAW;kBACnC,mBAACC,KAAGA;YAAC,WAAWD,cAAAA,SAAgB;;8BAC9B,IAACE,KAAGA;oBAAC,WAAWF,cAAAA,OAAc;8BAC5B,mBAAC;wBAAI,WAAWA,cAAAA,YAAmB;;0CACjC,IAAC;gCACC,MAAK;gCACL,WAAWA,cAAAA,UAAiB;gCAC5B,cAAW;gCACX,SAAS;oCACP,IACEG,SAAS,IAAI,CAAC,QAAQ,CACpBC,OAAO,oBAAoB,CAAC,QAAQ,KAEtCD,SAAS,QAAQ,CAAC,QAAQ,CAAC,aAE3BA,SAAS,IAAI,GAAG;yCAEhBZ,SAASa,OAAO,oBAAoB,CAAC,IAAI;gCAE7C;0CAEA,kBAAC;oCACC,OAAM;oCACN,QAAO;oCACP,KAAKV,UAAUT,YAAYC;oCAC3B,WAAWc,cAAAA,YAAmB;oCAC9B,KAAI;oCACJ,WAAW;;;0CAGf,IAACK,eAAaA,CAAAA;;;;8BAGlB,IAACC,OAAKA;oBAEJ,OAAO;wBAAE,YAAY;oBAAO;mBADvBlB,eAAemB,KAAK,SAAS,CAACnB,gBAAgB;8BAIrD,IAACc,KAAGA;oBAAC,WAAWF,cAAAA,QAAe;8BAC7B,mBAACC,KAAGA;wBAAC,WAAWD,cAAAA,aAAoB;;0CAClC,IAACE,KAAGA;0CACF,kBAACM,yBAAuBA,CAAAA;;0CAG1B,IAACN,KAAGA;0CACF,kBAACO,QAAMA;oCACL,WAAWT,cAAAA,WAAkB;oCAC7B,cAAYL,SAAS,oBAAoB;oCACzC,iBAAgB;oCAChB,mBAAkB;oCAClB,SAASA;oCACT,UAAU,CAACe;wCACTjB,SAASiB,UAAUC,MAAM,IAAI,GAAGA,MAAM,KAAK;oCAC7C;;;0CAGJ,IAACT,KAAGA;0CACF,kBAACU,UAAQA;oCACP,cAAc;wCAAE,QAAQ;oCAAK;oCAC7B,MAAM;wCACJ,OAAOf,UAAU,GAAG,CAAC,CAACgB,IAAO;gDAC3B,OAAOA,EAAE,KAAK;gDACd,KAAKA,EAAE,KAAK;gDACZ;oDACExB,KAAK,cAAc,CAACwB,EAAE,KAAK;gDAC7B;4CACF;wCACA,cAAc;4CAACxB,KAAK,QAAQ;yCAAC;oCAC/B;8CAEA,kBAACyB,QAAMA;wCACL,MAAK;wCACL,WAAWd,cAAAA,aAAoB;wCAC/B,cAAW;wCACX,oBAAM,IAACe,qBAAmBA,CAAAA;;;;;;;;;;AAS5C"}

package/dist/components/Layout/header.module.mjs

@@ -4,10 +4,14 @@ const header_module = {
     innerRoot: "innerRoot-b2vAK8",
     leftCol: "leftCol-n3WyJ5",
     leftColInner: "leftColInner-AB1JiD",
+    logoButton: "logoButton-TKslN_",
     rightCol: "rightCol-jgHpb9",
     rightColInner: "rightColInner-nINgMT",
     rsdoctorLogo: "rsdoctorLogo-O30iKB",
-    translationsIcon: "translationsIcon-eK7oMQ"
+    menuContainer: "menuContainer-teTlDu",
+    primaryMenu: "primaryMenu-gMpDIg",
+    themeSwitch: "themeSwitch-qaSSKB",
+    utilityButton: "utilityButton-_PCcZS"
 };
 export default header_module;
 

package/dist/components/Layout/header.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Layout/header.module.mjs","sources":["../../../src/components/Layout/header.module.scss"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./header_module.css\"\nexport default {\"root\":\"root-nAtwJx\",\"innerRoot\":\"innerRoot-b2vAK8\",\"leftCol\":\"leftCol-n3WyJ5\",\"leftColInner\":\"leftColInner-AB1JiD\",\"rightCol\":\"rightCol-jgHpb9\",\"rightColInner\":\"rightColInner-nINgMT\",\"rsdoctorLogo\":\"rsdoctorLogo-O30iKB\",\"translationsIcon\":\"translationsIcon-eK7oMQ\"};"],"names":[],"mappings":";AAEA,sBAAe;IAAC,MAAO;IAAc,WAAY;IAAmB,SAAU;IAAiB,cAAe;IAAsB,UAAW;IAAkB,eAAgB;IAAuB,cAAe;IAAsB,kBAAmB;AAAyB"}
+{"version":3,"file":"components/Layout/header.module.mjs","sources":["../../../src/components/Layout/header.module.scss"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./header_module.css\"\nexport default {\"root\":\"root-nAtwJx\",\"innerRoot\":\"innerRoot-b2vAK8\",\"leftCol\":\"leftCol-n3WyJ5\",\"leftColInner\":\"leftColInner-AB1JiD\",\"logoButton\":\"logoButton-TKslN_\",\"rightCol\":\"rightCol-jgHpb9\",\"rightColInner\":\"rightColInner-nINgMT\",\"rsdoctorLogo\":\"rsdoctorLogo-O30iKB\",\"menuContainer\":\"menuContainer-teTlDu\",\"primaryMenu\":\"primaryMenu-gMpDIg\",\"themeSwitch\":\"themeSwitch-qaSSKB\",\"utilityButton\":\"utilityButton-_PCcZS\"};"],"names":[],"mappings":";AAEA,sBAAe;IAAC,MAAO;IAAc,WAAY;IAAmB,SAAU;IAAiB,cAAe;IAAsB,YAAa;IAAoB,UAAW;IAAkB,eAAgB;IAAuB,cAAe;IAAsB,eAAgB;IAAuB,aAAc;IAAqB,aAAc;IAAqB,eAAgB;AAAsB"}

package/dist/components/Layout/header_module.css

@@ -5,8 +5,10 @@
   padding: 0;
   padding-inline: var(--spacing-base);
   z-index: 999;
+  border-bottom: 1px solid var(--color-border-secondary);
   transition: none;
   position: fixed;
+  box-shadow: 0 8px 24px #00000014;
 }
 
 .root-nAtwJx .ant-switch-handle {
@@ -33,6 +35,21 @@
   display: flex;
 }
 
+.logoButton-TKslN_ {
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.logoButton-TKslN_:focus-visible {
+  outline-offset: 4px;
+  outline: 2px solid #2f81f7;
+}
+
 .rightCol-jgHpb9 {
   flex: 1;
 }
@@ -47,35 +64,72 @@
 }
 
 .rsdoctorLogo-O30iKB {
-  cursor: pointer;
+  object-fit: contain;
+  -webkit-user-select: none;
+  user-select: none;
   width: auto;
-  height: 30px;
+  height: 28px;
 }
 
 .rsdoctorLogo-O30iKB:active {
   opacity: .8;
 }
 
-.translationsIcon-eK7oMQ {
-  --color-active: #40a9ff;
-  --color-hover: #1668dc;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
+.menuContainer-teTlDu {
+  align-self: stretch;
+  margin-left: 24px;
+}
+
+.primaryMenu-gMpDIg {
+  background: none;
+  border-bottom: 0;
+}
+
+:is(.primaryMenu-gMpDIg .ant-menu-item, .primaryMenu-gMpDIg .ant-menu-submenu) {
+  margin-block: 5px;
+}
+
+.primaryMenu-gMpDIg .ant-menu-title-content {
+  font-weight: 500;
+}
+
+.themeSwitch-qaSSKB {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-box-elevated);
+}
+
+.themeSwitch-qaSSKB:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid #2f81f7;
+}
+
+.utilityButton-_PCcZS {
+  width: 32px;
+  height: 32px;
+  color: var(--text-color-secondary);
+  border-radius: var(--border-radius);
   -webkit-user-select: none;
   user-select: none;
-  width: 30px;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
   font-size: 20px;
-  transition: all .3s;
-  display: inline-block;
+  transition: color .2s, background-color .2s;
+  display: inline-flex;
+}
+
+.utilityButton-_PCcZS:hover {
+  color: var(--text-color);
+  background: var(--color-accent-subtle);
 }
 
-.translationsIcon-eK7oMQ:hover {
-  color: var(--color-hover);
+.utilityButton-_PCcZS:active {
+  color: #5b8ff9;
 }
 
-.translationsIcon-eK7oMQ:active {
-  color: var(--color-active);
+.utilityButton-_PCcZS:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid #2f81f7;
 }
 
 

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

@@ -1 +1 @@
-{"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":""}
+{"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,sDAAsD;EACtD,gBAAgB;EAChB,eAAe;EACf,gCAAgC;AAClC;;AAXmQ;EAcjQ,mBAAmB;AACrB;;AAfuT;EAkBrT,qBAAqB;EACrB,iBAAiB;EACjB,8BAA8B;EAC9B,mBAAmB;EACnB,aAAa;AACf;;AAvBsa;EA0Bpa,qBAAqB;EACrB,sCAAsC;AACxC;;AA5B0e;EA+Bxe,8BAA8B;EAC9B,mBAAmB;EACnB,YAAY;EACZ,aAAa;AACf;;AAnCkkB;EAsChkB,mCAAmC;EACnC,eAAe;EACf,gBAAgB;EAChB,SAAS;EACT,mBAAmB;EACnB,UAAU;EACV,oBAAoB;AACtB;;AA7CmtB;EAgDjtB,mBAAmB;EACnB,0BAA0B;AAC5B;;AAlD0xB;EAqDxxB,OAAO;AACT;;AAtD2yB;EAyDzyB,yBAAyB;EACzB,mBAAmB;EACnB,uCAAuC;EACvC,qBAAqB;EACrB,iBAAiB;EACjB,aAAa;AACf;;AA/Dg8B;EAkE97B,mBAAmB;EACnB,yBAAyB;EACzB,iBAAiB;EACjB,WAAW;EACX,YAAY;AACd;;AAvEygC;EA0EvgC,WAAW;AACb;;AA3EyiC;EA8EviC,mBAAmB;EACnB,iBAAiB;AACnB;;AAhF4lC;EAmF1lC,gBAAgB;EAChB,gBAAgB;AAClB;;AArFkpC;EAwFhpC,iBAAiB;AACnB;;AAzFgvC;EA4F9uC,gBAAgB;AAClB;;AA7F8yC;EAgG5yC,qCAAqC;EACrC,wCAAwC;AAC1C;;AAlGw4C;EAqGt4C,mBAAmB;EACnB,0BAA0B;AAC5B;;AAvGg9C;EA0G98C,WAAW;EACX,YAAY;EACZ,kCAAkC;EAClC,mCAAmC;EACnC,yBAAyB;EACzB,iBAAiB;EACjB,uBAAuB;EACvB,mBAAmB;EACnB,UAAU;EACV,eAAe;EACf,2CAA2C;EAC3C,oBAAoB;AACtB;;AAtHutD;EAyHrtD,wBAAwB;EACxB,sCAAsC;AACxC;;AA3H0yD;EA8HxyD,cAAc;AAChB;;AA/H80D;EAkI50D,mBAAmB;EACnB,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;border-bottom:1px solid var(--color-border-secondary);box-shadow:0 8px 24px rgba(0,0,0,.08)}.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%}.logoButton{display:inline-flex;align-items:center;padding:0;border:0;background:rgba(0,0,0,0);border-radius:var(--border-radius);cursor:pointer}.logoButton:focus-visible{outline:2px solid #2f81f7;outline-offset:4px}.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:28px;object-fit:contain;user-select:none}.rsdoctorLogo:active{opacity:.8}.menuContainer{align-self:stretch;margin-left:24px}.primaryMenu{background:rgba(0,0,0,0);border-bottom:0}.primaryMenu :global(.ant-menu-item),.primaryMenu :global(.ant-menu-submenu){margin-block:5px}.primaryMenu :global(.ant-menu-title-content){font-weight:500}.themeSwitch{border:1px solid var(--color-border);background:var(--color-bg-box-elevated)}.themeSwitch:focus-visible{outline:2px solid #2f81f7;outline-offset:2px}.utilityButton{display:inline-flex;align-items:center;justify-content:center;font-size:20px;width:32px;height:32px;padding:0;color:var(--text-color-secondary);border-radius:var(--border-radius);transition:color .2s ease,background-color .2s ease;user-select:none}.utilityButton:hover{color:var(--text-color);background:var(--color-accent-subtle)}.utilityButton:active{color:#5b8ff9}.utilityButton:focus-visible{outline:2px solid #2f81f7;outline-offset:2px}"],"sourceRoot":""}

package/dist/components/Layout/index.mjs

@@ -53,15 +53,22 @@ const Layout_Layout = (props)=>{
         const globalCssVars = {
             '--spacing-base': Size.BasePadding + 'px',
             '--layout-nav-height': showHeader ? Size.NavBarHeight + 'px' : '0px',
-            '--color-bg-main': MAIN_BG,
+            '--color-bg-main': isLight ? MAIN_BG : themeToken.colorBgLayout,
             '--color-bg-box': themeToken.colorBgContainer,
-            '--color-bg-box-elevated': themeToken.colorBgLayout,
+            '--color-bg-box-elevated': isLight ? themeToken.colorBgLayout : themeToken.colorBgElevated,
+            '--color-bg-box-subtle': isLight ? themeToken.colorBgContainer : '#0d1218',
             '--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,
+            '--text-color-muted': themeToken.colorTextTertiary,
+            '--color-accent-subtle': isLight ? '#e6f4ff' : 'rgba(47, 129, 247, 0.12)',
+            '--color-data-bundled': '#5b8ff9',
+            '--color-data-source': '#43c6d9',
+            '--color-data-gzip': '#f2b84b',
+            '--color-data-initial': '#43c6d9',
             '--border-radius': themeToken.borderRadius + 'px',
             '--border-radius-lg': themeToken.borderRadiusLG + 'px'
         };

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

@@ -1 +1 @@
-{"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"}
+{"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': isLight ? MAIN_BG : themeToken.colorBgLayout,\n      '--color-bg-box': themeToken.colorBgContainer,\n      '--color-bg-box-elevated': isLight\n        ? themeToken.colorBgLayout\n        : themeToken.colorBgElevated,\n      '--color-bg-box-subtle': isLight\n        ? themeToken.colorBgContainer\n        : '#0d1218',\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      '--text-color-muted': themeToken.colorTextTertiary,\n      '--color-accent-subtle': isLight ? '#e6f4ff' : 'rgba(47, 129, 247, 0.12)',\n      '--color-data-bundled': '#5b8ff9',\n      '--color-data-source': '#43c6d9',\n      '--color-data-gzip': '#f2b84b',\n      '--color-data-initial': '#43c6d9',\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,mBAAmBlC,UAAUmC,UAAUjC,WAAW,aAAa;YAC/D,kBAAkBA,WAAW,gBAAgB;YAC7C,2BAA2BF,UACvBE,WAAW,aAAa,GACxBA,WAAW,eAAe;YAC9B,yBAAyBF,UACrBE,WAAW,gBAAgB,GAC3B;YACJ,kBAAkBA,WAAW,WAAW;YACxC,4BAA4BA,WAAW,oBAAoB;YAC3D,mBAAmBA,WAAW,WAAW;YACzC,qBAAqBF,UACjB,uBACA;YACJ,gBAAgBE,WAAW,SAAS;YACpC,0BAA0BA,WAAW,kBAAkB;YACvD,sBAAsBA,WAAW,iBAAiB;YAClD,yBAAyBF,UAAU,YAAY;YAC/C,wBAAwB;YACxB,uBAAuB;YACvB,qBAAqB;YACrB,wBAAwB;YACxB,mBAAmBE,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

@@ -15,6 +15,7 @@ import bundle_size_active from "../../common/svg/navbar/bundle-size-active.mjs";
 import bundle_size_inactive from "../../common/svg/navbar/bundle-size-inactive.mjs";
 import { BundleSize, LoaderFiles, LoaderTimeline, ModuleResolve, PluginsAnalyze } from "../../pages/index.mjs";
 import { CompileName } from "./constants.mjs";
+import header_module from "./header.module.mjs";
 import * as __rspack_external__pages_Overall_constants_mjs_39667e8e from "../../pages/Overall/constants.mjs";
 const BuilderSwitchName = 'builder-switcher';
 const defaultInActive = {
@@ -113,21 +114,21 @@ const MenusBase = (props)=>{
         },
         disabledOverflow: true,
         overflowedIndicator: /*#__PURE__*/ jsx(MenuOutlined, {}),
+        className: header_module.primaryMenu,
         style: {
             height: Size.NavBarHeight,
             lineHeight: `${Size.NavBarHeight}px`,
             minWidth: 0,
-            justifyContent: 'flex-end',
+            justifyContent: 'flex-start',
             ...props.style
         },
         selectedKeys: [
             '/' === pathname ? __rspack_external__pages_Overall_constants_mjs_39667e8e.route : pathname
         ]
     }, enableRoutes.join(''));
-    return /*#__PURE__*/ jsx("div", {
-        style: {
-            marginLeft: '30px'
-        },
+    return /*#__PURE__*/ jsx("nav", {
+        className: header_module.menuContainer,
+        "aria-label": "Primary navigation",
         children: MenuComponent
     });
 };

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  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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"}
+{"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';\nimport styles from './header.module.scss';\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      className={styles.primaryMenu}\n      style={{\n        height: Size.NavBarHeight,\n        lineHeight: `${Size.NavBarHeight}px`,\n        minWidth: 0,\n        justifyContent: 'flex-start',\n        ...props.style,\n      }}\n      selectedKeys={[pathname === '/' ? OverallConstants.route : pathname]}\n    />\n  );\n\n  return (\n    <nav className={styles.menuContainer} aria-label=\"Primary navigation\">\n      {MenuComponent}\n    </nav>\n  );\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","styles","Size","Menus","withServerAPI","SDK"],"mappings":"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"}

package/dist/components/Overall/DataSummary.d.ts

@@ -1,5 +1,5 @@
 export interface DataSummaryProps {
-    theme: 'common' | 'warning';
+    theme: 'common' | 'size' | 'warning';
     number: string | number;
     onClick?: () => void;
     description: string;

package/dist/components/Overall/DataSummary.mjs

@@ -22,7 +22,7 @@ const DataSummary = ({ theme, number, description })=>/*#__PURE__*/ jsx(Alert, {
             ]
         }),
         className: DataSummary_module.container,
-        type: 'common' === theme ? 'info' : theme
+        type: 'warning' === theme ? 'warning' : 'info'
     });
 export { DataSummary };
 

package/dist/components/Overall/DataSummary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Overall/DataSummary.mjs","sources":["../../../src/components/Overall/DataSummary.tsx"],"sourcesContent":["import Icon from '@ant-design/icons';\nimport { Alert } from 'antd';\n\nimport TotalSizeSvg from '../../common/svg/total-size.svg';\nimport FileSvg from '../../common/svg/file.svg';\n\nimport styles from './DataSummary.module.scss';\n\nexport interface DataSummaryProps {\n  theme: 'common' | 'warning';\n  number: string | number;\n  onClick?: () => void;\n  description: string;\n  numberFontSize?: string;\n}\n\nexport const DataSummary = ({\n  theme,\n  number,\n  description,\n}: DataSummaryProps) => {\n  return (\n    <Alert\n      message={\n        <>\n          <Icon\n            className={styles.icon}\n            component={theme === 'common' ? FileSvg : TotalSizeSvg}\n          />\n          <span className={styles.description}>{description}</span>\n          <span className={styles.data}>{number}</span>\n        </>\n      }\n      className={styles.container}\n      type={theme === 'common' ? 'info' : theme}\n    ></Alert>\n  );\n};\n"],"names":["DataSummary","theme","number","description","Alert","Icon","styles","FileSvg","TotalSizeSvg"],"mappings":";;;;;;AAgBO,MAAMA,cAAc,CAAC,EAC1BC,KAAK,EACLC,MAAM,EACNC,WAAW,EACM,GACV,WAAP,GACE,IAACC,OAAKA;QACJ,uBACE;;8BACE,IAACC,OAAIA;oBACH,WAAWC,mBAAAA,IAAW;oBACtB,WAAWL,AAAU,aAAVA,QAAqBM,OAAUC;;8BAE5C,IAAC;oBAAK,WAAWF,mBAAAA,WAAkB;8BAAGH;;8BACtC,IAAC;oBAAK,WAAWG,mBAAAA,IAAW;8BAAGJ;;;;QAGnC,WAAWI,mBAAAA,SAAgB;QAC3B,MAAML,AAAU,aAAVA,QAAqB,SAASA"}
+{"version":3,"file":"components/Overall/DataSummary.mjs","sources":["../../../src/components/Overall/DataSummary.tsx"],"sourcesContent":["import Icon from '@ant-design/icons';\nimport { Alert } from 'antd';\n\nimport TotalSizeSvg from '../../common/svg/total-size.svg';\nimport FileSvg from '../../common/svg/file.svg';\n\nimport styles from './DataSummary.module.scss';\n\nexport interface DataSummaryProps {\n  theme: 'common' | 'size' | 'warning';\n  number: string | number;\n  onClick?: () => void;\n  description: string;\n  numberFontSize?: string;\n}\n\nexport const DataSummary = ({\n  theme,\n  number,\n  description,\n}: DataSummaryProps) => {\n  return (\n    <Alert\n      message={\n        <>\n          <Icon\n            className={styles.icon}\n            component={theme === 'common' ? FileSvg : TotalSizeSvg}\n          />\n          <span className={styles.description}>{description}</span>\n          <span className={styles.data}>{number}</span>\n        </>\n      }\n      className={styles.container}\n      type={theme === 'warning' ? 'warning' : 'info'}\n    ></Alert>\n  );\n};\n"],"names":["DataSummary","theme","number","description","Alert","Icon","styles","FileSvg","TotalSizeSvg"],"mappings":";;;;;;AAgBO,MAAMA,cAAc,CAAC,EAC1BC,KAAK,EACLC,MAAM,EACNC,WAAW,EACM,GACV,WAAP,GACE,IAACC,OAAKA;QACJ,uBACE;;8BACE,IAACC,OAAIA;oBACH,WAAWC,mBAAAA,IAAW;oBACtB,WAAWL,AAAU,aAAVA,QAAqBM,OAAUC;;8BAE5C,IAAC;oBAAK,WAAWF,mBAAAA,WAAkB;8BAAGH;;8BACtC,IAAC;oBAAK,WAAWG,mBAAAA,IAAW;8BAAGJ;;;;QAGnC,WAAWI,mBAAAA,SAAgB;QAC3B,MAAML,AAAU,cAAVA,QAAsB,YAAY"}

package/dist/components/Overall/DataSummary_module.css

@@ -1,4 +1,6 @@
 .container-ssAvLP {
+  border-color: var(--color-border-secondary);
+  background: var(--color-accent-subtle);
   height: 40px;
   margin: 10px 0 20px;
   padding: 10px 20px 10px 5px;
@@ -16,13 +18,16 @@
 }
 
 .container-ssAvLP .description-Ik1PO7 {
+  color: var(--text-color-secondary);
   margin-right: 5px;
   font-weight: 400;
   line-height: 20px;
 }
 
 .container-ssAvLP .data-J9Vxvq {
-  font-weight: 500;
+  color: var(--text-color);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
   line-height: 32px;
 }
 

package/dist/components/Overall/DataSummary_module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./src/components/Overall/DataSummary.module.scss"],"names":[],"mappings":"AAAA;EACE,YAAY;EACZ,mBAAmB;EACnB,2BAA2B;EAC3B,eAAe;AACjB;;AALsF;EAQpF,mBAAmB;EACnB,aAAa;AACf;;AAV6J;EAa3J,aAAa;EACb,eAAe;AACjB;;AAf8N;EAkB5N,iBAAiB;EACjB,gBAAgB;EAChB,iBAAiB;AACnB;;AArBwS;EAwBtS,gBAAgB;EAChB,iBAAiB;AACnB","sourcesContent":[".container{height:40px;padding:10px 20px 10px 5px;margin:10px 0 20px 0;font-size:14px}.container :global(.ant-alert-message){display:flex;align-items:center}.container .icon{margin:0 5px 0 10px;font-size:18px;margin:0 5px}.container .description{margin-right:5px;font-weight:400;line-height:20px}.container .data{font-weight:500;line-height:32px}"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./src/components/Overall/DataSummary.module.scss"],"names":[],"mappings":"AAAA;EACE,2CAA2C;EAC3C,sCAAsC;EACtC,YAAY;EACZ,mBAAmB;EACnB,2BAA2B;EAC3B,eAAe;AACjB;;AAPuK;EAUrK,mBAAmB;EACnB,aAAa;AACf;;AAZ8O;EAe5O,aAAa;EACb,eAAe;AACjB;;AAjB+S;EAoB7S,kCAAkC;EAClC,iBAAiB;EACjB,gBAAgB;EAChB,iBAAiB;AACnB;;AAxB2Z;EA2BzZ,wBAAwB;EACxB,kCAAkC;EAClC,gBAAgB;EAChB,iBAAiB;AACnB","sourcesContent":[".container{height:40px;padding:10px 20px 10px 5px;margin:10px 0 20px 0;font-size:14px;border-color:var(--color-border-secondary);background:var(--color-accent-subtle)}.container :global(.ant-alert-message){display:flex;align-items:center}.container .icon{margin:0 5px 0 10px;font-size:18px;margin:0 5px}.container .description{margin-right:5px;font-weight:400;line-height:20px;color:var(--text-color-secondary)}.container .data{font-weight:600;line-height:32px;color:var(--text-color);font-variant-numeric:tabular-nums}"],"sourceRoot":""}

package/dist/components/Overall/bundle.mjs

@@ -51,8 +51,7 @@ const getFiles = (data)=>{
                         className: bundle_module.line
                     }),
                     /*#__PURE__*/ jsx(Tag, {
-                        className: bundle_module.tag,
-                        color: "green",
+                        className: `${bundle_module.tag} ${bundle_module.sizeTag}`,
                         children: formatSize(file.size)
                     }),
                     file.initial ? /*#__PURE__*/ jsx(Tag, {
@@ -355,7 +354,7 @@ const BundleOverall = ()=>{
                             }
                         }),
                         /*#__PURE__*/ jsx(DataSummary, {
-                            theme: 'files' === view ? 'common' : 'warning',
+                            theme: 'files' === view ? 'common' : 'size',
                             number: 'files' === view ? res.all.total.count : totalSizeStr,
                             description: `Total ${view}`
                         }),