Improve docs UI and Mermaid rendering (#125)

Refactor documentation for clarity and organization. Upgrade the
@biomejs/biome dependency to version 2.4.9. Clean up imports and improve
component structure in the documentation pages.

## Summary by Sourcery

Refine documentation rendering and UI components while updating tooling
dependencies.

New Features:
- Improve Mermaid diagram rendering in docs with explicit SVG rendering
and stricter security configuration.

Bug Fixes:
- Use stable keys for mapped feature and FAQ items on the docs home page
to avoid React key issues.
- Adjust field error list keys to avoid collisions and improve React
reconciliation.

Enhancements:
- Clean up and reorder exports, imports, and hook dependencies across UI
components for consistency and maintainability.
- Streamline docs routing and loader types by removing unused parameters
and simplifying language handling.
- Improve user-facing error and status messages with template literals
and clearer formatting.

Build:
- Upgrade @biomejs/biome to version 2.4.9 and consolidate Biome
configuration by removing redundant docs-specific settings.

Documentation:
- Tidy documentation page composition and table-of-contents handling for
clearer structure.

3 files changed, 31 insertions, 22 deletions

diff --git a/packages/docs/app/components/mermaid.tsx b/packages/docs/app/components/mermaid.tsx
index 2df47cc..fe153ec 100644
--- a/packages/docs/app/components/mermaid.tsx
+++ b/packages/docs/app/components/mermaid.tsx
@@ -6,24 +6,37 @@ import { useEffect, useRef } from "react";
 mermaid.initialize({
   startOnLoad: false,
   theme: "default",
+  securityLevel: "strict",
 });
 
 export function Mermaid({ chart }: { chart: string }) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (ref.current) {
-      mermaid.run({
-        nodes: [ref.current],
+    let current = true;
+    const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
+    mermaid
+      .render(id, chart)
+      .then(({ svg }) => {
+        if (!current) return;
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svg, "image/svg+xml");
+        const svgEl = doc.querySelector("svg");
+        if (ref.current && svgEl) {
+          ref.current.replaceChildren(svgEl);
+        }
+      })
+      .catch(() => {
+        if (current) ref.current?.replaceChildren();
       });
-    }
+    return () => {
+      current = false;
+    };
   }, [chart]);
 
   return (
     <div className="not-prose my-6">
-      <div ref={ref} className="mermaid">
-        {chart}
-      </div>
+      <div ref={ref} className="mermaid" />
     </div>
   );
 }
diff --git a/packages/docs/app/docs/page.tsx b/packages/docs/app/docs/page.tsx
index 6ff6b4a..5bddb8d 100644
--- a/packages/docs/app/docs/page.tsx
+++ b/packages/docs/app/docs/page.tsx
@@ -3,12 +3,7 @@ import { useFumadocsLoader } from "fumadocs-core/source/client";
 import { Card, Cards } from "fumadocs-ui/components/card";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import defaultMdxComponents from "fumadocs-ui/mdx";
-import {
-  DocsBody,
-  DocsDescription,
-  DocsPage,
-  DocsTitle,
-} from "fumadocs-ui/page";
+import { DocsBody, DocsPage } from "fumadocs-ui/page";
 import { Mermaid } from "@/components/mermaid";
 import { i18n } from "@/lib/i18n";
 import { baseOptions } from "@/lib/layout.shared";
@@ -19,8 +14,9 @@ export async function loader({ params }: Route.LoaderArgs) {
   // 从路由参数获取语言，如果没有则使用默认语言
   // URL 格式: /docs/manual/getting-started (默认语言 zh)
   // URL 格式: /en/docs/manual/getting-started (英语)
-  const lang =
-    params.lang && i18n.languages.includes(params.lang as any)
+  const lang: "zh" | "en" =
+    params.lang &&
+    i18n.languages.includes(params.lang as (typeof i18n)["languages"][number])
       ? (params.lang as "zh" | "en")
       : (i18n.defaultLanguage as "zh" | "en");
 
@@ -41,7 +37,7 @@ export async function loader({ params }: Route.LoaderArgs) {
 }
 
 const clientLoader = browserCollections.docs.createClientLoader({
-  component({ toc, frontmatter, default: Mdx }) {
+  component({ toc, default: Mdx }) {
     return (
       <DocsPage toc={toc}>
         {/* 老王说不要这个 */}
@@ -67,7 +63,7 @@ const clientLoader = browserCollections.docs.createClientLoader({
   },
 });
 
-export default function Page({ loaderData, params }: Route.ComponentProps) {
+export default function Page({ loaderData }: Route.ComponentProps) {
   const { pageTree, lang } = useFumadocsLoader(loaderData);
 
   return (
diff --git a/packages/docs/app/routes/home.tsx b/packages/docs/app/routes/home.tsx
index fe561e4..26c0f52 100644
--- a/packages/docs/app/routes/home.tsx
+++ b/packages/docs/app/routes/home.tsx
@@ -110,7 +110,7 @@ const texts = {
   },
 };
 
-export function meta({ params }: Route.MetaArgs) {
+export function meta() {
   return [
     { title: "DropOut - Modern Minecraft Launcher" },
     {
@@ -172,9 +172,9 @@ export default function Home({ params }: Route.ComponentProps) {
 
         {/* Features Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
-          {t.features.items.map((item, i) => (
+          {t.features.items.map((item) => (
             <div
-              key={i}
+              key={item.title}
               className="p-6 rounded-lg border border-blue-600/20 bg-fd-card hover:border-blue-600/50 transition-colors"
             >
               <h3 className="font-semibold text-lg mb-2">{item.title}</h3>
@@ -187,8 +187,8 @@ export default function Home({ params }: Route.ComponentProps) {
         <div className="text-center mb-16">
           <h2 className="text-3xl font-bold mb-6">{t.why.title}</h2>
           <div className="max-w-3xl mx-auto space-y-4 text-left">
-            {t.why.items.map((item, i) => (
-              <div key={i} className="p-4 rounded-lg bg-fd-muted/50">
+            {t.why.items.map((item) => (
+              <div key={item.q} className="p-4 rounded-lg bg-fd-muted/50">
                 <p className="text-fd-foreground">
                   <span className="font-semibold">{item.q}</span>
                   <br />