docs: update

README.md

@@ -1,6 +1,6 @@
 # Dora中文社区官网
 
-`Dora中文社区`发起人： 李扬 2025 北京
+Dora中文社区发起人： 李扬 2025 北京
 
 `dora-rs` 作为一个为现代 `AI` 机器人应用设计的、高性能的机器人应用开发框架，正吸引着越来越多中文开发者的关注。尽管目前尚未形成一个集中化、大规模的官方中文社区论坛，但其社区生态已初具雏形，并呈现出活跃、分散且技术驱动的特点。
 

package.json

@@ -11,7 +11,7 @@
     "@rspress/core": "^2.0.0-beta.21"
   },
   "devDependencies": {
-    "@rstack-dev/doc-ui": "^1.10.8",
+    "@rstack-dev/doc-ui": "file:rstack-doc-ui",
     "@types/node": "^22.8.1"
   }
 }

rstack-doc-ui/.gitignore

@@ -0,0 +1,30 @@
+.DS_Store
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+.history
+*.log*
+storybook-static
+
+node_modules/
+.yarn-integrity
+.pnpm-store/
+*.tsbuildinfo
+.eslintcache
+.changeset/pre.json
+
+dist/
+coverage/
+release/
+output/
+output_resource/
+log/
+
+.vscode/**/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+
+**/*/typings/auto-generated

rstack-doc-ui/.npmrc

@@ -0,0 +1,2 @@
+registry = 'https://registry.npmjs.org/'
+strict-peer-dependencies=false

rstack-doc-ui/.nvmrc

@@ -0,0 +1 @@
+lts/hydrogen

rstack-doc-ui/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid"
+}

rstack-doc-ui/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Rspack Contrib
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

rstack-doc-ui/README.md

@@ -0,0 +1,41 @@
+# Rstack Doc UI
+
+Shared UI components for the Rstack websites.
+
+- <http://rspack.rs>
+- <http://rsbuild.rs>
+- <http://rspress.rs>
+- <http://rsdoctor.rs>
+- <http://rslib.rs>
+- <http://rstest.rs>
+
+> This package should only be used in Rstack projects.
+
+## Example
+
+`NavIcon` component:
+
+![image](https://github.com/user-attachments/assets/4132a171-8fc4-40cd-978b-95c37bea31df)
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm i
+```
+
+## Get Started
+
+Run and debug the module:
+
+```bash
+pnpm run build -w
+pnpm run storybook
+```
+
+Build the module for production:
+
+```bash
+pnpm run build
+```

rstack-doc-ui/biome.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "organizeImports": {
+    "enabled": true,
+    "include": [
+      "./**/*.js",
+      "./**/*.jsx",
+      "./**/*.ts",
+      "./**/*.tsx",
+      "./**/*.mjs",
+      "./**/*.cjs"
+    ]
+  },
+  "vcs": {
+    "enabled": true,
+    "defaultBranch": "main",
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignore": ["tsconfig.json", "tsconfig.*.json", ".vscode/**"],
+    "ignoreUnknown": true
+  },
+  "formatter": {
+    "enabled": false
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": {
+        "useFilenamingConvention": {
+          "level": "error",
+          "options": {
+            "filenameCases": ["camelCase", "PascalCase", "export"]
+          }
+        }
+      },
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      }
+    }
+  }
+}

rstack-doc-ui/package.json

@@ -0,0 +1,118 @@
+{
+  "name": "@rstack-dev/doc-ui",
+  "version": "1.10.8",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "packageManager": "pnpm@10.12.4",
+  "exports": {
+    "./nav-icon": {
+      "types": "./dist/nav-icon/index.d.ts",
+      "import": "./dist/nav-icon/index.js"
+    },
+    "./benchmark": {
+      "types": "./dist/benchmark/index.d.ts",
+      "import": "./dist/benchmark/index.js"
+    },
+    "./tool-stack": {
+      "types": "./dist/tool-stack/index.d.ts",
+      "import": "./dist/tool-stack/index.js"
+    },
+    "./section-style": {
+      "types": "./dist/section-style/index.d.ts",
+      "import": "./dist/section-style/index.js"
+    },
+    "./hero": {
+      "types": "./dist/hero/index.d.ts",
+      "import": "./dist/hero/index.js"
+    },
+    "./fully-featured": {
+      "types": "./dist/fully-featured/index.d.ts",
+      "import": "./dist/fully-featured/index.js"
+    },
+    "./built-with-rspack": {
+      "types": "./dist/built-with-rspack/index.d.ts",
+      "import": "./dist/built-with-rspack/index.js"
+    },
+    "./why-rspack": {
+      "types": "./dist/why-rspack/index.d.ts",
+      "import": "./dist/why-rspack/index.js"
+    },
+    "./background-image": {
+      "types": "./dist/background-image/index.d.ts",
+      "import": "./dist/background-image/index.js"
+    },
+    "./announcement": {
+      "types": "./dist/announcement/index.d.ts",
+      "import": "./dist/announcement/index.js"
+    },
+    "./antd": {
+      "types": "./dist/antd/index.d.ts",
+      "import": "./dist/antd/index.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rspack-contrib/rstack-doc-ui"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "pnpm run storybook",
+    "build-storybook": "storybook build",
+    "storybook": "storybook dev -p 6006",
+    "prepare": "rslib build && simple-git-hooks",
+    "build": "rslib build",
+    "build:watch": "rslib build -w",
+    "lint": "biome check",
+    "lint:fix": "biome check --write --unsafe",
+    "bump": "npx bumpp"
+  },
+  "dependencies": {
+    "framer-motion": "^12.20.1"
+  },
+  "nano-staged": {
+    "*.{md,mdx,json,css,less,scss}": "prettier --write",
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "biome check --write --formatter-enabled=false --linter-enabled=true --no-errors-on-unmatched",
+      "prettier --write"
+    ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx nano-staged"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@rsbuild/plugin-react": "1.3.2",
+    "@rsbuild/plugin-sass": "1.3.2",
+    "@rslib/core": "^0.10.4",
+    "@rstack-dev/doc-ui": "workspace:*",
+    "@storybook/addon-themes": "^9.0.14",
+    "@storybook/react": "^9.0.14",
+    "@types/node": "~22.15.34",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "antd": "^5.26.3",
+    "execa": "9.6.0",
+    "fs-extra": "11.3.0",
+    "lottie-web": "5.13.0",
+    "nano-staged": "^0.8.0",
+    "prettier": "~3.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.16.0",
+    "rimraf": "~6.0.1",
+    "semver": "7.7.2",
+    "simple-git-hooks": "^2.13.0",
+    "storybook": "^9.0.14",
+    "storybook-addon-rslib": "^2.0.2",
+    "storybook-react-rsbuild": "^2.0.2",
+    "typescript": "~5.8.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
+  }
+}

rstack-doc-ui/rslib.config.ts

@@ -0,0 +1,55 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  plugins: [pluginReact(), pluginSass()],
+  lib: [
+    {
+      format: 'esm',
+      syntax: 'es2018',
+      autoExternal: false,
+      banner: {
+        js: `import './index.css';`,
+      },
+      dts: true,
+      source: {
+        entry: {
+          'nav-icon': './src/nav-icon/index.tsx',
+          benchmark: './src/benchmark/index.tsx',
+          'tool-stack': './src/tool-stack/index.tsx',
+          hero: './src/hero/index.tsx',
+          'section-style': './src/section-style/index.tsx',
+          'fully-featured': './src/fully-featured/index.tsx',
+          'built-with-rspack': './src/built-with-rspack/index.tsx',
+          'why-rspack': './src/why-rspack/index.tsx',
+          'background-image': './src/background-image/index.tsx',
+          announcement: './src/announcement/index.tsx',
+        },
+      },
+    },
+    // without banner
+    {
+      format: 'esm',
+      syntax: 'es2018',
+      autoExternal: false,
+      dts: true,
+      source: {
+        entry: {
+          antd: './src/antd/index.tsx',
+        },
+      },
+    },
+  ],
+  output: {
+    target: 'web',
+    externals: ['react', 'react-dom', 'react/jsx-runtime', 'framer-motion'],
+    filename: {
+      js: '[name]/index.js',
+      css: '[name]/index.css',
+    },
+    distPath: {
+      css: '',
+    },
+  },
+});

rstack-doc-ui/src/announcement/close.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+
+function IconClose(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 1024 1024"
+      fill="currentColor"
+      height="1em"
+      width="1em"
+      {...props}
+    >
+      <title>IconClose</title>
+      <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" />
+    </svg>
+  );
+}
+
+export default IconClose;

rstack-doc-ui/src/announcement/index.module.scss

@@ -0,0 +1,42 @@
+.bar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  position: relative;
+  background-image: linear-gradient(
+    279deg,
+    hsl(32.71, 100%, 50%) 35.21%,
+    hsl(6.91, 94.76%, 67%) 63.34%
+  );
+  height: 36px;
+}
+
+.link {
+  color: #fff;
+  font-weight: bold;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+    opacity: 0.9;
+  }
+
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+.close {
+  right: 1.5rem;
+  font-size: 28px;
+  padding: 5px;
+  position: absolute;
+  cursor: pointer;
+  border-radius: 4px;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+}

rstack-doc-ui/src/announcement/index.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import IconCloseCircle from './close';
+import styles from './index.module.scss';
+
+export function Announcement({
+  href,
+  message,
+  localStorageKey,
+  display = true,
+  barClassName,
+}: {
+  href: string;
+  message: string | React.ReactNode;
+  localStorageKey: string;
+  display?: boolean;
+  barClassName?: string;
+}) {
+  if (!display) {
+    return null;
+  }
+  const [disable, setDisable] = useState(
+    window.localStorage.getItem(localStorageKey) ?? false,
+  );
+
+  if (disable) {
+    return null;
+  }
+
+  return (
+    <div className={`${styles.bar} ${barClassName}`}>
+      <a href={href} className={styles.link}>
+        {message}
+      </a>
+      <IconCloseCircle
+        onClick={() => {
+          setDisable(true);
+          window.localStorage.setItem(localStorageKey, 'true');
+        }}
+        className={styles.close}
+      />
+    </div>
+  );
+}

rstack-doc-ui/src/antd/index.tsx

@@ -0,0 +1,6 @@
+// Re-export antd components
+import Collapse from 'antd/es/collapse/Collapse';
+import ConfigProvider from 'antd/es/config-provider';
+import Tag from 'antd/es/tag';
+
+export { Collapse, ConfigProvider, Tag };

rstack-doc-ui/src/background-image/index.module.scss

@@ -0,0 +1,12 @@
+.background {
+  width: 100%;
+  position: absolute;
+  top: calc(-1 * var(--rp-nav-height));
+  left: 0;
+
+  z-index: -1;
+  filter: blur(2px);
+
+  pointer-events: none;
+  user-select: none;
+}

rstack-doc-ui/src/background-image/index.tsx

@@ -0,0 +1,61 @@
+import { type FC, useEffect, useState } from 'react';
+import styles from './index.module.scss';
+
+const useTopArrived = () => {
+  const [scrollY, setScrollY] = useState(0);
+  const topArrived = scrollY < 100;
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollY(window.scrollY);
+    };
+    window.addEventListener('scroll', handleScroll, {
+      capture: false,
+      passive: true,
+    });
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return {
+    topArrived,
+  };
+};
+
+export type BackgroundProps = {
+  navBarTopArrived?: boolean;
+};
+
+export const BackgroundImage: FC<BackgroundProps> = ({
+  navBarTopArrived = true,
+}) => {
+  const { topArrived } = useTopArrived();
+
+  useEffect(() => {
+    if (!navBarTopArrived) {
+      return;
+    }
+    if (topArrived) {
+      document.body.classList.remove('notTopArrived');
+    } else {
+      document.body.classList.add('notTopArrived');
+    }
+  }, [topArrived, navBarTopArrived]);
+
+  return (
+    <>
+      {/* For transparent navbar, overrides css only in homepage, and unmounted in other pages */}
+      <style>
+        {
+          ':root {--rp-c-bg: #0b0c0e;}:root:not(.dark) {--rp-c-bg: #fff;}.rspress-nav {transition: background 0.4s;}body:not(.notTopArrived) .rspress-nav {background: transparent !important;}'
+        }
+      </style>
+      <img
+        className={styles.background}
+        src="https://assets.rspack.rs/rspack/assets/landingpage-background-compressed.png"
+        alt="background"
+      />
+    </>
+  );
+};

rstack-doc-ui/src/benchmark/ProgressBar.module.scss

@@ -0,0 +1,63 @@
+.container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 18px;
+  border-radius: 10px;
+  box-sizing: content-box;
+  align-self: stretch;
+}
+
+@media screen and (max-width: 1060px) {
+  .container {
+    width: 85vw;
+  }
+}
+
+.innerContainer {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 8px;
+  background: var(--rp-c-gray-light-5);
+  border-radius: 5px;
+}
+
+:global(.dark) {
+  .innerContainer {
+    background: var(--rp-c-bg-soft);
+  }
+}
+
+.bar {
+  height: 100%;
+  border-radius: 5px;
+  background: var(
+    --rs-benchmark-bar-background,
+    linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%)
+  );
+}
+
+.desc {
+  min-width: 100px;
+  color: var(--rp-c-text-2);
+  font-size: 12px;
+  margin-left: 16px;
+  width: 100px;
+  font-family:
+    Menlo,
+    Monaco,
+    Lucida Console,
+    Liberation Mono,
+    DejaVu Sans Mono,
+    Bitstream Vera Sans Mono,
+    Courier New,
+    monospace;
+}
+
+.time {
+  display: inline-block;
+  width: 38px;
+  text-align: left;
+}

rstack-doc-ui/src/benchmark/ProgressBar.tsx

@@ -0,0 +1,53 @@
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import styles from './ProgressBar.module.scss';
+
+export function formatTime(time: number, totalTime: number) {
+  if (totalTime < 1000) {
+    return `${time.toFixed(0)}ms`;
+  }
+  return `${(time / 1000).toFixed(2)}s`;
+}
+
+export function ProgressBar({
+  value,
+  max,
+  desc,
+  inView,
+}: {
+  value: number;
+  max: number;
+  desc: string;
+  inView: boolean;
+}) {
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const TOTAL_TIME = value * 1000;
+  const variants = {
+    initial: { width: 0 },
+    animate: { width: `${(value / max) * 100}%` },
+  };
+
+  const formattedTime = formatTime(elapsedTime, TOTAL_TIME);
+  return (
+    <div className={styles.container}>
+      <div className={styles.innerContainer}>
+        {inView ? (
+          <motion.div
+            className={styles.bar}
+            initial="initial"
+            animate="animate"
+            variants={variants}
+            onUpdate={(latest: { width: string }) => {
+              const width = Number.parseFloat(latest.width);
+              setElapsedTime(width * max * 10);
+            }}
+            transition={{ duration: value, ease: 'linear' }}
+          />
+        ) : null}
+      </div>
+      <div className={styles.desc}>
+        <span className={styles.time}>{formattedTime}</span> {desc}
+      </div>
+    </div>
+  );
+}

rstack-doc-ui/src/benchmark/index.module.scss

@@ -0,0 +1,71 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.title {
+  color: var(--rp-c-text-1);
+}
+
+.desc {
+  color: var(--rp-c-text-2);
+}
+
+.bottomLink {
+  display: block;
+  margin-top: 16px;
+  font-size: 16px;
+  color: var(--rp-c-text-2);
+
+  &:hover {
+    color: var(--rp-c-link);
+  }
+}
+
+.progressName {
+  color: var(--rp-c-text-1);
+  font-size: 17px;
+  font-weight: 600;
+  min-width: 170px;
+}
+
+.item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  padding: 1.25rem;
+}
+
+.metricItem {
+  display: flex;
+  flex: 1 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+@media screen and (min-width: 1060px) {
+  .item {
+    flex-direction: row;
+  }
+}
+
+@media screen and (max-width: 1060px) {
+  .item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .progressName {
+    width: 180px;
+    margin-bottom: 8px;
+  }
+}

rstack-doc-ui/src/benchmark/index.tsx

@@ -0,0 +1,56 @@
+import { useInView } from 'react-intersection-observer';
+import { ProgressBar } from './ProgressBar';
+import styles from './index.module.scss';
+
+export type BenchmarkData = Record<
+  string,
+  {
+    label: string;
+    metrics: Array<{ time: number; desc: string }>;
+  }
+>;
+
+export interface BenchmarkProps {
+  data: BenchmarkData;
+}
+
+const findMaxTime = (data: BenchmarkData) => {
+  let max = 0;
+
+  for (const item of Object.values(data)) {
+    for (const metric of item.metrics) {
+      if (metric.time > max) {
+        max = metric.time;
+      }
+    }
+  }
+
+  return max;
+};
+
+export function Benchmark({ data }: BenchmarkProps) {
+  const maxTime = findMaxTime(data);
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+  });
+  return (
+    <div className={styles.root} ref={ref}>
+      {Object.values(data).map(item => (
+        <div key={item.label} className={styles.item}>
+          <p className={styles.progressName}>{item.label}</p>
+          <div className={styles.metricItem}>
+            {item.metrics.map(metric => (
+              <ProgressBar
+                key={metric.desc}
+                value={metric.time}
+                max={maxTime}
+                desc={metric.desc}
+                inView={inView}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

rstack-doc-ui/src/built-with-rspack/index.module.scss

@@ -0,0 +1,156 @@
+// M
+@media screen and (min-width: 601px) and (max-width: 1050px) {
+  .title {
+    font-size: 40px !important;
+    line-height: 48px !important;
+  }
+  .innerContainer {
+    background-size: 100% 100% !important;
+  }
+  .logo {
+    min-width: 180px !important;
+    transform: scale(0.8);
+    flex: 1 0 !important;
+  }
+}
+
+// S
+@media screen and (max-width: 600px) {
+  .title {
+    font-size: 30px !important;
+    line-height: 48px !important;
+  }
+
+  .innerContainer {
+    background-size: 100% 100% !important;
+    padding: 48px 0px 0px 0px !important;
+
+    &::before {
+      width: 300px !important;
+      height: 300px !important;
+    }
+
+    &::after {
+      width: 300px !important;
+      height: 300px !important;
+    }
+  }
+
+  .logo {
+    transform: scale(0.8);
+    max-width: 50% !important;
+    flex: 1 0 50% !important;
+  }
+}
+
+.innerContainer {
+  width: 100%;
+  display: flex;
+
+  box-sizing: border-box;
+
+  padding: 64px 48px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    width: 400px;
+    height: 400px;
+
+    user-select: none;
+
+    background: url('https://assets.rspack.rs/rspack/assets/landingpage-who-is-using-left-border.png')
+      no-repeat;
+    background-size: 100% 100%;
+
+    z-index: -1;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    width: 400px;
+    height: 400px;
+
+    user-select: none;
+
+    background: url('https://assets.rspack.rs/rspack/assets/landingpage-who-is-using-right-border.png')
+      no-repeat;
+    background-size: 100% 100%;
+
+    z-index: -1;
+  }
+  background-size: 100% 100%;
+}
+
+.title {
+  text-align: center;
+
+  /* Style 10 */
+
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal; /* 100% */
+
+  background: linear-gradient(279deg, #ff8b00 27.12%, #f93920 72.56%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.logos {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+  flex-wrap: wrap;
+  filter: var(--rs-built-with-rspack-invert-filter, none);
+
+  .logo {
+    min-height: 100px;
+    flex: 1 1 250px;
+    align-self: stretch;
+
+    padding-left: 8px;
+    padding-right: 8px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+
+    // reset style
+    text-decoration: none;
+  }
+
+  .logoText {
+    color: #0b0c0e;
+    text-align: center;
+
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 28px; /* 116.667% */
+  }
+}
+
+// ---------- dark mode
+:global {
+  html:not(.dark) {
+    --rs-built-with-rspack-invert-filter: none;
+  }
+
+  html.dark {
+    --rs-built-with-rspack-invert-filter: invert(1);
+  }
+}

rstack-doc-ui/src/built-with-rspack/index.tsx

@@ -0,0 +1,56 @@
+import { ALink, type LinkComp } from '../shared';
+
+import styles from './index.module.scss';
+
+export type Company = {
+  name: string;
+  logo: string;
+  url: string;
+  text?: string;
+  width?: string | number;
+};
+
+const CompanyItem = ({
+  item,
+  LinkComp,
+}: {
+  item: Company;
+  LinkComp: LinkComp;
+}) => {
+  const { logo, name, url, text, width } = item;
+  const Link = LinkComp;
+  return (
+    <Link className={styles.logo} href={url}>
+      <img src={logo} alt={name} style={{ width }} loading="lazy" />
+      {text !== undefined ? (
+        <span className={styles.logoText}>{text}</span>
+      ) : (
+        <></>
+      )}
+    </Link>
+  );
+};
+
+export type BuiltWithRspackProps = {
+  title: string;
+  LinkComp?: LinkComp;
+  companyList: Company[];
+};
+
+export const BuiltWithRspack: React.FC<BuiltWithRspackProps> = ({
+  title,
+  LinkComp,
+  companyList,
+}) => {
+  const Link = LinkComp ?? ALink;
+  return (
+    <div className={styles.innerContainer}>
+      <h2 className={styles.title}>{title}</h2>
+      <div className={styles.logos}>
+        {companyList.map(i => {
+          return <CompanyItem key={i.name} item={i} LinkComp={Link} />;
+        })}
+      </div>
+    </div>
+  );
+};

rstack-doc-ui/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types='@rslib/core/types' />

rstack-doc-ui/src/fully-featured/index.module.scss

@@ -0,0 +1,127 @@
+// M
+@media screen and (min-width: 601px) and (max-width: 1000px) {
+  .features {
+    flex-wrap: wrap !important;
+    gap: 32px 16px !important;
+  }
+  .featureCard {
+    max-width: 50% !important;
+    flex: 1 0 45% !important;
+  }
+  .main {
+    gap: 32px !important;
+  }
+}
+
+// S
+@media screen and (max-width: 600px) {
+  .features {
+    flex-wrap: wrap;
+  }
+  .featureCard {
+    max-width: 50% !important;
+    flex: 1 0 40% !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    align-items: center !important;
+
+    .featureTitle {
+      text-align: center !important;
+    }
+    .featureDescription {
+      display: none !important;
+    }
+  }
+
+  .main {
+    gap: 16px !important;
+  }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+}
+
+.features {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 16px;
+
+  .featureCard {
+    // reset
+    text-decoration: none;
+    h2 {
+      margin: 0;
+    }
+    p {
+      margin: 0;
+    }
+
+    display: flex;
+    flex: 1 1 25%;
+    align-items: flex-start;
+    gap: 16px;
+    min-height: 110px;
+
+    &:hover {
+      transition: all 0.2s ease-out;
+      transform: scale(1.04, 1.04);
+      opacity: 0.8;
+    }
+
+    .icon {
+      filter: var(--rs-fully-featured-invert-filter, none);
+      display: flex;
+      width: 32px;
+      height: 32px;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .featureContent {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      text-align: left;
+      gap: 8px;
+
+      .featureTitle {
+        color: var(--rs-fully-featured-title-color, #0b0c0e);
+
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 150%; /* 27px */
+      }
+
+      .featureDescription {
+        color: var(--rs-fully-featured-desc-color, #6b7075);
+
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 23.8px; /* 158.667% */
+      }
+    }
+  }
+}
+
+// ---------- dark mode
+:global {
+  html:not(.dark) {
+    --rs-fully-featured-title-color: #0b0c0e;
+    --rs-fully-featured-desc-color: #6b7075;
+    --rs-fully-featured-invert-filter: none;
+  }
+
+  html.dark {
+    --rs-fully-featured-title-color: white;
+    --rs-fully-featured-desc-color: #c6cacd;
+    --rs-fully-featured-invert-filter: invert(1);
+  }
+}

rstack-doc-ui/src/fully-featured/index.tsx

@@ -0,0 +1,50 @@
+import type { FC } from 'react';
+import { ALink, type LinkComp } from '../shared';
+import styles from './index.module.scss';
+
+export type Feature = {
+  icon: string;
+  title: string;
+  description: string;
+  link: string;
+};
+
+export type FullyFeaturedProps = {
+  LinkComp?: LinkComp;
+  /**
+   * 8 or 12 or 16
+   */
+  featureRows: Feature[][];
+};
+
+export const FullyFeatured: FC<FullyFeaturedProps> = ({
+  LinkComp,
+  featureRows,
+}) => {
+  const Link = LinkComp ?? ALink;
+
+  return (
+    <div className={styles.main}>
+      {featureRows.map((row, index) => {
+        return (
+          <div className={styles.features} key={index}>
+            {row.map(({ icon, description, link, title }, index) => (
+              <Link key={index} className={styles.featureCard} href={link}>
+                <img
+                  src={icon}
+                  alt={index.toString()}
+                  className={styles.icon}
+                  loading="lazy"
+                />
+                <div className={styles.featureContent}>
+                  <h2 className={styles.featureTitle}>{title}</h2>
+                  <p className={styles.featureDescription}>{description}</p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

rstack-doc-ui/src/hero/BackgroundStar.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useRef, useState } from 'react';
+import styles from './index.module.scss';
+
+const BackgroundStar = ({
+  top,
+  left,
+  pageX,
+  pageY,
+  size,
+}: {
+  top: number | string;
+  left: number | string;
+  pageX: number | null;
+  pageY: number | null;
+  size: number;
+}) => {
+  const ref = useRef<any>();
+  const [transformX, setTransformX] = useState<number>(0);
+  const [transformY, setTransformY] = useState<number>(0);
+  useEffect(() => {
+    if (ref.current) {
+      const { x, y } = ref.current.getBoundingClientRect();
+
+      if (pageX && pageY) {
+        const distanceX = pageX - x;
+        const distanceY = pageY - y;
+        if (Math.abs(distanceX) < 100 && Math.abs(distanceY) < 100) {
+          setTransformX(distanceX);
+          setTransformY(distanceY);
+        } else {
+          setTransformX(0);
+          setTransformY(0);
+        }
+      }
+    }
+  }, [pageX, pageY]);
+
+  return (
+    <div
+      className={styles.backgroundStarContainer}
+      ref={ref}
+      style={{
+        top,
+        left,
+      }}
+    >
+      <svg
+        className={styles.backgroundStar}
+        style={{
+          width: size,
+          height: size,
+          transform: `translate(${transformX}px, ${transformY}px)`,
+        }}
+        xmlns="http://www.w3.org/2000/svg"
+        width="8"
+        height="9"
+        viewBox="0 0 8 9"
+        fill="none"
+        role="img"
+        aria-label="star"
+      >
+        <title />
+        <circle cx="4" cy="4.5" r="4" fill="url(#paint0_radial_2202_5618)" />
+        <defs>
+          <radialGradient
+            id="paint0_radial_2202_5618"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(4 4.49998) scale(3.77871 4.29149)"
+          >
+            <stop stopColor="#FF8B00" />
+            <stop offset="0.38" stopColor="#F2A65A" />
+            <stop offset="0.59" stopColor="#FFB966" />
+            <stop offset="0.92" stopColor="#FF8B00" />
+          </radialGradient>
+        </defs>
+      </svg>
+    </div>
+  );
+};
+
+export default BackgroundStar;

rstack-doc-ui/src/hero/index.module.scss

@@ -0,0 +1,220 @@
+// S
+@media screen and (max-width: 600px) {
+  .logoImg {
+    height: 100px !important;
+  }
+  .buttonGroup {
+    display: flex;
+    padding-top: 16px;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    align-self: stretch;
+  }
+  .button {
+    width: 100% !important;
+  }
+  .innerHero {
+    height: auto !important;
+    padding: 24px !important;
+  }
+  .title {
+    font-size: 32px !important;
+    line-height: normal !important;
+  }
+  .subtitle {
+    font-size: 20px !important;
+    line-height: normal !important;
+  }
+  .description {
+    font-size: 16px !important;
+    line-height: 20px;
+  }
+
+  .backgroundStarContainer {
+    display: none !important;
+  }
+}
+
+:global {
+  html:not(.dark) {
+    --rs-hero-title-color: #0b0c0e;
+    --rstack-hero-desc-color: #6b7075;
+  }
+  html.dark {
+    --rs-hero-title-color: white;
+    --rstack-hero-desc-color: #c6cacd;
+  }
+}
+
+.hero {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-size: cover;
+  position: relative;
+
+  p {
+    margin: 0;
+  }
+  h1 {
+    margin: 0;
+  }
+}
+
+.innerHero {
+  display: flex;
+  width: 100%;
+  height: 646px;
+  padding: 64px 0px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+}
+
+.logo {
+  position: relative;
+  user-select: none;
+
+  .logoImg {
+    height: 180px;
+  }
+
+  .ovalBg {
+    width: 80%; // 216.225px * 1.4
+    height: 80%;
+    z-index: -1;
+    position: absolute;
+    // our logo center is on the right and down
+    top: calc(50% + 5px);
+    left: calc(50% + 5px);
+    transform: translate(-50%, -50%);
+    background: var(--rs-hero-oval-background, #dfc228);
+    filter: var(--rs-hero-oval-filter, blur(40px));
+    border-radius: 50%;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+  }
+}
+
+.title {
+  text-align: center;
+
+  font-size: 72px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 93.6px; /* 130% */
+
+  // background
+  background: var(
+    --rs-hero-title-gradient,
+    linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.subtitle {
+  color: var(--rs-hero-title-color, #0b0c0e);
+  text-align: center;
+
+  font-size: 50px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 72px; /* 144% */
+}
+
+.description {
+  color: var(--rstack-hero-desc-color, #6b7075);
+  text-align: center;
+  /* Style 5 */
+
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.buttonGroup {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.button {
+  min-width: 120px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 28px 12px 28px;
+  border-radius: 25px;
+  text-align: center;
+  text-decoration: none;
+
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%; /* 24px */
+  text-transform: capitalize;
+
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    opacity: 0.75;
+    transform: translate3d(0, -2px, 0);
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+}
+
+.buttonPrimary {
+  // style
+  border: none;
+  background: var(
+    --rs-hero-button-gradient,
+    linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%)
+  );
+  // text
+  color: #fff;
+}
+
+.githubIcon {
+  width: 22px;
+  height: 22px;
+  color: currentColor;
+  margin-right: 8px;
+}
+
+.buttonSecondary {
+  // style
+  border: 1.5px solid var(--rs-hero-button-border, #ff8b00);
+  background: transparent;
+  // text
+  color: var(--rs-hero-title-color, #0b0c0e);
+}
+
+.backgroundStarContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+
+  user-select: none;
+  pointer-events: none;
+
+  .backgroundStar {
+    transition: all 0.2s;
+    filter: blur(2px);
+
+    user-select: none;
+    pointer-events: none;
+  }
+}

rstack-doc-ui/src/hero/index.tsx

@@ -0,0 +1,164 @@
+import type { FC } from 'react';
+import { useRef, useState } from 'react';
+import BackgroundStar from './BackgroundStar';
+import styles from './index.module.scss';
+
+const positions = [
+  [91.4, 22.9],
+  [36, 67.6],
+  [94.1, 47.7],
+  [33.8, 32.5],
+  [43.1, 77.6],
+  [9.8, 73.4],
+  [16.1, 17.1],
+  [1, 10],
+  [88.3, 44.9],
+  [19.3, 79],
+  [28.5, 11.8],
+  [94.6, 44.9],
+  [53.8, 3.4],
+  [41.7, 20],
+  [56.9, 80.6],
+  [16.4, 83.4],
+  [39.4, 66.8],
+  [19, 18.4],
+  [25.1, 28.1],
+  [18.9, 35.6],
+  [32.9, 12.3],
+  [21.2, 72.8],
+  [83.3, 79.8],
+  [71.4, 36.8],
+  [62.2, 50.4],
+  [45.4, 13.7],
+  [61.1, 28.5],
+  [18.2, 64.1],
+  [40.7, 34.7],
+  [87.6, 20.7],
+  [78.3, 30.8],
+  [84.4, 58.2],
+  [74.2, 74.5],
+  [12.4, 66.4],
+  [68.2, 41.6],
+];
+
+const useMouseMove = () => {
+  const ref = useRef<any>();
+  const [pageX, setPageX] = useState<null | number>(null);
+  const [pageY, setPageY] = useState<null | number>(null);
+
+  const handleMove = ({ pageX, pageY }: { pageX: number; pageY: number }) => {
+    setPageX(pageX);
+    setPageY(pageY);
+  };
+
+  return {
+    ref,
+    pageX,
+    pageY,
+    onMouseMove: handleMove,
+  };
+};
+
+type HeroProps = {
+  onClickGetStarted: () => void;
+  onClickLearnMore?: () => void;
+
+  showStars?: boolean;
+  showOvalBg?: boolean;
+  logoUrl?: string;
+  title?: string;
+  subTitle?: string;
+  description?: string;
+  getStartedButtonText?: string;
+  learnMoreButtonText?: string;
+  githubURL?: string;
+};
+
+export const Hero: FC<HeroProps> = ({
+  onClickGetStarted,
+  onClickLearnMore,
+  showStars = false,
+  showOvalBg = true,
+  logoUrl = 'https://assets.rspack.rs/rspack/rspack-logo.svg',
+  title = 'Rspack',
+  subTitle = 'The fast Rust-based web bundler',
+  description = 'Seamlessly replace webpack with compatible API',
+  getStartedButtonText = 'Get Started',
+  learnMoreButtonText = 'Learn More',
+  githubURL,
+}) => {
+  const { pageX, pageY, ref, onMouseMove } = useMouseMove();
+
+  return (
+    <section className={styles.hero} ref={ref} onMouseMove={onMouseMove}>
+      <div className={styles.innerHero}>
+        {showStars
+          ? positions.map(([top, left], i) => {
+              return (
+                <BackgroundStar
+                  key={i}
+                  top={`${top}%`}
+                  left={`${left}%`}
+                  size={i / 20 + 3}
+                  pageX={pageX}
+                  pageY={pageY}
+                />
+              );
+            })
+          : null}
+        <div className={styles.logo}>
+          <img
+            src={logoUrl}
+            className={`${styles.logoImg} rs-logo`}
+            alt="logo"
+          />
+          {showOvalBg ? <div className={`${styles.ovalBg} rs-oval`} /> : null}
+        </div>
+        <h1 className={styles.title}>
+          <span>{title}</span>
+        </h1>
+        <p className={styles.subtitle}>{subTitle}</p>
+        <p className={styles.description}>{description}</p>
+        <div className={styles.buttonGroup}>
+          <button
+            className={`${styles.button} ${styles.buttonPrimary}`}
+            type="button"
+            onClick={onClickGetStarted}
+          >
+            {getStartedButtonText}
+          </button>
+          {githubURL ? (
+            <a
+              href={githubURL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={`${styles.button} ${styles.buttonSecondary}`}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="100%"
+                viewBox="0 0 24 24"
+                className={styles.githubIcon}
+              >
+                <title>GitHub</title>
+                <path
+                  fill="currentColor"
+                  d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+                />
+              </svg>
+              GitHub
+            </a>
+          ) : (
+            <button
+              className={`${styles.button} ${styles.buttonSecondary}`}
+              type="button"
+              onClick={onClickLearnMore}
+            >
+              {learnMoreButtonText}
+            </button>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};

rstack-doc-ui/src/nav-icon/components/Link.module.scss

@@ -0,0 +1,47 @@
+.root {
+  display: inline-flex;
+  text-decoration: none;
+  align-items: center;
+  width: 240px;
+  padding: 8px 0 8px 8px;
+  border-radius: 12px;
+  box-sizing: border-box;
+  transition: background-color 0.2s ease-in-out;
+  margin-bottom: 12px;
+
+  &:nth-child(2n + 1) {
+    margin-right: 16px;
+  }
+
+  &:hover {
+    background-color: var(--rp-c-bg-mute);
+  }
+}
+
+.name {
+  font-weight: 500;
+  font-size: 15px;
+  color: var(--rp-c-text-1);
+}
+
+.desc {
+  font-size: 12px;
+  line-height: 16px;
+  margin-top: 4px;
+  color: rgba(60, 60, 60, 0.5);
+
+  :global(.dark) & {
+    color: rgba(255, 255, 255, 0.6);
+  }
+}
+
+.logo {
+  width: 52px;
+  height: 52px;
+  margin-right: 20px;
+  object-fit: contain;
+
+  :global(.dark) & {
+    opacity: 0.9;
+  }
+}

rstack-doc-ui/src/nav-icon/components/Link.tsx

@@ -0,0 +1,41 @@
+import type { Lang } from '../utils';
+import style from './Link.module.scss';
+
+export type LinkInfo = {
+  name: string;
+  desc: string;
+  descEn?: string;
+  url: string;
+  urlEn?: string;
+  logo: string;
+  logoScale?: number;
+};
+
+export type LinkProps = LinkInfo & {
+  lang: Lang;
+};
+
+const IMAGE_PLACEHOLDER =
+  'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=';
+
+export const Link = (props: LinkProps) => {
+  const desc = props.lang === 'en' && props.descEn ? props.descEn : props.desc;
+  const url = props.lang === 'en' && props.urlEn ? props.urlEn : props.url;
+
+  return (
+    <a className={style.root} href={url} target="_blank" rel="noreferrer">
+      <img
+        className={style.logo}
+        src={props.logo || IMAGE_PLACEHOLDER}
+        alt={props.name}
+        style={{
+          transform: props.logoScale ? `scale(${props.logoScale})` : '',
+        }}
+      />
+      <div className={style.content}>
+        <div className={style.name}>{props.name}</div>
+        <div className={style.desc}>{desc}</div>
+      </div>
+    </a>
+  );
+};

rstack-doc-ui/src/nav-icon/components/LinkGroup.module.scss

@@ -0,0 +1,20 @@
+.root {
+  &:not(:last-child) {
+    margin-bottom: 12px;
+  }
+}
+
+@media (min-width: 1600px) {
+  .root {
+    &:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  }
+}
+
+.title {
+  color: var(--rp-c-text-1);
+  font-size: 15px;
+  font-weight: 500;
+  margin: 0 0 8px 6px;
+}

rstack-doc-ui/src/nav-icon/components/LinkGroup.tsx

@@ -0,0 +1,19 @@
+import type { Lang } from '../utils';
+import { Link, type LinkInfo } from './Link';
+import style from './LinkGroup.module.scss';
+
+export const LinkGroup = (props: {
+  title: string;
+  titleEn: string;
+  lang: Lang;
+  links: LinkInfo[];
+}) => {
+  const Links = props.links.map(link => (
+    <Link key={link.name} {...link} lang={props.lang} />
+  ));
+  return (
+    <div className={style.root}>
+      <div className={style.links}>{Links}</div>
+    </div>
+  );
+};

rstack-doc-ui/src/nav-icon/components/PopoverContent.module.scss

@@ -0,0 +1,34 @@
+.header {
+  border-bottom: 1px solid rgba(60, 60, 60, 0.07);
+  padding-bottom: 16px;
+  margin-bottom: 24px;
+
+  :global(.dark) & {
+    border-color: rgba(255, 255, 255, 0.14);
+  }
+}
+
+.title {
+  display: inline-flex;
+  align-items: center;
+  padding-left: 6px;
+  color: var(--rp-c-text-1);
+  font-size: 22px;
+  line-height: 1.2;
+
+  &:hover {
+    color: var(--rp-c-text-1);
+  }
+}
+
+.titleText {
+  margin-top: 1px;
+  font-weight: 600;
+}
+
+.logo {
+  width: 28px;
+  height: 28px;
+  margin-right: 12px;
+  object-fit: contain;
+}

rstack-doc-ui/src/nav-icon/components/PopoverContent.tsx

@@ -0,0 +1,32 @@
+import type { Lang, NavConfig } from '../utils';
+import { LinkGroup } from './LinkGroup';
+// import style from './PopoverContent.module.scss';
+
+export const PopoverContent = ({
+  lang,
+  config,
+}: {
+  config: NavConfig;
+  lang: Lang;
+}) => (
+  <div>
+    {/* <div className={style.header}>
+      <a
+        href="https://github.com/web-infra-dev"
+        target="_blank"
+        rel="noreferrer"
+        className={style.title}
+      >
+        <img
+          src="https://assets.rspack.rs/web-infra/web-infra-logo.svg"
+          className={style.logo}
+          alt="web-infra-logo"
+        />
+        <div className={style.titleText}>Rstack</div>
+      </a>
+    </div> */}
+    {config.map(item => (
+      <LinkGroup {...item} lang={lang} key={item.title} />
+    ))}
+  </div>
+);

rstack-doc-ui/src/nav-icon/index.module.scss

@@ -0,0 +1,71 @@
+.root {
+  display: inline-block;
+  position: relative;
+  padding-right: 20px;
+  margin-right: 20px;
+
+  &::after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    width: 1px;
+    height: 24px;
+    background-color: var(--rp-c-divider-light);
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.popover {
+  z-index: 999;
+
+  :global(.ant-popover-inner) {
+    box-sizing: border-box;
+    width: 552px;
+    padding: 24px 28px 14px;
+    border-radius: 24px;
+    background-color: var(--rp-c-bg);
+    overflow: hidden;
+    font-family:
+      'Open Sans',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Fira Sans',
+      'Droid Sans',
+      'Helvetica Neue',
+      sans-serif;
+
+    :global(.dark) & {
+      background-color: var(--rp-c-bg-soft);
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .popover {
+    :global(.ant-popover-inner) {
+      width: 80vw;
+    }
+  }
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 99px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: var(--rp-c-bg-mute);
+  }
+}

rstack-doc-ui/src/nav-icon/index.tsx

@@ -0,0 +1,36 @@
+import Popover from 'antd/es/popover';
+import { PopoverContent } from './components/PopoverContent';
+import style from './index.module.scss';
+import navConfig from './nav-config.json';
+import { type Lang, getLang } from './utils';
+
+export interface NavIconProps {
+  lang?: Lang;
+  trigger?: 'hover' | 'focus' | 'click';
+}
+
+export const NavIcon = (props: NavIconProps = {}) => {
+  const lang = props.lang || getLang();
+
+  return (
+    <div className={style.root}>
+      <Popover
+        arrow={false}
+        trigger={props.trigger}
+        placement="bottomLeft"
+        content={<PopoverContent lang={lang} config={navConfig} />}
+        overlayClassName={style.popover}
+      >
+        <div className={style.wrapper}>
+          <svg width="20" height="20" fill="none">
+            <title>close</title>
+            <path
+              d="M2.5 5H5V2.5H2.5V5zM5 11.25H2.5v-2.5H5v2.5zm12.5 0H15v-2.5h2.5v2.5zm-8.75 0h2.5v-2.5h-2.5v2.5zM5 17.5H2.5V15H5v2.5zm10 0h2.5V15H15v2.5zm-3.75 0h-2.5V15h2.5v2.5zM17.5 5H15V2.5h2.5V5zM8.75 5h2.5V2.5h-2.5V5z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </Popover>
+    </div>
+  );
+};

rstack-doc-ui/src/nav-icon/nav-config.json

@@ -0,0 +1,36 @@
+[
+  {
+    "title": "",
+    "titleEn": "",
+    "links": [
+      {
+        "name": "dora-rs",
+        "desc": "AI时代机器人框架",
+        "descEn": "AI时代机器人框架",
+        "logo": "https://g.hgcdn.cn/doracc/dora.svg",
+        "url": "https://dora-rs.ai"
+      },
+      {
+        "name": "Github",
+        "desc": "dora-rs Github仓库",
+        "descEn": "dora-rs Github仓库",
+        "logo": "https://g.hgcdn.cn/static/github-480.png",
+        "url": "https://github.com/dora-rs/dora"
+      },
+      {
+        "name": "doracc.com",
+        "desc": "中文社区仓库",
+        "descEn": "中文社区仓库",
+        "logo": "https://g.hgcdn.cn/static/github-480.png",
+        "url": "https://github.com/DoraCN/doracc.com"
+      },
+      {
+        "name": "李扬",
+        "desc": "我的技术笔记",
+        "descEn": "我的技术笔记",
+        "logo": "https://g.hgcdn.cn/echoli/avatar256.png",
+        "url": "https://echoli.cn"
+      }
+    ]
+  }
+]

rstack-doc-ui/src/nav-icon/utils.ts

@@ -0,0 +1,22 @@
+import type { LinkInfo } from './components/Link';
+
+const removeTrailingSlash = (path: string) =>
+  path.endsWith('/') ? path.slice(0, -1) : path;
+
+export type Lang = 'zh' | 'en';
+
+export function getLang(): Lang {
+  if (typeof window === 'undefined') {
+    return 'en';
+  }
+  const { location } = window;
+  const langPrefix =
+    location.pathname === '/' ? '' : removeTrailingSlash(location.pathname);
+  return langPrefix.includes('zh') ? 'zh' : 'en';
+}
+
+export type NavConfig = Array<{
+  title: string;
+  titleEn: string;
+  links: LinkInfo[];
+}>;

rstack-doc-ui/src/section-style/index.tsx

@@ -0,0 +1,16 @@
+import sharedStyles from './shared.module.scss';
+
+const containerStyle = sharedStyles.container;
+const innerContainerStyle = sharedStyles.innerContainer;
+
+const titleAndDescStyle = sharedStyles.titleAndDesc;
+const titleStyle = sharedStyles.title;
+const descStyle = sharedStyles.desc;
+
+export {
+  containerStyle,
+  innerContainerStyle,
+  titleAndDescStyle,
+  titleStyle,
+  descStyle,
+};

rstack-doc-ui/src/section-style/shared.module.scss

@@ -0,0 +1,141 @@
+// ---------- responsive layout
+// XXL > 1440
+// XL 1280 - 1440
+// L 835 - 1280
+// M 601 - 834
+// S < 601
+
+// XL
+@media screen and (min-width: 1281px) {
+  .container {
+    padding: 96px 144px !important;
+  }
+  .titleAndDesc {
+    padding: 0px 144px 28px 144px !important;
+  }
+}
+
+// L
+@media screen and (min-width: 835px) and (max-width: 1280px) {
+  .container {
+    padding: 80px 80px !important;
+  }
+  .titleAndDesc {
+    padding: 0px 16px 28px !important;
+  }
+}
+
+// M
+@media screen and (min-width: 601px) and (max-width: 834px) {
+  .container {
+    padding: 64px 32px !important;
+
+    .innerContainer {
+      gap: 16px !important;
+    }
+  }
+
+  .titleAndDesc {
+    padding: 0px 16px 28px !important;
+    gap: 16px !important;
+
+    .title {
+      font-size: 32px !important;
+    }
+
+    .desc {
+      font-size: 16px !important;
+    }
+  }
+}
+
+// S
+@media screen and (max-width: 600px) {
+  .container {
+    padding: 64px 24px 24px !important;
+
+    .innerContainer {
+      gap: 16px !important;
+    }
+  }
+
+  .titleAndDesc {
+    padding: 0px 16px !important;
+    gap: 16px !important;
+
+    .title {
+      font-size: 24px !important;
+    }
+
+    .desc {
+      font-size: 15px !important;
+    }
+  }
+}
+
+// 1. container for padding
+// 2. innerContainer for max-width
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 32px; //move to mediaQuery
+
+  .innerContainer {
+    display: flex;
+    gap: 32px;
+    flex-direction: column;
+    width: 100%;
+
+    max-width: 1296px;
+  }
+}
+
+.titleAndDesc {
+  display: flex;
+  padding: 0px 144px 32px 144px;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  align-self: stretch;
+
+  .title {
+    margin: 0;
+
+    color: var(--landingpage-title-color, #0b0c0e);
+    text-align: center;
+
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 700;
+  }
+
+  .desc {
+    margin: 0;
+
+    color: var(--landingpage-desc-color, #6b7075);
+    text-align: center;
+
+    /* Style 11 */
+
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px;
+    max-width: 760px;
+  }
+}
+
+// ---------- dark mode
+:global {
+  html:not(.dark) {
+    --landingpage-title-color: #0b0c0e;
+    --landingpage-desc-color: #6b7075;
+  }
+
+  html.dark {
+    --landingpage-title-color: white;
+    --landingpage-desc-color: #c6cacd;
+  }
+}

rstack-doc-ui/src/shared.tsx

@@ -0,0 +1,21 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+type LinkProps = {
+  className: string;
+  href: string;
+  children: ReactNode;
+  style?: CSSProperties;
+};
+
+export type LinkComp = (props: LinkProps) => JSX.Element;
+
+/**
+ * A backup link component, import { Link } from 'rspress/theme' to replace it
+ */
+export const ALink: LinkComp = ({ className, href, children, style }) => {
+  return (
+    <a href={href} className={className} style={style}>
+      {children}
+    </a>
+  );
+};

rstack-doc-ui/src/tool-stack/index.module.scss

@@ -0,0 +1,147 @@
+// L - Large screens: three cards per row
+@media screen and (min-width: 1101px) {
+  .tools {
+    .tool {
+      min-width: calc(33.33% - 21.33px);
+      max-width: calc(33.33% - 21.33px);
+      flex: 0 0 calc(33.33% - 21.33px);
+    }
+  }
+}
+
+// M - Medium screens: two cards per row
+@media screen and (min-width: 601px) and (max-width: 1100px) {
+  .tools {
+    .tool {
+      min-width: calc(50% - 16px);
+      max-width: calc(50% - 16px);
+      flex: 0 0 calc(50% - 16px);
+    }
+  }
+}
+
+// S - Small screens: one card per row
+@media screen and (max-width: 600px) {
+  .tools {
+    flex-direction: column;
+    .tool {
+      width: 100%;
+    }
+  }
+}
+
+:global {
+  html:not(.dark) {
+    --rs-tool-stack-shadow-color: #f9f9f9;
+    --rs-tool-stack-title-color: #0b0c0e;
+    --rs-tool-stack-desc-color: #8fa1b9;
+
+    --rs-tool-stack-card-stroke: rgba(143, 161, 185, 0.3);
+    --rs-tool-stack-card-gradient: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 1),
+      rgba(249, 249, 249, 0.5)
+    );
+    --rs-tools-stack-url-color: #f93920;
+  }
+  html.dark {
+    --rs-tool-stack-shadow-color: #23272f;
+    --rs-tool-stack-title-color: white;
+    --rs-tool-stack-desc-color: #8fa1b9;
+    --rs-tool-stack-card-stroke: #23272f;
+    --rs-tool-stack-card-gradient: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.03)
+    );
+    --rs-tools-stack-url-color: #ff704d;
+  }
+}
+
+.tools {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 32px;
+}
+
+.tool {
+  cursor: pointer;
+  text-decoration: none;
+
+  display: flex;
+  flex: 1 1 0;
+  padding: 24px;
+  box-sizing: border-box;
+
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+  align-self: stretch;
+
+  // style
+  border-radius: 10px;
+  border: 1px solid var(--rs-tool-stack-card-stroke);
+  background: var(--rs-tool-stack-card-gradient);
+  transition: all 0.2s ease-out;
+
+  &:hover {
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  .logo {
+    width: 52px;
+    height: 52px;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+
+  .toolContent {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .toolTitle {
+    color: var(--rs-tool-stack-title-color);
+    text-align: center;
+
+    font-size: 19px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    margin-top: 4px;
+  }
+
+  .toolDescription {
+    color: var(--rs-tool-stack-desc-color);
+    text-align: left;
+    height: 48px;
+
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    margin: 0;
+  }
+
+  .toolUrl {
+    color: var(--rs-tools-stack-url-color);
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+    width: 100%;
+  }
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}

rstack-doc-ui/src/tool-stack/index.tsx

@@ -0,0 +1,105 @@
+import type React from 'react';
+import { memo } from 'react';
+import {
+  descStyle,
+  innerContainerStyle,
+  titleAndDescStyle,
+  titleStyle,
+} from '../section-style';
+import styles from './index.module.scss';
+
+export const ToolStack: React.FC<{ lang: string }> = memo(({ lang }) => {
+  const isEn = lang === 'en';
+  const tools = [
+    {
+      name: 'Rspack',
+      desc: isEn
+        ? 'A high performance JavaScript bundler written in Rust, with webpack-compatible API'
+        : '基于 Rust 编写的高性能 JavaScript 打包工具，具备与 webpack 兼容的 API',
+      logo: 'https://assets.rspack.rs/rspack/rspack-logo.svg',
+      url: 'https://rspack.rs',
+      urlText: 'rspack.rs',
+    },
+    {
+      name: 'Rsbuild',
+      desc: isEn
+        ? 'An Rspack-based build tool that provides out-of-the-box setup'
+        : '基于 Rspack 的构建工具，包含开箱即用的预设配置，带来愉悦的开发体验',
+      logo: 'https://assets.rspack.rs/rsbuild/rsbuild-logo.svg',
+      url: 'https://rsbuild.rs',
+      urlText: 'rsbuild.rs',
+    },
+    {
+      name: 'Rslib',
+      desc: isEn
+        ? 'A Rsbuild-based library development tool for creating libraries and UI components'
+        : '基于 Rsbuild 的库开发工具，以简单的方式创建 JavaScript 库和 UI 组件库',
+      logo: 'https://assets.rspack.rs/rslib/rslib-logo.svg',
+      url: 'https://rslib.rs',
+      urlText: 'rslib.rs',
+    },
+    {
+      name: 'Rspress',
+      desc: isEn
+        ? 'An Rsbuild-based static site generator for creating documentation sites'
+        : '基于 Rsbuild 的静态站点生成器，用于创建优雅的文档站点',
+      logo: 'https://assets.rspack.rs/rspress/rspress-logo-480x480.png',
+      url: 'https://rspress.rs',
+      urlText: 'rspress.rs',
+    },
+    {
+      name: 'Rsdoctor',
+      desc: isEn
+        ? 'A one-stop build analyzer that makes the build process transparent'
+        : '一站式的构建分析工具，使构建流程变得透明、可预测和可优化',
+      logo: 'https://assets.rspack.rs/rsdoctor/rsdoctor-logo-480x480.png',
+      url: 'https://rsdoctor.rs',
+      urlText: 'rsdoctor.rs',
+    },
+    {
+      name: 'Rstest',
+      desc: isEn
+        ? 'An testing framework that provides first-class support for Rspack ecosystem'
+        : '基于 Rspack 的测试框架，为 Rspack 生态提供全面、一流的支持',
+      logo: 'https://assets.rspack.rs/rstest/rstest-logo.svg',
+      url: 'https://rstest.rs/',
+      urlText: 'rstest.rs',
+    },
+  ];
+
+  return (
+    <div className={innerContainerStyle}>
+      <div className={titleAndDescStyle}>
+        <h1 className={titleStyle}>Rstack</h1>
+        <p className={descStyle}>
+          {isEn
+            ? 'A unified JavaScript toolchain built around Rspack, with high performance and consistent architecture'
+            : '围绕 Rspack 打造的 JavaScript 统一工具链，具有优秀的性能和一致的架构'}
+        </p>
+      </div>
+      <div className={styles.tools}>
+        {tools.map(({ name, desc, logo, url, urlText }) => {
+          return (
+            <a
+              target="_blank"
+              rel="noreferrer"
+              className={[styles.tool, styles.rainbow].join(' ')}
+              key={name}
+              href={url}
+            >
+              <img
+                src={logo}
+                alt={name}
+                className={styles.logo}
+                loading="lazy"
+              />
+              <div className={styles.toolTitle}>{name}</div>
+              <p className={styles.toolDescription}>{desc}</p>
+              <div className={styles.toolUrl}>{urlText}</div>
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+});

rstack-doc-ui/src/why-rspack/assets/Compatible.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" width="424"
+  height="424" preserveAspectRatio="xMidYMid meet"
+  style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible; background-color: transparent;">
+  <defs>
+    <clipPath id="__lottie_element_33">
+      <rect width="128" height="128" x="0" y="0" />
+    </clipPath>
+  </defs>
+  <g clip-path="url(#__lottie_element_33)">
+    <g transform="matrix(0.7400000095367432,0,0,0.7400000095367432,23.299999237060547,38.84000015258789)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,27,34)">
+        <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+          stroke="rgb(255,138,0)" stroke-opacity="1" stroke-width="5"
+          d=" M10,-27 C10,-27 14,-27 14,-27 C16.827999114990234,-27 18.243000030517578,-27 19.121000289916992,-26.121000289916992 C20,-25.243000030517578 20,-23.827999114990234 20,-21 C20,-21 20,-13.5 20,-13.5 M-10,-27 C-10,-27 -14,-27 -14,-27 C-16.827999114990234,-27 -18.243000030517578,-27 -19.121000289916992,-26.121000289916992 C-20,-25.243000030517578 -20,-23.827999114990234 -20,-21 C-20,-21 -20,-13.5 -20,-13.5 M-20,13.5 C-20,13.5 -20,21 -20,21 C-20,23.827999114990234 -20,25.243000030517578 -19.121000289916992,26.121000289916992 C-18.243000030517578,27 -16.827999114990234,27 -14,27 C-14,27 -10,27 -10,27 M10,27 C10,27 14,27 14,27 C16.827999114990234,27 18.243000030517578,27 19.121000289916992,26.121000289916992 C20,25.243000030517578 20,23.827999114990234 20,21 C20,21 20,13.5 20,13.5" />
+      </g>
+    </g>
+    <g transform="matrix(0.7400000095367432,0,0,0.7400000095367432,64.73999786376953,38.84000015258789)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,27,34)">
+        <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+          stroke="rgb(255,138,0)" stroke-opacity="1" stroke-width="5"
+          d=" M-20,-13.5 C-20,-13.5 -20,-21 -20,-21 C-20,-23.827999114990234 -20,-25.243000030517578 -19.121000289916992,-26.121000289916992 C-18.243000030517578,-27 -16.827999114990234,-27 -14,-27 C-14,-27 14,-27 14,-27 C16.827999114990234,-27 18.243000030517578,-27 19.121000289916992,-26.121000289916992 C20,-25.243000030517578 20,-23.827999114990234 20,-21 C20,-21 20,21 20,21 C20,23.827999114990234 20,25.243000030517578 19.121000289916992,26.121000289916992 C18.243000030517578,27 16.827999114990234,27 14,27 C14,27 -14,27 -14,27 C-16.827999114990234,27 -18.243000030517578,27 -19.121000289916992,26.121000289916992 C-20,25.243000030517578 -20,23.827999114990234 -20,21 C-20,21 -20,13.5 -20,13.5" />
+      </g>
+    </g>
+    <g transform="matrix(0.7400000095367432,0,0,0.7400000095367432,40.689998626708984,52.900001525878906)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,58.5,15)">
+        <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)" stroke-opacity="1"
+          stroke-width="6" d=" M-4,8 C-4,8 4,0 4,0 C4,0 -4,-8 -4,-8" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+        <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+          stroke="rgb(249,57,32)" stroke-opacity="1" stroke-width="6" d=" M3.5,15 C3.5,15 62.5,15 62.5,15" />
+      </g>
+    </g>
+  </g>
+</svg>

rstack-doc-ui/src/why-rspack/assets/FrameCheck.svg

@@ -0,0 +1,154 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" width="424"
+  height="424" preserveAspectRatio="xMidYMid meet"
+  style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible; background-color: transparent;">
+  <defs>
+    <clipPath id="__lottie_element_63">
+      <rect width="500" height="500" x="0" y="0" />
+    </clipPath>
+    <g id="__lottie_element_65">
+      <g transform="matrix(1.0061625242233276,0,0,0.9938374161720276,250.00027465820312,250)" opacity="1"
+        style="display: block;">
+        <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+          <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+            stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="40"
+            d=" M-75,-17 C-75,-17 -19,39.5 -19,39.5 C-19,39.5 76.5,-53.5 76.5,-53.5" />
+        </g>
+      </g>
+    </g>
+    <g id="__lottie_element_74">
+      <g style="display: none;">
+        <g>
+          <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" />
+        </g>
+      </g>
+    </g>
+    <mask id="__lottie_element_74_1" mask-type="alpha">
+      <use xmlns:ns1="http://www.w3.org/1999/xlink" ns1:href="#__lottie_element_74" />
+    </mask>
+    <mask id="__lottie_element_65_1" mask-type="alpha">
+      <use xmlns:ns2="http://www.w3.org/1999/xlink" ns2:href="#__lottie_element_65" />
+    </mask>
+  </defs>
+  <g clip-path="url(#__lottie_element_63)">
+    <g transform="matrix(5,0,0,5,261.4599914550781,239.63499450683594)" opacity="1" style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+        <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M-12.093000411987305,-14.88700008392334 C-13.126999855041504,-16.679000854492188 -18.301000595092773,-25.639999389648438 -18.301000595092773,-25.639999389648438" />
+            </g>
+          </g>
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M-21.884000778198242,2.072999954223633 C-23.952999114990234,2.072999954223633 -34.30099868774414,2.072999954223633 -34.30099868774414,2.072999954223633" />
+            </g>
+          </g>
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M-12.093000411987305,19.033000946044922 C-13.126999855041504,20.825000762939453 -18.301000595092773,29.785999298095703 -18.301000595092773,29.785999298095703" />
+            </g>
+          </g>
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M7.491000175476074,19.033000946044922 C8.524999618530273,20.825000762939453 13.699000358581543,29.785999298095703 13.699000358581543,29.785999298095703" />
+            </g>
+          </g>
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M17.281999588012695,2.072999954223633 C19.35099983215332,2.072999954223633 29.698999404907227,2.072999954223633 29.698999404907227,2.072999954223633" />
+            </g>
+          </g>
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M7.491000175476074,-14.88700008392334 C8.524999618530273,-16.679000854492188 13.699000358581543,-25.639999389648438 13.699000358581543,-25.639999389648438" />
+            </g>
+          </g>
+        </g>
+        <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M-2.302000045776367,-21.732999801635742 C-2.302000045776367,-22.617000579833984 -2.302000045776367,-27.040000915527344 -2.302000045776367,-27.040000915527344" />
+              </g>
+            </g>
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M-22.90399932861328,-9.826000213623047 C-23.67099952697754,-10.269000053405762 -27.50200080871582,-12.479999542236328 -27.50200080871582,-12.479999542236328" />
+              </g>
+            </g>
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M-22.90399932861328,13.97599983215332 C-23.67099952697754,14.416999816894531 -27.50200080871582,16.6200008392334 -27.50200080871582,16.6200008392334" />
+              </g>
+            </g>
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M-2.302000045776367,25.87299919128418 C-2.302000045776367,26.759000778198242 -2.302000045776367,31.190000534057617 -2.302000045776367,31.190000534057617" />
+              </g>
+            </g>
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M18.309999465942383,13.97599983215332 C19.07699966430664,14.418999671936035 22.908000946044922,16.6299991607666 22.908000946044922,16.6299991607666" />
+              </g>
+            </g>
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M18.31100082397461,-9.836000442504883 C19.077999114990234,-10.279000282287598 22.917999267578125,-12.489999771118164 22.917999267578125,-12.489999771118164 C22.917999267578125,-12.489999771118164 22.917999267578125,-12.489999771118164 22.917999267578125,-12.489999771118164" />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+    <g mask="url(#__lottie_element_74_1)" style="display: block;">
+      <g transform="matrix(5.030812740325928,0,0,4.969187259674072,261.5308837890625,239.69886779785156)" opacity="1">
+        <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <path fill="rgb(255,138,0)" fill-opacity="1"
+              d=" M12.762999534606934,-8.520000457763672 C11.515000343322754,-9.767999649047852 9.494000434875488,-9.767999649047852 8.246000289916992,-8.520000457763672 C8.246000289916992,-8.520000457763672 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -12.847000122070312,-0.7950000166893005 -12.847000122070312,-0.7950000166893005 C-14.095000267028809,-2.0420000553131104 -16.117000579833984,-2.0420000553131104 -17.364999771118164,-0.7950000166893005 C-18.613000869750977,0.453000009059906 -18.613000869750977,2.4749999046325684 -17.364999771118164,3.7230000495910645 C-17.364999771118164,3.7230000495910645 -8.42199993133545,12.666000366210938 -8.42199993133545,12.666000366210938 C-7.173999786376953,13.913000106811523 -5.1529998779296875,13.913000106811523 -3.9049999713897705,12.666000366210938 C-3.9049999713897705,12.666000366210938 12.762999534606934,-4.001999855041504 12.762999534606934,-4.001999855041504 C14.01099967956543,-5.25 14.01099967956543,-7.2729997634887695 12.762999534606934,-8.520000457763672z" />
+            <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+              stroke-opacity="1" stroke-width="0.5"
+              d=" M12.762999534606934,-8.520000457763672 C11.515000343322754,-9.767999649047852 9.494000434875488,-9.767999649047852 8.246000289916992,-8.520000457763672 C8.246000289916992,-8.520000457763672 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -12.847000122070312,-0.7950000166893005 -12.847000122070312,-0.7950000166893005 C-14.095000267028809,-2.0420000553131104 -16.117000579833984,-2.0420000553131104 -17.364999771118164,-0.7950000166893005 C-18.613000869750977,0.453000009059906 -18.613000869750977,2.4749999046325684 -17.364999771118164,3.7230000495910645 C-17.364999771118164,3.7230000495910645 -8.42199993133545,12.666000366210938 -8.42199993133545,12.666000366210938 C-7.173999786376953,13.913000106811523 -5.1529998779296875,13.913000106811523 -3.9049999713897705,12.666000366210938 C-3.9049999713897705,12.666000366210938 12.762999534606934,-4.001999855041504 12.762999534606934,-4.001999855041504 C14.01099967956543,-5.25 14.01099967956543,-7.2729997634887695 12.762999534606934,-8.520000457763672z" />
+          </g>
+        </g>
+      </g>
+    </g>
+    <g mask="url(#__lottie_element_65_1)" style="display: block;">
+      <g transform="matrix(5.030812740325928,0,0,4.969187259674072,261.5308837890625,239.69886779785156)" opacity="1">
+        <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <path fill="rgb(255,138,0)" fill-opacity="1"
+              d=" M12.762999534606934,-8.520000457763672 C11.515000343322754,-9.767999649047852 9.494000434875488,-9.767999649047852 8.246000289916992,-8.520000457763672 C8.246000289916992,-8.520000457763672 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -12.847000122070312,-0.7950000166893005 -12.847000122070312,-0.7950000166893005 C-14.095000267028809,-2.0420000553131104 -16.117000579833984,-2.0420000553131104 -17.364999771118164,-0.7950000166893005 C-18.613000869750977,0.453000009059906 -18.613000869750977,2.4749999046325684 -17.364999771118164,3.7230000495910645 C-17.364999771118164,3.7230000495910645 -8.42199993133545,12.666000366210938 -8.42199993133545,12.666000366210938 C-7.173999786376953,13.913000106811523 -5.1529998779296875,13.913000106811523 -3.9049999713897705,12.666000366210938 C-3.9049999713897705,12.666000366210938 12.762999534606934,-4.001999855041504 12.762999534606934,-4.001999855041504 C14.01099967956543,-5.25 14.01099967956543,-7.2729997634887695 12.762999534606934,-8.520000457763672z" />
+            <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+              stroke-opacity="1" stroke-width="0.5"
+              d=" M12.762999534606934,-8.520000457763672 C11.515000343322754,-9.767999649047852 9.494000434875488,-9.767999649047852 8.246000289916992,-8.520000457763672 C8.246000289916992,-8.520000457763672 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -12.847000122070312,-0.7950000166893005 -12.847000122070312,-0.7950000166893005 C-14.095000267028809,-2.0420000553131104 -16.117000579833984,-2.0420000553131104 -17.364999771118164,-0.7950000166893005 C-18.613000869750977,0.453000009059906 -18.613000869750977,2.4749999046325684 -17.364999771118164,3.7230000495910645 C-17.364999771118164,3.7230000495910645 -8.42199993133545,12.666000366210938 -8.42199993133545,12.666000366210938 C-7.173999786376953,13.913000106811523 -5.1529998779296875,13.913000106811523 -3.9049999713897705,12.666000366210938 C-3.9049999713897705,12.666000366210938 12.762999534606934,-4.001999855041504 12.762999534606934,-4.001999855041504 C14.01099967956543,-5.25 14.01099967956543,-7.2729997634887695 12.762999534606934,-8.520000457763672z" />
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

rstack-doc-ui/src/why-rspack/assets/Lightning.json

@@ -0,0 +1,981 @@
+{
+  "nm": "4",
+  "h": 1000,
+  "w": 1000,
+  "meta": { "g": "@lottiefiles/toolkit-js 0.33.2" },
+  "layers": [
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 0,
+      "op": 60,
+      "ip": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [-206.132, -265.931, 0] },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 6
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 16
+            },
+            {
+              "o": { "x": 0.302, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 26
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 36
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 46
+            },
+            { "s": [80, 80, 100], "t": 56 }
+          ]
+        },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [293.868, 234.069, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, -17.121],
+                    [17.121, 0],
+                    [0, 17.121],
+                    [-17.121, 0]
+                  ],
+                  "o": [
+                    [0, 17.121],
+                    [-17.121, 0],
+                    [0, -17.121],
+                    [17.121, 0]
+                  ],
+                  "v": [
+                    [-175.132, -265.931],
+                    [-206.132, -234.931],
+                    [-237.132, -265.931],
+                    [-206.132, -296.931]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [0.977, 0.224, 0.126] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, 0] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 1
+    },
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 0,
+      "op": 60,
+      "ip": 0,
+      "hd": true,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [-219.132, -71.931, 0] },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 4
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 14
+            },
+            {
+              "o": { "x": 0.302, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 24
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 34
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 44
+            },
+            { "s": [80, 80, 100], "t": 54 }
+          ]
+        },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [280.868, 428.069, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, -17.121],
+                    [17.121, 0],
+                    [0, 17.121],
+                    [-17.121, 0]
+                  ],
+                  "o": [
+                    [0, 17.121],
+                    [-17.121, 0],
+                    [0, -17.121],
+                    [17.121, 0]
+                  ],
+                  "v": [
+                    [-188.132, -71.931],
+                    [-219.132, -40.931],
+                    [-250.132, -71.931],
+                    [-219.132, -102.931]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [0.977, 0.224, 0.126] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, 0] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 2
+    },
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 0,
+      "op": 60,
+      "ip": 0,
+      "hd": true,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [90.868, 267.069, 0] },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 0
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 10
+            },
+            {
+              "o": { "x": 0.302, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 20
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 30
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 40
+            },
+            { "s": [80, 80, 100], "t": 50 }
+          ]
+        },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [590.868, 767.069, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, -17.121],
+                    [17.121, 0],
+                    [0, 17.121],
+                    [-17.121, 0]
+                  ],
+                  "o": [
+                    [0, 17.121],
+                    [-17.121, 0],
+                    [0, -17.121],
+                    [17.121, 0]
+                  ],
+                  "v": [
+                    [121.868, 267.069],
+                    [90.868, 298.069],
+                    [59.868, 267.069],
+                    [90.868, 236.069]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [0.977, 0.224, 0.126] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, 0] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 3
+    },
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 0,
+      "op": 60,
+      "ip": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [246.868, 177.069, 0] },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 2
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 12
+            },
+            {
+              "o": { "x": 0.302, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 22
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 32
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 42
+            },
+            { "s": [80, 80, 100], "t": 52 }
+          ]
+        },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [746.868, 677.069, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, -17.121],
+                    [17.121, 0],
+                    [0, 17.121],
+                    [-17.121, 0]
+                  ],
+                  "o": [
+                    [0, 17.121],
+                    [-17.121, 0],
+                    [0, -17.121],
+                    [17.121, 0]
+                  ],
+                  "v": [
+                    [277.868, 177.069],
+                    [246.868, 208.069],
+                    [215.868, 177.069],
+                    [246.868, 146.069]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [0.977, 0.224, 0.126] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, 0] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 4
+    },
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 32,
+      "op": 58,
+      "ip": 32,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [0, -6.227, 0] },
+        "s": { "a": 0, "k": [100, 100, 100] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [500, 493.773, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "gr",
+              "nm": "G",
+              "it": [
+                {
+                  "ty": "sh",
+                  "nm": "P",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": false,
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [-0.356, -0.001],
+                        [0, 0],
+                        [0.255, -0.261],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [-0.237, 0.266],
+                        [0, 0],
+                        [0.365, 0.001],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [312.568, -298.069],
+                        [225.406, -200.118],
+                        [225.713, -199.431],
+                        [331.13, -199.187],
+                        [331.425, -198.486],
+                        [238.693, -103.386]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "st",
+                  "nm": "S",
+                  "lc": 2,
+                  "lj": 1,
+                  "ml": 10,
+                  "o": { "a": 0, "k": 100 },
+                  "w": { "a": 0, "k": 40 },
+                  "c": { "a": 0, "k": [0.977, 0.224, 0.126] }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [0, 0] },
+                  "s": { "a": 0, "k": [100, 100] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [0, 0] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            },
+            {
+              "ty": "gr",
+              "nm": "G",
+              "it": [
+                {
+                  "ty": "sh",
+                  "nm": "P",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": false,
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [-0.356, -0.001],
+                        [0, 0],
+                        [0.255, -0.261],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [-0.237, 0.266],
+                        [0, 0],
+                        [0.365, 0.001],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [-244.276, 90.931],
+                        [-331.438, 188.882],
+                        [-331.13, 189.569],
+                        [-225.713, 189.813],
+                        [-225.418, 190.514],
+                        [-318.15, 285.614]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "st",
+                  "nm": "S",
+                  "lc": 2,
+                  "lj": 1,
+                  "ml": 10,
+                  "o": { "a": 0, "k": 100 },
+                  "w": { "a": 0, "k": 40 },
+                  "c": { "a": 0, "k": [0.977, 0.224, 0.126] }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [0, 0] },
+                  "s": { "a": 0, "k": [100, 100] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [0, 0] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, -6.227] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, -6.227] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "tm",
+          "nm": "T",
+          "e": {
+            "a": 1,
+            "k": [
+              {
+                "o": { "x": 0.333, "y": 0 },
+                "i": { "x": 0.667, "y": 1 },
+                "s": [0],
+                "t": 32
+              },
+              { "s": [100], "t": 48.667 }
+            ]
+          },
+          "o": { "a": 0, "k": 0 },
+          "s": {
+            "a": 1,
+            "k": [
+              {
+                "o": { "x": 0.333, "y": 0 },
+                "i": { "x": 0.667, "y": 1 },
+                "s": [0],
+                "t": 40.333
+              },
+              { "s": [100], "t": 57 }
+            ]
+          },
+          "m": 1
+        }
+      ],
+      "ind": 5
+    },
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 0,
+      "op": 26,
+      "ip": 0,
+      "hd": true,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [0, -6.227, 0] },
+        "s": { "a": 0, "k": [100, 100, 100] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [500, 493.773, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "gr",
+              "nm": "G",
+              "it": [
+                {
+                  "ty": "sh",
+                  "nm": "P",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": false,
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [-0.356, -0.001],
+                        [0, 0],
+                        [0.255, -0.261],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [-0.237, 0.266],
+                        [0, 0],
+                        [0.365, 0.001],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [312.568, -298.069],
+                        [225.406, -200.118],
+                        [225.713, -199.431],
+                        [331.13, -199.187],
+                        [331.425, -198.486],
+                        [238.693, -103.386]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "st",
+                  "nm": "S",
+                  "lc": 2,
+                  "lj": 1,
+                  "ml": 10,
+                  "o": { "a": 0, "k": 100 },
+                  "w": { "a": 0, "k": 40 },
+                  "c": { "a": 0, "k": [0.977, 0.224, 0.126] }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [0, 0] },
+                  "s": { "a": 0, "k": [100, 100] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [0, 0] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            },
+            {
+              "ty": "gr",
+              "nm": "G",
+              "it": [
+                {
+                  "ty": "sh",
+                  "nm": "P",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": false,
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [-0.356, -0.001],
+                        [0, 0],
+                        [0.255, -0.261],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [-0.237, 0.266],
+                        [0, 0],
+                        [0.365, 0.001],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [-244.276, 90.931],
+                        [-331.438, 188.882],
+                        [-331.13, 189.569],
+                        [-225.713, 189.813],
+                        [-225.418, 190.514],
+                        [-318.15, 285.614]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "st",
+                  "nm": "S",
+                  "lc": 2,
+                  "lj": 1,
+                  "ml": 10,
+                  "o": { "a": 0, "k": 100 },
+                  "w": { "a": 0, "k": 40 },
+                  "c": { "a": 0, "k": [0.977, 0.224, 0.126] }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [0, 0] },
+                  "s": { "a": 0, "k": [100, 100] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [0, 0] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, -6.227] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, -6.227] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "tm",
+          "nm": "T",
+          "e": {
+            "a": 1,
+            "k": [
+              {
+                "o": { "x": 0.333, "y": 0 },
+                "i": { "x": 0.667, "y": 1 },
+                "s": [0],
+                "t": 0
+              },
+              { "s": [100], "t": 16.667 }
+            ]
+          },
+          "o": { "a": 0, "k": 0 },
+          "s": {
+            "a": 1,
+            "k": [
+              {
+                "o": { "x": 0.333, "y": 0 },
+                "i": { "x": 0.667, "y": 1 },
+                "s": [0],
+                "t": 8.333
+              },
+              { "s": [100], "t": 25 }
+            ]
+          },
+          "m": 1
+        }
+      ],
+      "ind": 6
+    },
+    {
+      "ty": 4,
+      "nm": "L",
+      "sr": 1,
+      "st": 0,
+      "op": 60,
+      "ip": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [0, 0, 0] },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 1, "y": 0 },
+              "i": { "x": 0.986, "y": 1 },
+              "s": [90, 90, 100],
+              "t": 0
+            },
+            {
+              "o": { "x": 0.029, "y": 0 },
+              "i": { "x": 0, "y": 1 },
+              "s": [110, 110, 100],
+              "t": 10
+            },
+            {
+              "o": { "x": 0.167, "y": 0.167 },
+              "i": { "x": 0.833, "y": 0.833 },
+              "s": [90, 90, 100],
+              "t": 20
+            },
+            {
+              "o": { "x": 1, "y": 0 },
+              "i": { "x": 0.986, "y": 1 },
+              "s": [90, 90, 100],
+              "t": 30
+            },
+            {
+              "o": { "x": 0.029, "y": 0 },
+              "i": { "x": 0, "y": 1 },
+              "s": [110, 110, 100],
+              "t": 40
+            },
+            { "s": [90, 90, 100], "t": 50 }
+          ]
+        },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [500, 500, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [-4.421, 0],
+                    [0, 0],
+                    [4.998, -7.629],
+                    [0, 0],
+                    [-8.916, -0.343],
+                    [0, 0],
+                    [1.489, -1.671],
+                    [0, 0],
+                    [-0.471, 2.761],
+                    [0, 0],
+                    [7.107, 0],
+                    [0, 0],
+                    [-1.24, 2.597],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [9.121, 0],
+                    [0, 0],
+                    [-4.89, 7.463],
+                    [0, 0],
+                    [2.237, 0.086],
+                    [0, 0],
+                    [-1.863, 2.092],
+                    [0, 0],
+                    [1.196, -7.006],
+                    [0, 0],
+                    [-2.878, 0],
+                    [0, 0],
+                    [1.904, -3.99]
+                  ],
+                  "v": [
+                    [-47.265, -200.931],
+                    [132.183, -200.931],
+                    [141.778, -183.173],
+                    [20.147, -50.415],
+                    [29.301, -32.665],
+                    [170.905, -39.436],
+                    [172.78, -35.029],
+                    [-105.788, 294.269],
+                    [-110.619, 291.945],
+                    [-45.238, 55.037],
+                    [-56.546, 41.635],
+                    [-158.029, 53.186],
+                    [-161.561, 47.587],
+                    [-57.617, -194.401]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "st",
+              "nm": "S",
+              "lc": 1,
+              "lj": 1,
+              "ml": 10,
+              "o": { "a": 0, "k": 100 },
+              "w": { "a": 0, "k": 40 },
+              "c": { "a": 0, "k": [1, 0.545, 0] }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, 0] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 7
+    }
+  ],
+  "v": "5.9.6",
+  "fr": 20,
+  "op": 60,
+  "ip": 0,
+  "assets": []
+}

rstack-doc-ui/src/why-rspack/assets/Lightning.svg

@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" width="424"
+  height="424" preserveAspectRatio="xMidYMid meet"
+  style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible; background-color: transparent;">
+  <defs>
+    <clipPath id="__lottie_element_10">
+      <rect width="1000" height="1000" x="0" y="0" />
+    </clipPath>
+  </defs>
+  <g clip-path="url(#__lottie_element_10)">
+    <g transform="matrix(0.8999999761581421,0,0,0.8999999761581421,500,500)" opacity="1" style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+        <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="10"
+          stroke="rgb(255,138,0)" stroke-opacity="1" stroke-width="40"
+          d=" M-47.26499938964844,-200.93099975585938 C-47.26499938964844,-200.93099975585938 132.18299865722656,-200.93099975585938 132.18299865722656,-200.93099975585938 C141.3040008544922,-200.93099975585938 146.7760009765625,-190.802001953125 141.7779998779297,-183.17300415039062 C141.7779998779297,-183.17300415039062 20.14699935913086,-50.415000915527344 20.14699935913086,-50.415000915527344 C15.256999969482422,-42.95199966430664 20.385000228881836,-33.007999420166016 29.301000595092773,-32.665000915527344 C29.301000595092773,-32.665000915527344 170.90499877929688,-39.43600082397461 170.90499877929688,-39.43600082397461 C173.14199829101562,-39.349998474121094 174.2689971923828,-36.70000076293945 172.77999877929688,-35.02899932861328 C172.77999877929688,-35.02899932861328 -105.78800201416016,294.2690124511719 -105.78800201416016,294.2690124511719 C-107.6510009765625,296.3609924316406 -111.08999633789062,294.70599365234375 -110.61900329589844,291.94500732421875 C-110.61900329589844,291.94500732421875 -45.237998962402344,55.0369987487793 -45.237998962402344,55.0369987487793 C-44.04199981689453,48.03099822998047 -49.43899917602539,41.6349983215332 -56.54600143432617,41.6349983215332 C-56.54600143432617,41.6349983215332 -158.0290069580078,53.18600082397461 -158.0290069580078,53.18600082397461 C-160.90699768066406,53.18600082397461 -162.80099487304688,50.183998107910156 -161.56100463867188,47.58700180053711 C-161.56100463867188,47.58700180053711 -57.617000579833984,-194.4010009765625 -57.617000579833984,-194.4010009765625 C-55.7130012512207,-198.39100646972656 -51.68600082397461,-200.93099975585938 -47.26499938964844,-200.93099975585938z" />
+      </g>
+    </g>
+    <g style="display: none;">
+      <g>
+        <g>
+          <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="10" />
+        </g>
+        <g>
+          <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="10" />
+        </g>
+      </g>
+    </g>
+    <g transform="matrix(0.800000011920929,0,0,0.800000011920929,549.3735961914062,535.4137573242188)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+        <path fill="rgb(249,57,32)" fill-opacity="1"
+          d=" M277.8680114746094,177.06900024414062 C277.8680114746094,194.19000244140625 263.989013671875,208.06900024414062 246.8679962158203,208.06900024414062 C229.7469940185547,208.06900024414062 215.8679962158203,194.19000244140625 215.8679962158203,177.06900024414062 C215.8679962158203,159.947998046875 229.7469940185547,146.06900024414062 246.8679962158203,146.06900024414062 C263.989013671875,146.06900024414062 277.8680114746094,159.947998046875 277.8680114746094,177.06900024414062z" />
+      </g>
+    </g>
+    <g transform="matrix(0.800000011920929,0,0,0.800000011920929,458.77362060546875,446.81378173828125)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+        <path fill="rgb(249,57,32)" fill-opacity="1"
+          d=" M-175.1320037841797,-265.9309997558594 C-175.1320037841797,-248.80999755859375 -189.01100158691406,-234.93099975585938 -206.1320037841797,-234.93099975585938 C-223.2530059814453,-234.93099975585938 -237.1320037841797,-248.80999755859375 -237.1320037841797,-265.9309997558594 C-237.1320037841797,-283.052001953125 -223.2530059814453,-296.9309997558594 -206.1320037841797,-296.9309997558594 C-189.01100158691406,-296.9309997558594 -175.1320037841797,-283.052001953125 -175.1320037841797,-265.9309997558594z" />
+      </g>
+    </g>
+  </g>
+</svg>

rstack-doc-ui/src/why-rspack/assets/Speedometer.json

@@ -0,0 +1,876 @@
+{
+  "nm": "S",
+  "h": 1080,
+  "w": 1920,
+  "meta": { "g": "@lottiefiles/toolkit-js 0.33.2" },
+  "layers": [
+    {
+      "ty": 4,
+      "nm": "L",
+      "sr": 1,
+      "st": 0,
+      "op": 50,
+      "ip": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [41.993, 169.381, 0] },
+        "s": { "a": 0, "k": [264, 264] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [944, 940] },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [-126],
+              "t": 0
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [54],
+              "t": 41
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [54],
+              "t": 53
+            },
+            { "s": [-126], "t": 81 }
+          ]
+        },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [8.14, 0],
+                    [0, 8.139],
+                    [-8.14, 0],
+                    [0, -8.14]
+                  ],
+                  "o": [
+                    [-8.14, 0],
+                    [0, -8.14],
+                    [8.14, 0],
+                    [0, 8.139]
+                  ],
+                  "v": [
+                    [-37.84, 72.65],
+                    [-52.579, 57.911],
+                    [-37.84, 43.172],
+                    [-23.102, 57.911]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [3.141, 0],
+                    [0, -15.935],
+                    [-2.847, -4.471],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-3.199, 0],
+                    [0, 15.933],
+                    [3.158, 4.627],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [-2.831, -0.928],
+                    [-15.934, 0],
+                    [0, 5.692],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [2.875, 0.962],
+                    [15.934, 0],
+                    [0, -6.026],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-28.853, 30.507],
+                    [-37.84, 29.06],
+                    [-66.691, 57.911],
+                    [-62.173, 73.366],
+                    [-81.743, 93.661],
+                    [-61.673, 109.13],
+                    [-46.983, 85.258],
+                    [-37.84, 86.762],
+                    [-8.99, 57.911],
+                    [-14.001, 41.668],
+                    [81.743, -109.13]
+                  ]
+                }
+              }
+            },
+            { "ty": "mm", "nm": "M", "mm": 1 },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [0.977, 0.224, 0.126] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [81.993, 109.381] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 1
+    },
+    {
+      "ty": 4,
+      "nm": "L",
+      "sr": 1,
+      "st": 0,
+      "op": 50,
+      "ip": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [301.194, 151.151] },
+        "s": { "a": 0, "k": [264, 264] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [959, 551] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [5.243, -0.333],
+                    [0, 0],
+                    [-6.281, 0],
+                    [0, 0],
+                    [-6.174, -0.373],
+                    [0, 0],
+                    [4.983, 0.107]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [6.292, -0.398],
+                    [0, 0],
+                    [6.13, 0],
+                    [0, 0],
+                    [-5.228, -0.324],
+                    [-5.258, 0]
+                  ],
+                  "v": [
+                    [-15.706, 25.337],
+                    [-18.872, -24.739],
+                    [0.076, -25.337],
+                    [0.321, -25.337],
+                    [18.872, -24.773],
+                    [15.825, 25.314],
+                    [0.101, 24.837]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [300.999, 25.588] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [10.275, 1.931],
+                    [0, 0],
+                    [-11.961, -3.866]
+                  ],
+                  "o": [
+                    [-9.956, -3.219],
+                    [0, 0],
+                    [12.348, 2.328],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.533, 28.537],
+                    [-22.959, 20.776],
+                    [-13.678, -28.537],
+                    [22.959, -19.207]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [371.035, 33.995] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [9.925, -3.234],
+                    [0, 0],
+                    [-12.371, 2.361],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [11.922, -3.876],
+                    [0, 0],
+                    [-10.307, 1.97]
+                  ],
+                  "v": [
+                    [-7.479, 28.559],
+                    [-23.008, -19.157],
+                    [13.6, -28.559],
+                    [23.008, 20.724]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [231.043, 34.14] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [9.471, 4.449],
+                    [0, 0],
+                    [-10.618, -6.732]
+                  ],
+                  "o": [
+                    [-8.85, -5.61],
+                    [0, 0],
+                    [11.373, 5.341],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0.375, 30.286],
+                    [-27.236, 15.127],
+                    [-5.902, -30.286],
+                    [27.236, -12.089]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [435.086, 58.975] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [8.832, -5.62],
+                    [0, 0],
+                    [-11.341, 5.36],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [10.596, -6.737],
+                    [0, 0],
+                    [-9.457, 4.469]
+                  ],
+                  "v": [
+                    [-0.311, 30.284],
+                    [-27.251, -12.047],
+                    [5.809, -30.284],
+                    [27.251, 15.079]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [167.075, 59.223] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [8.061, 6.664],
+                    [0, 0],
+                    [-8.619, -9.148]
+                  ],
+                  "o": [
+                    [-7.202, -7.634],
+                    [0, 0],
+                    [9.663, 7.981],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-6.75, 30.114],
+                    [-29.755, 8.564],
+                    [2.202, -30.114],
+                    [29.755, -4.303]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [490.71, 99.204] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [7.161, -7.629],
+                    [0, 0],
+                    [-9.675, 8.017],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [8.59, -9.153],
+                    [0, 0],
+                    [-8.068, 6.683]
+                  ],
+                  "v": [
+                    [6.816, 30.105],
+                    [-29.767, -4.233],
+                    [-2.244, -30.105],
+                    [29.767, 8.536]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [111.544, 99.522] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [6.168, 8.452],
+                    [0, 0],
+                    [-6.081, -10.985]
+                  ],
+                  "o": [
+                    [-5.071, -9.163],
+                    [0, 0],
+                    [7.394, 10.133],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-13.482, 28.062],
+                    [-30.421, 1.514],
+                    [10.111, -28.062],
+                    [30.421, 3.768]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [534.491, 152.025] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [5.042, -9.158],
+                    [0, 0],
+                    [-7.399, 10.178],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [6.051, -10.986],
+                    [0, 0],
+                    [-6.168, 8.487]
+                  ],
+                  "v": [
+                    [13.528, 28.05],
+                    [-30.424, 3.845],
+                    [-10.156, -28.05],
+                    [30.424, 1.458]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [67.843, 152.439] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [3.866, 9.707],
+                    [0, 0],
+                    [-3.146, -12.181]
+                  ],
+                  "o": [
+                    [-2.622, -10.138],
+                    [0, 0],
+                    [4.65, 11.666],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-19.401, 24.239],
+                    [-29.176, -5.67],
+                    [17.431, -24.239],
+                    [29.177, 11.696]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [563.646, 214.181] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [2.592, -10.138],
+                    [0, 0],
+                    [-4.633, 11.706],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [3.116, -12.176],
+                    [0, 0],
+                    [-3.856, 9.736]
+                  ],
+                  "v": [
+                    [19.448, 24.213],
+                    [-29.164, 11.777],
+                    [-17.488, -24.213],
+                    [29.164, -5.74]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [38.788, 214.707] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [1.319, 10.363],
+                    [0, 0],
+                    [-0.021, -12.573]
+                  ],
+                  "o": [
+                    [-0.02, -10.495],
+                    [0, 0],
+                    [1.583, 12.427],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-24.081, 18.884],
+                    [-26.095, -12.552],
+                    [23.679, -18.884],
+                    [26.095, 18.797]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [576.253, 281.882] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [-1.55, 12.426],
+                    [0, 0],
+                    [0, -10.504],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, -12.412],
+                    [0, 0],
+                    [-1.293, 10.374],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-26.062, 19.492],
+                    [-26.062, 18.022],
+                    [-23.726, -19.492],
+                    [26.062, -13.279],
+                    [24.112, 18.183],
+                    [24.112, 19.169]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [26.312, 283.118] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 2
+    }
+  ],
+  "v": "5.9.3",
+  "fr": 20,
+  "op": 50,
+  "ip": 0,
+  "assets": []
+}

rstack-doc-ui/src/why-rspack/assets/Speedometer.svg

@@ -0,0 +1,73 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" width="424"
+  height="238" preserveAspectRatio="xMidYMid meet"
+  style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible; background-color: transparent;">
+  <defs>
+    <clipPath id="__lottie_element_2">
+      <rect width="1920" height="1080" x="0" y="0" />
+    </clipPath>
+  </defs>
+  <g clip-path="url(#__lottie_element_2)">
+    <g transform="matrix(2.640000104904175,0,0,2.640000104904175,163.8477783203125,151.96133422851562)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,26.312000274658203,283.1180114746094)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-26.062000274658203,19.492000579833984 C-26.062000274658203,19.492000579833984 -26.062000274658203,18.02199935913086 -26.062000274658203,18.02199935913086 C-26.062000274658203,5.610000133514404 -25.275999069213867,-7.065999984741211 -23.72599983215332,-19.492000579833984 C-23.72599983215332,-19.492000579833984 26.062000274658203,-13.279000282287598 26.062000274658203,-13.279000282287598 C24.768999099731445,-2.9049999713897705 24.11199951171875,7.678999900817871 24.11199951171875,18.183000564575195 C24.11199951171875,18.183000564575195 24.11199951171875,19.16900062561035 24.11199951171875,19.16900062561035 C24.11199951171875,19.16900062561035 -26.062000274658203,19.492000579833984 -26.062000274658203,19.492000579833984z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,576.2529907226562,281.8819885253906)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-24.08099937438965,18.884000778198242 C-24.10099983215332,8.388999938964844 -24.775999069213867,-2.188999891281128 -26.094999313354492,-12.552000045776367 C-26.094999313354492,-12.552000045776367 23.679000854492188,-18.884000778198242 23.679000854492188,-18.884000778198242 C25.261999130249023,-6.456999778747559 26.073999404907227,6.223999977111816 26.094999313354492,18.797000885009766 C26.094999313354492,18.797000885009766 -24.08099937438965,18.884000778198242 -24.08099937438965,18.884000778198242z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,38.78799819946289,214.70700073242188)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M19.447999954223633,24.21299934387207 C19.447999954223633,24.21299934387207 -29.163999557495117,11.777000427246094 -29.163999557495117,11.777000427246094 C-26.04800033569336,-0.39899998903274536 -22.121000289916992,-12.506999969482422 -17.488000869750977,-24.21299934387207 C-17.488000869750977,-24.21299934387207 29.163999557495117,-5.739999771118164 29.163999557495117,-5.739999771118164 C25.308000564575195,3.996000051498413 22.040000915527344,14.074999809265137 19.447999954223633,24.21299934387207z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,563.64599609375,214.18099975585938)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-19.400999069213867,24.23900032043457 C-22.023000717163086,14.10099983215332 -25.309999465942383,4.0370001792907715 -29.176000595092773,-5.670000076293945 C-29.176000595092773,-5.670000076293945 17.430999755859375,-24.23900032043457 17.430999755859375,-24.23900032043457 C22.08099937438965,-12.572999954223633 26.0310001373291,-0.48500001430511475 29.177000045776367,11.696000099182129 C29.177000045776367,11.696000099182129 -19.400999069213867,24.23900032043457 -19.400999069213867,24.23900032043457z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,67.84300231933594,152.43899536132812)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M13.527999877929688,28.049999237060547 C13.527999877929688,28.049999237060547 -30.423999786376953,3.8450000286102295 -30.423999786376953,3.8450000286102295 C-24.37299919128418,-7.140999794006348 -17.55500030517578,-17.871999740600586 -10.156000137329102,-28.049999237060547 C-10.156000137329102,-28.049999237060547 30.423999786376953,1.4579999446868896 30.423999786376953,1.4579999446868896 C24.256000518798828,9.944999694824219 18.56999969482422,18.892000198364258 13.527999877929688,28.049999237060547z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,534.4910278320312,152.02499389648438)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-13.482000350952148,28.062000274658203 C-18.55299949645996,18.89900016784668 -24.253000259399414,9.965999603271484 -30.42099952697754,1.5140000581741333 C-30.42099952697754,1.5140000581741333 10.111000061035156,-28.062000274658203 10.111000061035156,-28.062000274658203 C17.5049991607666,-17.929000854492188 24.34000015258789,-7.2170000076293945 30.42099952697754,3.7679998874664307 C30.42099952697754,3.7679998874664307 -13.482000350952148,28.062000274658203 -13.482000350952148,28.062000274658203z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,111.54399871826172,99.52200317382812)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M6.815999984741211,30.104999542236328 C6.815999984741211,30.104999542236328 -29.767000198364258,-4.232999801635742 -29.767000198364258,-4.232999801635742 C-21.177000045776367,-13.38599967956543 -11.918999671936035,-22.08799934387207 -2.24399995803833,-30.104999542236328 C-2.24399995803833,-30.104999542236328 29.767000198364258,8.53600025177002 29.767000198364258,8.53600025177002 C21.698999404907227,15.218999862670898 13.97700023651123,22.47599983215332 6.815999984741211,30.104999542236328z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,490.7099914550781,99.2040023803711)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-6.75,30.11400032043457 C-13.95199966430664,22.479999542236328 -21.694000244140625,15.227999687194824 -29.7549991607666,8.564000129699707 C-29.7549991607666,8.564000129699707 2.2019999027252197,-30.11400032043457 2.2019999027252197,-30.11400032043457 C11.864999771118164,-22.132999420166016 21.13599967956543,-13.451000213623047 29.7549991607666,-4.302999973297119 C29.7549991607666,-4.302999973297119 -6.75,30.11400032043457 -6.75,30.11400032043457z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,167.0749969482422,59.222999572753906)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-0.3109999895095825,30.284000396728516 C-0.3109999895095825,30.284000396728516 -27.250999450683594,-12.04699993133545 -27.250999450683594,-12.04699993133545 C-16.655000686645508,-18.784000396728516 -5.5320000648498535,-24.923999786376953 5.809000015258789,-30.284000396728516 C5.809000015258789,-30.284000396728516 27.250999450683594,15.079000473022461 27.250999450683594,15.079000473022461 C17.79400062561035,19.54800033569336 8.520999908447266,24.663999557495117 -0.3109999895095825,30.284000396728516z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,435.08599853515625,58.974998474121094)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M0.375,30.285999298095703 C-8.475000381469727,24.676000595092773 -17.764999389648438,19.576000213623047 -27.236000061035156,15.126999855041504 C-27.236000061035156,15.126999855041504 -5.9019999504089355,-30.285999298095703 -5.9019999504089355,-30.285999298095703 C5.4710001945495605,-24.94499969482422 16.618000030517578,-18.820999145507812 27.236000061035156,-12.08899974822998 C27.236000061035156,-12.08899974822998 0.375,30.285999298095703 0.375,30.285999298095703z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,231.04299926757812,34.13999938964844)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-7.479000091552734,28.55900001525879 C-7.479000091552734,28.55900001525879 -23.007999420166016,-19.156999588012695 -23.007999420166016,-19.156999588012695 C-11.086000442504883,-23.033000946044922 1.2289999723434448,-26.197999954223633 13.600000381469727,-28.55900001525879 C13.600000381469727,-28.55900001525879 23.007999420166016,20.724000930786133 23.007999420166016,20.724000930786133 C12.701000213623047,22.694000244140625 2.446000099182129,25.325000762939453 -7.479000091552734,28.55900001525879z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,371.0350036621094,33.994998931884766)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M7.5329999923706055,28.53700065612793 C-2.4230000972747803,25.31800079345703 -12.684000015258789,22.707000732421875 -22.958999633789062,20.775999069213867 C-22.958999633789062,20.775999069213867 -13.678000450134277,-28.53700065612793 -13.678000450134277,-28.53700065612793 C-1.3300000429153442,-26.208999633789062 10.998000144958496,-23.072999954223633 22.958999633789062,-19.207000732421875 C22.958999633789062,-19.207000732421875 7.5329999923706055,28.53700065612793 7.5329999923706055,28.53700065612793z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,300.9989929199219,25.58799934387207)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-15.706000328063965,25.336999893188477 C-15.706000328063965,25.336999893188477 -18.871999740600586,-24.73900032043457 -18.871999740600586,-24.73900032043457 C-12.579999923706055,-25.136999130249023 -6.204999923706055,-25.336999893188477 0.07599999755620956,-25.336999893188477 C0.07599999755620956,-25.336999893188477 0.32100000977516174,-25.336999893188477 0.32100000977516174,-25.336999893188477 C6.451000213623047,-25.336999893188477 12.697999954223633,-25.145999908447266 18.871999740600586,-24.773000717163086 C18.871999740600586,-24.773000717163086 15.824999809265137,25.31399917602539 15.824999809265137,25.31399917602539 C10.597000122070312,24.989999771118164 5.084000110626221,24.944000244140625 0.10100000351667404,24.836999893188477 C-5.1570000648498535,24.836999893188477 -10.463000297546387,25.003999710083008 -15.706000328063965,25.336999893188477z" />
+      </g>
+    </g>
+    <g transform="matrix(-1.5517531633377075,-2.1358048915863037,2.1358048915863037,-1.5517531633377075,647.39794921875,1292.5263671875)"
+      opacity="1" style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,81.99299621582031,109.38099670410156)">
+        <path fill="rgb(249,57,32)" fill-opacity="1"
+          d=" M-28.85300064086914,30.506999969482422 C-31.68400001525879,29.57900047302246 -34.69900131225586,29.059999465942383 -37.84000015258789,29.059999465942383 C-53.77399826049805,29.059999465942383 -66.69100189208984,41.97600173950195 -66.69100189208984,57.9109992980957 C-66.69100189208984,63.60300064086914 -65.0199966430664,68.8949966430664 -62.17300033569336,73.36599731445312 C-62.17300033569336,73.36599731445312 -81.74299621582031,93.66100311279297 -81.74299621582031,93.66100311279297 C-81.74299621582031,93.66100311279297 -61.67300033569336,109.12999725341797 -61.67300033569336,109.12999725341797 C-61.67300033569336,109.12999725341797 -46.983001708984375,85.25800323486328 -46.983001708984375,85.25800323486328 C-44.108001708984375,86.22000122070312 -41.03900146484375,86.76200103759766 -37.84000015258789,86.76200103759766 C-21.9060001373291,86.76200103759766 -8.989999771118164,73.84400177001953 -8.989999771118164,57.9109992980957 C-8.989999771118164,51.8849983215332 -10.843000411987305,46.29499816894531 -14.00100040435791,41.667999267578125 C-14.00100040435791,41.667999267578125 81.74299621582031,-109.12999725341797 81.74299621582031,-109.12999725341797 C81.74299621582031,-109.12999725341797 -28.85300064086914,30.506999969482422 -28.85300064086914,30.506999969482422z M-37.84000015258789,72.6500015258789 C-45.97999954223633,72.6500015258789 -52.57899856567383,66.05000305175781 -52.57899856567383,57.9109992980957 C-52.57899856567383,49.770999908447266 -45.97999954223633,43.172000885009766 -37.84000015258789,43.172000885009766 C-29.700000762939453,43.172000885009766 -23.101999282836914,49.770999908447266 -23.101999282836914,57.9109992980957 C-23.101999282836914,66.05000305175781 -29.700000762939453,72.6500015258789 -37.84000015258789,72.6500015258789z" />
+      </g>
+    </g>
+  </g>
+</svg>

rstack-doc-ui/src/why-rspack/index.module.scss

@@ -0,0 +1,198 @@
+// ---------- responsive layout
+// XL
+@media screen and (min-width: 1281px) {
+  .featureCard {
+    flex: 1 0 20% !important;
+  }
+}
+
+// L
+@media screen and (min-width: 835px) and (max-width: 1280px) {
+  .featureCard {
+    min-width: 40% !important;
+    max-width: 50% !important;
+  }
+}
+
+// M
+@media screen and (min-width: 601px) and (max-width: 834px) {
+  .whyRspack {
+    padding: 16px !important;
+    .whyRspackTitle {
+      font-size: 32px !important;
+      font-weight: 700 !important;
+      line-height: normal !important;
+      letter-spacing: -1.28px !important;
+    }
+    .whyRspackDescription {
+      font-size: 19px !important;
+      font-style: normal !important;
+      font-weight: 400 !important;
+      line-height: normal !important;
+    }
+  }
+  .featureCard {
+    min-width: 45% !important;
+    max-width: 50% !important;
+    .featureCardInner {
+      padding: 16px !important;
+    }
+    .featureDescription {
+      font-size: 14px !important;
+    }
+  }
+}
+
+// S
+@media screen and (max-width: 600px) {
+  .whyRspack {
+    min-width: 100% !important;
+    padding: 16px !important;
+    .whyRspackTitle {
+      font-size: 24px !important;
+      font-style: normal !important;
+      font-weight: 700 !important;
+      line-height: normal !important;
+      letter-spacing: -0.96px !important;
+    }
+    .whyRspackDescription {
+      font-size: 16px !important;
+      font-style: normal !important;
+      font-weight: 400 !important;
+      line-height: normal !important;
+    }
+  }
+  .featureCard {
+    min-width: 100% !important;
+    .featureCardInner {
+      padding: 16px !important;
+    }
+    .featureDescription {
+      font-size: 14px !important;
+    }
+  }
+
+  // extra
+  .whyRspackBg {
+    max-width: 50% !important;
+    max-height: 50% !important;
+  }
+}
+
+// -----dark mode
+:global {
+  html:not(.dark) {
+    --rs-why-rspack-shadow-color: #f9f9f9;
+    --rs-why-rspack-title-color: #0b0c0e;
+    --rs-why-rspack-desc-color: #6b7075;
+
+    --rs-why-rspack-card-stroke: rgba(226, 232, 240, 0.5);
+    --rs-why-rspack-card-gradient: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 1),
+      rgba(249, 249, 249, 0.5)
+    );
+    --rs-why-rspack-description-bg: linear-gradient(
+      90deg,
+      #0b0c0e 0%,
+      rgba(11, 12, 14, 0.4) 100%
+    );
+  }
+  html.dark {
+    --rs-why-rspack-shadow-color: #23272f;
+    --rs-why-rspack-title-color: white;
+    --rs-why-rspack-desc-color: #c6cacd;
+    --rs-why-rspack-card-stroke: #23272f;
+    --rs-why-rspack-card-gradient: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.03)
+    );
+    --rs-why-rspack-description-bg: linear-gradient(
+      87deg,
+      #fff -2.53%,
+      rgba(255, 255, 255, 0.4) 103.84%
+    );
+  }
+}
+
+.features {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  padding: 0px;
+
+  .featureCard {
+    display: flex;
+    flex: 1 0 30%;
+    align-self: stretch;
+
+    .featureCardInner {
+      flex: 1;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+
+      // style
+      border-radius: 20px;
+      border: 1px solid var(--rs-why-rspack-card-stroke);
+      background: var(--rs-why-rspack-card-gradient);
+      padding: 28px;
+
+      // reset
+      text-decoration: none;
+
+      .featureIcon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+
+        user-select: none;
+
+        .featureIconImg {
+          width: 150px;
+          height: 110px;
+        }
+      }
+
+      .featureContent {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 8px;
+
+        .featureTitle {
+          color: var(--rs-why-rspack-title-color);
+
+          font-size: 17px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 1.5;
+
+          // reset
+          margin: 0;
+        }
+
+        .featureDescription {
+          color: var(--rs-why-rspack-desc-color);
+
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 24px; /* 150% */
+
+          // reset
+          margin: 0;
+        }
+      }
+    }
+  }
+}

rstack-doc-ui/src/why-rspack/index.tsx

@@ -0,0 +1,157 @@
+import { type FC, memo } from 'react';
+import { ALink, type LinkComp } from '../shared';
+import styles from './index.module.scss';
+import { useCardAnimation } from './useCardAnimation';
+import { useLottieAnimation } from './useLottieAnimation';
+
+export type Feature = {
+  img: string;
+  url: string;
+  title: string;
+  description: string;
+  lottieJsonData?: any;
+};
+
+const FeatureItem = memo(
+  ({ feature, LinkComp }: { feature: Feature; LinkComp: LinkComp }) => {
+    const { description, img, title, url, lottieJsonData } = feature;
+    const {
+      container,
+      isHovering,
+      onMouseEnter,
+      onMouseLeave,
+      onMouseMove,
+      onTouchEnd,
+      onTouchMove,
+      onTouchStart,
+      outerContainer,
+      ref: cardAnimationContainerRef,
+      shine,
+      shineBg,
+    } = useCardAnimation();
+
+    const hasLottieAnimation = lottieJsonData !== undefined;
+
+    const { ref: lottieContainerRef } = useLottieAnimation(
+      isHovering,
+      lottieJsonData,
+    );
+
+    const Link = LinkComp;
+
+    return (
+      <div
+        style={{
+          position: 'relative',
+          transform: outerContainer,
+          cursor: 'pointer',
+          transformStyle: 'preserve-3d',
+          WebkitTapHighlightColor: 'rgba(#000, 0)',
+        }}
+        className={styles.featureCard}
+        ref={cardAnimationContainerRef as any}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onMouseMove={onMouseMove}
+        onTouchMove={onTouchMove}
+        onTouchEnd={onTouchEnd}
+        onTouchStart={onTouchStart}
+      >
+        <Link
+          href={url}
+          key={title}
+          className={styles.featureCardInner}
+          style={{
+            transform: container,
+            position: 'relative',
+            transition: 'all 0.2s ease-out',
+          }}
+        >
+          <div
+            className="shine"
+            style={{
+              position: 'absolute',
+              top: '0',
+              left: '0',
+              right: '0',
+              bottom: '0',
+              borderRadius: '20px',
+              zIndex: '8',
+              ...(shine
+                ? {
+                    transform: shine,
+                  }
+                : {}),
+              ...(shineBg
+                ? {
+                    background: shineBg,
+                  }
+                : {}),
+            }}
+          />
+          <div className={styles.featureIcon}>
+            {
+              <img
+                src={img}
+                alt={title}
+                className={styles.featureIconImg}
+                style={
+                  hasLottieAnimation
+                    ? {
+                        display:
+                          isHovering && hasLottieAnimation ? 'none' : 'flex',
+                      }
+                    : {}
+                }
+              />
+            }
+            {hasLottieAnimation ? (
+              <div
+                ref={lottieContainerRef as any}
+                className={styles.featureIconImg}
+                style={{
+                  display: isHovering ? 'flex' : 'none',
+                }}
+              />
+            ) : null}
+          </div>
+          <div className={styles.featureContent}>
+            <h3 className={styles.featureTitle}>{title}</h3>
+            <p className={styles.featureDescription}>{description}</p>
+          </div>
+        </Link>
+      </div>
+    );
+  },
+);
+
+export type FeatureListProps = {
+  features: Feature[];
+  LinkComp?: LinkComp;
+};
+
+const FeatureList: FC<FeatureListProps> = memo(({ LinkComp, features }) => {
+  return (
+    <>
+      {features.map(feature => {
+        return (
+          <FeatureItem
+            key={feature.title}
+            feature={feature}
+            LinkComp={LinkComp ?? ALink}
+          />
+        );
+      })}
+    </>
+  );
+});
+
+export type WhyRspackProps = FeatureListProps;
+
+export const WhyRspack: FC<WhyRspackProps> = ({ features, LinkComp }) => {
+  return (
+    <div className={styles.features}>
+      <FeatureList features={features} LinkComp={LinkComp} />
+    </div>
+  );
+};

rstack-doc-ui/src/why-rspack/useCardAnimation.tsx

@@ -0,0 +1,89 @@
+import { useRef, useState } from 'react';
+
+export const useCardAnimation = () => {
+  const [pageX, setPageX] = useState<null | number>(null);
+  const [pageY, setPageY] = useState<null | number>(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const ref = useRef<HTMLElement>();
+
+  const handleMove = ({ pageX, pageY }: { pageX: number; pageY: number }) => {
+    setPageX(pageX);
+    setPageY(pageY);
+  };
+
+  const handleTouchMove = (evt: any) => {
+    evt.preventDefault();
+    const { pageX, pageY } = evt.touches[0];
+    handleMove({ pageX, pageY });
+  };
+
+  const handleEnter = () => {
+    setIsHovering(true);
+  };
+  const handleLeave = () => {
+    setIsHovering(false);
+  };
+
+  let shine: string;
+  let shineBg: string;
+  let container: string;
+  let outerContainer: string;
+  const ele = ref.current;
+  if (pageX && pageY && ele) {
+    const rootElemWidth = ele.clientWidth || ele.offsetWidth || ele.scrollWidth;
+    const rootElemHeight =
+      ele.clientHeight || ele.offsetHeight || ele.scrollHeight;
+
+    const bodyScrollTop =
+      document.body.scrollTop ||
+      document.getElementsByTagName('html')[0].scrollTop;
+    const bodyScrollLeft = document.body.scrollLeft;
+
+    const offsets = ele.getBoundingClientRect();
+    const wMultiple = 320 / rootElemWidth;
+    const multiple = wMultiple * 0.05;
+    const offsetX =
+      0.52 - (pageX - offsets.left - bodyScrollLeft) / rootElemWidth;
+    const offsetY =
+      0.52 - (pageY - offsets.top - bodyScrollTop) / rootElemHeight;
+    const dy = pageY - offsets.top - bodyScrollTop - rootElemHeight / 2;
+    const dx = pageX - offsets.left - bodyScrollLeft - rootElemWidth / 2;
+    const yRotate = (offsetX - dx) * multiple;
+    const xRotate =
+      (dy - offsetY) * (Math.min(offsets.width / offsets.height, 1) * multiple);
+    const arad = Math.atan2(dy, dx);
+    const rawAngle = (arad * 180) / Math.PI - 90;
+    const angle = rawAngle < 0 ? rawAngle + 360 : rawAngle;
+
+    shine = `translateX(${offsetX - 0.1}px) translateY(${offsetY - 0.1}px)`;
+    shineBg = `linear-gradient(${angle}deg, rgba(255, 255, 255, ${
+      ((pageY - offsets.top - bodyScrollTop) / rootElemHeight) * 0.2
+    }) 0%, rgba(255, 255, 255, 0) 50%)`;
+
+    container = `rotateX(${xRotate}deg) rotateY(${yRotate}deg) ${
+      isHovering ? ' scale3d(1.01,1.01,1.01)' : ''
+    }`;
+    outerContainer = `perspective(${rootElemWidth * 2}px`;
+  } else {
+    shine = '';
+    shineBg = '';
+    container = '';
+    outerContainer = '';
+  }
+
+  return {
+    ref,
+    isHovering,
+    shine: isHovering ? shine : '',
+    shineBg: isHovering ? shineBg : '',
+    container: isHovering ? container : '',
+    outerContainer: isHovering ? outerContainer : '',
+
+    onMouseEnter: handleEnter,
+    onMouseLeave: handleLeave,
+    onMouseMove: handleMove,
+    onTouchMove: handleTouchMove,
+    onTouchStart: handleEnter,
+    onTouchEnd: handleLeave,
+  };
+};

rstack-doc-ui/src/why-rspack/useLottieAnimation.tsx

@@ -0,0 +1,47 @@
+import lottie from 'lottie-web';
+import type { AnimationItem } from 'lottie-web';
+import { useEffect, useRef } from 'react';
+
+export const useLottieAnimation = (
+  isHovering: boolean,
+  lottieJsonData?: string,
+) => {
+  const ref = useRef();
+
+  const animationRef = useRef<AnimationItem>();
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (!lottieJsonData) {
+      return;
+    }
+    const animation = lottie.loadAnimation({
+      container: ref.current,
+      animationData: lottieJsonData,
+      renderer: 'svg',
+      loop: false,
+      autoplay: false,
+    });
+
+    animation.setSpeed(3);
+
+    animationRef.current = animation;
+  }, [lottieJsonData]);
+  useEffect(() => {
+    if (!animationRef.current || !ref.current) {
+      return;
+    }
+
+    if (isHovering) {
+      animationRef.current.goToAndPlay(0, true);
+    } else {
+      animationRef.current.goToAndStop(0, true);
+    }
+  }, [isHovering]);
+
+  return {
+    ref,
+  };
+};

rstack-doc-ui/stories/Announcement.stories.tsx

@@ -0,0 +1,18 @@
+import { Announcement } from '@rstack-dev/doc-ui/announcement';
+import './index.scss';
+
+export const AnnouncementStory = () => (
+  <>
+    <div style={{ margin: 20 }}>
+      <Announcement
+        href="https://rspack.rs"
+        message="This is a test announcement"
+        localStorageKey="test-announcement"
+      />
+    </div>
+  </>
+);
+
+export default {
+  title: 'Announcement',
+};

rstack-doc-ui/stories/Benchmark.stories.tsx

@@ -0,0 +1,42 @@
+import { Benchmark } from '@rstack-dev/doc-ui/benchmark';
+import './index.scss';
+
+// Benchmark data for different cases
+// Unit: second
+// From: https://github.com/rspack-contrib/performance-compare
+const BENCHMARK_DATA = {
+  foo: {
+    label: 'Foo',
+    metrics: [
+      { desc: 'dev', time: 0.49 },
+      { desc: 'build', time: 0.36 },
+      { desc: 'hmr', time: 0.1 },
+    ],
+  },
+  bar: {
+    label: 'Bar',
+    metrics: [
+      { desc: 'dev', time: 1.49 },
+      { desc: 'build', time: 1.36 },
+      { desc: 'hmr', time: 1.1 },
+    ],
+  },
+  baz: {
+    label: 'Baz',
+    metrics: [
+      { desc: 'dev', time: 2.49 },
+      { desc: 'build', time: 2.36 },
+      { desc: 'hmr', time: 2.1 },
+    ],
+  },
+};
+
+export const BenchmarkStory = () => (
+  <div style={{ margin: 20 }}>
+    <Benchmark data={BENCHMARK_DATA} />
+  </div>
+);
+
+export default {
+  title: 'Benchmark',
+};

rstack-doc-ui/stories/BuiltWithRspack.stories.tsx

@@ -0,0 +1,63 @@
+import type { Company } from '@rstack-dev/doc-ui/built-with-rspack';
+import { BuiltWithRspack } from '@rstack-dev/doc-ui/built-with-rspack';
+import './index.scss';
+import amazonLogo from './assets/amazon.svg';
+import bitDevLogo from './assets/bit.svg';
+import bytedanceLogo from './assets/bytedance.svg';
+import discordLogo from './assets/discord.svg';
+import intuitLogo from './assets/intuit.svg';
+import microsoftLogo from './assets/microsoft.svg';
+
+const companyList: Company[] = [
+  {
+    name: 'bit.dev',
+    logo: bitDevLogo,
+    text: 'bit.dev',
+    url: 'https://bit.dev/',
+    width: 40,
+  },
+  {
+    name: 'Microsoft',
+    logo: microsoftLogo,
+    url: 'https://www.microsoft.com',
+    width: 180,
+  },
+  {
+    name: 'Amazon',
+    logo: amazonLogo,
+    url: 'https://amazon.com/',
+    width: 120,
+  },
+  {
+    name: 'ByteDance',
+    logo: bytedanceLogo,
+    url: 'https://www.bytedance.com',
+    width: 180,
+  },
+  {
+    name: 'Intuit',
+    logo: intuitLogo,
+    url: 'https://www.intuit.com',
+    width: 100,
+  },
+  {
+    name: 'Discord',
+    logo: discordLogo,
+    url: 'https://discord.com',
+    width: 140,
+  },
+];
+
+export const BuiltWithRspackStory = () => {
+  return (
+    <>
+      <div>
+        <BuiltWithRspack companyList={companyList} title="Built With Rspack" />
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: 'BuiltWithRspack',
+};

rstack-doc-ui/stories/FullyFeatured.stories.tsx

@@ -0,0 +1,103 @@
+import { type Feature, FullyFeatured } from '@rstack-dev/doc-ui/fully-featured';
+import './index.scss';
+import arrow from './assets/arrow.svg';
+
+const description =
+  'Split code into smaller bundles to enable on-demand loading and improve performance.';
+
+const link = '/guide/optimization/code-splitting';
+
+const FeatureRow1: Feature[] = [
+  {
+    icon: arrow,
+    title: 'Code Splitting',
+    description,
+    link,
+  },
+  {
+    icon: arrow,
+    title: 'Tree Shaking',
+    description,
+    link,
+  },
+  {
+    icon: arrow,
+    title: 'Plugins',
+    description,
+    link,
+  },
+  {
+    icon: arrow,
+    title: 'Module Federation',
+    description,
+    link,
+  },
+];
+
+const FeatureRow2: Feature[] = [
+  {
+    icon: arrow,
+    title: 'Asset Management',
+    description,
+    link,
+  },
+  {
+    icon: arrow,
+    title: 'Loaders',
+    description,
+    link,
+  },
+  {
+    icon: arrow,
+    title: 'HMR',
+    description,
+    link,
+  },
+  {
+    icon: arrow,
+    title: 'Dev Server',
+    description,
+    link,
+  },
+];
+
+const FeatureRow3: Feature[] = [
+  {
+    icon: arrow,
+    title: 'Parallel Builds',
+    description,
+    link,
+  },
+  {
+    icon: arrow,
+    title: 'SWC',
+    description,
+    link,
+  },
+  {
+    icon: arrow,
+    title: 'Lightning CSS',
+    description,
+    link,
+  },
+  {
+    icon: arrow,
+    title: 'JavaScript API',
+    description,
+    link,
+  },
+];
+
+export const HeroStory = () => {
+  return (
+    <>
+      <div>
+        <FullyFeatured featureRows={[FeatureRow1, FeatureRow2, FeatureRow3]} />
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: 'FullyFeatured',
+};

rstack-doc-ui/stories/Hero.stories.tsx

@@ -0,0 +1,35 @@
+import { BackgroundImage } from '@rstack-dev/doc-ui/background-image';
+import { Hero } from '@rstack-dev/doc-ui/hero';
+import './index.scss';
+
+export const HeroStory = () => {
+  const handleClickLearnMore = () => {
+    console.log('learn more');
+  };
+  const handleClickGetStarted = () => {
+    console.log('get started');
+  };
+
+  return (
+    <>
+      <div style={{ position: 'relative' }}>
+        <BackgroundImage />
+        <Hero
+          showStars
+          onClickLearnMore={handleClickLearnMore}
+          onClickGetStarted={handleClickGetStarted}
+        />
+        <Hero
+          showStars
+          githubURL="https://github.com/rspack-contrib/rstack-doc-ui"
+          onClickLearnMore={handleClickLearnMore}
+          onClickGetStarted={handleClickGetStarted}
+        />
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: 'Hero',
+};

rstack-doc-ui/stories/NavIcon.stories.tsx

@@ -0,0 +1,16 @@
+import { NavIcon } from '@rstack-dev/doc-ui/nav-icon';
+import './index.scss';
+
+export const NavIconStory = () => (
+  <div style={{ margin: 20 }}>
+    <h2>English</h2>
+    <NavIcon lang="en" trigger="click" />
+
+    <h2>中文</h2>
+    <NavIcon lang="zh" trigger="click" />
+  </div>
+);
+
+export default {
+  title: 'NavIcon',
+};

rstack-doc-ui/stories/SectionStyle.stories.tsx

@@ -0,0 +1,50 @@
+import {
+  containerStyle,
+  descStyle,
+  innerContainerStyle,
+  titleAndDescStyle,
+  titleStyle,
+} from '@rstack-dev/doc-ui/section-style';
+import './index.scss';
+
+const sections = [
+  {
+    title: 'Lightning Fast',
+    description:
+      'Combining Rust and TypeScript with a parallelized architecture to bring you the ultimate developer experience.',
+  },
+  {
+    title: 'Fully Featured',
+    description:
+      'Launched as a drop-in replacement for webpack, with more powerful features and exceptional productivity.',
+  },
+  {
+    title: 'Tool Stack',
+    description:
+      'High-performance tool stack built around Rspack to boost modern web development',
+  },
+];
+
+export const SectionStyleStory = () => {
+  return (
+    <>
+      {sections.map(({ title, description }) => {
+        return (
+          <section className={containerStyle} key={title}>
+            <div className={innerContainerStyle}>
+              <div className={titleAndDescStyle}>
+                <h1 className={titleStyle}>{title}</h1>
+                <p className={descStyle}>{description}</p>
+              </div>
+              <div>something...</div>
+            </div>
+          </section>
+        );
+      })}
+    </>
+  );
+};
+
+export default {
+  title: 'SectionStyle',
+};

rstack-doc-ui/stories/ToolStack.stories.tsx

@@ -0,0 +1,23 @@
+import { ToolStack } from '@rstack-dev/doc-ui/tool-stack';
+import './index.scss';
+
+export const ToolStackStory = () => (
+  <>
+    <h2>English</h2>
+    <div style={{ margin: 20 }}>
+      <div style={{ maxWidth: 1296 }}>
+        <ToolStack lang="en" />
+      </div>
+    </div>
+    <h2>中文</h2>
+    <div style={{ margin: 20 }}>
+      <div style={{ maxWidth: 1296 }}>
+        <ToolStack lang="zh" />
+      </div>
+    </div>
+  </>
+);
+
+export default {
+  title: 'ToolStack',
+};

rstack-doc-ui/stories/WhyRspack.stories.tsx

@@ -0,0 +1,117 @@
+import {
+  containerStyle,
+  innerContainerStyle,
+} from '@rstack-dev/doc-ui/section-style';
+import { type Feature, WhyRspack } from '@rstack-dev/doc-ui/why-rspack';
+import './index.scss';
+import CompatibleJson from './why-rspack-assets/Compatible.json';
+import Compatible from './why-rspack-assets/Compatible.svg';
+import FrameCheckJson from './why-rspack-assets/FrameCheck.json';
+import FrameCheck from './why-rspack-assets/FrameCheck.svg';
+import LightningJson from './why-rspack-assets/Lightning.json';
+import Lightning from './why-rspack-assets/Lightning.svg';
+import SpeedometerJson from './why-rspack-assets/Speedometer.json';
+import Speedometer from './why-rspack-assets/Speedometer.svg';
+
+const description =
+  'Using Rspack to bring you the ultimate development experience.';
+
+const features: Feature[] = [
+  {
+    img: Speedometer,
+    url: '/guide/start/introduction',
+    title: 'FastStartup',
+    description,
+    lottieJsonData: SpeedometerJson,
+  },
+  {
+    img: Lightning,
+    url: '/guide/start/introduction',
+    title: 'LightningHMR',
+    description,
+    lottieJsonData: LightningJson,
+  },
+  {
+    img: FrameCheck,
+    url: '/guide/tech/react',
+    title: 'FrameworkAgnostic',
+    description,
+    lottieJsonData: FrameCheckJson,
+  },
+  {
+    img: Compatible,
+    url: '/guide/compatibility/plugin',
+    title: 'WebpackCompatible',
+    description,
+    lottieJsonData: CompatibleJson,
+  },
+];
+
+export const WhyRspackStory = () => {
+  return (
+    <section className={containerStyle}>
+      <div className={innerContainerStyle}>
+        <WhyRspack features={features} />
+      </div>
+    </section>
+  );
+};
+
+// TODO: img
+const rsbuildFeatures = [
+  {
+    img: '🚀',
+    url: '', // 由于您没有提供每个特性的 URL，这里先留空
+    title: 'Rspack-based',
+    description:
+      'Using Rspack to bring you the ultimate development experience.',
+  },
+  {
+    img: '🦄',
+    url: '',
+    title: 'Batteries Included',
+    description:
+      'Out-of-the-box integration with the most practical building features in the ecosystem.',
+  },
+  {
+    img: '🎯',
+    url: '',
+    title: 'Framework Agnostic',
+    description: 'Supports React, Vue, Svelte, and more frameworks.',
+  },
+  {
+    img: '🛠️',
+    url: '',
+    title: 'Deep Optimization',
+    description:
+      'Automatically optimize static assets to maximizing production performance.',
+  },
+  {
+    img: '🎨',
+    url: '',
+    title: 'Highly Pluggable',
+    description:
+      'Comes with a lightweight plugin system and a set of high quality plugins.',
+  },
+  {
+    img: '🍭',
+    url: '',
+    title: 'Easy to Configure',
+    description:
+      'Start with zero configuration and everything is configurable.',
+  },
+];
+
+export const WhyRspackStoryWithoutFirstCardAndLottie = () => {
+  return (
+    <section className={containerStyle}>
+      <div className={innerContainerStyle}>
+        <WhyRspack features={rsbuildFeatures} />
+      </div>
+    </section>
+  );
+};
+
+export default {
+  title: 'WhyRspack',
+};

rstack-doc-ui/stories/assets/amazon.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="37" viewBox="0 0 120 37" fill="none">
+  <path
+    d="M6.5648 0.909121C3.42344 1.47328 1.26937 3.37092 0.653915 6.10198C0.564162 6.5251 0.576984 6.66614 0.769312 6.89693C0.96164 7.14055 1.24372 7.20466 2.89774 7.39699C5.1031 7.6406 5.24414 7.61496 5.50058 6.73025C5.85959 5.53782 6.7443 4.84543 8.10342 4.73004C9.42407 4.60182 10.4626 5.21727 10.7704 6.33277C10.8345 6.58921 10.8986 7.25595 10.8986 7.79446C10.8986 8.61506 10.8601 8.79457 10.7063 8.79457C10.5909 8.79457 9.69333 8.88432 8.70605 8.9869C5.24414 9.37155 3.17982 10.1152 1.83353 11.4743C0.576984 12.7309 0 14.231 0 16.2056C0 20.0906 2.65413 22.3345 6.70584 21.8729C8.48808 21.6677 9.6164 21.142 11.0012 19.8855C11.373 19.5521 11.6935 19.2957 11.7192 19.3213C11.732 19.347 11.8859 19.5778 12.0526 19.8214C12.2192 20.065 12.6808 20.6035 13.0655 21.001C14.0912 22.1037 14.1938 22.078 16.2068 20.3343C17.0916 19.5521 17.8224 18.8341 17.8224 18.7443C17.8224 18.6546 17.5403 18.1417 17.1813 17.6032C16.194 16.0902 16.1556 15.8722 16.1556 10.5896C16.1556 5.48653 16.0658 4.75568 15.3606 3.56325C14.0271 1.34507 10.3344 0.229563 6.5648 0.909121ZM10.8601 13.372C10.796 15.2183 10.6934 15.6158 10.1036 16.6159C9.00095 18.4366 6.66737 18.6546 5.80831 17.0134C5.57751 16.5646 5.5134 16.2441 5.5134 15.4619C5.5134 13.0258 7.00074 11.9616 10.6293 11.7564L10.9242 11.7436L10.8601 13.372Z"
+    fill="#0B0C0E" />
+  <path
+    d="M54.9802 0.960127C52.0952 1.5884 50.172 3.24242 49.4411 5.70422C49.1975 6.55046 49.1847 6.62739 49.4026 6.9223C49.5309 7.1018 49.9796 7.20438 51.5439 7.38388C52.7876 7.53775 53.6082 7.57621 53.7364 7.49928C53.8647 7.43517 54.057 7.08898 54.1724 6.72997C54.634 5.33239 55.8136 4.58872 57.3137 4.72976C58.9934 4.88362 59.6217 5.78115 59.6217 8.0378C59.6217 8.67889 59.5832 8.79429 59.4037 8.79429C58.5831 8.79429 55.493 9.23023 54.3775 9.49949C51.4798 10.2047 49.7232 11.6664 48.9667 14.0384C48.5949 15.1924 48.582 17.1157 48.9539 18.2697C49.7232 20.6802 51.6208 21.9111 54.4929 21.8983C56.6727 21.8726 57.8907 21.4238 59.5704 20.0006L60.3782 19.3082L60.7628 19.8596C60.968 20.1545 61.4424 20.7058 61.8142 21.0776C62.7887 22.0521 62.9425 22.0136 64.8658 20.334C66.6481 18.7953 66.6994 18.68 65.9557 17.7183C64.9299 16.372 64.9556 16.5387 64.8658 10.6535C64.8145 6.94794 64.7376 5.24263 64.6222 4.88362C64.0196 2.96034 62.5707 1.66533 60.3012 1.03706C59.1216 0.70369 56.3521 0.665224 54.9802 0.960127ZM59.596 12.7562C59.6473 13.923 59.4422 15.3206 59.1088 16.0515C58.7754 16.8336 57.9035 17.7183 57.2368 17.9747C55.211 18.7441 53.5954 16.7695 54.3006 14.359C54.6981 12.9742 55.9162 12.1536 57.9805 11.8972C59.6089 11.6792 59.5576 11.6536 59.596 12.7562Z"
+    fill="#0B0C0E" />
+  <path
+    d="M28.9774 1.01147C28.5928 1.10122 28.0414 1.30638 27.7594 1.44742C27.0798 1.80643 26.131 2.80653 25.7207 3.60149L25.4001 4.24258L25.3873 3.05015C25.3873 1.96029 25.3617 1.83207 25.0668 1.54999C24.7719 1.24226 24.6949 1.22944 22.964 1.22944C21.0535 1.22944 20.5919 1.33202 20.4637 1.79361C20.4252 1.93465 20.3868 6.33255 20.3868 11.551C20.3868 19.9365 20.4124 21.0777 20.5919 21.3341C20.7843 21.6034 20.8612 21.6162 23.0024 21.6162C24.5411 21.6162 25.2591 21.5649 25.3617 21.4623C25.4771 21.347 25.5155 19.8853 25.5155 15.654C25.5155 12.5512 25.5796 9.4739 25.6437 8.81999C25.8489 6.84542 26.3746 5.99918 27.5542 5.72992C28.6825 5.4863 29.5416 5.90942 30.0545 6.99928C30.3109 7.56345 30.3237 7.75577 30.3622 14.436C30.3878 20.6417 30.4135 21.3085 30.6058 21.4495C30.7597 21.5649 31.4521 21.6162 32.965 21.6162C34.7473 21.6162 35.1447 21.5777 35.3114 21.4111C35.4909 21.2316 35.5166 20.4879 35.5166 15.1027C35.5166 11.5639 35.5679 8.64048 35.6448 8.15325C35.8884 6.65309 36.8501 5.7171 38.1451 5.7171C39.0682 5.7171 39.6196 6.03764 40.0042 6.80695L40.3248 7.44805L40.2863 14.1795C40.2607 19.5262 40.2863 20.9751 40.4145 21.2316L40.594 21.5521L42.8507 21.5906L45.1202 21.6162L45.3253 21.3085C45.5048 21.0392 45.5305 20.1545 45.4792 13.064C45.4407 4.67853 45.4279 4.60159 44.8253 3.42198C44.4662 2.74242 43.4661 1.81925 42.684 1.44742C39.9529 0.16523 36.5808 1.22944 35.3499 3.75535L35.0806 4.30669L34.7473 3.67842C34.0164 2.34495 33.1702 1.56281 32.0547 1.16533C31.2982 0.896076 29.798 0.819143 28.9774 1.01147Z"
+    fill="#0B0C0E" />
+  <path
+    d="M92.0738 0.985859C88.2144 1.57566 85.5988 4.98628 85.1243 10.0766C84.6628 15.0514 86.586 19.5647 89.8813 21.2316C91.5481 22.0778 93.9586 22.283 95.7152 21.7445C99.1899 20.6802 101.588 17.2183 101.921 12.8076C102.113 10.0637 101.639 7.37115 100.562 5.30683C99.472 3.17839 97.5231 1.56284 95.5101 1.11408C94.5997 0.908926 92.9713 0.844818 92.0738 0.985859ZM94.3561 4.94781C95.7152 5.33247 96.2537 6.88392 96.3819 10.7818C96.5486 15.8336 95.6511 18.0518 93.4714 18.0518C92.4456 18.0518 91.9071 17.6543 91.3686 16.4875C90.7916 15.2438 90.6121 13.6923 90.689 10.6535C90.7531 7.8712 90.8557 7.20446 91.3814 6.16589C91.9712 5.02475 93.0739 4.57598 94.3561 4.94781Z"
+    fill="#0B0C0E" />
+  <path
+    d="M113.486 0.985832C112.089 1.21663 110.883 2.19109 110.037 3.74253L109.64 4.49902L109.627 3.12708C109.627 1.80643 109.614 1.75514 109.294 1.49871C108.986 1.25509 108.781 1.22945 107.101 1.22945C105.28 1.22945 105.255 1.22945 104.921 1.56281L104.588 1.89618L104.665 11.5767C104.716 18.8339 104.767 21.2957 104.883 21.4239C105.011 21.5777 105.473 21.6162 107.268 21.6162C109.409 21.6162 109.486 21.6034 109.678 21.3341C109.858 21.0777 109.883 20.2699 109.883 15.1412C109.883 8.89692 109.947 8.12761 110.512 7.02493C111.23 5.61452 112.858 5.1914 113.922 6.11457C114.794 6.88389 114.807 7.01211 114.858 14.5642C114.884 19.0903 114.935 21.3341 115.038 21.4495C115.14 21.5777 115.73 21.6162 117.397 21.6162C119.282 21.6162 119.641 21.5906 119.82 21.3982C120.013 21.2059 120.025 20.5264 119.974 13.423C119.923 5.02472 119.91 4.84521 119.192 3.4348C118.859 2.76807 117.859 1.76796 117.205 1.42177C116.692 1.16534 115.243 0.84479 114.627 0.857611C114.384 0.870432 113.871 0.921722 113.486 0.985832Z"
+    fill="#0B0C0E" />
+  <path
+    d="M69.5715 1.43448C69.4048 1.58834 69.3663 1.96018 69.3663 3.33212C69.3663 4.47327 69.4176 5.07589 69.5202 5.17847C69.6356 5.29386 70.5844 5.33233 72.9949 5.33233C75.6234 5.33233 76.3029 5.3708 76.2516 5.49902C76.226 5.58877 74.5592 7.98646 72.5589 10.8457C69.7766 14.8333 68.8919 16.1925 68.7637 16.6797C68.6739 17.0387 68.597 18.026 68.597 18.9492C68.597 20.4493 68.6226 20.6032 68.8919 20.8981L69.174 21.2314L70.5844 20.6545C72.3538 19.9364 73.5206 19.68 75.3926 19.6031C77.5467 19.5005 79.534 19.8467 81.483 20.6673C83.2908 21.4366 83.3806 21.334 83.3165 18.7953C83.278 16.7694 83.2524 16.7181 82.1241 16.1796C80.6752 15.5001 78.5596 15.0257 76.4696 14.9231L75.8285 14.8846L78.7519 10.7175C80.3546 8.4224 81.9702 6.12729 82.3164 5.61441L82.9575 4.66559V3.16544C82.9575 1.8576 82.919 1.62681 82.7267 1.44731C82.5087 1.25498 81.8676 1.22933 76.1234 1.22933C70.5203 1.22933 69.751 1.25497 69.5715 1.43448Z"
+    fill="#0B0C0E" />
+  <path
+    d="M73.5334 22.7059C71.187 23.0778 68.4944 24.3728 68.6226 25.0523C68.6739 25.3216 69.315 25.3216 72.3794 25.0908C74.0719 24.9498 74.8028 24.9498 75.649 25.0652C76.8799 25.2318 77.3159 25.4755 77.4954 26.0909C77.739 26.95 77.1876 29.181 75.9311 32.4377C75.3669 33.8866 75.3541 33.9635 75.5721 34.1302C75.9055 34.3738 76.3414 34.1174 77.2005 33.1814C79.0468 31.1684 80.5085 27.4757 80.5213 24.7831C80.5213 23.6291 80.4187 23.3727 79.8546 23.0778C78.8417 22.5521 75.6618 22.3597 73.5334 22.7059Z"
+    fill="#0B0C0E" />
+  <path
+    d="M16.9762 23.988C16.8095 24.4112 17.1044 24.8086 18.3609 25.86C25.6181 31.9376 34.0805 35.5149 43.6456 36.5791C46.0305 36.8356 50.6079 36.874 52.8261 36.6432C58.6729 36.0406 64.635 34.3738 69.2766 32.053C71.1357 31.117 71.5717 30.8734 73.2898 29.7322C74.9054 28.668 75.2003 28.2834 74.8284 27.7064C74.7002 27.5269 74.4694 27.3217 74.2899 27.2576C73.9437 27.1166 74.0463 27.0909 71.1614 28.1808C65.9172 30.181 60.2628 31.4632 54.3647 32.0145C52.2748 32.2069 46.4408 32.2069 44.2355 32.0145C35.3371 31.2324 26.5926 28.6552 19.3738 24.6932C17.7326 23.8086 17.1172 23.6162 16.9762 23.988Z"
+    fill="#0B0C0E" />
+</svg>

rstack-doc-ui/stories/assets/arrow.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Icon=Code Splitting</title>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Icon=Code-Splitting">
+      <rect id="Rectangle" x="0" y="0" width="32" height="32"></rect>
+      <g id="split-arrow" transform="translate(5, 4)" fill="#0B0C0E" fill-rule="nonzero">
+        <path
+          d="M20.1719252,1.93681116e-08 L14.7674179,0.00140555562 C14.1510207,0.00129300715 13.6479904,0.491710515 13.6361762,1.104283 C13.6220356,1.73443175 14.154662,2.25026356 14.7905141,2.25026356 L17.4710856,2.25026356 L12.7132715,6.97942452 C12.2715295,7.41853533 12.2715295,8.13044373 12.7132715,8.56955454 L12.7132715,8.56955454 C13.1550428,9.00863622 13.8712645,9.00863622 14.3130358,8.56955454 L19.0708499,3.84039357 L19.0708499,6.55776365 C19.0708499,7.17876864 19.5773241,7.68219265 20.2020916,7.68219265 L20.2020916,7.68219265 C20.8268592,7.68219265 21.3333333,7.17876864 21.3333333,6.55776365 L21.3333333,1.15535082 C21.3330738,0.517740859 20.8133979,0.000775334031 20.1719252,1.93681116e-08 L20.1719252,1.93681116e-08 Z M2.26248343,3.84039357 L2.26248343,6.55776365 C2.26248343,7.17876864 1.75600926,7.68219265 1.13124171,7.68219265 L1.13124171,7.68219265 C0.506474167,7.68219265 0,7.17876864 0,6.55776365 L0,1.15535082 C0.000259547319,0.517740859 0.519935459,0.000775334031 1.16140816,0 L6.56827221,0 C7.18466938,0 7.68769965,0.490304979 7.69951392,1.10287746 C7.71129769,1.73443175 7.17867138,2.25026356 6.54281927,2.25026356 L3.86224775,2.25026356 L11.4679629,9.808769 C11.6799435,10.020204 11.7986448,10.3067426 11.7979118,10.6052395 L11.7979118,22.875571 C11.7979118,23.496576 11.2914342,24 10.6666667,24 C10.0418991,24 9.53542495,23.496576 9.53542495,22.875571 L9.53542495,11.0690665 L2.26248343,3.84039357 Z"
+          id="Shape"></path>
+      </g>
+    </g>
+  </g>
+</svg>

rstack-doc-ui/stories/assets/bytedance.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="201" height="35" viewBox="0 0 201 35" fill="none">
+  <path
+    d="M29.4355 15.3251C29.4355 23.7515 29.4964 30.6348 29.5573 30.6348C29.6182 30.6348 30.735 30.3708 32.0345 30.0459C33.334 29.7211 34.6538 29.3962 34.9786 29.3353L35.5269 29.2134L35.4862 15.4673L35.4253 1.72106L33.801 1.25406C32.9076 0.990095 31.5675 0.604309 30.8162 0.401262L29.4355 0.0154743V15.3251Z"
+    fill="#0B0C0E" />
+  <path
+    d="M0.399963 15.3043C0.399963 25.5987 0.460877 29.2129 0.623314 29.2129C0.765446 29.2129 1.49641 29.0301 2.24768 28.8068C3.01925 28.5834 4.29844 28.218 5.07001 27.9946L6.49133 27.5682L6.49133 15.3246L6.49133 3.08091L3.54717 2.22812C1.94311 1.78141 0.582704 1.39563 0.501486 1.39563C0.440573 1.39563 0.399963 7.64944 0.399963 15.3043Z"
+    fill="#0B0C0E" />
+  <path
+    d="M47.1003 16.1169V27.792H51.9328C57.1511 27.792 58.1663 27.6499 60.1156 26.6549C61.3541 26.0255 62.6943 24.726 63.2425 23.6296C63.547 23.0204 63.6486 22.4113 63.6486 21.193C63.6486 19.7717 63.5673 19.4265 63.0394 18.4925C62.3694 17.2539 61.3948 16.4214 59.8922 15.7514L58.8567 15.2844L59.7704 14.6549C62.3491 12.8275 62.5724 9.41636 60.278 6.97981C58.3897 4.98996 56.278 4.44174 50.4303 4.44174H47.1003V16.1169ZM54.9582 7.30468C57.2323 7.71077 58.2882 8.82752 58.2882 10.8377C58.2882 12.4011 57.7196 13.2742 56.278 13.924C55.344 14.3707 54.8567 14.4316 52.9278 14.4722L50.6536 14.4925L50.5927 11.0407C50.5724 9.1524 50.5927 7.48742 50.6333 7.34529C50.7755 7.02042 53.1511 7.00011 54.9582 7.30468ZM56.7044 17.5179C58.9176 18.0458 60.0953 19.2641 60.0953 21.0712C60.0953 22.8377 59.08 24.0966 57.1917 24.6448C56.542 24.8275 55.08 24.9697 53.3948 24.99L50.6536 25.0509L50.5927 21.1321L50.5521 17.2336H53.0293C54.41 17.2336 56.0547 17.3554 56.7044 17.5179Z"
+    fill="#0B0C0E" />
+  <path
+    d="M113.05 4.56299C112.948 4.64421 112.887 9.9234 112.887 16.2787V27.832L117.314 27.7305C122.004 27.6493 123.019 27.4869 125.273 26.4513C127.791 25.294 129.497 23.4462 130.492 20.766C131.182 18.898 131.365 14.9995 130.877 12.9082C129.923 8.80665 127.263 6.18736 122.898 5.03C121.639 4.68482 120.502 4.5833 117.253 4.50208C115.019 4.44117 113.131 4.46147 113.05 4.56299ZM121.009 7.50715C124.217 8.01477 126.755 10.0046 127.527 12.6036C128.603 16.2787 127.893 20.3396 125.821 22.4716C124.177 24.1772 122.065 24.8879 118.471 24.9894L116.238 25.0503L116.177 16.1569L116.136 7.28381H117.903C118.898 7.28381 120.278 7.38533 121.009 7.50715Z"
+    fill="#0B0C0E" />
+  <path
+    d="M84.2579 9.82213V11.7308L81.4762 11.7917L78.6742 11.8526L76.5016 16.9287C75.3036 19.7105 74.126 22.614 73.862 23.3653C73.6184 24.1369 73.3544 24.746 73.2732 24.746C73.192 24.746 73.0295 24.3196 72.9077 23.7714C72.7656 23.2435 71.6285 20.3399 70.3696 17.3348L68.0752 11.8526L66.4102 11.7917C65.5168 11.7511 64.7656 11.7917 64.7656 11.8729C64.7656 11.9338 66.2884 15.5277 68.1361 19.8323C70.3899 25.0506 71.4661 27.7917 71.3849 28.0962C71.3239 28.3399 70.6742 29.8627 69.9635 31.5074L68.6437 34.4922H70.2072L71.7706 34.4719L76.3392 24.3399L80.8874 14.1876H82.5727H84.2579V19.6089C84.2579 26.4516 84.3798 26.9795 86.1869 27.812C86.7757 28.0962 87.4864 28.1978 88.8874 28.1978H90.7554V26.878V25.5582H89.6793C89.0498 25.5582 88.4407 25.4363 88.1564 25.2333C87.7097 24.9287 87.7097 24.8678 87.7097 19.548V14.1876H89.2326H90.7554V12.9693V11.7511H89.2326H87.7097V9.82213V7.8932H85.9838H84.2579V9.82213Z"
+    fill="#0B0C0E" />
+  <path
+    d="M22.9989 10.4924L20.2984 11.203L20.2984 17.7614V24.3198L21.7806 24.7462C22.5725 24.9898 23.7908 25.3553 24.4608 25.5583L25.6791 25.9238L25.74 21.8832C25.7603 19.6497 25.7603 16.0355 25.74 13.8223L25.6791 9.802L22.9989 10.4924Z"
+    fill="#0B0C0E" />
+  <path
+    d="M98.1664 11.6094C94.8973 12.4622 92.8872 14.7972 92.339 18.3911C91.872 21.3759 92.806 24.2185 94.8973 26.1272C96.3999 27.4876 97.8212 28.0358 100.217 28.1576C103.121 28.2997 105.435 27.447 107.222 25.6195L108.116 24.7261L107.506 24.2185C106.085 23.0206 106.105 23.0206 105.253 23.8327C103.831 25.1322 102.897 25.4571 100.603 25.4571C98.7552 25.4571 98.4913 25.4165 97.6182 24.8886C97.0902 24.584 96.4202 24.0155 96.1156 23.6297C95.5674 22.8987 94.938 21.1728 95.141 20.8683C95.2019 20.7668 98.3085 20.6855 102.045 20.6855H108.826V20.0155C108.826 18.8378 108.237 16.6246 107.669 15.5891C106.897 14.1475 105.05 12.5028 103.608 11.9546C102.166 11.4063 99.5877 11.2439 98.1664 11.6094ZM102.146 14.2287C103.628 14.6551 105.05 16.2591 105.456 17.8835L105.578 18.452H100.298H95.0192L95.141 17.8835C95.4862 16.4013 96.7248 14.9799 98.2679 14.3099C99.1207 13.9444 101.07 13.9038 102.146 14.2287Z"
+    fill="#0B0C0E" />
+  <path
+    d="M173.862 11.6499C172.258 12.0966 171.222 12.6854 170.146 13.7819C166.288 17.6194 167.121 24.4012 171.771 27.122C173.557 28.1778 176.725 28.523 178.898 27.8732C179.852 27.589 182.126 26.2895 182.126 26.0458C182.126 25.9849 181.7 25.4976 181.192 24.9494L180.258 23.9342L179.608 24.4824C178.654 25.2946 177.72 25.5991 176.238 25.5991C174.126 25.5991 172.684 24.7869 171.629 22.9595C171.182 22.2286 171.06 21.721 170.999 20.3402C170.938 19.3656 170.999 18.2895 171.141 17.7819C171.527 16.4012 172.603 15.122 173.882 14.4925C174.877 14.0052 175.202 13.9443 176.502 14.0255C177.781 14.0864 178.167 14.188 179.101 14.7768L180.197 15.4468L181.09 14.4722L181.964 13.4976L181.293 12.9291C179.71 11.6093 176.156 11.0001 173.862 11.6499Z"
+    fill="#0B0C0E" />
+  <path
+    d="M189.436 11.6494C187.892 12.0961 186.816 12.7661 185.618 14.0859C184.319 15.5072 183.73 16.9895 183.608 19.2839C183.364 23.0402 185.029 25.8829 188.38 27.4463C190.999 28.6646 194.897 28.4006 197.354 26.8169C198.43 26.1265 199.588 25.0707 199.588 24.7864C199.588 24.6849 199.182 24.2585 198.674 23.8524L197.781 23.1011L196.603 24.0148C195.1 25.1925 193.963 25.5783 192.116 25.5783C189.212 25.5783 186.897 23.7915 186.552 21.294L186.491 20.7864L193.456 20.7255L200.4 20.6849V19.8118C200.4 18.6341 199.892 16.7661 199.243 15.5478C198.471 14.1468 196.603 12.4819 195.182 11.9539C193.639 11.3651 190.979 11.223 189.436 11.6494ZM194.207 14.4717C194.776 14.7357 195.466 15.2027 195.771 15.5275C196.319 16.1164 197.131 17.7204 197.151 18.1874C197.151 18.3905 195.953 18.4514 191.791 18.4514H186.43L186.633 17.7001C187.04 16.2179 188.441 14.756 189.943 14.228C191.08 13.822 193.09 13.9438 194.207 14.4717Z"
+    fill="#0B0C0E" />
+  <path
+    d="M138.126 11.8523C135.933 12.5223 134.228 14.1061 133.395 16.2381C132.969 17.3548 132.887 17.8624 132.887 19.7711C132.887 21.7812 132.948 22.1264 133.436 23.1822C134.187 24.7863 135.019 25.8015 136.299 26.634C137.943 27.7101 139.222 28.0553 141.294 27.9538C143.324 27.8523 144.481 27.4056 145.761 26.2685L146.593 25.5172V26.6543V27.7914L148.014 27.7914H149.436V19.7711V11.7507H148.116L146.796 11.7507V12.9893V14.2279L145.781 13.2939C144.339 12.0147 142.979 11.5477 140.745 11.568C139.771 11.568 138.593 11.6898 138.126 11.8523ZM143.71 14.5731C144.664 15.0604 145.903 16.4005 146.349 17.4157C146.816 18.5325 146.776 21.1518 146.248 22.3497C144.684 25.8218 139.953 26.6543 137.314 23.8929C136.258 22.7964 135.832 21.6391 135.832 19.7507C135.832 18.4106 135.913 17.9436 136.36 17.0705C136.989 15.7914 138.228 14.6746 139.486 14.2888C140.664 13.903 142.674 14.0452 143.71 14.5731Z"
+    fill="#0B0C0E" />
+  <path
+    d="M157.659 11.8529C157.212 12.0356 156.501 12.4417 156.095 12.7666C155.689 13.1118 155.303 13.3757 155.243 13.3757C155.182 13.3757 155.121 13.0103 155.121 12.5636V11.7514H153.699H152.278V19.7717V27.792H153.679H155.1L155.161 22.4519C155.222 17.4976 155.263 17.0712 155.669 16.1778C155.953 15.5483 156.4 15.0407 156.968 14.6549C157.72 14.1473 158.024 14.0864 159.364 14.0864C161.171 14.0864 161.923 14.4925 162.552 15.7514C162.897 16.4417 162.938 17.1321 162.999 22.1473L163.06 27.792H164.583H166.105L166.024 22.0458C165.984 18.2895 165.882 16.056 165.72 15.5686C165.293 14.3301 164.217 12.9087 163.161 12.2793C162.288 11.7311 161.984 11.6702 160.319 11.6092C159.04 11.5686 158.227 11.6499 157.659 11.8529Z"
+    fill="#0B0C0E" />
+  <path
+    d="M10.0648 13.944C9.98354 14.0049 9.94293 17.5582 9.94293 21.8425C9.94293 29.0506 9.96324 29.6191 10.2881 29.6191C10.4912 29.6191 11.8516 29.3755 13.3338 29.0709L16.0343 28.5024L15.9937 21.9034L15.9328 15.3044L13.0495 14.5735C11.4658 14.1674 10.1257 13.8831 10.0648 13.944Z"
+    fill="#0B0C0E" />
+</svg>

rstack-doc-ui/stories/assets/discord.svg

@@ -0,0 +1,47 @@
+<svg width="140" height="28" viewBox="0 0 140 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_2094_5187)">
+    <mask id="mask0_2094_5187" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="141"
+      height="28">
+      <path d="M140.065 0.836914H0V27.6702H140.065V0.836914Z" fill="white" />
+    </mask>
+    <g mask="url(#mask0_2094_5187)">
+      <mask id="mask1_2094_5187" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="141"
+        height="28">
+        <path d="M140.065 0.836914H0V27.6702H140.065V0.836914Z" fill="white" />
+      </mask>
+      <g mask="url(#mask1_2094_5187)">
+        <path
+          d="M29.6419 3.0842C27.3768 2.03435 24.9548 1.27137 22.4227 0.836914C22.1117 1.39386 21.7484 2.14298 21.498 2.73889C18.8063 2.33789 16.1393 2.33789 13.4971 2.73889C13.2467 2.14298 12.8751 1.39386 12.5614 0.836914C10.0265 1.27137 7.60175 2.03715 5.33663 3.08976C0.767855 9.92898 -0.470665 16.5983 0.148596 23.173C3.17885 25.4146 6.11553 26.7764 9.00265 27.6675C9.71549 26.6956 10.3513 25.6625 10.8989 24.5737C9.85584 24.181 8.85678 23.6965 7.91277 23.134C8.16321 22.9502 8.40818 22.758 8.64486 22.5603C14.4026 25.2281 20.6585 25.2281 26.3475 22.5603C26.5869 22.758 26.8318 22.9502 27.0796 23.134C26.1328 23.6993 25.131 24.1838 24.0879 24.5765C24.6356 25.6625 25.2686 26.6984 25.9842 27.6702C28.8741 26.7792 31.8135 25.4174 34.8437 23.173C35.5703 15.5513 33.6025 8.94318 29.6419 3.0842ZM11.6834 19.1296C9.95495 19.1296 8.5375 17.5312 8.5375 15.5847C8.5375 13.6382 9.92468 12.037 11.6834 12.037C13.4421 12.037 14.8595 13.6354 14.8292 15.5847C14.832 17.5312 13.4421 19.1296 11.6834 19.1296ZM23.309 19.1296C21.5806 19.1296 20.1631 17.5312 20.1631 15.5847C20.1631 13.6382 21.5502 12.037 23.309 12.037C25.0676 12.037 26.4851 13.6354 26.4548 15.5847C26.4548 17.5312 25.0676 19.1296 23.309 19.1296Z"
+          fill="#0B0C0E" />
+        <path
+          d="M47.0225 7.68262H54.536C56.3472 7.68262 57.8774 7.96943 59.1327 8.54031C60.3846 9.11113 61.3234 9.90757 61.9455 10.9268C62.5672 11.946 62.8809 13.1128 62.8809 14.4271C62.8809 15.7137 62.5561 16.8805 61.9067 17.9247C61.2572 18.9717 60.269 19.7988 58.9399 20.4087C57.6107 21.0185 55.9644 21.3248 53.9968 21.3248H47.0225V7.68262ZM53.9196 17.8579C55.1389 17.8579 56.0776 17.5488 56.7324 16.9333C57.3876 16.3151 57.7152 15.4742 57.7152 14.4077C57.7152 13.4191 57.4231 12.631 56.8398 12.0406C56.2566 11.4503 55.373 11.1523 54.192 11.1523H51.8416V17.8579H53.9196Z"
+          fill="#0B0C0E" />
+        <path
+          d="M74.1295 21.3076C73.0891 21.0347 72.1503 20.6393 71.3167 20.1186V16.8828C71.9469 17.3756 72.7917 17.7822 73.8513 18.1025C74.9109 18.4199 75.935 18.5786 76.9255 18.5786C77.3879 18.5786 77.7376 18.5174 77.9741 18.3948C78.211 18.2723 78.3295 18.1247 78.3295 17.9549C78.3295 17.7599 78.2662 17.5984 78.1367 17.4675C78.0072 17.3367 77.7568 17.228 77.3855 17.1361L75.0735 16.6098C73.7496 16.298 72.8108 15.8663 72.2525 15.3122C71.6937 14.7608 71.4155 14.0368 71.4155 13.1401C71.4155 12.3854 71.6577 11.7311 72.1479 11.1713C72.6348 10.6116 73.3284 10.18 74.2283 9.87644C75.1286 9.57014 76.1796 9.41699 77.3879 9.41699C78.4667 9.41699 79.4548 9.53393 80.3552 9.76786C81.255 10.0018 81.9981 10.2997 82.59 10.6645V13.7249C81.9842 13.3601 81.2905 13.0733 80.4981 12.8561C79.7081 12.6417 78.8965 12.5358 78.0594 12.5358C76.8511 12.5358 76.2487 12.7447 76.2487 13.1596C76.2487 13.3546 76.3422 13.4993 76.5293 13.5968C76.7164 13.6943 77.0603 13.7945 77.5587 13.9003L79.485 14.2512C80.7432 14.4712 81.6815 14.8583 82.2979 15.4096C82.9147 15.961 83.2227 16.777 83.2227 17.8574C83.2227 19.0409 82.7137 19.9793 81.6925 20.6755C80.6713 21.3717 79.2236 21.7198 77.3467 21.7198C76.2429 21.717 75.1699 21.5805 74.1295 21.3076Z"
+          fill="#0B0C0E" />
+        <path
+          d="M87.7701 20.8984C86.6668 20.3526 85.8327 19.6119 85.2767 18.6763C84.7208 17.7406 84.4402 16.688 84.4402 15.5184C84.4402 14.3488 84.729 13.3018 85.307 12.3801C85.885 11.4583 86.7326 10.7343 87.8502 10.208C88.9674 9.6817 90.3023 9.41992 91.8574 9.41992C93.7838 9.41992 95.383 9.82928 96.6546 10.648V14.2152C96.2061 13.9033 95.6828 13.6499 95.0856 13.455C94.4884 13.26 93.85 13.1625 93.1674 13.1625C91.973 13.1625 91.04 13.3825 90.3656 13.8253C89.6912 14.2681 89.353 14.8445 89.353 15.5602C89.353 16.2619 89.6802 16.8356 90.3354 17.2867C90.9906 17.735 91.9399 17.9606 93.1866 17.9606C93.8279 17.9606 94.4611 17.8659 95.0856 17.6793C95.7078 17.49 96.2445 17.2589 96.693 16.9859V20.4362C95.2813 21.2938 93.6437 21.7227 91.7802 21.7227C90.2116 21.7171 88.8738 21.4442 87.7701 20.8984Z"
+          fill="#0B0C0E" />
+        <path
+          d="M101.46 20.8982C100.348 20.3524 99.5006 19.6061 98.9169 18.6565C98.3336 17.7069 98.0391 16.6487 98.0391 15.4791C98.0391 14.3096 98.3307 13.2653 98.9169 12.3492C99.503 11.433 100.345 10.7145 101.452 10.1938C102.555 9.67303 103.874 9.41406 105.401 9.41406C106.929 9.41406 108.247 9.67303 109.351 10.1938C110.455 10.7145 111.297 11.4274 111.875 12.338C112.453 13.2486 112.742 14.2929 112.742 15.4764C112.742 16.6459 112.453 17.7041 111.875 18.6537C111.297 19.6033 110.452 20.3496 109.34 20.8953C108.228 21.4412 106.915 21.7141 105.399 21.7141C103.882 21.7141 102.569 21.4439 101.46 20.8982ZM107.314 17.4396C107.782 16.9662 108.019 16.3396 108.019 15.5599C108.019 14.7802 107.785 14.1592 107.314 13.6997C106.846 13.2375 106.207 13.0063 105.399 13.0063C104.576 13.0063 103.931 13.2375 103.461 13.6997C102.993 14.162 102.759 14.7802 102.759 15.5599C102.759 16.3396 102.993 16.9662 103.461 17.4396C103.929 17.913 104.576 18.1525 105.399 18.1525C106.207 18.1497 106.846 17.913 107.314 17.4396Z"
+          fill="#0B0C0E" />
+        <path
+          d="M124.318 10.1387V14.3492C123.828 14.0233 123.195 13.8618 122.41 13.8618C121.383 13.8618 120.591 14.1765 120.04 14.8059C119.487 15.4352 119.212 16.4154 119.212 17.7409V21.3276H114.492V9.92431H119.116V13.55C119.372 12.2244 119.788 11.247 120.36 10.6149C120.93 9.98556 121.667 9.6709 122.564 9.6709C123.244 9.6709 123.828 9.82685 124.318 10.1387Z"
+          fill="#0B0C0E" />
+        <path
+          d="M140 7.29297V21.3278H135.28V18.7743C134.88 19.735 134.275 20.4674 133.461 20.9686C132.646 21.4671 131.638 21.7177 130.444 21.7177C129.376 21.7177 128.446 21.4559 127.65 20.9296C126.855 20.4033 126.241 19.6821 125.809 18.7659C125.38 17.8498 125.162 16.8139 125.162 15.6555C125.149 14.4608 125.377 13.3887 125.848 12.4391C126.316 11.4895 126.979 10.7488 127.832 10.2169C128.685 9.68504 129.66 9.41771 130.752 9.41771C133.001 9.41771 134.509 10.4063 135.28 12.3806V7.29297H140ZM134.575 17.3625C135.057 16.8891 135.296 16.2737 135.296 15.5218C135.296 14.795 135.062 14.2018 134.595 13.7479C134.126 13.294 133.485 13.0657 132.679 13.0657C131.883 13.0657 131.248 13.2968 130.772 13.759C130.295 14.2213 130.059 14.82 130.059 15.5608C130.059 16.3015 130.295 16.9058 130.772 17.3736C131.248 17.8414 131.875 18.0753 132.66 18.0753C133.455 18.0726 134.093 17.8358 134.575 17.3625Z"
+          fill="#0B0C0E" />
+        <path
+          d="M66.8582 11.1376C68.1576 11.1376 69.2115 10.1801 69.2115 8.99897C69.2115 7.81783 68.1576 6.86035 66.8582 6.86035C65.5583 6.86035 64.5049 7.81783 64.5049 8.99897C64.5049 10.1801 65.5583 11.1376 66.8582 11.1376Z"
+          fill="#0B0C0E" />
+        <path d="M64.5029 12.6113C65.9448 13.2406 67.734 13.2685 69.209 12.6113V21.3887H64.5029V12.6113Z"
+          fill="#0B0C0E" />
+      </g>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="clip0_2094_5187">
+      <rect width="140" height="26.8333" fill="white" transform="translate(0 0.836914)" />
+    </clipPath>
+  </defs>
+</svg>

rstack-doc-ui/stories/assets/intuit.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="141" height="41" viewBox="0 0 141 41" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M138.752 39.6964C138.296 39.6946 137.858 39.5124 137.536 39.1897C137.213 38.8669 137.031 38.4296 137.029 37.9731C137.049 37.5294 137.239 37.1105 137.56 36.8036C137.881 36.4966 138.308 36.3253 138.752 36.3253C139.196 36.3253 139.623 36.4966 139.944 36.8036C140.265 37.1105 140.456 37.5294 140.476 37.9731C140.476 38.9171 139.705 39.6964 138.752 39.6964ZM138.752 35.9357C137.623 35.9357 136.706 36.842 136.706 37.9731C136.706 39.106 137.623 39.9917 138.752 39.9917C139.885 39.9917 140.8 39.1042 140.8 37.9731C140.8 36.842 139.883 35.9357 138.752 35.9357ZM138.366 37.8204V37.1664H138.744C138.96 37.1664 139.202 37.2313 139.202 37.4804C139.202 37.7587 138.933 37.8204 138.699 37.8204H138.366ZM139.614 37.4876C139.614 36.9965 139.194 36.8147 138.763 36.8147H137.956V39.1114H138.366V38.1519H138.663L139.202 39.113H139.705L139.083 38.1072C139.41 38.0372 139.614 37.8184 139.614 37.4876ZM126.729 8.36847C127.285 8.37972 127.838 8.27982 128.356 8.07467C128.873 7.86953 129.345 7.56321 129.742 7.17369C130.14 6.78416 130.456 6.31927 130.671 5.80617C130.887 5.29307 130.998 4.74212 130.998 4.18554C130.998 3.62895 130.887 3.07789 130.672 2.56471C130.456 2.05152 130.141 1.58648 129.743 1.19679C129.346 0.807108 128.875 0.500668 128.357 0.29531C127.84 0.0899522 127.287 -0.0102045 126.731 0.000820707C125.635 0.0227398 124.593 0.473165 123.826 1.25539C123.059 2.03762 122.63 3.08931 122.63 4.18465C122.63 5.27998 123.059 6.33167 123.826 7.1139C124.593 7.89613 125.634 8.34655 126.729 8.36847ZM115.503 11.9814V18.1194H123.265V39.6984H130.191V18.1194H137.954V11.9814H115.503ZM55.0801 8.36847C55.6296 8.36861 56.1738 8.26052 56.6815 8.05032C57.1892 7.84013 57.6506 7.53191 58.0392 7.1434C58.4278 6.75488 58.7361 6.29364 58.9464 5.78597C59.1567 5.2783 59.265 4.73416 59.265 4.18465C59.265 3.63513 59.1567 3.09099 58.9464 2.58332C58.7361 2.07565 58.4278 1.61441 58.0392 1.2259C57.6506 0.83738 57.1892 0.529163 56.6815 0.318968C56.1738 0.108773 55.6296 0.000683854 55.0801 0.000820707C53.985 0.0227398 52.9421 0.473165 52.1754 1.25539C51.4087 2.03762 50.9792 3.08931 50.9792 4.18465C50.9792 5.27998 51.4087 6.33167 52.1754 7.1139C52.9421 7.89613 53.985 8.34655 55.0801 8.36847ZM43.853 18.1177H51.6164V39.6984H58.5404V18.1194H66.3056V11.9814H43.8547L43.853 18.1177ZM103.724 39.6984H110.651V11.9987H103.725L103.724 39.6984ZM89.7108 27.2336C89.7108 30.9274 87.6304 34.7344 83.2467 34.7344C78.8029 34.7344 78.0528 30.639 78.0528 27.3486V11.9987H71.127V29.3106C71.127 34.9679 74.1273 40.5068 81.3431 40.5068C85.4386 40.5068 88.7289 38.0248 89.9407 35.2545H90.0556V39.6984H96.6346V11.9987H89.7106L89.7108 27.2336ZM30.1113 11.1902C26.0142 11.1902 22.7256 13.6722 21.5137 16.4425H21.397V11.9987H14.8196V39.6984H21.7437V24.4633C21.7437 20.7696 23.8223 16.9608 28.2078 16.9608C32.6499 16.9608 33.4017 21.058 33.4017 24.3484V39.6984H40.3257V22.3831C40.3257 16.7292 37.3272 11.1902 30.1113 11.1902ZM0.799927 39.6984H7.72399V11.9987H0.799927V39.6984Z"
+    fill="#0B0C0E" />
+</svg>

rstack-doc-ui/stories/env.d.ts

@@ -0,0 +1 @@
+/// <reference types='@rsbuild/core/types' />

rstack-doc-ui/stories/index.scss

@@ -0,0 +1,66 @@
+:root {
+  --rp-nav-height: 72px;
+  --rp-sidebar-width: 320px;
+  --rp-aside-width: 268px;
+  --rp-c-bg: #fff;
+  --rp-c-bg-soft: #f9f9f9;
+  --rp-c-bg-mute: #f1f1f1;
+  --rp-c-divider: #3c3c3c4a;
+  --rp-c-divider-light: #3c3c3c1a;
+  --rp-c-text-1: #213547;
+  --rp-c-text-2: #3c3c3ca8;
+  --rp-c-text-3: #3c3c3c54;
+  --rp-c-text-4: #3c3c3c2e;
+  --rp-c-text-code: #476573;
+  --rp-c-text-code-bg: #99a1b31a;
+  --rp-c-brand: #0095ff;
+  --rp-c-brand-light: #33adff;
+  --rp-c-brand-lighter: #66c2ff;
+  --rp-c-brand-dark: #07f;
+  --rp-c-brand-darker: #005fcc;
+  --rp-c-brand-tint: #7fa3ff29;
+  --rp-c-gray: #8e8e8e;
+  --rp-c-gray-light-1: #aeaeae;
+  --rp-c-gray-light-2: #c7c7c7;
+  --rp-c-gray-light-3: #d1d1d1;
+  --rp-c-gray-light-4: #e5e5e5;
+  --rp-c-gray-light-5: #f2f2f2;
+  --rp-c-dark: #000;
+  --rp-c-dark-light-1: #2f2f2f;
+  --rp-c-dark-light-2: #3a3a3a;
+  --rp-c-dark-light-3: #4a4a4a;
+  --rp-c-dark-light-4: #5c5c5c;
+  --rp-c-dark-light-5: #6b6b6b;
+  --rp-radius: 1rem;
+  --rp-radius-small: 0.5rem;
+  --rp-radius-large: 1.5rem;
+  --rp-c-link: var(--rp-c-brand-dark);
+}
+
+.dark {
+  --rp-c-bg: #23272f;
+  --rp-c-bg-soft: #292e37;
+  --rp-c-bg-mute: #343a46;
+  --rp-c-bg-alt: #000;
+  --rp-c-divider: #545454a6;
+  --rp-c-divider-light: #5454547a;
+  --rp-c-text-1: #ffffffde;
+  --rp-c-text-2: #ebebeb8f;
+  --rp-c-text-3: #ebebeb61;
+  --rp-c-text-4: #ebebeb2e;
+  --rp-c-text-code: #c9def1;
+  --rp-c-link: var(--rp-c-brand-light);
+}
+
+:root {
+  --rp-font-family-base:
+    'Open Sans', 'Inter var experimental', 'Inter var', -apple-system,
+    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+body {
+  font-family: var(--rp-font-family-base);
+  -webkit-font-smoothing: antialiased;
+}

rstack-doc-ui/stories/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../",
+    "rootDir": "../",
+    "module": "Preserve",
+    "moduleResolution": "Bundler"
+  },
+  "include": ["./*.ts", "./*.tsx", "./**/*.svg"]
+}

rstack-doc-ui/stories/why-rspack-assets/Compatible.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" width="424"
+  height="424" preserveAspectRatio="xMidYMid meet"
+  style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible; background-color: transparent;">
+  <defs>
+    <clipPath id="__lottie_element_33">
+      <rect width="128" height="128" x="0" y="0" />
+    </clipPath>
+  </defs>
+  <g clip-path="url(#__lottie_element_33)">
+    <g transform="matrix(0.7400000095367432,0,0,0.7400000095367432,23.299999237060547,38.84000015258789)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,27,34)">
+        <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+          stroke="rgb(255,138,0)" stroke-opacity="1" stroke-width="5"
+          d=" M10,-27 C10,-27 14,-27 14,-27 C16.827999114990234,-27 18.243000030517578,-27 19.121000289916992,-26.121000289916992 C20,-25.243000030517578 20,-23.827999114990234 20,-21 C20,-21 20,-13.5 20,-13.5 M-10,-27 C-10,-27 -14,-27 -14,-27 C-16.827999114990234,-27 -18.243000030517578,-27 -19.121000289916992,-26.121000289916992 C-20,-25.243000030517578 -20,-23.827999114990234 -20,-21 C-20,-21 -20,-13.5 -20,-13.5 M-20,13.5 C-20,13.5 -20,21 -20,21 C-20,23.827999114990234 -20,25.243000030517578 -19.121000289916992,26.121000289916992 C-18.243000030517578,27 -16.827999114990234,27 -14,27 C-14,27 -10,27 -10,27 M10,27 C10,27 14,27 14,27 C16.827999114990234,27 18.243000030517578,27 19.121000289916992,26.121000289916992 C20,25.243000030517578 20,23.827999114990234 20,21 C20,21 20,13.5 20,13.5" />
+      </g>
+    </g>
+    <g transform="matrix(0.7400000095367432,0,0,0.7400000095367432,64.73999786376953,38.84000015258789)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,27,34)">
+        <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+          stroke="rgb(255,138,0)" stroke-opacity="1" stroke-width="5"
+          d=" M-20,-13.5 C-20,-13.5 -20,-21 -20,-21 C-20,-23.827999114990234 -20,-25.243000030517578 -19.121000289916992,-26.121000289916992 C-18.243000030517578,-27 -16.827999114990234,-27 -14,-27 C-14,-27 14,-27 14,-27 C16.827999114990234,-27 18.243000030517578,-27 19.121000289916992,-26.121000289916992 C20,-25.243000030517578 20,-23.827999114990234 20,-21 C20,-21 20,21 20,21 C20,23.827999114990234 20,25.243000030517578 19.121000289916992,26.121000289916992 C18.243000030517578,27 16.827999114990234,27 14,27 C14,27 -14,27 -14,27 C-16.827999114990234,27 -18.243000030517578,27 -19.121000289916992,26.121000289916992 C-20,25.243000030517578 -20,23.827999114990234 -20,21 C-20,21 -20,13.5 -20,13.5" />
+      </g>
+    </g>
+    <g transform="matrix(0.7400000095367432,0,0,0.7400000095367432,40.689998626708984,52.900001525878906)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,58.5,15)">
+        <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)" stroke-opacity="1"
+          stroke-width="6" d=" M-4,8 C-4,8 4,0 4,0 C4,0 -4,-8 -4,-8" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+        <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+          stroke="rgb(249,57,32)" stroke-opacity="1" stroke-width="6" d=" M3.5,15 C3.5,15 62.5,15 62.5,15" />
+      </g>
+    </g>
+  </g>
+</svg>

rstack-doc-ui/stories/why-rspack-assets/FrameCheck.svg

@@ -0,0 +1,154 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" width="424"
+  height="424" preserveAspectRatio="xMidYMid meet"
+  style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible; background-color: transparent;">
+  <defs>
+    <clipPath id="__lottie_element_63">
+      <rect width="500" height="500" x="0" y="0" />
+    </clipPath>
+    <g id="__lottie_element_65">
+      <g transform="matrix(1.0061625242233276,0,0,0.9938374161720276,250.00027465820312,250)" opacity="1"
+        style="display: block;">
+        <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+          <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+            stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="40"
+            d=" M-75,-17 C-75,-17 -19,39.5 -19,39.5 C-19,39.5 76.5,-53.5 76.5,-53.5" />
+        </g>
+      </g>
+    </g>
+    <g id="__lottie_element_74">
+      <g style="display: none;">
+        <g>
+          <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" />
+        </g>
+      </g>
+    </g>
+    <mask id="__lottie_element_74_1" mask-type="alpha">
+      <use xmlns:ns1="http://www.w3.org/1999/xlink" ns1:href="#__lottie_element_74" />
+    </mask>
+    <mask id="__lottie_element_65_1" mask-type="alpha">
+      <use xmlns:ns2="http://www.w3.org/1999/xlink" ns2:href="#__lottie_element_65" />
+    </mask>
+  </defs>
+  <g clip-path="url(#__lottie_element_63)">
+    <g transform="matrix(5,0,0,5,261.4599914550781,239.63499450683594)" opacity="1" style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+        <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M-12.093000411987305,-14.88700008392334 C-13.126999855041504,-16.679000854492188 -18.301000595092773,-25.639999389648438 -18.301000595092773,-25.639999389648438" />
+            </g>
+          </g>
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M-21.884000778198242,2.072999954223633 C-23.952999114990234,2.072999954223633 -34.30099868774414,2.072999954223633 -34.30099868774414,2.072999954223633" />
+            </g>
+          </g>
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M-12.093000411987305,19.033000946044922 C-13.126999855041504,20.825000762939453 -18.301000595092773,29.785999298095703 -18.301000595092773,29.785999298095703" />
+            </g>
+          </g>
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M7.491000175476074,19.033000946044922 C8.524999618530273,20.825000762939453 13.699000358581543,29.785999298095703 13.699000358581543,29.785999298095703" />
+            </g>
+          </g>
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M17.281999588012695,2.072999954223633 C19.35099983215332,2.072999954223633 29.698999404907227,2.072999954223633 29.698999404907227,2.072999954223633" />
+            </g>
+          </g>
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                stroke-opacity="1" stroke-width="0.5"
+                d=" M7.491000175476074,-14.88700008392334 C8.524999618530273,-16.679000854492188 13.699000358581543,-25.639999389648438 13.699000358581543,-25.639999389648438" />
+            </g>
+          </g>
+        </g>
+        <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M-2.302000045776367,-21.732999801635742 C-2.302000045776367,-22.617000579833984 -2.302000045776367,-27.040000915527344 -2.302000045776367,-27.040000915527344" />
+              </g>
+            </g>
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M-22.90399932861328,-9.826000213623047 C-23.67099952697754,-10.269000053405762 -27.50200080871582,-12.479999542236328 -27.50200080871582,-12.479999542236328" />
+              </g>
+            </g>
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M-22.90399932861328,13.97599983215332 C-23.67099952697754,14.416999816894531 -27.50200080871582,16.6200008392334 -27.50200080871582,16.6200008392334" />
+              </g>
+            </g>
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M-2.302000045776367,25.87299919128418 C-2.302000045776367,26.759000778198242 -2.302000045776367,31.190000534057617 -2.302000045776367,31.190000534057617" />
+              </g>
+            </g>
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M18.309999465942383,13.97599983215332 C19.07699966430664,14.418999671936035 22.908000946044922,16.6299991607666 22.908000946044922,16.6299991607666" />
+              </g>
+            </g>
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+                  stroke-opacity="1" stroke-width="0.5"
+                  d=" M18.31100082397461,-9.836000442504883 C19.077999114990234,-10.279000282287598 22.917999267578125,-12.489999771118164 22.917999267578125,-12.489999771118164 C22.917999267578125,-12.489999771118164 22.917999267578125,-12.489999771118164 22.917999267578125,-12.489999771118164" />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+    <g mask="url(#__lottie_element_74_1)" style="display: block;">
+      <g transform="matrix(5.030812740325928,0,0,4.969187259674072,261.5308837890625,239.69886779785156)" opacity="1">
+        <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <path fill="rgb(255,138,0)" fill-opacity="1"
+              d=" M12.762999534606934,-8.520000457763672 C11.515000343322754,-9.767999649047852 9.494000434875488,-9.767999649047852 8.246000289916992,-8.520000457763672 C8.246000289916992,-8.520000457763672 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -12.847000122070312,-0.7950000166893005 -12.847000122070312,-0.7950000166893005 C-14.095000267028809,-2.0420000553131104 -16.117000579833984,-2.0420000553131104 -17.364999771118164,-0.7950000166893005 C-18.613000869750977,0.453000009059906 -18.613000869750977,2.4749999046325684 -17.364999771118164,3.7230000495910645 C-17.364999771118164,3.7230000495910645 -8.42199993133545,12.666000366210938 -8.42199993133545,12.666000366210938 C-7.173999786376953,13.913000106811523 -5.1529998779296875,13.913000106811523 -3.9049999713897705,12.666000366210938 C-3.9049999713897705,12.666000366210938 12.762999534606934,-4.001999855041504 12.762999534606934,-4.001999855041504 C14.01099967956543,-5.25 14.01099967956543,-7.2729997634887695 12.762999534606934,-8.520000457763672z" />
+            <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+              stroke-opacity="1" stroke-width="0.5"
+              d=" M12.762999534606934,-8.520000457763672 C11.515000343322754,-9.767999649047852 9.494000434875488,-9.767999649047852 8.246000289916992,-8.520000457763672 C8.246000289916992,-8.520000457763672 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -12.847000122070312,-0.7950000166893005 -12.847000122070312,-0.7950000166893005 C-14.095000267028809,-2.0420000553131104 -16.117000579833984,-2.0420000553131104 -17.364999771118164,-0.7950000166893005 C-18.613000869750977,0.453000009059906 -18.613000869750977,2.4749999046325684 -17.364999771118164,3.7230000495910645 C-17.364999771118164,3.7230000495910645 -8.42199993133545,12.666000366210938 -8.42199993133545,12.666000366210938 C-7.173999786376953,13.913000106811523 -5.1529998779296875,13.913000106811523 -3.9049999713897705,12.666000366210938 C-3.9049999713897705,12.666000366210938 12.762999534606934,-4.001999855041504 12.762999534606934,-4.001999855041504 C14.01099967956543,-5.25 14.01099967956543,-7.2729997634887695 12.762999534606934,-8.520000457763672z" />
+          </g>
+        </g>
+      </g>
+    </g>
+    <g mask="url(#__lottie_element_65_1)" style="display: block;">
+      <g transform="matrix(5.030812740325928,0,0,4.969187259674072,261.5308837890625,239.69886779785156)" opacity="1">
+        <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+          <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+            <path fill="rgb(255,138,0)" fill-opacity="1"
+              d=" M12.762999534606934,-8.520000457763672 C11.515000343322754,-9.767999649047852 9.494000434875488,-9.767999649047852 8.246000289916992,-8.520000457763672 C8.246000289916992,-8.520000457763672 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -12.847000122070312,-0.7950000166893005 -12.847000122070312,-0.7950000166893005 C-14.095000267028809,-2.0420000553131104 -16.117000579833984,-2.0420000553131104 -17.364999771118164,-0.7950000166893005 C-18.613000869750977,0.453000009059906 -18.613000869750977,2.4749999046325684 -17.364999771118164,3.7230000495910645 C-17.364999771118164,3.7230000495910645 -8.42199993133545,12.666000366210938 -8.42199993133545,12.666000366210938 C-7.173999786376953,13.913000106811523 -5.1529998779296875,13.913000106811523 -3.9049999713897705,12.666000366210938 C-3.9049999713897705,12.666000366210938 12.762999534606934,-4.001999855041504 12.762999534606934,-4.001999855041504 C14.01099967956543,-5.25 14.01099967956543,-7.2729997634887695 12.762999534606934,-8.520000457763672z" />
+            <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(249,57,32)"
+              stroke-opacity="1" stroke-width="0.5"
+              d=" M12.762999534606934,-8.520000457763672 C11.515000343322754,-9.767999649047852 9.494000434875488,-9.767999649047852 8.246000289916992,-8.520000457763672 C8.246000289916992,-8.520000457763672 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 -6.163000106811523,5.888999938964844 C-6.163000106811523,5.888999938964844 -12.847000122070312,-0.7950000166893005 -12.847000122070312,-0.7950000166893005 C-14.095000267028809,-2.0420000553131104 -16.117000579833984,-2.0420000553131104 -17.364999771118164,-0.7950000166893005 C-18.613000869750977,0.453000009059906 -18.613000869750977,2.4749999046325684 -17.364999771118164,3.7230000495910645 C-17.364999771118164,3.7230000495910645 -8.42199993133545,12.666000366210938 -8.42199993133545,12.666000366210938 C-7.173999786376953,13.913000106811523 -5.1529998779296875,13.913000106811523 -3.9049999713897705,12.666000366210938 C-3.9049999713897705,12.666000366210938 12.762999534606934,-4.001999855041504 12.762999534606934,-4.001999855041504 C14.01099967956543,-5.25 14.01099967956543,-7.2729997634887695 12.762999534606934,-8.520000457763672z" />
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

rstack-doc-ui/stories/why-rspack-assets/Lightning.json

@@ -0,0 +1,981 @@
+{
+  "nm": "4",
+  "h": 1000,
+  "w": 1000,
+  "meta": { "g": "@lottiefiles/toolkit-js 0.33.2" },
+  "layers": [
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 0,
+      "op": 60,
+      "ip": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [-206.132, -265.931, 0] },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 6
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 16
+            },
+            {
+              "o": { "x": 0.302, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 26
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 36
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 46
+            },
+            { "s": [80, 80, 100], "t": 56 }
+          ]
+        },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [293.868, 234.069, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, -17.121],
+                    [17.121, 0],
+                    [0, 17.121],
+                    [-17.121, 0]
+                  ],
+                  "o": [
+                    [0, 17.121],
+                    [-17.121, 0],
+                    [0, -17.121],
+                    [17.121, 0]
+                  ],
+                  "v": [
+                    [-175.132, -265.931],
+                    [-206.132, -234.931],
+                    [-237.132, -265.931],
+                    [-206.132, -296.931]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [0.977, 0.224, 0.126] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, 0] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 1
+    },
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 0,
+      "op": 60,
+      "ip": 0,
+      "hd": true,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [-219.132, -71.931, 0] },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 4
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 14
+            },
+            {
+              "o": { "x": 0.302, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 24
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 34
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 44
+            },
+            { "s": [80, 80, 100], "t": 54 }
+          ]
+        },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [280.868, 428.069, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, -17.121],
+                    [17.121, 0],
+                    [0, 17.121],
+                    [-17.121, 0]
+                  ],
+                  "o": [
+                    [0, 17.121],
+                    [-17.121, 0],
+                    [0, -17.121],
+                    [17.121, 0]
+                  ],
+                  "v": [
+                    [-188.132, -71.931],
+                    [-219.132, -40.931],
+                    [-250.132, -71.931],
+                    [-219.132, -102.931]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [0.977, 0.224, 0.126] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, 0] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 2
+    },
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 0,
+      "op": 60,
+      "ip": 0,
+      "hd": true,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [90.868, 267.069, 0] },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 0
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 10
+            },
+            {
+              "o": { "x": 0.302, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 20
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 30
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 40
+            },
+            { "s": [80, 80, 100], "t": 50 }
+          ]
+        },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [590.868, 767.069, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, -17.121],
+                    [17.121, 0],
+                    [0, 17.121],
+                    [-17.121, 0]
+                  ],
+                  "o": [
+                    [0, 17.121],
+                    [-17.121, 0],
+                    [0, -17.121],
+                    [17.121, 0]
+                  ],
+                  "v": [
+                    [121.868, 267.069],
+                    [90.868, 298.069],
+                    [59.868, 267.069],
+                    [90.868, 236.069]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [0.977, 0.224, 0.126] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, 0] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 3
+    },
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 0,
+      "op": 60,
+      "ip": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [246.868, 177.069, 0] },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 2
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 12
+            },
+            {
+              "o": { "x": 0.302, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 22
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [80, 80, 100],
+              "t": 32
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [130, 130, 100],
+              "t": 42
+            },
+            { "s": [80, 80, 100], "t": 52 }
+          ]
+        },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [746.868, 677.069, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, -17.121],
+                    [17.121, 0],
+                    [0, 17.121],
+                    [-17.121, 0]
+                  ],
+                  "o": [
+                    [0, 17.121],
+                    [-17.121, 0],
+                    [0, -17.121],
+                    [17.121, 0]
+                  ],
+                  "v": [
+                    [277.868, 177.069],
+                    [246.868, 208.069],
+                    [215.868, 177.069],
+                    [246.868, 146.069]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [0.977, 0.224, 0.126] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, 0] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 4
+    },
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 32,
+      "op": 58,
+      "ip": 32,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [0, -6.227, 0] },
+        "s": { "a": 0, "k": [100, 100, 100] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [500, 493.773, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "gr",
+              "nm": "G",
+              "it": [
+                {
+                  "ty": "sh",
+                  "nm": "P",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": false,
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [-0.356, -0.001],
+                        [0, 0],
+                        [0.255, -0.261],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [-0.237, 0.266],
+                        [0, 0],
+                        [0.365, 0.001],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [312.568, -298.069],
+                        [225.406, -200.118],
+                        [225.713, -199.431],
+                        [331.13, -199.187],
+                        [331.425, -198.486],
+                        [238.693, -103.386]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "st",
+                  "nm": "S",
+                  "lc": 2,
+                  "lj": 1,
+                  "ml": 10,
+                  "o": { "a": 0, "k": 100 },
+                  "w": { "a": 0, "k": 40 },
+                  "c": { "a": 0, "k": [0.977, 0.224, 0.126] }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [0, 0] },
+                  "s": { "a": 0, "k": [100, 100] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [0, 0] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            },
+            {
+              "ty": "gr",
+              "nm": "G",
+              "it": [
+                {
+                  "ty": "sh",
+                  "nm": "P",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": false,
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [-0.356, -0.001],
+                        [0, 0],
+                        [0.255, -0.261],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [-0.237, 0.266],
+                        [0, 0],
+                        [0.365, 0.001],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [-244.276, 90.931],
+                        [-331.438, 188.882],
+                        [-331.13, 189.569],
+                        [-225.713, 189.813],
+                        [-225.418, 190.514],
+                        [-318.15, 285.614]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "st",
+                  "nm": "S",
+                  "lc": 2,
+                  "lj": 1,
+                  "ml": 10,
+                  "o": { "a": 0, "k": 100 },
+                  "w": { "a": 0, "k": 40 },
+                  "c": { "a": 0, "k": [0.977, 0.224, 0.126] }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [0, 0] },
+                  "s": { "a": 0, "k": [100, 100] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [0, 0] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, -6.227] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, -6.227] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "tm",
+          "nm": "T",
+          "e": {
+            "a": 1,
+            "k": [
+              {
+                "o": { "x": 0.333, "y": 0 },
+                "i": { "x": 0.667, "y": 1 },
+                "s": [0],
+                "t": 32
+              },
+              { "s": [100], "t": 48.667 }
+            ]
+          },
+          "o": { "a": 0, "k": 0 },
+          "s": {
+            "a": 1,
+            "k": [
+              {
+                "o": { "x": 0.333, "y": 0 },
+                "i": { "x": 0.667, "y": 1 },
+                "s": [0],
+                "t": 40.333
+              },
+              { "s": [100], "t": 57 }
+            ]
+          },
+          "m": 1
+        }
+      ],
+      "ind": 5
+    },
+    {
+      "ty": 4,
+      "nm": "G",
+      "sr": 1,
+      "st": 0,
+      "op": 26,
+      "ip": 0,
+      "hd": true,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [0, -6.227, 0] },
+        "s": { "a": 0, "k": [100, 100, 100] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [500, 493.773, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "gr",
+              "nm": "G",
+              "it": [
+                {
+                  "ty": "sh",
+                  "nm": "P",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": false,
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [-0.356, -0.001],
+                        [0, 0],
+                        [0.255, -0.261],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [-0.237, 0.266],
+                        [0, 0],
+                        [0.365, 0.001],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [312.568, -298.069],
+                        [225.406, -200.118],
+                        [225.713, -199.431],
+                        [331.13, -199.187],
+                        [331.425, -198.486],
+                        [238.693, -103.386]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "st",
+                  "nm": "S",
+                  "lc": 2,
+                  "lj": 1,
+                  "ml": 10,
+                  "o": { "a": 0, "k": 100 },
+                  "w": { "a": 0, "k": 40 },
+                  "c": { "a": 0, "k": [0.977, 0.224, 0.126] }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [0, 0] },
+                  "s": { "a": 0, "k": [100, 100] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [0, 0] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            },
+            {
+              "ty": "gr",
+              "nm": "G",
+              "it": [
+                {
+                  "ty": "sh",
+                  "nm": "P",
+                  "d": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": false,
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [-0.356, -0.001],
+                        [0, 0],
+                        [0.255, -0.261],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [-0.237, 0.266],
+                        [0, 0],
+                        [0.365, 0.001],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [-244.276, 90.931],
+                        [-331.438, 188.882],
+                        [-331.13, 189.569],
+                        [-225.713, 189.813],
+                        [-225.418, 190.514],
+                        [-318.15, 285.614]
+                      ]
+                    }
+                  }
+                },
+                {
+                  "ty": "st",
+                  "nm": "S",
+                  "lc": 2,
+                  "lj": 1,
+                  "ml": 10,
+                  "o": { "a": 0, "k": 100 },
+                  "w": { "a": 0, "k": 40 },
+                  "c": { "a": 0, "k": [0.977, 0.224, 0.126] }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [0, 0] },
+                  "s": { "a": 0, "k": [100, 100] },
+                  "sk": { "a": 0, "k": 0 },
+                  "p": { "a": 0, "k": [0, 0] },
+                  "r": { "a": 0, "k": 0 },
+                  "sa": { "a": 0, "k": 0 },
+                  "o": { "a": 0, "k": 100 }
+                }
+              ]
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, -6.227] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, -6.227] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "tm",
+          "nm": "T",
+          "e": {
+            "a": 1,
+            "k": [
+              {
+                "o": { "x": 0.333, "y": 0 },
+                "i": { "x": 0.667, "y": 1 },
+                "s": [0],
+                "t": 0
+              },
+              { "s": [100], "t": 16.667 }
+            ]
+          },
+          "o": { "a": 0, "k": 0 },
+          "s": {
+            "a": 1,
+            "k": [
+              {
+                "o": { "x": 0.333, "y": 0 },
+                "i": { "x": 0.667, "y": 1 },
+                "s": [0],
+                "t": 8.333
+              },
+              { "s": [100], "t": 25 }
+            ]
+          },
+          "m": 1
+        }
+      ],
+      "ind": 6
+    },
+    {
+      "ty": 4,
+      "nm": "L",
+      "sr": 1,
+      "st": 0,
+      "op": 60,
+      "ip": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [0, 0, 0] },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 1, "y": 0 },
+              "i": { "x": 0.986, "y": 1 },
+              "s": [90, 90, 100],
+              "t": 0
+            },
+            {
+              "o": { "x": 0.029, "y": 0 },
+              "i": { "x": 0, "y": 1 },
+              "s": [110, 110, 100],
+              "t": 10
+            },
+            {
+              "o": { "x": 0.167, "y": 0.167 },
+              "i": { "x": 0.833, "y": 0.833 },
+              "s": [90, 90, 100],
+              "t": 20
+            },
+            {
+              "o": { "x": 1, "y": 0 },
+              "i": { "x": 0.986, "y": 1 },
+              "s": [90, 90, 100],
+              "t": 30
+            },
+            {
+              "o": { "x": 0.029, "y": 0 },
+              "i": { "x": 0, "y": 1 },
+              "s": [110, 110, 100],
+              "t": 40
+            },
+            { "s": [90, 90, 100], "t": 50 }
+          ]
+        },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [500, 500, 0] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [-4.421, 0],
+                    [0, 0],
+                    [4.998, -7.629],
+                    [0, 0],
+                    [-8.916, -0.343],
+                    [0, 0],
+                    [1.489, -1.671],
+                    [0, 0],
+                    [-0.471, 2.761],
+                    [0, 0],
+                    [7.107, 0],
+                    [0, 0],
+                    [-1.24, 2.597],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [9.121, 0],
+                    [0, 0],
+                    [-4.89, 7.463],
+                    [0, 0],
+                    [2.237, 0.086],
+                    [0, 0],
+                    [-1.863, 2.092],
+                    [0, 0],
+                    [1.196, -7.006],
+                    [0, 0],
+                    [-2.878, 0],
+                    [0, 0],
+                    [1.904, -3.99]
+                  ],
+                  "v": [
+                    [-47.265, -200.931],
+                    [132.183, -200.931],
+                    [141.778, -183.173],
+                    [20.147, -50.415],
+                    [29.301, -32.665],
+                    [170.905, -39.436],
+                    [172.78, -35.029],
+                    [-105.788, 294.269],
+                    [-110.619, 291.945],
+                    [-45.238, 55.037],
+                    [-56.546, 41.635],
+                    [-158.029, 53.186],
+                    [-161.561, 47.587],
+                    [-57.617, -194.401]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "st",
+              "nm": "S",
+              "lc": 1,
+              "lj": 1,
+              "ml": 10,
+              "o": { "a": 0, "k": 100 },
+              "w": { "a": 0, "k": 40 },
+              "c": { "a": 0, "k": [1, 0.545, 0] }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [0, 0] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 7
+    }
+  ],
+  "v": "5.9.6",
+  "fr": 20,
+  "op": 60,
+  "ip": 0,
+  "assets": []
+}

rstack-doc-ui/stories/why-rspack-assets/Lightning.svg

@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" width="424"
+  height="424" preserveAspectRatio="xMidYMid meet"
+  style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible; background-color: transparent;">
+  <defs>
+    <clipPath id="__lottie_element_10">
+      <rect width="1000" height="1000" x="0" y="0" />
+    </clipPath>
+  </defs>
+  <g clip-path="url(#__lottie_element_10)">
+    <g transform="matrix(0.8999999761581421,0,0,0.8999999761581421,500,500)" opacity="1" style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+        <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="10"
+          stroke="rgb(255,138,0)" stroke-opacity="1" stroke-width="40"
+          d=" M-47.26499938964844,-200.93099975585938 C-47.26499938964844,-200.93099975585938 132.18299865722656,-200.93099975585938 132.18299865722656,-200.93099975585938 C141.3040008544922,-200.93099975585938 146.7760009765625,-190.802001953125 141.7779998779297,-183.17300415039062 C141.7779998779297,-183.17300415039062 20.14699935913086,-50.415000915527344 20.14699935913086,-50.415000915527344 C15.256999969482422,-42.95199966430664 20.385000228881836,-33.007999420166016 29.301000595092773,-32.665000915527344 C29.301000595092773,-32.665000915527344 170.90499877929688,-39.43600082397461 170.90499877929688,-39.43600082397461 C173.14199829101562,-39.349998474121094 174.2689971923828,-36.70000076293945 172.77999877929688,-35.02899932861328 C172.77999877929688,-35.02899932861328 -105.78800201416016,294.2690124511719 -105.78800201416016,294.2690124511719 C-107.6510009765625,296.3609924316406 -111.08999633789062,294.70599365234375 -110.61900329589844,291.94500732421875 C-110.61900329589844,291.94500732421875 -45.237998962402344,55.0369987487793 -45.237998962402344,55.0369987487793 C-44.04199981689453,48.03099822998047 -49.43899917602539,41.6349983215332 -56.54600143432617,41.6349983215332 C-56.54600143432617,41.6349983215332 -158.0290069580078,53.18600082397461 -158.0290069580078,53.18600082397461 C-160.90699768066406,53.18600082397461 -162.80099487304688,50.183998107910156 -161.56100463867188,47.58700180053711 C-161.56100463867188,47.58700180053711 -57.617000579833984,-194.4010009765625 -57.617000579833984,-194.4010009765625 C-55.7130012512207,-198.39100646972656 -51.68600082397461,-200.93099975585938 -47.26499938964844,-200.93099975585938z" />
+      </g>
+    </g>
+    <g style="display: none;">
+      <g>
+        <g>
+          <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="10" />
+        </g>
+        <g>
+          <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="10" />
+        </g>
+      </g>
+    </g>
+    <g transform="matrix(0.800000011920929,0,0,0.800000011920929,549.3735961914062,535.4137573242188)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+        <path fill="rgb(249,57,32)" fill-opacity="1"
+          d=" M277.8680114746094,177.06900024414062 C277.8680114746094,194.19000244140625 263.989013671875,208.06900024414062 246.8679962158203,208.06900024414062 C229.7469940185547,208.06900024414062 215.8679962158203,194.19000244140625 215.8679962158203,177.06900024414062 C215.8679962158203,159.947998046875 229.7469940185547,146.06900024414062 246.8679962158203,146.06900024414062 C263.989013671875,146.06900024414062 277.8680114746094,159.947998046875 277.8680114746094,177.06900024414062z" />
+      </g>
+    </g>
+    <g transform="matrix(0.800000011920929,0,0,0.800000011920929,458.77362060546875,446.81378173828125)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+        <path fill="rgb(249,57,32)" fill-opacity="1"
+          d=" M-175.1320037841797,-265.9309997558594 C-175.1320037841797,-248.80999755859375 -189.01100158691406,-234.93099975585938 -206.1320037841797,-234.93099975585938 C-223.2530059814453,-234.93099975585938 -237.1320037841797,-248.80999755859375 -237.1320037841797,-265.9309997558594 C-237.1320037841797,-283.052001953125 -223.2530059814453,-296.9309997558594 -206.1320037841797,-296.9309997558594 C-189.01100158691406,-296.9309997558594 -175.1320037841797,-283.052001953125 -175.1320037841797,-265.9309997558594z" />
+      </g>
+    </g>
+  </g>
+</svg>

rstack-doc-ui/stories/why-rspack-assets/Speedometer.json

@@ -0,0 +1,876 @@
+{
+  "nm": "S",
+  "h": 1080,
+  "w": 1920,
+  "meta": { "g": "@lottiefiles/toolkit-js 0.33.2" },
+  "layers": [
+    {
+      "ty": 4,
+      "nm": "L",
+      "sr": 1,
+      "st": 0,
+      "op": 50,
+      "ip": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [41.993, 169.381, 0] },
+        "s": { "a": 0, "k": [264, 264] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [944, 940] },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [-126],
+              "t": 0
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [54],
+              "t": 41
+            },
+            {
+              "o": { "x": 0.333, "y": 0 },
+              "i": { "x": 0.667, "y": 1 },
+              "s": [54],
+              "t": 53
+            },
+            { "s": [-126], "t": 81 }
+          ]
+        },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [8.14, 0],
+                    [0, 8.139],
+                    [-8.14, 0],
+                    [0, -8.14]
+                  ],
+                  "o": [
+                    [-8.14, 0],
+                    [0, -8.14],
+                    [8.14, 0],
+                    [0, 8.139]
+                  ],
+                  "v": [
+                    [-37.84, 72.65],
+                    [-52.579, 57.911],
+                    [-37.84, 43.172],
+                    [-23.102, 57.911]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [3.141, 0],
+                    [0, -15.935],
+                    [-2.847, -4.471],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-3.199, 0],
+                    [0, 15.933],
+                    [3.158, 4.627],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [-2.831, -0.928],
+                    [-15.934, 0],
+                    [0, 5.692],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [2.875, 0.962],
+                    [15.934, 0],
+                    [0, -6.026],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-28.853, 30.507],
+                    [-37.84, 29.06],
+                    [-66.691, 57.911],
+                    [-62.173, 73.366],
+                    [-81.743, 93.661],
+                    [-61.673, 109.13],
+                    [-46.983, 85.258],
+                    [-37.84, 86.762],
+                    [-8.99, 57.911],
+                    [-14.001, 41.668],
+                    [81.743, -109.13]
+                  ]
+                }
+              }
+            },
+            { "ty": "mm", "nm": "M", "mm": 1 },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [0.977, 0.224, 0.126] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [81.993, 109.381] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 1
+    },
+    {
+      "ty": 4,
+      "nm": "L",
+      "sr": 1,
+      "st": 0,
+      "op": 50,
+      "ip": 0,
+      "hasMask": false,
+      "ao": 0,
+      "ks": {
+        "a": { "a": 0, "k": [301.194, 151.151] },
+        "s": { "a": 0, "k": [264, 264] },
+        "sk": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [959, 551] },
+        "r": { "a": 0, "k": 0 },
+        "sa": { "a": 0, "k": 0 },
+        "o": { "a": 0, "k": 100 }
+      },
+      "ef": [],
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [5.243, -0.333],
+                    [0, 0],
+                    [-6.281, 0],
+                    [0, 0],
+                    [-6.174, -0.373],
+                    [0, 0],
+                    [4.983, 0.107]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [6.292, -0.398],
+                    [0, 0],
+                    [6.13, 0],
+                    [0, 0],
+                    [-5.228, -0.324],
+                    [-5.258, 0]
+                  ],
+                  "v": [
+                    [-15.706, 25.337],
+                    [-18.872, -24.739],
+                    [0.076, -25.337],
+                    [0.321, -25.337],
+                    [18.872, -24.773],
+                    [15.825, 25.314],
+                    [0.101, 24.837]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [300.999, 25.588] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [10.275, 1.931],
+                    [0, 0],
+                    [-11.961, -3.866]
+                  ],
+                  "o": [
+                    [-9.956, -3.219],
+                    [0, 0],
+                    [12.348, 2.328],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.533, 28.537],
+                    [-22.959, 20.776],
+                    [-13.678, -28.537],
+                    [22.959, -19.207]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [371.035, 33.995] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [9.925, -3.234],
+                    [0, 0],
+                    [-12.371, 2.361],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [11.922, -3.876],
+                    [0, 0],
+                    [-10.307, 1.97]
+                  ],
+                  "v": [
+                    [-7.479, 28.559],
+                    [-23.008, -19.157],
+                    [13.6, -28.559],
+                    [23.008, 20.724]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [231.043, 34.14] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [9.471, 4.449],
+                    [0, 0],
+                    [-10.618, -6.732]
+                  ],
+                  "o": [
+                    [-8.85, -5.61],
+                    [0, 0],
+                    [11.373, 5.341],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0.375, 30.286],
+                    [-27.236, 15.127],
+                    [-5.902, -30.286],
+                    [27.236, -12.089]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [435.086, 58.975] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [8.832, -5.62],
+                    [0, 0],
+                    [-11.341, 5.36],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [10.596, -6.737],
+                    [0, 0],
+                    [-9.457, 4.469]
+                  ],
+                  "v": [
+                    [-0.311, 30.284],
+                    [-27.251, -12.047],
+                    [5.809, -30.284],
+                    [27.251, 15.079]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [167.075, 59.223] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [8.061, 6.664],
+                    [0, 0],
+                    [-8.619, -9.148]
+                  ],
+                  "o": [
+                    [-7.202, -7.634],
+                    [0, 0],
+                    [9.663, 7.981],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-6.75, 30.114],
+                    [-29.755, 8.564],
+                    [2.202, -30.114],
+                    [29.755, -4.303]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [490.71, 99.204] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [7.161, -7.629],
+                    [0, 0],
+                    [-9.675, 8.017],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [8.59, -9.153],
+                    [0, 0],
+                    [-8.068, 6.683]
+                  ],
+                  "v": [
+                    [6.816, 30.105],
+                    [-29.767, -4.233],
+                    [-2.244, -30.105],
+                    [29.767, 8.536]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [111.544, 99.522] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [6.168, 8.452],
+                    [0, 0],
+                    [-6.081, -10.985]
+                  ],
+                  "o": [
+                    [-5.071, -9.163],
+                    [0, 0],
+                    [7.394, 10.133],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-13.482, 28.062],
+                    [-30.421, 1.514],
+                    [10.111, -28.062],
+                    [30.421, 3.768]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [534.491, 152.025] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [5.042, -9.158],
+                    [0, 0],
+                    [-7.399, 10.178],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [6.051, -10.986],
+                    [0, 0],
+                    [-6.168, 8.487]
+                  ],
+                  "v": [
+                    [13.528, 28.05],
+                    [-30.424, 3.845],
+                    [-10.156, -28.05],
+                    [30.424, 1.458]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [67.843, 152.439] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [3.866, 9.707],
+                    [0, 0],
+                    [-3.146, -12.181]
+                  ],
+                  "o": [
+                    [-2.622, -10.138],
+                    [0, 0],
+                    [4.65, 11.666],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-19.401, 24.239],
+                    [-29.176, -5.67],
+                    [17.431, -24.239],
+                    [29.177, 11.696]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [563.646, 214.181] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [2.592, -10.138],
+                    [0, 0],
+                    [-4.633, 11.706],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [3.116, -12.176],
+                    [0, 0],
+                    [-3.856, 9.736]
+                  ],
+                  "v": [
+                    [19.448, 24.213],
+                    [-29.164, 11.777],
+                    [-17.488, -24.213],
+                    [29.164, -5.74]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [38.788, 214.707] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [1.319, 10.363],
+                    [0, 0],
+                    [-0.021, -12.573]
+                  ],
+                  "o": [
+                    [-0.02, -10.495],
+                    [0, 0],
+                    [1.583, 12.427],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-24.081, 18.884],
+                    [-26.095, -12.552],
+                    [23.679, -18.884],
+                    [26.095, 18.797]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [576.253, 281.882] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        },
+        {
+          "ty": "gr",
+          "nm": "G",
+          "it": [
+            {
+              "ty": "sh",
+              "nm": "P",
+              "d": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [-1.55, 12.426],
+                    [0, 0],
+                    [0, -10.504],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, -12.412],
+                    [0, 0],
+                    [-1.293, 10.374],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-26.062, 19.492],
+                    [-26.062, 18.022],
+                    [-23.726, -19.492],
+                    [26.062, -13.279],
+                    [24.112, 18.183],
+                    [24.112, 19.169]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "fl",
+              "nm": "F",
+              "c": { "a": 0, "k": [1, 0.545, 0] },
+              "r": 1,
+              "o": { "a": 0, "k": 100 }
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "s": { "a": 0, "k": [100, 100] },
+              "sk": { "a": 0, "k": 0 },
+              "p": { "a": 0, "k": [26.312, 283.118] },
+              "r": { "a": 0, "k": 0 },
+              "sa": { "a": 0, "k": 0 },
+              "o": { "a": 0, "k": 100 }
+            }
+          ]
+        }
+      ],
+      "ind": 2
+    }
+  ],
+  "v": "5.9.3",
+  "fr": 20,
+  "op": 50,
+  "ip": 0,
+  "assets": []
+}

rstack-doc-ui/stories/why-rspack-assets/Speedometer.svg

@@ -0,0 +1,73 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" width="424"
+  height="238" preserveAspectRatio="xMidYMid meet"
+  style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible; background-color: transparent;">
+  <defs>
+    <clipPath id="__lottie_element_2">
+      <rect width="1920" height="1080" x="0" y="0" />
+    </clipPath>
+  </defs>
+  <g clip-path="url(#__lottie_element_2)">
+    <g transform="matrix(2.640000104904175,0,0,2.640000104904175,163.8477783203125,151.96133422851562)" opacity="1"
+      style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,26.312000274658203,283.1180114746094)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-26.062000274658203,19.492000579833984 C-26.062000274658203,19.492000579833984 -26.062000274658203,18.02199935913086 -26.062000274658203,18.02199935913086 C-26.062000274658203,5.610000133514404 -25.275999069213867,-7.065999984741211 -23.72599983215332,-19.492000579833984 C-23.72599983215332,-19.492000579833984 26.062000274658203,-13.279000282287598 26.062000274658203,-13.279000282287598 C24.768999099731445,-2.9049999713897705 24.11199951171875,7.678999900817871 24.11199951171875,18.183000564575195 C24.11199951171875,18.183000564575195 24.11199951171875,19.16900062561035 24.11199951171875,19.16900062561035 C24.11199951171875,19.16900062561035 -26.062000274658203,19.492000579833984 -26.062000274658203,19.492000579833984z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,576.2529907226562,281.8819885253906)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-24.08099937438965,18.884000778198242 C-24.10099983215332,8.388999938964844 -24.775999069213867,-2.188999891281128 -26.094999313354492,-12.552000045776367 C-26.094999313354492,-12.552000045776367 23.679000854492188,-18.884000778198242 23.679000854492188,-18.884000778198242 C25.261999130249023,-6.456999778747559 26.073999404907227,6.223999977111816 26.094999313354492,18.797000885009766 C26.094999313354492,18.797000885009766 -24.08099937438965,18.884000778198242 -24.08099937438965,18.884000778198242z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,38.78799819946289,214.70700073242188)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M19.447999954223633,24.21299934387207 C19.447999954223633,24.21299934387207 -29.163999557495117,11.777000427246094 -29.163999557495117,11.777000427246094 C-26.04800033569336,-0.39899998903274536 -22.121000289916992,-12.506999969482422 -17.488000869750977,-24.21299934387207 C-17.488000869750977,-24.21299934387207 29.163999557495117,-5.739999771118164 29.163999557495117,-5.739999771118164 C25.308000564575195,3.996000051498413 22.040000915527344,14.074999809265137 19.447999954223633,24.21299934387207z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,563.64599609375,214.18099975585938)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-19.400999069213867,24.23900032043457 C-22.023000717163086,14.10099983215332 -25.309999465942383,4.0370001792907715 -29.176000595092773,-5.670000076293945 C-29.176000595092773,-5.670000076293945 17.430999755859375,-24.23900032043457 17.430999755859375,-24.23900032043457 C22.08099937438965,-12.572999954223633 26.0310001373291,-0.48500001430511475 29.177000045776367,11.696000099182129 C29.177000045776367,11.696000099182129 -19.400999069213867,24.23900032043457 -19.400999069213867,24.23900032043457z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,67.84300231933594,152.43899536132812)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M13.527999877929688,28.049999237060547 C13.527999877929688,28.049999237060547 -30.423999786376953,3.8450000286102295 -30.423999786376953,3.8450000286102295 C-24.37299919128418,-7.140999794006348 -17.55500030517578,-17.871999740600586 -10.156000137329102,-28.049999237060547 C-10.156000137329102,-28.049999237060547 30.423999786376953,1.4579999446868896 30.423999786376953,1.4579999446868896 C24.256000518798828,9.944999694824219 18.56999969482422,18.892000198364258 13.527999877929688,28.049999237060547z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,534.4910278320312,152.02499389648438)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-13.482000350952148,28.062000274658203 C-18.55299949645996,18.89900016784668 -24.253000259399414,9.965999603271484 -30.42099952697754,1.5140000581741333 C-30.42099952697754,1.5140000581741333 10.111000061035156,-28.062000274658203 10.111000061035156,-28.062000274658203 C17.5049991607666,-17.929000854492188 24.34000015258789,-7.2170000076293945 30.42099952697754,3.7679998874664307 C30.42099952697754,3.7679998874664307 -13.482000350952148,28.062000274658203 -13.482000350952148,28.062000274658203z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,111.54399871826172,99.52200317382812)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M6.815999984741211,30.104999542236328 C6.815999984741211,30.104999542236328 -29.767000198364258,-4.232999801635742 -29.767000198364258,-4.232999801635742 C-21.177000045776367,-13.38599967956543 -11.918999671936035,-22.08799934387207 -2.24399995803833,-30.104999542236328 C-2.24399995803833,-30.104999542236328 29.767000198364258,8.53600025177002 29.767000198364258,8.53600025177002 C21.698999404907227,15.218999862670898 13.97700023651123,22.47599983215332 6.815999984741211,30.104999542236328z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,490.7099914550781,99.2040023803711)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-6.75,30.11400032043457 C-13.95199966430664,22.479999542236328 -21.694000244140625,15.227999687194824 -29.7549991607666,8.564000129699707 C-29.7549991607666,8.564000129699707 2.2019999027252197,-30.11400032043457 2.2019999027252197,-30.11400032043457 C11.864999771118164,-22.132999420166016 21.13599967956543,-13.451000213623047 29.7549991607666,-4.302999973297119 C29.7549991607666,-4.302999973297119 -6.75,30.11400032043457 -6.75,30.11400032043457z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,167.0749969482422,59.222999572753906)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-0.3109999895095825,30.284000396728516 C-0.3109999895095825,30.284000396728516 -27.250999450683594,-12.04699993133545 -27.250999450683594,-12.04699993133545 C-16.655000686645508,-18.784000396728516 -5.5320000648498535,-24.923999786376953 5.809000015258789,-30.284000396728516 C5.809000015258789,-30.284000396728516 27.250999450683594,15.079000473022461 27.250999450683594,15.079000473022461 C17.79400062561035,19.54800033569336 8.520999908447266,24.663999557495117 -0.3109999895095825,30.284000396728516z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,435.08599853515625,58.974998474121094)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M0.375,30.285999298095703 C-8.475000381469727,24.676000595092773 -17.764999389648438,19.576000213623047 -27.236000061035156,15.126999855041504 C-27.236000061035156,15.126999855041504 -5.9019999504089355,-30.285999298095703 -5.9019999504089355,-30.285999298095703 C5.4710001945495605,-24.94499969482422 16.618000030517578,-18.820999145507812 27.236000061035156,-12.08899974822998 C27.236000061035156,-12.08899974822998 0.375,30.285999298095703 0.375,30.285999298095703z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,231.04299926757812,34.13999938964844)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-7.479000091552734,28.55900001525879 C-7.479000091552734,28.55900001525879 -23.007999420166016,-19.156999588012695 -23.007999420166016,-19.156999588012695 C-11.086000442504883,-23.033000946044922 1.2289999723434448,-26.197999954223633 13.600000381469727,-28.55900001525879 C13.600000381469727,-28.55900001525879 23.007999420166016,20.724000930786133 23.007999420166016,20.724000930786133 C12.701000213623047,22.694000244140625 2.446000099182129,25.325000762939453 -7.479000091552734,28.55900001525879z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,371.0350036621094,33.994998931884766)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M7.5329999923706055,28.53700065612793 C-2.4230000972747803,25.31800079345703 -12.684000015258789,22.707000732421875 -22.958999633789062,20.775999069213867 C-22.958999633789062,20.775999069213867 -13.678000450134277,-28.53700065612793 -13.678000450134277,-28.53700065612793 C-1.3300000429153442,-26.208999633789062 10.998000144958496,-23.072999954223633 22.958999633789062,-19.207000732421875 C22.958999633789062,-19.207000732421875 7.5329999923706055,28.53700065612793 7.5329999923706055,28.53700065612793z" />
+      </g>
+      <g opacity="1" transform="matrix(1,0,0,1,300.9989929199219,25.58799934387207)">
+        <path fill="rgb(255,138,0)" fill-opacity="1"
+          d=" M-15.706000328063965,25.336999893188477 C-15.706000328063965,25.336999893188477 -18.871999740600586,-24.73900032043457 -18.871999740600586,-24.73900032043457 C-12.579999923706055,-25.136999130249023 -6.204999923706055,-25.336999893188477 0.07599999755620956,-25.336999893188477 C0.07599999755620956,-25.336999893188477 0.32100000977516174,-25.336999893188477 0.32100000977516174,-25.336999893188477 C6.451000213623047,-25.336999893188477 12.697999954223633,-25.145999908447266 18.871999740600586,-24.773000717163086 C18.871999740600586,-24.773000717163086 15.824999809265137,25.31399917602539 15.824999809265137,25.31399917602539 C10.597000122070312,24.989999771118164 5.084000110626221,24.944000244140625 0.10100000351667404,24.836999893188477 C-5.1570000648498535,24.836999893188477 -10.463000297546387,25.003999710083008 -15.706000328063965,25.336999893188477z" />
+      </g>
+    </g>
+    <g transform="matrix(-1.5517531633377075,-2.1358048915863037,2.1358048915863037,-1.5517531633377075,647.39794921875,1292.5263671875)"
+      opacity="1" style="display: block;">
+      <g opacity="1" transform="matrix(1,0,0,1,81.99299621582031,109.38099670410156)">
+        <path fill="rgb(249,57,32)" fill-opacity="1"
+          d=" M-28.85300064086914,30.506999969482422 C-31.68400001525879,29.57900047302246 -34.69900131225586,29.059999465942383 -37.84000015258789,29.059999465942383 C-53.77399826049805,29.059999465942383 -66.69100189208984,41.97600173950195 -66.69100189208984,57.9109992980957 C-66.69100189208984,63.60300064086914 -65.0199966430664,68.8949966430664 -62.17300033569336,73.36599731445312 C-62.17300033569336,73.36599731445312 -81.74299621582031,93.66100311279297 -81.74299621582031,93.66100311279297 C-81.74299621582031,93.66100311279297 -61.67300033569336,109.12999725341797 -61.67300033569336,109.12999725341797 C-61.67300033569336,109.12999725341797 -46.983001708984375,85.25800323486328 -46.983001708984375,85.25800323486328 C-44.108001708984375,86.22000122070312 -41.03900146484375,86.76200103759766 -37.84000015258789,86.76200103759766 C-21.9060001373291,86.76200103759766 -8.989999771118164,73.84400177001953 -8.989999771118164,57.9109992980957 C-8.989999771118164,51.8849983215332 -10.843000411987305,46.29499816894531 -14.00100040435791,41.667999267578125 C-14.00100040435791,41.667999267578125 81.74299621582031,-109.12999725341797 81.74299621582031,-109.12999725341797 C81.74299621582031,-109.12999725341797 -28.85300064086914,30.506999969482422 -28.85300064086914,30.506999969482422z M-37.84000015258789,72.6500015258789 C-45.97999954223633,72.6500015258789 -52.57899856567383,66.05000305175781 -52.57899856567383,57.9109992980957 C-52.57899856567383,49.770999908447266 -45.97999954223633,43.172000885009766 -37.84000015258789,43.172000885009766 C-29.700000762939453,43.172000885009766 -23.101999282836914,49.770999908447266 -23.101999282836914,57.9109992980957 C-23.101999282836914,66.05000305175781 -29.700000762939453,72.6500015258789 -37.84000015258789,72.6500015258789z" />
+      </g>
+    </g>
+  </g>
+</svg>

rstack-doc-ui/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["**/node_modules"],
+  "include": ["src"]
+}

yarn.lock

@@ -135,9 +135,9 @@
   integrity sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==
 
 "@rsbuild/core@~1.4.8":
-  version "1.4.10"
-  resolved "https://registry.yarnpkg.com/@rsbuild/core/-/core-1.4.10.tgz#6385e40ef2ec84e223f185de4243aa067ad70123"
-  integrity sha512-CUy3MyO/XZIn+Dfb0ffwNJr3RA+iUpZFrzCzDwCpM18rbUjVsj5bjTwf1aVcWHMZSpJHX+j8pH02ttGomfeNIQ==
+  version "1.4.11"
+  resolved "https://registry.yarnpkg.com/@rsbuild/core/-/core-1.4.11.tgz#2cb3b7f614a156c2ad56fe635c8e1625a4b55115"
+  integrity sha512-G5x7jUGxVw0Z984IEKmOP/tW8gslhUjN81D3fuogKb95hlESWpc+LuckuA5iO1ydbLVrhuYKLv1tC8wTAIDsqA==
   dependencies:
     "@rspack/core" "1.4.10"
     "@rspack/lite-tapable" "~1.0.1"
@@ -383,10 +383,8 @@
     react-dom "^19.1.0"
     shiki "^3.8.1"
 
-"@rstack-dev/doc-ui@^1.10.8":
+"@rstack-dev/doc-ui@file:rstack-doc-ui":
   version "1.10.8"
-  resolved "https://registry.yarnpkg.com/@rstack-dev/doc-ui/-/doc-ui-1.10.8.tgz#83ede7f1c966a2c0ca067b00c34ff30784cf0fb4"
-  integrity sha512-F/v0XzRI1ZIAzBBLx91um4TLMIUWw3LiQsPXtZe8ZAF6wQUVk47YPK/kB1VPkLLaD214JrwWq+L6P7UnD8MT7A==
   dependencies:
     framer-motion "^12.20.1"