@rsdoctor/components 1.5.18 → 1.6.1

package/dist/pages/BundleSize/components/search-modal_module.css

@@ -0,0 +1,39 @@
+.modal-jTgoC2 .ant-input-affix-wrapper {
+  width: 490px;
+  padding: 4px 5px;
+}
+
+.list-osNsTS .ant-spin-container {
+  max-height: 30rem;
+  overflow: auto;
+}
+
+.listItemInteractive-AC3tqb:hover {
+  background-color: var(--color-bg-box-elevated);
+  cursor: pointer;
+}
+
+.searchBtn-ZhRlk8 {
+  color: #fff;
+}
+
+.searchBtn-ZhRlk8 > span {
+  position: relative;
+}
+
+.searchBtn-ZhRlk8:before {
+  content: "";
+  opacity: 1;
+  border-radius: inherit;
+  background: linear-gradient(135deg, #6253e1, #04befe);
+  transition: all .3s;
+  position: absolute;
+  inset: -1px;
+}
+
+.searchBtn-ZhRlk8:hover:before {
+  opacity: 0;
+}
+
+
+/*# sourceMappingURL=search-modal_module.css.map */

package/dist/pages/BundleSize/components/search-modal_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./src/pages/BundleSize/components/search-modal.module.scss"],"names":[],"mappings":"AAAA;EACE,YAAY;EACZ,gBAAgB;AAClB;;AAHoE;EAMlE,iBAAiB;EACjB,cAAc;AAChB;;AARqI;EAWnI,8CAA8C;EAC9C,eAAe;AACjB;;AAb6N;EAgB3N,WAAW;AACb;;AAjBmP;EAoBjP,kBAAkB;AACpB;;AArBqR;EAwBnR,WAAW;EACX,UAAU;EACV,sBAAsB;EACtB,qDAAqD;EACrD,mBAAmB;EACnB,kBAAkB;EAClB,WAAW;AACb;;AA/Bwb;EAkCtb,UAAU;AACZ","sourcesContent":[".modal :global .ant-input-affix-wrapper{padding:4px 5px;width:490px}.list :global .ant-spin-container{overflow:auto;max-height:30rem}.listItemInteractive:hover{background-color:var(--color-bg-box-elevated);cursor:pointer}.searchBtn{color:#fff}.searchBtn>span{position:relative}.searchBtn::before{content:\"\";background:linear-gradient(135deg, #6253e1, #04befe);position:absolute;inset:-1px;opacity:1;transition:all .3s;border-radius:inherit}.searchBtn:hover::before{opacity:0}"],"sourceRoot":""}

package/dist/pages/BundleSize/components/tree-graph.mjs

@@ -117,7 +117,7 @@ const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
                                 }),
                                 /*#__PURE__*/ jsx(Typography.Text, {
                                     style: {
-                                        color: '#4FD233'
+                                        color: 'var(--color-data-bundled)'
                                     },
                                     children: formatSize(size)
                                 }),
@@ -126,7 +126,7 @@ const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
                                 }),
                                 initial ? /*#__PURE__*/ jsx(Typography.Text, {
                                     style: {
-                                        color: '#009A9E'
+                                        color: 'var(--color-data-initial)'
                                     },
                                     children: "initial"
                                 }) : null,
@@ -236,7 +236,7 @@ const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
                                                 },
                                                 children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
                                                     style: {
-                                                        color: 'rgba(0,0,0,.45)'
+                                                        color: 'var(--text-color-secondary)'
                                                     }
                                                 })
                                             })
@@ -269,7 +269,7 @@ const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
                                                 },
                                                 children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
                                                     style: {
-                                                        color: 'rgba(0,0,0,.45)'
+                                                        color: 'var(--text-color-secondary)'
                                                     }
                                                 })
                                             })

package/dist/pages/BundleSize/components/tree-graph.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pages/BundleSize/components/tree-graph.mjs","sources":["../../../../src/pages/BundleSize/components/tree-graph.tsx"],"sourcesContent":["import { CodeOutlined, InfoCircleOutlined } from '@ant-design/icons';\nimport { type Client, SDK } from '@rsdoctor/types';\nimport {\n  Card,\n  Checkbox,\n  Col,\n  Divider,\n  Empty,\n  InputNumber,\n  Row,\n  Select,\n  Space,\n  Tooltip,\n  Typography,\n} from 'antd';\nimport { debounce, sumBy } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport { useCodeDrawer } from 'src/components/base/CodeViewer/useCodeDrawer';\nimport { Badge as Bdg } from '../../../components/Badge';\nimport { FileTree } from '../../../components/FileTree';\nimport { KeywordInput } from '../../../components/Form/keyword';\nimport { Keyword } from '../../../components/Keyword';\nimport { ServerAPIProvider } from '../../../components/Manifest';\nimport { Size } from '../../../constants';\nimport { createFileStructures, formatSize, useI18n } from '../../../utils';\nimport { AssetDetail } from './asset';\nimport { createAssetPathMap, resolveAssetFileTitleTarget } from './asset-path';\nimport styles from './index.module.scss';\nimport './index.sass';\nimport { SearchModal } from './search-modal';\nimport { isJavaScriptAsset } from '../../../utils/assets';\n\nconst { Option } = Select;\n\nexport const TreeGraph = memo(\n  ({\n    cwd,\n    summary,\n    entryPoints,\n  }: {\n    cwd: string;\n    summary: Client.RsdoctorClientAssetsSummary;\n    entryPoints: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetEntryPoints>;\n  }) => {\n    const [selectedEntryPoints, setEntryPoints] = useState<\n      SDK.EntryPointData[]\n    >([]);\n    const [inputModule, setModuleValue] = useState(0);\n    const [inputAssetName, setAssetName] = useState('');\n    const [inputAssetSize, setAssetSize] = useState(0);\n    const [defaultExpandAll, setDefaultExpandAll] = useState(false);\n    const [inputModuleUnit, setModuleUnit] = useState('');\n    const [inputChunkUnit, setChunkUnit] = useState('');\n    const [showOnlyJavaScriptAssets, setShowOnlyJavaScriptAssets] =\n      useState(false);\n    const [assetPath, setAssetPath] = useState<string | null>(null);\n    const { showCode, codeDrawerComponent } = useCodeDrawer(\n      'Do not have the codes of assets. If you use the lite or brief mode, there will have codes.',\n    );\n\n    const { t } = useI18n();\n\n    const assets = summary.all.total.files;\n\n    const handleChange = useCallback(\n      (type: string) => (value: string) => {\n        if (type === 'module') {\n          setModuleUnit(value);\n        } else if (type === 'chunk') {\n          setChunkUnit(value);\n        }\n      },\n      [],\n    );\n\n    const selectAfter = (type: string) => (\n      <Select defaultValue=\"kb\" onChange={handleChange(type)}>\n        <Option value=\"kb\">KB</Option>\n        <Option value=\"mb\">MB</Option>\n      </Select>\n    );\n    const onChangeModule = useCallback(\n      debounce((newValue: number) => {\n        const count =\n          inputModuleUnit === 'mb' ? newValue * 1024 * 1024 : newValue * 1024;\n        setModuleValue(count);\n      }, 300),\n      [],\n    );\n\n    const onChangeAsset = useCallback(\n      debounce((newValue: number) => {\n        const count =\n          inputChunkUnit === 'mb' ? newValue * 1024 * 1024 : newValue * 1024;\n        setAssetSize(count);\n      }, 300),\n      [],\n    );\n\n    const filteredAssets = useMemo(() => {\n      let res = assets.slice();\n\n      if (inputAssetName) {\n        res = res.filter((e) => e.path.indexOf(inputAssetName) > -1);\n      }\n\n      if (showOnlyJavaScriptAssets) {\n        res = res.filter((e) => isJavaScriptAsset(e.path));\n      }\n\n      if (inputAssetSize > 0) {\n        res = res.filter((e) => e.size >= inputAssetSize);\n      }\n\n      if (selectedEntryPoints.length) {\n        res = res.filter((e) => {\n          if (selectedEntryPoints.some((ep) => ep.assets.includes(e.path))) {\n            return true;\n          }\n          return false;\n        });\n      }\n\n      return res.sort((a, b) => {\n        const _a = a.path.indexOf('/') > -1 ? 1 : 0;\n        const _b = b.path.indexOf('/') > -1 ? 1 : 0;\n        // return _a - _b;\n        return _b - _a;\n      });\n    }, [\n      assets,\n      selectedEntryPoints,\n      inputAssetName,\n      inputAssetSize,\n      showOnlyJavaScriptAssets,\n    ]);\n\n    useEffect(() => {\n      if (assetPath && filteredAssets.some((f) => f.path === assetPath)) {\n        return;\n      }\n\n      const nextAsset =\n        filteredAssets.find((f) => isJavaScriptAsset(f.path)) ??\n        filteredAssets[0];\n\n      setAssetPath(nextAsset?.path ?? null);\n    }, [assetPath, filteredAssets]);\n\n    const assetsMap = useMemo(() => {\n      return createAssetPathMap(filteredAssets);\n    }, [filteredAssets]);\n\n    const assetsStructures = useMemo(() => {\n      const res = createFileStructures({\n        files: filteredAssets.map((e) => e.path).filter(Boolean),\n        fileTitle(file, basename) {\n          const target = resolveAssetFileTitleTarget(assetsMap, file, basename);\n\n          if (typeof target === 'string') {\n            return target;\n          }\n\n          const { size, initial, path, content } = target;\n\n          return (\n            <div\n              className={styles.assetBox}\n              onClick={() => {\n                setAssetPath(path);\n              }}\n            >\n              <Keyword\n                text={basename}\n                keyword={''}\n                className={styles.fileText}\n              />\n              <Space size=\"small\" className={styles.assetsTag}>\n                <Divider type=\"vertical\" />\n                <Typography.Text style={{ color: '#4FD233' }}>\n                  {formatSize(size)}\n                </Typography.Text>\n                <Divider type=\"vertical\" />\n                {initial ? (\n                  <Typography.Text style={{ color: '#009A9E' }}>\n                    initial\n                  </Typography.Text>\n                ) : null}\n                <CodeOutlined\n                  style={{ fontSize: 14, padding: 0 }}\n                  onClick={() => showCode({ code: content!, filePath: path })}\n                />\n              </Space>\n            </div>\n          );\n        },\n      });\n      return res;\n    }, [assetsMap, filteredAssets, showCode]);\n\n    const onSearch = (value: string) => {\n      setAssetName(value);\n      setDefaultExpandAll(false);\n    };\n    return (\n      <>\n        <div className={styles.treeGraph}>\n          <Row align=\"middle\" gutter={[Size.BasePadding, Size.BasePadding]}>\n            {entryPoints && entryPoints.length ? (\n              <Col>\n                <Select\n                  mode=\"multiple\"\n                  value={selectedEntryPoints.map((e) => e.name)}\n                  style={{\n                    minWidth: 230,\n                    width: 'auto',\n                    maxWidth: 300,\n                  }}\n                  placeholder={'filter assets by entry point'}\n                  onChange={(name: string[]) => {\n                    setEntryPoints(\n                      name\n                        .map((e) => entryPoints.find((ep) => ep.name === e)!)\n                        .filter(Boolean),\n                    );\n                  }}\n                  allowClear\n                  onClear={() => {\n                    setEntryPoints([]);\n                  }}\n                >\n                  {entryPoints.map((e) => {\n                    return (\n                      <Select.Option key={e.name} value={e.name}>\n                        <Space>\n                          <Bdg\n                            label={e.name}\n                            value={formatSize(e.size)}\n                            tooltip={e.name}\n                          />\n                        </Space>\n                      </Select.Option>\n                    );\n                  })}\n                </Select>\n              </Col>\n            ) : null}\n            <Col>\n              <KeywordInput\n                placeholder=\"search asset by keyword\"\n                onChange={onSearch}\n              />\n            </Col>\n            <Col>\n              <Checkbox\n                checked={showOnlyJavaScriptAssets}\n                onChange={(e) => {\n                  setShowOnlyJavaScriptAssets(e.target.checked);\n                  setDefaultExpandAll(false);\n                }}\n              >\n                JS only\n              </Checkbox>\n            </Col>\n            <Col span={6}>\n              <InputNumber\n                min={0}\n                style={{ width: '95%' }}\n                addonBefore={\n                  <Space>\n                    <Typography.Text style={{ fontSize: 14, color: 'inherit' }}>\n                      Asset Size\n                    </Typography.Text>\n                    <Tooltip\n                      title={t(\n                        'filter the output assets which size is greater than the input value',\n                      )}\n                      style={{ marginLeft: 3 }}\n                    >\n                      <InfoCircleOutlined\n                        style={{ color: 'rgba(0,0,0,.45)' }}\n                      />\n                    </Tooltip>\n                  </Space>\n                }\n                onChange={(value) => onChangeAsset(Number(value))}\n                addonAfter={selectAfter('chunk')}\n              />\n            </Col>\n            <Col span={6}>\n              <InputNumber\n                min={0}\n                style={{ width: '95%' }}\n                addonBefore={\n                  <Space>\n                    <Typography.Text style={{ fontSize: 14, color: 'inherit' }}>\n                      Module Size\n                    </Typography.Text>\n                    <Tooltip\n                      title={t(\n                        'filter the modules which size is greater than the input value',\n                      )}\n                      style={{ marginLeft: 3 }}\n                    >\n                      <InfoCircleOutlined\n                        style={{ color: 'rgba(0,0,0,.45)' }}\n                      />\n                    </Tooltip>\n                  </Space>\n                }\n                onChange={(value) => {\n                  onChangeModule(Number(value));\n                }}\n                addonAfter={selectAfter('module')}\n              />\n            </Col>\n          </Row>\n          <Row>\n            <SearchModal />\n          </Row>\n          {filteredAssets.length ? (\n            <div className={styles.assetDetailRoot}>\n              <div className={styles.assetDetailCol}>\n                <Card\n                  className={styles.assetDetailFileTreeRoot}\n                  classNames={{\n                    body: styles.assetDetailFileTreeBody,\n                  }}\n                  title={\n                    <Space>\n                      <Typography.Text>\n                        {t('Output Assets List')}\n                      </Typography.Text>\n                      <Divider type=\"vertical\" />\n                      <Tooltip\n                        title={`total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`}\n                      >\n                        <Typography.Text\n                          type=\"secondary\"\n                          style={{\n                            fontSize: 12,\n                            fontWeight: 400,\n                          }}\n                        >\n                          {filteredAssets.length} / {assets.length}\n                        </Typography.Text>\n                      </Tooltip>\n                      <Divider type=\"vertical\" />\n                      <Typography.Text\n                        type=\"secondary\"\n                        style={{ fontSize: 12, fontWeight: 400 }}\n                      >\n                        {formatSize(sumBy(filteredAssets, (e) => e.size))}\n                      </Typography.Text>\n                    </Space>\n                  }\n                  size=\"small\"\n                >\n                  <div className={styles.assetDetailFileTreeViewport}>\n                    <div className={styles.assetDetailFileTreeScrollArea}>\n                      <FileTree\n                        className={styles.assets}\n                        treeData={assetsStructures}\n                        autoExpandParent\n                        defaultExpandAll={\n                          defaultExpandAll || filteredAssets.length <= 20\n                        }\n                        key={`tree_${inputAssetName}_${defaultExpandAll}`}\n                      />\n                    </div>\n                  </div>\n                </Card>\n              </div>\n              <div className={styles.assetDetailCol}>\n                {assetPath ? (\n                  <ServerAPIProvider\n                    api={SDK.ServerAPI.API.GetAssetDetails}\n                    body={{ assetPath }}\n                  >\n                    {(details) => (\n                      <AssetDetail\n                        asset={details.asset}\n                        chunks={details.chunks}\n                        modules={details.modules}\n                        moduleSizeLimit={inputModule}\n                        root={cwd}\n                      />\n                    )}\n                  </ServerAPIProvider>\n                ) : (\n                  <Card>\n                    <Empty\n                      description={\n                        <Typography.Text strong>\n                          Click the file path on the left to show the modules of\n                          the asset\n                        </Typography.Text>\n                      }\n                    />\n                  </Card>\n                )}\n              </div>\n            </div>\n          ) : (\n            <Empty />\n          )}\n        </div>\n        {codeDrawerComponent}\n      </>\n    );\n  },\n);\n"],"names":["Option","Select","TreeGraph","memo","cwd","summary","entryPoints","selectedEntryPoints","setEntryPoints","useState","inputModule","setModuleValue","inputAssetName","setAssetName","inputAssetSize","setAssetSize","defaultExpandAll","setDefaultExpandAll","inputModuleUnit","setModuleUnit","inputChunkUnit","setChunkUnit","showOnlyJavaScriptAssets","setShowOnlyJavaScriptAssets","assetPath","setAssetPath","showCode","codeDrawerComponent","useCodeDrawer","t","useI18n","assets","handleChange","useCallback","type","value","selectAfter","onChangeModule","debounce","newValue","count","onChangeAsset","filteredAssets","useMemo","res","e","isJavaScriptAsset","ep","a","b","_a","_b","useEffect","f","nextAsset","assetsMap","createAssetPathMap","assetsStructures","createFileStructures","Boolean","file","basename","target","resolveAssetFileTitleTarget","size","initial","path","content","styles","Keyword","Space","Divider","Typography","formatSize","CodeOutlined","onSearch","Row","Size","Col","name","Bdg","KeywordInput","Checkbox","InputNumber","Tooltip","InfoCircleOutlined","Number","SearchModal","Card","sumBy","FileTree","ServerAPIProvider","SDK","details","AssetDetail","Empty"],"mappings":"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"}
+{"version":3,"file":"pages/BundleSize/components/tree-graph.mjs","sources":["../../../../src/pages/BundleSize/components/tree-graph.tsx"],"sourcesContent":["import { CodeOutlined, InfoCircleOutlined } from '@ant-design/icons';\nimport { type Client, SDK } from '@rsdoctor/types';\nimport {\n  Card,\n  Checkbox,\n  Col,\n  Divider,\n  Empty,\n  InputNumber,\n  Row,\n  Select,\n  Space,\n  Tooltip,\n  Typography,\n} from 'antd';\nimport { debounce, sumBy } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport { useCodeDrawer } from 'src/components/base/CodeViewer/useCodeDrawer';\nimport { Badge as Bdg } from '../../../components/Badge';\nimport { FileTree } from '../../../components/FileTree';\nimport { KeywordInput } from '../../../components/Form/keyword';\nimport { Keyword } from '../../../components/Keyword';\nimport { ServerAPIProvider } from '../../../components/Manifest';\nimport { Size } from '../../../constants';\nimport { createFileStructures, formatSize, useI18n } from '../../../utils';\nimport { AssetDetail } from './asset';\nimport { createAssetPathMap, resolveAssetFileTitleTarget } from './asset-path';\nimport styles from './index.module.scss';\nimport './index.sass';\nimport { SearchModal } from './search-modal';\nimport { isJavaScriptAsset } from '../../../utils/assets';\n\nconst { Option } = Select;\n\nexport const TreeGraph = memo(\n  ({\n    cwd,\n    summary,\n    entryPoints,\n  }: {\n    cwd: string;\n    summary: Client.RsdoctorClientAssetsSummary;\n    entryPoints: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetEntryPoints>;\n  }) => {\n    const [selectedEntryPoints, setEntryPoints] = useState<\n      SDK.EntryPointData[]\n    >([]);\n    const [inputModule, setModuleValue] = useState(0);\n    const [inputAssetName, setAssetName] = useState('');\n    const [inputAssetSize, setAssetSize] = useState(0);\n    const [defaultExpandAll, setDefaultExpandAll] = useState(false);\n    const [inputModuleUnit, setModuleUnit] = useState('');\n    const [inputChunkUnit, setChunkUnit] = useState('');\n    const [showOnlyJavaScriptAssets, setShowOnlyJavaScriptAssets] =\n      useState(false);\n    const [assetPath, setAssetPath] = useState<string | null>(null);\n    const { showCode, codeDrawerComponent } = useCodeDrawer(\n      'Do not have the codes of assets. If you use the lite or brief mode, there will have codes.',\n    );\n\n    const { t } = useI18n();\n\n    const assets = summary.all.total.files;\n\n    const handleChange = useCallback(\n      (type: string) => (value: string) => {\n        if (type === 'module') {\n          setModuleUnit(value);\n        } else if (type === 'chunk') {\n          setChunkUnit(value);\n        }\n      },\n      [],\n    );\n\n    const selectAfter = (type: string) => (\n      <Select defaultValue=\"kb\" onChange={handleChange(type)}>\n        <Option value=\"kb\">KB</Option>\n        <Option value=\"mb\">MB</Option>\n      </Select>\n    );\n    const onChangeModule = useCallback(\n      debounce((newValue: number) => {\n        const count =\n          inputModuleUnit === 'mb' ? newValue * 1024 * 1024 : newValue * 1024;\n        setModuleValue(count);\n      }, 300),\n      [],\n    );\n\n    const onChangeAsset = useCallback(\n      debounce((newValue: number) => {\n        const count =\n          inputChunkUnit === 'mb' ? newValue * 1024 * 1024 : newValue * 1024;\n        setAssetSize(count);\n      }, 300),\n      [],\n    );\n\n    const filteredAssets = useMemo(() => {\n      let res = assets.slice();\n\n      if (inputAssetName) {\n        res = res.filter((e) => e.path.indexOf(inputAssetName) > -1);\n      }\n\n      if (showOnlyJavaScriptAssets) {\n        res = res.filter((e) => isJavaScriptAsset(e.path));\n      }\n\n      if (inputAssetSize > 0) {\n        res = res.filter((e) => e.size >= inputAssetSize);\n      }\n\n      if (selectedEntryPoints.length) {\n        res = res.filter((e) => {\n          if (selectedEntryPoints.some((ep) => ep.assets.includes(e.path))) {\n            return true;\n          }\n          return false;\n        });\n      }\n\n      return res.sort((a, b) => {\n        const _a = a.path.indexOf('/') > -1 ? 1 : 0;\n        const _b = b.path.indexOf('/') > -1 ? 1 : 0;\n        // return _a - _b;\n        return _b - _a;\n      });\n    }, [\n      assets,\n      selectedEntryPoints,\n      inputAssetName,\n      inputAssetSize,\n      showOnlyJavaScriptAssets,\n    ]);\n\n    useEffect(() => {\n      if (assetPath && filteredAssets.some((f) => f.path === assetPath)) {\n        return;\n      }\n\n      const nextAsset =\n        filteredAssets.find((f) => isJavaScriptAsset(f.path)) ??\n        filteredAssets[0];\n\n      setAssetPath(nextAsset?.path ?? null);\n    }, [assetPath, filteredAssets]);\n\n    const assetsMap = useMemo(() => {\n      return createAssetPathMap(filteredAssets);\n    }, [filteredAssets]);\n\n    const assetsStructures = useMemo(() => {\n      const res = createFileStructures({\n        files: filteredAssets.map((e) => e.path).filter(Boolean),\n        fileTitle(file, basename) {\n          const target = resolveAssetFileTitleTarget(assetsMap, file, basename);\n\n          if (typeof target === 'string') {\n            return target;\n          }\n\n          const { size, initial, path, content } = target;\n\n          return (\n            <div\n              className={styles.assetBox}\n              onClick={() => {\n                setAssetPath(path);\n              }}\n            >\n              <Keyword\n                text={basename}\n                keyword={''}\n                className={styles.fileText}\n              />\n              <Space size=\"small\" className={styles.assetsTag}>\n                <Divider type=\"vertical\" />\n                <Typography.Text style={{ color: 'var(--color-data-bundled)' }}>\n                  {formatSize(size)}\n                </Typography.Text>\n                <Divider type=\"vertical\" />\n                {initial ? (\n                  <Typography.Text\n                    style={{ color: 'var(--color-data-initial)' }}\n                  >\n                    initial\n                  </Typography.Text>\n                ) : null}\n                <CodeOutlined\n                  style={{ fontSize: 14, padding: 0 }}\n                  onClick={() => showCode({ code: content!, filePath: path })}\n                />\n              </Space>\n            </div>\n          );\n        },\n      });\n      return res;\n    }, [assetsMap, filteredAssets, showCode]);\n\n    const onSearch = (value: string) => {\n      setAssetName(value);\n      setDefaultExpandAll(false);\n    };\n    return (\n      <>\n        <div className={styles.treeGraph}>\n          <Row align=\"middle\" gutter={[Size.BasePadding, Size.BasePadding]}>\n            {entryPoints && entryPoints.length ? (\n              <Col>\n                <Select\n                  mode=\"multiple\"\n                  value={selectedEntryPoints.map((e) => e.name)}\n                  style={{\n                    minWidth: 230,\n                    width: 'auto',\n                    maxWidth: 300,\n                  }}\n                  placeholder={'filter assets by entry point'}\n                  onChange={(name: string[]) => {\n                    setEntryPoints(\n                      name\n                        .map((e) => entryPoints.find((ep) => ep.name === e)!)\n                        .filter(Boolean),\n                    );\n                  }}\n                  allowClear\n                  onClear={() => {\n                    setEntryPoints([]);\n                  }}\n                >\n                  {entryPoints.map((e) => {\n                    return (\n                      <Select.Option key={e.name} value={e.name}>\n                        <Space>\n                          <Bdg\n                            label={e.name}\n                            value={formatSize(e.size)}\n                            tooltip={e.name}\n                          />\n                        </Space>\n                      </Select.Option>\n                    );\n                  })}\n                </Select>\n              </Col>\n            ) : null}\n            <Col>\n              <KeywordInput\n                placeholder=\"search asset by keyword\"\n                onChange={onSearch}\n              />\n            </Col>\n            <Col>\n              <Checkbox\n                checked={showOnlyJavaScriptAssets}\n                onChange={(e) => {\n                  setShowOnlyJavaScriptAssets(e.target.checked);\n                  setDefaultExpandAll(false);\n                }}\n              >\n                JS only\n              </Checkbox>\n            </Col>\n            <Col span={6}>\n              <InputNumber\n                min={0}\n                style={{ width: '95%' }}\n                addonBefore={\n                  <Space>\n                    <Typography.Text style={{ fontSize: 14, color: 'inherit' }}>\n                      Asset Size\n                    </Typography.Text>\n                    <Tooltip\n                      title={t(\n                        'filter the output assets which size is greater than the input value',\n                      )}\n                      style={{ marginLeft: 3 }}\n                    >\n                      <InfoCircleOutlined\n                        style={{ color: 'var(--text-color-secondary)' }}\n                      />\n                    </Tooltip>\n                  </Space>\n                }\n                onChange={(value) => onChangeAsset(Number(value))}\n                addonAfter={selectAfter('chunk')}\n              />\n            </Col>\n            <Col span={6}>\n              <InputNumber\n                min={0}\n                style={{ width: '95%' }}\n                addonBefore={\n                  <Space>\n                    <Typography.Text style={{ fontSize: 14, color: 'inherit' }}>\n                      Module Size\n                    </Typography.Text>\n                    <Tooltip\n                      title={t(\n                        'filter the modules which size is greater than the input value',\n                      )}\n                      style={{ marginLeft: 3 }}\n                    >\n                      <InfoCircleOutlined\n                        style={{ color: 'var(--text-color-secondary)' }}\n                      />\n                    </Tooltip>\n                  </Space>\n                }\n                onChange={(value) => {\n                  onChangeModule(Number(value));\n                }}\n                addonAfter={selectAfter('module')}\n              />\n            </Col>\n          </Row>\n          <Row>\n            <SearchModal />\n          </Row>\n          {filteredAssets.length ? (\n            <div className={styles.assetDetailRoot}>\n              <div className={styles.assetDetailCol}>\n                <Card\n                  className={styles.assetDetailFileTreeRoot}\n                  classNames={{\n                    body: styles.assetDetailFileTreeBody,\n                  }}\n                  title={\n                    <Space>\n                      <Typography.Text>\n                        {t('Output Assets List')}\n                      </Typography.Text>\n                      <Divider type=\"vertical\" />\n                      <Tooltip\n                        title={`total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`}\n                      >\n                        <Typography.Text\n                          type=\"secondary\"\n                          style={{\n                            fontSize: 12,\n                            fontWeight: 400,\n                          }}\n                        >\n                          {filteredAssets.length} / {assets.length}\n                        </Typography.Text>\n                      </Tooltip>\n                      <Divider type=\"vertical\" />\n                      <Typography.Text\n                        type=\"secondary\"\n                        style={{ fontSize: 12, fontWeight: 400 }}\n                      >\n                        {formatSize(sumBy(filteredAssets, (e) => e.size))}\n                      </Typography.Text>\n                    </Space>\n                  }\n                  size=\"small\"\n                >\n                  <div className={styles.assetDetailFileTreeViewport}>\n                    <div className={styles.assetDetailFileTreeScrollArea}>\n                      <FileTree\n                        className={styles.assets}\n                        treeData={assetsStructures}\n                        autoExpandParent\n                        defaultExpandAll={\n                          defaultExpandAll || filteredAssets.length <= 20\n                        }\n                        key={`tree_${inputAssetName}_${defaultExpandAll}`}\n                      />\n                    </div>\n                  </div>\n                </Card>\n              </div>\n              <div className={styles.assetDetailCol}>\n                {assetPath ? (\n                  <ServerAPIProvider\n                    api={SDK.ServerAPI.API.GetAssetDetails}\n                    body={{ assetPath }}\n                  >\n                    {(details) => (\n                      <AssetDetail\n                        asset={details.asset}\n                        chunks={details.chunks}\n                        modules={details.modules}\n                        moduleSizeLimit={inputModule}\n                        root={cwd}\n                      />\n                    )}\n                  </ServerAPIProvider>\n                ) : (\n                  <Card>\n                    <Empty\n                      description={\n                        <Typography.Text strong>\n                          Click the file path on the left to show the modules of\n                          the asset\n                        </Typography.Text>\n                      }\n                    />\n                  </Card>\n                )}\n              </div>\n            </div>\n          ) : (\n            <Empty />\n          )}\n        </div>\n        {codeDrawerComponent}\n      </>\n    );\n  },\n);\n"],"names":["Option","Select","TreeGraph","memo","cwd","summary","entryPoints","selectedEntryPoints","setEntryPoints","useState","inputModule","setModuleValue","inputAssetName","setAssetName","inputAssetSize","setAssetSize","defaultExpandAll","setDefaultExpandAll","inputModuleUnit","setModuleUnit","inputChunkUnit","setChunkUnit","showOnlyJavaScriptAssets","setShowOnlyJavaScriptAssets","assetPath","setAssetPath","showCode","codeDrawerComponent","useCodeDrawer","t","useI18n","assets","handleChange","useCallback","type","value","selectAfter","onChangeModule","debounce","newValue","count","onChangeAsset","filteredAssets","useMemo","res","e","isJavaScriptAsset","ep","a","b","_a","_b","useEffect","f","nextAsset","assetsMap","createAssetPathMap","assetsStructures","createFileStructures","Boolean","file","basename","target","resolveAssetFileTitleTarget","size","initial","path","content","styles","Keyword","Space","Divider","Typography","formatSize","CodeOutlined","onSearch","Row","Size","Col","name","Bdg","KeywordInput","Checkbox","InputNumber","Tooltip","InfoCircleOutlined","Number","SearchModal","Card","sumBy","FileTree","ServerAPIProvider","SDK","details","AssetDetail","Empty"],"mappings":"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"}

package/dist/pages/ModuleAnalyze/components/fileTreeCom.css

@@ -50,10 +50,14 @@
   display: inline-block;
 }
 
+.file-tree-com-titles-box {
+  border: 1px solid #0000;
+}
+
 .file-tree-com-titles-box:hover {
+  background-color: var(--color-bg-box-elevated, #f0f3f5);
+  border-color: var(--color-border, #e5e6eb);
   cursor: pointer;
-  background-color: #f0f3f5;
-  border: 1px solid #e5e6eb;
   width: 80%;
 }
 

package/dist/pages/ModuleAnalyze/components/fileTreeCom.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./src/pages/ModuleAnalyze/components/fileTreeCom.scss"],"names":[],"mappings":"AAAA;EACE,SAAS;AACX;;AAFwB;EAKtB,mBAAmB;EACnB,UAAU;EACV,SAAS;EACT,UAAU;EACV,iBAAiB;EACjB,gBAAgB;AAClB;;AAXgJ;EAc9I,sBAAsB;EACtB,mBAAmB;EACnB,eAAe;EACf,YAAY;EACZ,SAAS;EACT,cAAc;EACd,qBAAqB;EACrB,qBAAqB;EACrB,kBAAkB;AACpB;;AAvBkX;EA0BhX,wBAAwB;AAC1B;;AA3B2c;EA8Bzc,aAAa;AACf;;AA/Bkf;EAkChf,cAAc;AAChB;;AAnC+hB;EAsC7hB,cAAc;EACd,mBAAmB;AACrB;;AAxC0qB;EA2CxqB,qBAAqB;EACrB,kBAAkB;AACpB;;AA7C2vB;EAgDzvB,eAAe;EACf,qBAAqB;AACvB;;AAlDozB;EAqDlzB,eAAe;EACf,yBAAyB;EACzB,yBAAyB;EACzB,UAAU;AACZ;;AAzD+5B;EA4D75B,cAAc;AAChB;;AA7Dm+B;EAgEj+B,gBAAgB;AAClB;;AAjE0hC;EAoExhC,sBAAsB;EACtB,SAAS;EACT,qBAAqB;AACvB;;AAvEomC;EA0ElmC,WAAW;EACX,qBAAqB;AACvB;;AA5E+pC;EA+E7pC,yBAAyB;EACzB,oBAAoB;AACtB;;AAjF8uC;EAoF5uC,wBAAwB;AAC1B;;AArFuyC;EAwFryC,2BAA2B;AAC7B;;AAzFg4C;EA4F93C,sBAAsB;EACtB,aAAa;AACf;;AA9Fu/C;EAiGr/C,eAAe;EACf,iBAAiB;EACjB,aAAa;AACf;;AApGkpD;EAuGhpD,eAAe;AACjB;;AAxGw5D;EA2Gt5D,sBAAsB;AACxB;;AA5G+gE;EA+G7gE,oBAAoB;AACtB;;AAhH+nE;EAmH7nE,eAAe;EACf,cAAc;AAChB;;AArH6vE;EAwH3vE,sBAAsB;EACtB,SAAS;EACT,qBAAqB;AACvB;;AA3Hi0E;EA8H/zE,WAAW;EACX,qBAAqB;AACvB","sourcesContent":[".file-tree-com{margin:0}.file-tree-com .file-tree-com-treenode{margin:0;padding:0;line-height:24px;white-space:nowrap;list-style:none;outline:0}.file-tree-com .file-tree-com-treenode .file-tree-com-node-content-wrapper{position:relative;display:inline-block;height:24px;margin:0;padding:0 4px;box-sizing:border-box;text-decoration:none;vertical-align:top;cursor:pointer}.file-tree-com .file-tree-com-treenode .file-tree-com-arrow-icon{transform:rotate(90deg)}.file-tree-com-child-tree{display:none}.file-tree-com-child-tree-open{display:block}.file-tree-com-treenode-disabled>span:not(.file-tree-com-switcher),.file-tree-com>a,.file-tree-com>a span{color:#767676;cursor:not-allowed}.file-tree-com-treenode-selected{background:rgba(5,145,255,.3);border-radius:4px}.file-tree-com-title{display:inline-block;cursor:pointer}.file-tree-com-titles-box:hover{background-color:#f0f3f5;border:1px solid #e5e6eb;cursor:pointer;width:80%}.file-tree-com-titles-box:hover .ant-typography:hover{color:#0079ff}.file-tree-com-node-title .file-icon{padding:4px 0 0 0}.file-tree-com-indent{display:inline-block;height:0;vertical-align:bottom}.file-tree-com-indent-unit{display:inline-block;width:14px}.file-tree-switcher-arrow{transform:rotate(0deg);transition:transform .3s ease}.file-tree-switcher-arrow-expand{transform:rotate(90deg)}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child){border-left:1px solid #eee}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles{display:flex;flex-direction:column}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title{display:flex;cursor:pointer;line-height:30px}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title img{cursor:pointer}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title img-tag{cursor:pointer}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-selected{background-color:#ff0}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-tag{margin-inline-end:0}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-code-tag{cursor:pointer;padding:0 2px}.rc-tree-indent{display:inline-block;height:0;vertical-align:bottom}.rc-tree-indent-unit{display:inline-block;width:14px}"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./src/pages/ModuleAnalyze/components/fileTreeCom.scss"],"names":[],"mappings":"AAAA;EACE,SAAS;AACX;;AAFwB;EAKtB,mBAAmB;EACnB,UAAU;EACV,SAAS;EACT,UAAU;EACV,iBAAiB;EACjB,gBAAgB;AAClB;;AAXgJ;EAc9I,sBAAsB;EACtB,mBAAmB;EACnB,eAAe;EACf,YAAY;EACZ,SAAS;EACT,cAAc;EACd,qBAAqB;EACrB,qBAAqB;EACrB,kBAAkB;AACpB;;AAvBkX;EA0BhX,wBAAwB;AAC1B;;AA3B2c;EA8Bzc,aAAa;AACf;;AA/Bkf;EAkChf,cAAc;AAChB;;AAnC+hB;EAsC7hB,cAAc;EACd,mBAAmB;AACrB;;AAxC0qB;EA2CxqB,qBAAqB;EACrB,kBAAkB;AACpB;;AA7C2vB;EAgDzvB,eAAe;EACf,qBAAqB;AACvB;;AAlDozB;EAqDlzB,uBAAuB;AACzB;;AAtD64B;EAyD34B,uDAAuD;EACvD,0CAA0C;EAC1C,eAAe;EACf,UAAU;AACZ;;AA7DuiC;EAgEriC,cAAc;AAChB;;AAjE2mC;EAoEzmC,gBAAgB;AAClB;;AArEkqC;EAwEhqC,sBAAsB;EACtB,SAAS;EACT,qBAAqB;AACvB;;AA3E4uC;EA8E1uC,WAAW;EACX,qBAAqB;AACvB;;AAhFuyC;EAmFryC,yBAAyB;EACzB,oBAAoB;AACtB;;AArFs3C;EAwFp3C,wBAAwB;AAC1B;;AAzF+6C;EA4F76C,2BAA2B;AAC7B;;AA7FwgD;EAgGtgD,sBAAsB;EACtB,aAAa;AACf;;AAlG+nD;EAqG7nD,eAAe;EACf,iBAAiB;EACjB,aAAa;AACf;;AAxG0xD;EA2GxxD,eAAe;AACjB;;AA5GgiE;EA+G9hE,sBAAsB;AACxB;;AAhHupE;EAmHrpE,oBAAoB;AACtB;;AApHuwE;EAuHrwE,eAAe;EACf,cAAc;AAChB;;AAzHq4E;EA4Hn4E,sBAAsB;EACtB,SAAS;EACT,qBAAqB;AACvB;;AA/Hy8E;EAkIv8E,WAAW;EACX,qBAAqB;AACvB","sourcesContent":[".file-tree-com{margin:0}.file-tree-com .file-tree-com-treenode{margin:0;padding:0;line-height:24px;white-space:nowrap;list-style:none;outline:0}.file-tree-com .file-tree-com-treenode .file-tree-com-node-content-wrapper{position:relative;display:inline-block;height:24px;margin:0;padding:0 4px;box-sizing:border-box;text-decoration:none;vertical-align:top;cursor:pointer}.file-tree-com .file-tree-com-treenode .file-tree-com-arrow-icon{transform:rotate(90deg)}.file-tree-com-child-tree{display:none}.file-tree-com-child-tree-open{display:block}.file-tree-com-treenode-disabled>span:not(.file-tree-com-switcher),.file-tree-com>a,.file-tree-com>a span{color:#767676;cursor:not-allowed}.file-tree-com-treenode-selected{background:rgba(5,145,255,.3);border-radius:4px}.file-tree-com-title{display:inline-block;cursor:pointer}.file-tree-com-titles-box{border-width:1px;border-style:solid;border-color:rgba(0,0,0,0)}.file-tree-com-titles-box:hover{background-color:var(--color-bg-box-elevated, #f0f3f5);border-color:var(--color-border, #e5e6eb);cursor:pointer;width:80%}.file-tree-com-titles-box:hover .ant-typography:hover{color:#0079ff}.file-tree-com-node-title .file-icon{padding:4px 0 0 0}.file-tree-com-indent{display:inline-block;height:0;vertical-align:bottom}.file-tree-com-indent-unit{display:inline-block;width:14px}.file-tree-switcher-arrow{transform:rotate(0deg);transition:transform .3s ease}.file-tree-switcher-arrow-expand{transform:rotate(90deg)}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child){border-left:1px solid #eee}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles{display:flex;flex-direction:column}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title{display:flex;cursor:pointer;line-height:30px}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title img{cursor:pointer}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title img-tag{cursor:pointer}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-selected{background-color:#ff0}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-tag{margin-inline-end:0}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-code-tag{cursor:pointer;padding:0 2px}.rc-tree-indent{display:inline-block;height:0;vertical-align:bottom}.rc-tree-indent-unit{display:inline-block;width:14px}"],"sourceRoot":""}

package/dist/pages/ModuleAnalyze/index.css

@@ -17,16 +17,15 @@
 }
 
 .module-analyze-bailout-card {
+  border: 1px solid var(--color-border-secondary);
   box-shadow: none;
-  background: #fff;
-  border: 1px solid #0505050f;
+  background: var(--color-bg-box-elevated);
   border-radius: 8px;
   margin-top: 16px;
   margin-bottom: 24px;
 }
 
 .module-analyze-bailout-card-title {
-  color: #1c1f23cc;
   margin-bottom: 12px;
   font-size: 14px;
   font-weight: 600;
@@ -40,7 +39,7 @@
 }
 
 .module-analyze-bailout-card-item {
-  border-bottom: 1px solid #161a2314;
+  border-bottom: 1px solid var(--color-border);
   justify-content: space-between;
   align-items: center;
   padding: 6px 0;
@@ -52,14 +51,13 @@
 }
 
 .module-analyze-bailout-card-text {
-  color: #1c1f23cc;
   max-width: calc(100% - 70px);
   font-size: 12px;
   font-weight: 400;
 }
 
 .module-analyze-bailout-card-meta {
-  color: #1c1f2373;
+  color: var(--text-color-secondary);
   font-size: 12px;
 }
 

package/dist/pages/ModuleAnalyze/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./src/pages/ModuleAnalyze/index.scss"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,gBAAgB;AAClB;;AAHuD;EAMrD,eAAe;AACjB;;AAPsH;EAUpH,sBAAsB;EACtB,aAAa;AACf;;AAZ6K;EAe3K,iBAAiB;AACnB;;AAhBwN;EAmBtN,gBAAgB;EAChB,gBAAgB;EAChB,2BAA2B;EAC3B,kBAAkB;EAClB,gBAAgB;EAChB,mBAAmB;AACrB;;AAzB2W;EA4BzW,gBAAgB;EAChB,mBAAmB;EACnB,eAAe;EACf,gBAAgB;EAChB,qBAAqB;AACvB;;AAjC6e;EAoC3e,sBAAsB;EACtB,QAAQ;EACR,aAAa;AACf;;AAvC0jB;EA0CxjB,kCAAkC;EAClC,8BAA8B;EAC9B,mBAAmB;EACnB,cAAc;EACd,aAAa;AACf;;AA/CmtB;EAkDjtB,mBAAmB;AACrB;;AAnDmxB;EAsDjxB,gBAAgB;EAChB,4BAA4B;EAC5B,eAAe;EACf,gBAAgB;AAClB;;AA1Dw4B;EA6Dt4B,gBAAgB;EAChB,eAAe;AACjB","sourcesContent":[".module-analyze-file-tree{width:\"100%\";min-height:50em}.module-analyze-file-tree .module-analyze-empty{margin-top:20%}.module-analyze-box{display:flex;flex-direction:column}.file-tree-com-titles-box{line-height:30px}.module-analyze-bailout-card{margin-top:16px;border-radius:8px;border:1px solid rgba(5,5,5,.06);box-shadow:none;background:#fff;margin-bottom:24px}.module-analyze-bailout-card-title{display:inline-block;font-size:14px;margin-bottom:12px;color:rgba(28,31,35,.8);font-weight:600}.module-analyze-bailout-card-list{display:flex;flex-direction:column;gap:8px}.module-analyze-bailout-card-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(22,26,35,.08)}.module-analyze-bailout-card-item:last-child{border-bottom:none}.module-analyze-bailout-card-text{max-width:calc(100% - 70px);font-weight:400;font-size:12px;color:rgba(28,31,35,.8)}.module-analyze-bailout-card-meta{font-size:12px;color:rgba(28,31,35,.45)}"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./src/pages/ModuleAnalyze/index.scss"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,gBAAgB;AAClB;;AAHuD;EAMrD,eAAe;AACjB;;AAPsH;EAUpH,sBAAsB;EACtB,aAAa;AACf;;AAZ6K;EAe3K,iBAAiB;AACnB;;AAhBwN;EAmBtN,+CAA+C;EAC/C,gBAAgB;EAChB,wCAAwC;EACxC,kBAAkB;EAClB,gBAAgB;EAChB,mBAAmB;AACrB;;AAzBiZ;EA4B/Y,mBAAmB;EACnB,eAAe;EACf,gBAAgB;EAChB,qBAAqB;AACvB;;AAhC2f;EAmCzf,sBAAsB;EACtB,QAAQ;EACR,aAAa;AACf;;AAtCwkB;EAyCtkB,4CAA4C;EAC5C,8BAA8B;EAC9B,mBAAmB;EACnB,cAAc;EACd,aAAa;AACf;;AA9CkuB;EAiDhuB,mBAAmB;AACrB;;AAlDkyB;EAqDhyB,4BAA4B;EAC5B,eAAe;EACf,gBAAgB;AAClB;;AAxD+3B;EA2D73B,kCAAkC;EAClC,eAAe;AACjB","sourcesContent":[".module-analyze-file-tree{width:\"100%\";min-height:50em}.module-analyze-file-tree .module-analyze-empty{margin-top:20%}.module-analyze-box{display:flex;flex-direction:column}.file-tree-com-titles-box{line-height:30px}.module-analyze-bailout-card{margin-top:16px;border-radius:8px;border:1px solid var(--color-border-secondary);box-shadow:none;background:var(--color-bg-box-elevated);margin-bottom:24px}.module-analyze-bailout-card-title{display:inline-block;font-size:14px;margin-bottom:12px;font-weight:600}.module-analyze-bailout-card-list{display:flex;flex-direction:column;gap:8px}.module-analyze-bailout-card-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--color-border)}.module-analyze-bailout-card-item:last-child{border-bottom:none}.module-analyze-bailout-card-text{max-width:calc(100% - 70px);font-weight:400;font-size:12px}.module-analyze-bailout-card-meta{font-size:12px;color:var(--text-color-secondary)}"],"sourceRoot":""}

package/dist/pages/ModuleAnalyze/index.mjs

@@ -40,9 +40,9 @@ const ModuleAnalyzeComponent = ({ modules, cwd, moduleId, show, setShow })=>{
                             children: getShortPath(module.path)
                         }),
                         /*#__PURE__*/ jsx(Typography.Text, {
+                            type: "secondary",
                             style: {
-                                fontSize: 12,
-                                color: 'rgba(0, 0, 0, 0.45)'
+                                fontSize: 12
                             },
                             children: `Current Module: ${module.path}`
                         })
@@ -95,8 +95,7 @@ const ModuleAnalyzeComponent = ({ modules, cwd, moduleId, show, setShow })=>{
                                                         }),
                                                         /*#__PURE__*/ jsx(Typography.Text, {
                                                             style: {
-                                                                fontSize: 14,
-                                                                color: 'rgba(28, 31, 35, 0.8)'
+                                                                fontSize: 14
                                                             },
                                                             children: "Current Module Imported Reasons Tree"
                                                         }),

package/dist/pages/ModuleAnalyze/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pages/ModuleAnalyze/index.mjs","sources":["../../../src/pages/ModuleAnalyze/index.tsx"],"sourcesContent":["import { SDK } from '@rsdoctor/types';\nimport { Badge, Card, Drawer, Popover, Space, Tabs, Typography } from 'antd';\nimport React, { useState } from 'react';\nimport { ServerAPIProvider } from 'src/components/Manifest';\nimport { getShortPath } from 'src/utils';\nimport { ModuleGraphListContext } from '../BundleSize/config';\nimport { ModuleFilesTree, BailoutReasonCard } from './fileTree';\nimport './index.scss';\nimport { drawerWidth } from '../../constants';\nimport {\n  LeftSquareOutlined,\n  QuestionCircleOutlined,\n  RightSquareTwoTone,\n} from '@ant-design/icons';\n\nexport enum TabList {\n  Reasons,\n  Dependencies,\n}\n\nconst tabslist = [\n  {\n    key: TabList[TabList.Reasons],\n    label: TabList[TabList.Reasons],\n  },\n  {\n    key: TabList[TabList.Dependencies],\n    label: TabList[TabList.Dependencies],\n  },\n] as unknown as { key: string; label: string }[];\n\nexport const ModuleAnalyzeComponent: React.FC<{\n  modules: SDK.ModuleData[];\n  cwd: string;\n  moduleId: string | number;\n  show: boolean;\n  setShow: (arg: boolean) => void;\n}> = ({ modules, cwd, moduleId, show, setShow }) => {\n  const [selectedChunk, _setSelectedChunk] = useState('' as string);\n  const [activeTabKey, setActiveTabKey] = useState(TabList[TabList.Reasons]);\n\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetModuleDetails}\n      body={{ moduleId: +moduleId }}\n    >\n      {({ module, dependencies, sideEffectCodes }) => {\n        return (\n          <Drawer\n            title={\n              <div className=\"module-analyze-box\">\n                <Typography.Text>{getShortPath(module.path)}</Typography.Text>\n                <Typography.Text\n                  style={{ fontSize: 12, color: 'rgba(0, 0, 0, 0.45)' }}\n                >\n                  {`Current Module: ${module.path}`}\n                </Typography.Text>\n              </div>\n            }\n            open={show}\n            maskClosable\n            width={drawerWidth * 0.8}\n            onClose={() => setShow(false)}\n          >\n            <ServerAPIProvider\n              api={SDK.ServerAPI.API.GetAllChunkGraph}\n              body={{}}\n            >\n              {(_chunks) => {\n                return (\n                  <ModuleGraphListContext.Consumer>\n                    {({ moduleJumpList, setModuleJumpList }) => {\n                      return (\n                        <Tabs\n                          defaultActiveKey=\"bailout\"\n                          items={[\n                            {\n                              key: 'moduleTree',\n                              label: 'Module Tree',\n                              children: (\n                                <Card\n                                  style={{ minHeight: 400 }}\n                                  tabList={tabslist}\n                                  activeTabKey={activeTabKey}\n                                  tabProps={{\n                                    size: 'small',\n                                    style: {\n                                      fontSize: 12,\n                                    },\n                                  }}\n                                  onTabChange={(k) => setActiveTabKey(k)}\n                                  styles={{\n                                    title: { paddingTop: 0 },\n                                  }}\n                                  title={\n                                    <Space style={{ padding: '10px 0px' }}>\n                                      <LeftSquareOutlined\n                                        onClick={() => {\n                                          const _list = [\n                                            ...moduleJumpList.slice(0, -1),\n                                          ];\n                                          setModuleJumpList(_list);\n                                        }}\n                                      />\n                                      <Typography.Text\n                                        style={{\n                                          fontSize: 14,\n                                          color: 'rgba(28, 31, 35, 0.8)',\n                                        }}\n                                      >\n                                        Current Module Imported Reasons Tree\n                                      </Typography.Text>\n                                      <Popover\n                                        content={\n                                          <div>\n                                            <div>\n                                              <Badge\n                                                status=\"success\"\n                                                text=\" \"\n                                              />\n                                              <RightSquareTwoTone />\n                                              <Typography.Text>\n                                                {\n                                                  ': Jump button, click to jump to the Module dependency analysis page of this module.'\n                                                }\n                                              </Typography.Text>\n                                            </div>\n                                          </div>\n                                        }\n                                        title=\"Usage\"\n                                      >\n                                        <QuestionCircleOutlined />\n                                      </Popover>\n                                    </Space>\n                                  }\n                                >\n                                  <ModuleFilesTree\n                                    curModule={module}\n                                    modules={modules}\n                                    dependencies={dependencies}\n                                    cwd={cwd}\n                                    selectedChunk={selectedChunk}\n                                    activeTabKey={activeTabKey}\n                                  />\n                                </Card>\n                              ),\n                            },\n                            {\n                              key: 'bailout',\n                              label: 'Bailout',\n                              children: (\n                                <div style={{ marginTop: 16 }}>\n                                  <BailoutReasonCard\n                                    reasons={module.bailoutReason}\n                                    sideEffectCodes={sideEffectCodes}\n                                    modulePath={module.path}\n                                  />\n                                </div>\n                              ),\n                            },\n                          ]}\n                        />\n                      );\n                    }}\n                  </ModuleGraphListContext.Consumer>\n                );\n              }}\n            </ServerAPIProvider>\n          </Drawer>\n        );\n      }}\n    </ServerAPIProvider>\n  );\n};\n"],"names":["TabList","tabslist","ModuleAnalyzeComponent","modules","cwd","moduleId","show","setShow","selectedChunk","_setSelectedChunk","useState","activeTabKey","setActiveTabKey","ServerAPIProvider","SDK","module","dependencies","sideEffectCodes","Drawer","Typography","getShortPath","drawerWidth","_chunks","ModuleGraphListContext","moduleJumpList","setModuleJumpList","Tabs","Card","k","Space","LeftSquareOutlined","_list","Popover","Badge","RightSquareTwoTone","QuestionCircleOutlined","ModuleFilesTree","BailoutReasonCard"],"mappings":"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"}
+{"version":3,"file":"pages/ModuleAnalyze/index.mjs","sources":["../../../src/pages/ModuleAnalyze/index.tsx"],"sourcesContent":["import { SDK } from '@rsdoctor/types';\nimport { Badge, Card, Drawer, Popover, Space, Tabs, Typography } from 'antd';\nimport React, { useState } from 'react';\nimport { ServerAPIProvider } from 'src/components/Manifest';\nimport { getShortPath } from 'src/utils';\nimport { ModuleGraphListContext } from '../BundleSize/config';\nimport { ModuleFilesTree, BailoutReasonCard } from './fileTree';\nimport './index.scss';\nimport { drawerWidth } from '../../constants';\nimport {\n  LeftSquareOutlined,\n  QuestionCircleOutlined,\n  RightSquareTwoTone,\n} from '@ant-design/icons';\n\nexport enum TabList {\n  Reasons,\n  Dependencies,\n}\n\nconst tabslist = [\n  {\n    key: TabList[TabList.Reasons],\n    label: TabList[TabList.Reasons],\n  },\n  {\n    key: TabList[TabList.Dependencies],\n    label: TabList[TabList.Dependencies],\n  },\n] as unknown as { key: string; label: string }[];\n\nexport const ModuleAnalyzeComponent: React.FC<{\n  modules: SDK.ModuleData[];\n  cwd: string;\n  moduleId: string | number;\n  show: boolean;\n  setShow: (arg: boolean) => void;\n}> = ({ modules, cwd, moduleId, show, setShow }) => {\n  const [selectedChunk, _setSelectedChunk] = useState('' as string);\n  const [activeTabKey, setActiveTabKey] = useState(TabList[TabList.Reasons]);\n\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetModuleDetails}\n      body={{ moduleId: +moduleId }}\n    >\n      {({ module, dependencies, sideEffectCodes }) => {\n        return (\n          <Drawer\n            title={\n              <div className=\"module-analyze-box\">\n                <Typography.Text>{getShortPath(module.path)}</Typography.Text>\n                <Typography.Text type=\"secondary\" style={{ fontSize: 12 }}>\n                  {`Current Module: ${module.path}`}\n                </Typography.Text>\n              </div>\n            }\n            open={show}\n            maskClosable\n            width={drawerWidth * 0.8}\n            onClose={() => setShow(false)}\n          >\n            <ServerAPIProvider\n              api={SDK.ServerAPI.API.GetAllChunkGraph}\n              body={{}}\n            >\n              {(_chunks) => {\n                return (\n                  <ModuleGraphListContext.Consumer>\n                    {({ moduleJumpList, setModuleJumpList }) => {\n                      return (\n                        <Tabs\n                          defaultActiveKey=\"bailout\"\n                          items={[\n                            {\n                              key: 'moduleTree',\n                              label: 'Module Tree',\n                              children: (\n                                <Card\n                                  style={{ minHeight: 400 }}\n                                  tabList={tabslist}\n                                  activeTabKey={activeTabKey}\n                                  tabProps={{\n                                    size: 'small',\n                                    style: {\n                                      fontSize: 12,\n                                    },\n                                  }}\n                                  onTabChange={(k) => setActiveTabKey(k)}\n                                  styles={{\n                                    title: { paddingTop: 0 },\n                                  }}\n                                  title={\n                                    <Space style={{ padding: '10px 0px' }}>\n                                      <LeftSquareOutlined\n                                        onClick={() => {\n                                          const _list = [\n                                            ...moduleJumpList.slice(0, -1),\n                                          ];\n                                          setModuleJumpList(_list);\n                                        }}\n                                      />\n                                      <Typography.Text style={{ fontSize: 14 }}>\n                                        Current Module Imported Reasons Tree\n                                      </Typography.Text>\n                                      <Popover\n                                        content={\n                                          <div>\n                                            <div>\n                                              <Badge\n                                                status=\"success\"\n                                                text=\" \"\n                                              />\n                                              <RightSquareTwoTone />\n                                              <Typography.Text>\n                                                {\n                                                  ': Jump button, click to jump to the Module dependency analysis page of this module.'\n                                                }\n                                              </Typography.Text>\n                                            </div>\n                                          </div>\n                                        }\n                                        title=\"Usage\"\n                                      >\n                                        <QuestionCircleOutlined />\n                                      </Popover>\n                                    </Space>\n                                  }\n                                >\n                                  <ModuleFilesTree\n                                    curModule={module}\n                                    modules={modules}\n                                    dependencies={dependencies}\n                                    cwd={cwd}\n                                    selectedChunk={selectedChunk}\n                                    activeTabKey={activeTabKey}\n                                  />\n                                </Card>\n                              ),\n                            },\n                            {\n                              key: 'bailout',\n                              label: 'Bailout',\n                              children: (\n                                <div style={{ marginTop: 16 }}>\n                                  <BailoutReasonCard\n                                    reasons={module.bailoutReason}\n                                    sideEffectCodes={sideEffectCodes}\n                                    modulePath={module.path}\n                                  />\n                                </div>\n                              ),\n                            },\n                          ]}\n                        />\n                      );\n                    }}\n                  </ModuleGraphListContext.Consumer>\n                );\n              }}\n            </ServerAPIProvider>\n          </Drawer>\n        );\n      }}\n    </ServerAPIProvider>\n  );\n};\n"],"names":["TabList","tabslist","ModuleAnalyzeComponent","modules","cwd","moduleId","show","setShow","selectedChunk","_setSelectedChunk","useState","activeTabKey","setActiveTabKey","ServerAPIProvider","SDK","module","dependencies","sideEffectCodes","Drawer","Typography","getShortPath","drawerWidth","_chunks","ModuleGraphListContext","moduleJumpList","setModuleJumpList","Tabs","Card","k","Space","LeftSquareOutlined","_list","Popover","Badge","RightSquareTwoTone","QuestionCircleOutlined","ModuleFilesTree","BailoutReasonCard"],"mappings":"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"}

package/dist/pages/Overall/index.mjs

@@ -15,16 +15,10 @@ const Component = ()=>{
     return /*#__PURE__*/ jsx("div", {
         className: index_module.overall,
         children: /*#__PURE__*/ jsxs(Flex, {
-            style: {
-                width: '100%'
-            },
+            className: index_module.columns,
             children: [
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        flex: 3,
-                        marginRight: '16px',
-                        maxWidth: '75%'
-                    },
+                /*#__PURE__*/ jsx("main", {
+                    className: index_module.mainColumn,
                     children: /*#__PURE__*/ jsxs(ResponsiveLayout, {
                         children: [
                             /*#__PURE__*/ jsx(ProjectOverall, {
@@ -38,10 +32,8 @@ const Component = ()=>{
                         ]
                     })
                 }),
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        flex: 1
-                    },
+                /*#__PURE__*/ jsx("aside", {
+                    className: index_module.sideColumn,
                     children: /*#__PURE__*/ jsxs(ResponsiveLayout, {
                         children: [
                             /*#__PURE__*/ jsx(BundleOverall, {

package/dist/pages/Overall/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pages/Overall/index.mjs","sources":["../../../src/pages/Overall/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Flex } from 'antd';\n\nimport { HelpCenter } from '../../components/Overall/help-center';\nimport { BundleAlerts } from '../../components/Alerts';\nimport {\n  BundleOverall,\n  CompileOverall,\n  ProjectOverall,\n} from '../../components/Overall';\nimport { ResponsiveLayout } from './responsiveLayout';\nimport { useProjectInfo } from '../../components/Layout/project-info-context';\n\nimport style from './index.module.scss';\n\nconst Component: React.FC = () => {\n  const { project } = useProjectInfo();\n\n  if (!project) {\n    return null;\n  }\n\n  const { summary, configs, root: cwd, envinfo, errors, name } = project;\n\n  return (\n    <div className={style.overall}>\n      <Flex style={{ width: '100%' }}>\n        <div style={{ flex: 3, marginRight: '16px', maxWidth: '75%' }}>\n          <ResponsiveLayout>\n            <ProjectOverall\n              configs={configs}\n              cwd={cwd}\n              envinfo={envinfo}\n              alerts={errors}\n              name={name}\n            />\n            <BundleAlerts />\n          </ResponsiveLayout>\n        </div>\n\n        <div style={{ flex: 1 }}>\n          <ResponsiveLayout>\n            <BundleOverall errors={errors} cwd={cwd} />\n            <CompileOverall summary={summary} />\n            <HelpCenter />\n          </ResponsiveLayout>\n        </div>\n      </Flex>\n    </div>\n  );\n};\n\nexport const Page = Component;\n\nexport * from './constants';\n"],"names":["Component","project","useProjectInfo","summary","configs","cwd","envinfo","errors","name","style","Flex","ResponsiveLayout","ProjectOverall","BundleAlerts","BundleOverall","CompileOverall","HelpCenter","Page"],"mappings":";;;;;;;;;;AAeA,MAAMA,YAAsB;IAC1B,MAAM,EAAEC,OAAO,EAAE,GAAGC;IAEpB,IAAI,CAACD,SACH,OAAO;IAGT,MAAM,EAAEE,OAAO,EAAEC,OAAO,EAAE,MAAMC,GAAG,EAAEC,OAAO,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGP;IAE/D,OAAO,WAAP,GACE,IAAC;QAAI,WAAWQ,aAAAA,OAAa;kBAC3B,mBAACC,MAAIA;YAAC,OAAO;gBAAE,OAAO;YAAO;;8BAC3B,IAAC;oBAAI,OAAO;wBAAE,MAAM;wBAAG,aAAa;wBAAQ,UAAU;oBAAM;8BAC1D,mBAACC,kBAAgBA;;0CACf,IAACC,gBAAcA;gCACb,SAASR;gCACT,KAAKC;gCACL,SAASC;gCACT,QAAQC;gCACR,MAAMC;;0CAER,IAACK,cAAYA,CAAAA;;;;8BAIjB,IAAC;oBAAI,OAAO;wBAAE,MAAM;oBAAE;8BACpB,mBAACF,kBAAgBA;;0CACf,IAACG,eAAaA;gCAAC,QAAQP;gCAAQ,KAAKF;;0CACpC,IAACU,gBAAcA;gCAAC,SAASZ;;0CACzB,IAACa,YAAUA,CAAAA;;;;;;;AAMvB;AAEO,MAAMC,OAAOjB"}
+{"version":3,"file":"pages/Overall/index.mjs","sources":["../../../src/pages/Overall/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Flex } from 'antd';\n\nimport { HelpCenter } from '../../components/Overall/help-center';\nimport { BundleAlerts } from '../../components/Alerts';\nimport {\n  BundleOverall,\n  CompileOverall,\n  ProjectOverall,\n} from '../../components/Overall';\nimport { ResponsiveLayout } from './responsiveLayout';\nimport { useProjectInfo } from '../../components/Layout/project-info-context';\n\nimport style from './index.module.scss';\n\nconst Component: React.FC = () => {\n  const { project } = useProjectInfo();\n\n  if (!project) {\n    return null;\n  }\n\n  const { summary, configs, root: cwd, envinfo, errors, name } = project;\n\n  return (\n    <div className={style.overall}>\n      <Flex className={style.columns}>\n        <main className={style.mainColumn}>\n          <ResponsiveLayout>\n            <ProjectOverall\n              configs={configs}\n              cwd={cwd}\n              envinfo={envinfo}\n              alerts={errors}\n              name={name}\n            />\n            <BundleAlerts />\n          </ResponsiveLayout>\n        </main>\n\n        <aside className={style.sideColumn}>\n          <ResponsiveLayout>\n            <BundleOverall errors={errors} cwd={cwd} />\n            <CompileOverall summary={summary} />\n            <HelpCenter />\n          </ResponsiveLayout>\n        </aside>\n      </Flex>\n    </div>\n  );\n};\n\nexport const Page = Component;\n\nexport * from './constants';\n"],"names":["Component","project","useProjectInfo","summary","configs","cwd","envinfo","errors","name","style","Flex","ResponsiveLayout","ProjectOverall","BundleAlerts","BundleOverall","CompileOverall","HelpCenter","Page"],"mappings":";;;;;;;;;;AAeA,MAAMA,YAAsB;IAC1B,MAAM,EAAEC,OAAO,EAAE,GAAGC;IAEpB,IAAI,CAACD,SACH,OAAO;IAGT,MAAM,EAAEE,OAAO,EAAEC,OAAO,EAAE,MAAMC,GAAG,EAAEC,OAAO,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGP;IAE/D,OAAO,WAAP,GACE,IAAC;QAAI,WAAWQ,aAAAA,OAAa;kBAC3B,mBAACC,MAAIA;YAAC,WAAWD,aAAAA,OAAa;;8BAC5B,IAAC;oBAAK,WAAWA,aAAAA,UAAgB;8BAC/B,mBAACE,kBAAgBA;;0CACf,IAACC,gBAAcA;gCACb,SAASR;gCACT,KAAKC;gCACL,SAASC;gCACT,QAAQC;gCACR,MAAMC;;0CAER,IAACK,cAAYA,CAAAA;;;;8BAIjB,IAAC;oBAAM,WAAWJ,aAAAA,UAAgB;8BAChC,mBAACE,kBAAgBA;;0CACf,IAACG,eAAaA;gCAAC,QAAQP;gCAAQ,KAAKF;;0CACpC,IAACU,gBAAcA;gCAAC,SAASZ;;0CACzB,IAACa,YAAUA,CAAAA;;;;;;;AAMvB;AAEO,MAAMC,OAAOjB"}

package/dist/pages/Overall/index.module.mjs

@@ -1,6 +1,9 @@
 import "./index_module.css";
 const index_module = {
     overall: "overall-MGHzQh",
+    columns: "columns-QZp7uT",
+    mainColumn: "mainColumn-qPTakG",
+    sideColumn: "sideColumn-QYJE_Q",
     layout: "layout-izKUgB",
     row: "row-RDk0Pl"
 };

package/dist/pages/Overall/index.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pages/Overall/index.module.mjs","sources":["../../../src/pages/Overall/index.module.scss"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./index_module.css\"\nexport default {\"overall\":\"overall-MGHzQh\",\"layout\":\"layout-izKUgB\",\"row\":\"row-RDk0Pl\"};"],"names":[],"mappings":";AAEA,qBAAe;IAAC,SAAU;IAAiB,QAAS;IAAgB,KAAM;AAAY"}
+{"version":3,"file":"pages/Overall/index.module.mjs","sources":["../../../src/pages/Overall/index.module.scss"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./index_module.css\"\nexport default {\"overall\":\"overall-MGHzQh\",\"columns\":\"columns-QZp7uT\",\"mainColumn\":\"mainColumn-qPTakG\",\"sideColumn\":\"sideColumn-QYJE_Q\",\"layout\":\"layout-izKUgB\",\"row\":\"row-RDk0Pl\"};"],"names":[],"mappings":";AAEA,qBAAe;IAAC,SAAU;IAAiB,SAAU;IAAiB,YAAa;IAAoB,YAAa;IAAoB,QAAS;IAAgB,KAAM;AAAY"}

package/dist/pages/Overall/index_module.css

@@ -15,13 +15,46 @@
 }
 
 .overall-MGHzQh {
-  justify-content: space-between;
-  display: flex;
+  width: 100%;
+}
+
+.columns-QZp7uT {
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+}
+
+.mainColumn-qPTakG, .sideColumn-QYJE_Q {
+  min-width: 0;
+}
+
+.mainColumn-qPTakG {
+  flex: 3 1 0;
+}
+
+.sideColumn-QYJE_Q {
+  flex: 320px;
+  min-width: 300px;
+}
+
+.sideColumn-QYJE_Q .ant-card {
+  background: var(--color-bg-box-subtle);
 }
 
 .layout-izKUgB .row-RDk0Pl {
   margin-bottom: 16px;
 }
 
+@media (max-width: 1200px) {
+  .columns-QZp7uT {
+    flex-wrap: wrap;
+  }
+
+  .mainColumn-qPTakG, .sideColumn-QYJE_Q {
+    flex-basis: 100%;
+    width: 100%;
+  }
+}
+
 
 /*# sourceMappingURL=index_module.css.map */

package/dist/pages/Overall/index_module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./src/pages/Overall/index.module.scss"],"names":[],"mappings":"AAAA;EACE,6NAA6N;AAC/N;;AAFoO;EAKlO,6BAA6B;AAC/B;;AANmS;EASjS,OAAO;AACT;;AAVwU;EAatU,aAAa;AACf;;AAdyY;EAiBvY,8BAA8B;EAC9B,aAAa;AACf;;AAnB6b;EAsB3b,mBAAmB;AACrB","sourcesContent":[":root{--font-family-code: Roboto, Roboto Mono, -apple-system, BlinkMacSystemFont, 'Segoe UI', Menlo, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'}:root :global .ant-layout-content{padding:16px 32px !important}:root :global .ant-tree-title{flex:1}:root :global .ant-tree-node-content-wrapper-normal{display:flex}.overall{display:flex;justify-content:space-between}.layout .row{margin-bottom:16px}"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./src/pages/Overall/index.module.scss"],"names":[],"mappings":"AAAA;EACE,6NAA6N;AAC/N;;AAFoO;EAKlO,6BAA6B;AAC/B;;AANmS;EASjS,OAAO;AACT;;AAVwU;EAatU,aAAa;AACf;;AAdyY;EAiBvY,WAAW;AACb;;AAlB6Z;EAqB3Z,uBAAuB;EACvB,SAAS;EACT,WAAW;AACb;;AAxBid;EA2B/c,YAAY;AACd;;AA5Bqf;EA+Bnf,WAAW;AACb;;AAhC4gB;EAmC1gB,WAAW;EACX,gBAAgB;AAClB;;AArCujB;EAwCrjB,sCAAsC;AACxC;;AAzC4nB;EA4C1nB,mBAAmB;AACrB;;AA7C4pB;EAA0B;IAiDlrB,eAAe;EACjB;;EAlD4sB;IAqD1sB,gBAAgB;IAChB,WAAW;EACb;AACF","sourcesContent":[":root{--font-family-code: Roboto, Roboto Mono, -apple-system, BlinkMacSystemFont, 'Segoe UI', Menlo, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'}:root :global .ant-layout-content{padding:16px 32px !important}:root :global .ant-tree-title{flex:1}:root :global .ant-tree-node-content-wrapper-normal{display:flex}.overall{width:100%}.columns{width:100%;align-items:flex-start;gap:16px}.mainColumn,.sideColumn{min-width:0}.mainColumn{flex:3 1 0}.sideColumn{flex:1 1 320px;min-width:300px}.sideColumn :global(.ant-card){background:var(--color-bg-box-subtle)}.layout .row{margin-bottom:16px}@media(max-width: 1200px){.columns{flex-wrap:wrap}.mainColumn,.sideColumn{flex-basis:100%;width:100%}}"],"sourceRoot":""}

package/dist/pages/Overall/responsiveLayout.mjs

@@ -5,10 +5,10 @@ import index_module from "./index.module.mjs";
 const ResponsiveLayout = ({ children })=>/*#__PURE__*/ jsx(Flex, {
         vertical: true,
         className: index_module.layout,
-        children: children.map((e)=>/*#__PURE__*/ jsx("div", {
+        children: children.map((element, index)=>/*#__PURE__*/ jsx("div", {
                 className: index_module.row,
-                children: e
-            }))
+                children: element
+            }, index))
     });
 export { ResponsiveLayout };
 

package/dist/pages/Overall/responsiveLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pages/Overall/responsiveLayout.mjs","sources":["../../../src/pages/Overall/responsiveLayout.tsx"],"sourcesContent":["import { Flex } from 'antd';\nimport React from 'react';\n\nimport style from './index.module.scss';\n\ninterface Props {\n  children: React.ReactNode[];\n}\n\nexport const ResponsiveLayout = ({ children }: Props) => {\n  return (\n    <Flex vertical className={style.layout}>\n      {children.map((e) => (\n        <div className={style.row}>{e}</div>\n      ))}\n    </Flex>\n  );\n};\n"],"names":["ResponsiveLayout","children","Flex","style","e"],"mappings":";;;;AASO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAS,GAC3C,WAAP,GACE,IAACC,MAAIA;QAAC,UAAQ;QAAC,WAAWC,aAAAA,MAAY;kBACnCF,SAAS,GAAG,CAAC,CAACG,IAAAA,WAAAA,GACb,IAAC;gBAAI,WAAWD,aAAAA,GAAS;0BAAGC"}
+{"version":3,"file":"pages/Overall/responsiveLayout.mjs","sources":["../../../src/pages/Overall/responsiveLayout.tsx"],"sourcesContent":["import { Flex } from 'antd';\nimport React from 'react';\n\nimport style from './index.module.scss';\n\ninterface Props {\n  children: React.ReactNode[];\n}\n\nexport const ResponsiveLayout = ({ children }: Props) => {\n  return (\n    <Flex vertical className={style.layout}>\n      {children.map((element, index) => (\n        <div className={style.row} key={index}>\n          {element}\n        </div>\n      ))}\n    </Flex>\n  );\n};\n"],"names":["ResponsiveLayout","children","Flex","style","element","index"],"mappings":";;;;AASO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAS,GAC3C,WAAP,GACE,IAACC,MAAIA;QAAC,UAAQ;QAAC,WAAWC,aAAAA,MAAY;kBACnCF,SAAS,GAAG,CAAC,CAACG,SAASC,QAAAA,WAAAA,GACtB,IAAC;gBAAI,WAAWF,aAAAA,GAAS;0BACtBC;eAD6BC"}

package/dist/pages/WebpackLoaders/Analysis/index.mjs

@@ -3,13 +3,13 @@ import "react";
 import { LoaderAnalysis } from "../../../components/Loader/Analysis/index.mjs";
 import { WebpackConfigurationViewer } from "../../../components/Configuration/index.mjs";
 import { Card } from "../../../components/Card/index.mjs";
-import { Popover, Space, Tag, Typography, theme } from "antd";
+import { Popover, Space, Tag, Typography } from "antd";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { t } from "i18next";
+import { useThemeToken } from "../../../utils/index.mjs";
 export * from "./constants.mjs";
-const { useToken: useToken } = theme;
 const Page = ()=>{
-    const { token } = useToken();
+    const token = useThemeToken();
     return /*#__PURE__*/ jsx(Card, {
         title: /*#__PURE__*/ jsxs(Space, {
             align: "baseline",

package/dist/pages/WebpackLoaders/Analysis/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pages/WebpackLoaders/Analysis/index.mjs","sources":["../../../../src/pages/WebpackLoaders/Analysis/index.tsx"],"sourcesContent":["import React from 'react';\nimport { LoaderAnalysis } from '../../../components/Loader/Analysis';\nimport { WebpackConfigurationViewer } from '../../../components/Configuration';\nimport { Card } from '../../../components/Card';\nimport { Popover, Space, Tag, theme, Typography } from 'antd';\nimport { ExclamationCircleOutlined } from '@ant-design/icons';\nimport { t } from 'i18next';\nconst { useToken } = theme;\n\nexport const Page: React.FC = () => {\n  const { token } = useToken();\n\n  return (\n    <Card\n      title={\n        <Space align=\"baseline\">\n          <Typography.Title level={5} style={{ margin: 0 }}>\n            Loader Analysis\n          </Typography.Title>\n          <Popover\n            content={\n              <div>\n                {t('AsyncLoaderInfo')}\n                <a\n                  href=\"https://rsdoctor.rs/guide/more/faq#cssextractrspackplugin-%E7%9A%84-loader-%E8%80%97%E6%97%B6%E8%BF%87%E9%95%BF%E9%97%AE%E9%A2%98\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  {t('Details')}\n                </a>\n              </div>\n            }\n            title=\"Info\"\n          >\n            <Tag icon={<ExclamationCircleOutlined />} color=\"warning\">\n              Info\n            </Tag>\n          </Popover>\n        </Space>\n      }\n      extra={<WebpackConfigurationViewer defaultKeys={['module', 'resolve']} />}\n      bodyStyle={{ paddingTop: token.padding, height: 800 }}\n    >\n      <LoaderAnalysis />\n    </Card>\n  );\n};\n\nexport * from './constants';\n"],"names":["useToken","theme","Page","token","Card","Space","Typography","Popover","t","Tag","ExclamationCircleOutlined","WebpackConfigurationViewer","LoaderAnalysis"],"mappings":";;;;;;;;;AAOA,MAAM,EAAEA,UAAAA,QAAQ,EAAE,GAAGC;AAEd,MAAMC,OAAiB;IAC5B,MAAM,EAAEC,KAAK,EAAE,GAAGH;IAElB,OAAO,WAAP,GACE,IAACI,MAAIA;QACH,qBACE,KAACC,OAAKA;YAAC,OAAM;;8BACX,IAACC,WAAW,KAAK;oBAAC,OAAO;oBAAG,OAAO;wBAAE,QAAQ;oBAAE;8BAAG;;8BAGlD,IAACC,SAAOA;oBACN,uBACE,KAAC;;4BACEC,EAAE;0CACH,IAAC;gCACC,MAAK;gCACL,QAAO;gCACP,KAAI;0CAEHA,EAAE;;;;oBAIT,OAAM;8BAEN,kBAACC,KAAGA;wBAAC,oBAAM,IAACC,2BAAyBA,CAAAA;wBAAK,OAAM;kCAAU;;;;;QAMhE,qBAAO,IAACC,4BAA0BA;YAAC,aAAa;gBAAC;gBAAU;aAAU;;QACrE,WAAW;YAAE,YAAYR,MAAM,OAAO;YAAE,QAAQ;QAAI;kBAEpD,kBAACS,gBAAcA,CAAAA;;AAGrB"}
+{"version":3,"file":"pages/WebpackLoaders/Analysis/index.mjs","sources":["../../../../src/pages/WebpackLoaders/Analysis/index.tsx"],"sourcesContent":["import React from 'react';\nimport { LoaderAnalysis } from '../../../components/Loader/Analysis';\nimport { WebpackConfigurationViewer } from '../../../components/Configuration';\nimport { Card } from '../../../components/Card';\nimport { Popover, Space, Tag, Typography } from 'antd';\nimport { ExclamationCircleOutlined } from '@ant-design/icons';\nimport { t } from 'i18next';\nimport { useThemeToken } from 'src/utils';\n\nexport const Page: React.FC = () => {\n  const token = useThemeToken();\n\n  return (\n    <Card\n      title={\n        <Space align=\"baseline\">\n          <Typography.Title level={5} style={{ margin: 0 }}>\n            Loader Analysis\n          </Typography.Title>\n          <Popover\n            content={\n              <div>\n                {t('AsyncLoaderInfo')}\n                <a\n                  href=\"https://rsdoctor.rs/guide/more/faq#cssextractrspackplugin-%E7%9A%84-loader-%E8%80%97%E6%97%B6%E8%BF%87%E9%95%BF%E9%97%AE%E9%A2%98\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  {t('Details')}\n                </a>\n              </div>\n            }\n            title=\"Info\"\n          >\n            <Tag icon={<ExclamationCircleOutlined />} color=\"warning\">\n              Info\n            </Tag>\n          </Popover>\n        </Space>\n      }\n      extra={<WebpackConfigurationViewer defaultKeys={['module', 'resolve']} />}\n      bodyStyle={{ paddingTop: token.padding, height: 800 }}\n    >\n      <LoaderAnalysis />\n    </Card>\n  );\n};\n\nexport * from './constants';\n"],"names":["Page","token","useThemeToken","Card","Space","Typography","Popover","t","Tag","ExclamationCircleOutlined","WebpackConfigurationViewer","LoaderAnalysis"],"mappings":";;;;;;;;;;AASO,MAAMA,OAAiB;IAC5B,MAAMC,QAAQC;IAEd,OAAO,WAAP,GACE,IAACC,MAAIA;QACH,qBACE,KAACC,OAAKA;YAAC,OAAM;;8BACX,IAACC,WAAW,KAAK;oBAAC,OAAO;oBAAG,OAAO;wBAAE,QAAQ;oBAAE;8BAAG;;8BAGlD,IAACC,SAAOA;oBACN,uBACE,KAAC;;4BACEC,EAAE;0CACH,IAAC;gCACC,MAAK;gCACL,QAAO;gCACP,KAAI;0CAEHA,EAAE;;;;oBAIT,OAAM;8BAEN,kBAACC,KAAGA;wBAAC,oBAAM,IAACC,2BAAyBA,CAAAA;wBAAK,OAAM;kCAAU;;;;;QAMhE,qBAAO,IAACC,4BAA0BA;YAAC,aAAa;gBAAC;gBAAU;aAAU;;QACrE,WAAW;YAAE,YAAYT,MAAM,OAAO;YAAE,QAAQ;QAAI;kBAEpD,kBAACU,gBAAcA,CAAAA;;AAGrB"}

package/dist/pages/WebpackLoaders/Overall/index.mjs

@@ -3,7 +3,7 @@ import "react";
 import { WebpackConfigurationViewer } from "../../../components/Configuration/index.mjs";
 import { Card } from "../../../components/Card/index.mjs";
 import { LoaderChart } from "../../../components/Charts/index.mjs";
-import { Popover, Space, Tag, Typography } from "antd/lib";
+import { Popover, Space, Tag, Typography } from "antd";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 export * from "./constants.mjs";

package/dist/pages/WebpackLoaders/Overall/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pages/WebpackLoaders/Overall/index.mjs","sources":["../../../../src/pages/WebpackLoaders/Overall/index.tsx"],"sourcesContent":["import React from 'react';\nimport { WebpackConfigurationViewer } from '../../../components/Configuration';\nimport { Card } from '../../../components/Card';\nimport { LoaderChart } from 'src/components/Charts';\nimport { Popover, Space, Tag, Typography } from 'antd/lib';\nimport { ExclamationCircleOutlined } from '@ant-design/icons';\nimport { useTranslation } from 'react-i18next';\n\nexport const Page: React.FC = () => {\n  const { t } = useTranslation();\n  return (\n    <Card\n      title={\n        <Space align=\"baseline\">\n          <Typography.Title level={5} style={{ margin: 0 }}>\n            Loader Timeline\n          </Typography.Title>\n          <Popover\n            content={\n              <div>\n                {t('AsyncLoaderInfo')}\n                <a\n                  href=\"https://rsdoctor.rs/guide/more/faq#cssextractrspackplugin-%E7%9A%84-loader-%E8%80%97%E6%97%B6%E8%BF%87%E9%95%BF%E9%97%AE%E9%A2%98\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  {t('Details')}\n                </a>\n              </div>\n            }\n            title=\"Info\"\n          >\n            <Tag icon={<ExclamationCircleOutlined />} color=\"warning\">\n              Info\n            </Tag>\n          </Popover>\n        </Space>\n      }\n      extra={<WebpackConfigurationViewer defaultKeys={['module']} />}\n    >\n      <LoaderChart />\n    </Card>\n  );\n};\n\nexport * from './constants';\n"],"names":["Page","t","useTranslation","Card","Space","Typography","Popover","Tag","ExclamationCircleOutlined","WebpackConfigurationViewer","LoaderChart"],"mappings":";;;;;;;;;AAQO,MAAMA,OAAiB;IAC5B,MAAM,EAAEC,CAAC,EAAE,GAAGC;IACd,OAAO,WAAP,GACE,IAACC,MAAIA;QACH,qBACE,KAACC,OAAKA;YAAC,OAAM;;8BACX,IAACC,WAAW,KAAK;oBAAC,OAAO;oBAAG,OAAO;wBAAE,QAAQ;oBAAE;8BAAG;;8BAGlD,IAACC,SAAOA;oBACN,uBACE,KAAC;;4BACEL,EAAE;0CACH,IAAC;gCACC,MAAK;gCACL,QAAO;gCACP,KAAI;0CAEHA,EAAE;;;;oBAIT,OAAM;8BAEN,kBAACM,KAAGA;wBAAC,oBAAM,IAACC,2BAAyBA,CAAAA;wBAAK,OAAM;kCAAU;;;;;QAMhE,qBAAO,IAACC,4BAA0BA;YAAC,aAAa;gBAAC;aAAS;;kBAE1D,kBAACC,aAAWA,CAAAA;;AAGlB"}
+{"version":3,"file":"pages/WebpackLoaders/Overall/index.mjs","sources":["../../../../src/pages/WebpackLoaders/Overall/index.tsx"],"sourcesContent":["import React from 'react';\nimport { WebpackConfigurationViewer } from '../../../components/Configuration';\nimport { Card } from '../../../components/Card';\nimport { LoaderChart } from 'src/components/Charts';\nimport { Popover, Space, Tag, Typography } from 'antd';\nimport { ExclamationCircleOutlined } from '@ant-design/icons';\nimport { useTranslation } from 'react-i18next';\n\nexport const Page: React.FC = () => {\n  const { t } = useTranslation();\n  return (\n    <Card\n      title={\n        <Space align=\"baseline\">\n          <Typography.Title level={5} style={{ margin: 0 }}>\n            Loader Timeline\n          </Typography.Title>\n          <Popover\n            content={\n              <div>\n                {t('AsyncLoaderInfo')}\n                <a\n                  href=\"https://rsdoctor.rs/guide/more/faq#cssextractrspackplugin-%E7%9A%84-loader-%E8%80%97%E6%97%B6%E8%BF%87%E9%95%BF%E9%97%AE%E9%A2%98\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  {t('Details')}\n                </a>\n              </div>\n            }\n            title=\"Info\"\n          >\n            <Tag icon={<ExclamationCircleOutlined />} color=\"warning\">\n              Info\n            </Tag>\n          </Popover>\n        </Space>\n      }\n      extra={<WebpackConfigurationViewer defaultKeys={['module']} />}\n    >\n      <LoaderChart />\n    </Card>\n  );\n};\n\nexport * from './constants';\n"],"names":["Page","t","useTranslation","Card","Space","Typography","Popover","Tag","ExclamationCircleOutlined","WebpackConfigurationViewer","LoaderChart"],"mappings":";;;;;;;;;AAQO,MAAMA,OAAiB;IAC5B,MAAM,EAAEC,CAAC,EAAE,GAAGC;IACd,OAAO,WAAP,GACE,IAACC,MAAIA;QACH,qBACE,KAACC,OAAKA;YAAC,OAAM;;8BACX,IAACC,WAAW,KAAK;oBAAC,OAAO;oBAAG,OAAO;wBAAE,QAAQ;oBAAE;8BAAG;;8BAGlD,IAACC,SAAOA;oBACN,uBACE,KAAC;;4BACEL,EAAE;0CACH,IAAC;gCACC,MAAK;gCACL,QAAO;gCACP,KAAI;0CAEHA,EAAE;;;;oBAIT,OAAM;8BAEN,kBAACM,KAAGA;wBAAC,oBAAM,IAACC,2BAAyBA,CAAAA;wBAAK,OAAM;kCAAU;;;;;QAMhE,qBAAO,IAACC,4BAA0BA;YAAC,aAAa;gBAAC;aAAS;;kBAE1D,kBAACC,aAAWA,CAAAA;;AAGlB"}

package/dist/utils/hooks.d.ts

@@ -34,3 +34,4 @@ export declare function useElementSize<T extends HTMLElement = HTMLDivElement>()
     readonly height: number;
 }];
 export declare function usePersistedState<T>(baseKey: string, initialValue: T | (() => T)): [T, Dispatch<SetStateAction<T>>];
+export declare const useThemeToken: () => import("antd").GlobalToken;

package/dist/utils/hooks.mjs

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import url_parse from "url-parse";
+import { theme } from "antd";
 import "./i18n/index.mjs";
 import { setLocaleToStorage } from "./storage.mjs";
 const route = Client.RsdoctorClientRoutes.RuleIndex;
@@ -231,6 +232,10 @@ function usePersistedState(baseKey, initialValue) {
         setPersistedState
     ];
 }
-export { useBundleAlertsByErrors, useBundleAlertsByManifest, useChunkGraphByManifest, useCloudManifestUrlByManifest, useCompileAlertsByErrors, useConfigOutputFileNameByManifest, useDetectIfCloudIdeEnv, useDuplicatePackagesByErrors, useDuplicatePackagesByManifest, useElementSize, useErrorsByManifest, useHashByManifest, useI18n, useLoading, useModuleGraph, useModuleGraphByManifest, usePackageGraphByManifest, usePersistedState, useProjectRootByManifest, useRuleIndexNavigate, useUniqModules, useUniqModulesByManifest, useUrlQuery, useWebpackConfigurationByConfigs, useWindowWidth };
+const useThemeToken = ()=>{
+    const { token } = theme.useToken();
+    return token;
+};
+export { useBundleAlertsByErrors, useBundleAlertsByManifest, useChunkGraphByManifest, useCloudManifestUrlByManifest, useCompileAlertsByErrors, useConfigOutputFileNameByManifest, useDetectIfCloudIdeEnv, useDuplicatePackagesByErrors, useDuplicatePackagesByManifest, useElementSize, useErrorsByManifest, useHashByManifest, useI18n, useLoading, useModuleGraph, useModuleGraphByManifest, usePackageGraphByManifest, usePersistedState, useProjectRootByManifest, useRuleIndexNavigate, useThemeToken, useUniqModules, useUniqModulesByManifest, useUrlQuery, useWebpackConfigurationByConfigs, useWindowWidth };
 
 //# sourceMappingURL=hooks.mjs.map