default print width

Boshen · Boshen · commit 0f814f23fe2d · 2026-01-13T22:12:05.000+08:00
diff --git a/apps/dashboard/src/components/Layout.tsx b/apps/dashboard/src/components/Layout.tsx
@@ -15,7 +15,9 @@ function Layout() {
       <Sidebar />
 
       {/* Main Content Area */}
-      <div className={`${collapsed ? "lg:pl-20" : "lg:pl-64"} transition-all duration-300 relative z-10`}>
+      <div
+        className={`${collapsed ? "lg:pl-20" : "lg:pl-64"} transition-all duration-300 relative z-10`}
+      >
         <div className="flex flex-col h-screen">
           <AppBar />
 
diff --git a/apps/dashboard/src/components/layout/Sidebar.tsx b/apps/dashboard/src/components/layout/Sidebar.tsx
@@ -1,4 +1,14 @@
-import { BarChart3, ChevronLeft, Download, GitBranch, Home, Menu, Package, X, Zap } from "lucide-react";
+import {
+  BarChart3,
+  ChevronLeft,
+  Download,
+  GitBranch,
+  Home,
+  Menu,
+  Package,
+  X,
+  Zap,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { useSidebar } from "../../context/SidebarContext";
@@ -67,7 +77,12 @@ export function Sidebar() {
       </button>
 
       {/* Mobile Overlay */}
-      {mobileOpen && <div className="lg:hidden fixed inset-0 bg-black/50 z-40" onClick={() => setMobileOpen(false)} />}
+      {mobileOpen && (
+        <div
+          className="lg:hidden fixed inset-0 bg-black/50 z-40"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
 
       {/* Sidebar */}
       <aside
diff --git a/apps/dashboard/src/components/minification/CompressionRatioChart.tsx b/apps/dashboard/src/components/minification/CompressionRatioChart.tsx
@@ -1,4 +1,13 @@
-import { Bar, BarChart, CartesianGrid, LabelList, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  LabelList,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
 
 interface CompressionRatioChartProps {
   data: any[];
diff --git a/apps/dashboard/src/components/minification/MinificationStats.tsx b/apps/dashboard/src/components/minification/MinificationStats.tsx
@@ -31,7 +31,9 @@ export function MinificationStats() {
         <h3 className="mb-3 text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-widest">
           Fastest Minifier
         </h3>
-        <p className="mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight">OXC</p>
+        <p className="mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight">
+          OXC
+        </p>
         <span className="text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200">
           Rust-based
         </span>
diff --git a/apps/dashboard/src/components/minification/MinificationTimeChart.tsx b/apps/dashboard/src/components/minification/MinificationTimeChart.tsx
@@ -1,4 +1,13 @@
-import { Bar, BarChart, CartesianGrid, LabelList, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  LabelList,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
 
 interface MinificationTimeChartProps {
   data: any[];
diff --git a/apps/dashboard/src/components/npm/NpmStatsCards.tsx b/apps/dashboard/src/components/npm/NpmStatsCards.tsx
@@ -20,7 +20,9 @@ export function NpmStatsCards({ packagesCount }: NpmStatsCardsProps) {
         <h3 className="mb-3 text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-widest">
           Registry
         </h3>
-        <p className="mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight">NPM</p>
+        <p className="mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight">
+          NPM
+        </p>
         <span className="text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200">
           Public Registry
         </span>
diff --git a/apps/dashboard/src/components/npm/PackageCard.tsx b/apps/dashboard/src/components/npm/PackageCard.tsx
@@ -103,8 +103,11 @@ export function PackageCard({ packageName }: PackageCardProps) {
   };
 
   // The 'modified' field contains the last modified date
-  const lastPublishDate = packageData?.time?.modified || packageData?.time?.[packageData?.version || ""];
-  const dependenciesCount = packageData?.dependencies ? Object.keys(packageData.dependencies).length : 0;
+  const lastPublishDate =
+    packageData?.time?.modified || packageData?.time?.[packageData?.version || ""];
+  const dependenciesCount = packageData?.dependencies
+    ? Object.keys(packageData.dependencies).length
+    : 0;
   const maintainersCount = packageData?.maintainers?.length || 0;
 
   return (
diff --git a/apps/dashboard/src/components/rolldown/BuildTimeChart.tsx b/apps/dashboard/src/components/rolldown/BuildTimeChart.tsx
@@ -1,5 +1,15 @@
 import { buildTimeTooltipFormatter } from "@vibe/utils";
-import { Bar, BarChart, CartesianGrid, LabelList, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  LabelList,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
 import * as semver from "semver";
 import rolldownStats from "../../../../../data/rolldown-version-stats.json";
 
diff --git a/apps/dashboard/src/components/rolldown/BundleSizeChart.tsx b/apps/dashboard/src/components/rolldown/BundleSizeChart.tsx
@@ -80,7 +80,9 @@ export function BundleSizeChart() {
             formatter={(label: React.ReactNode) => {
               const value = typeof label === "number" ? label : Number(label) || 0;
               if (value === 0) return "baseline";
-              return value >= 0 ? `+${formatNumberWithCommas(value)}` : formatNumberWithCommas(value);
+              return value >= 0
+                ? `+${formatNumberWithCommas(value)}`
+                : formatNumberWithCommas(value);
             }}
             style={{ fontSize: "11px", fill: "#94a3b8" }}
           />
diff --git a/apps/dashboard/src/components/rolldown/StatsCards.tsx b/apps/dashboard/src/components/rolldown/StatsCards.tsx
@@ -34,7 +34,8 @@ export function StatsCards() {
         </h3>
         <p className="mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight">
           {Math.round(
-            (Math.max(...rolldownStats.map((s) => s.totalSize)) - Math.min(...rolldownStats.map((s) => s.totalSize))) /
+            (Math.max(...rolldownStats.map((s) => s.totalSize)) -
+              Math.min(...rolldownStats.map((s) => s.totalSize))) /
               1024,
           )}
           KB
diff --git a/apps/dashboard/src/context/SidebarContext.tsx b/apps/dashboard/src/context/SidebarContext.tsx
@@ -10,7 +10,11 @@ const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
 export function SidebarProvider({ children }: { children: React.ReactNode }) {
   const [collapsed, setCollapsed] = useState(false);
 
-  return <SidebarContext.Provider value={{ collapsed, setCollapsed }}>{children}</SidebarContext.Provider>;
+  return (
+    <SidebarContext.Provider value={{ collapsed, setCollapsed }}>
+      {children}
+    </SidebarContext.Provider>
+  );
 }
 
 export function useSidebar() {
diff --git a/apps/dashboard/src/pages/DependentsPage.tsx b/apps/dashboard/src/pages/DependentsPage.tsx
@@ -118,8 +118,12 @@ function DependentsPage() {
                 <table className="w-full text-sm">
                   <thead className="sticky top-0 bg-white dark:bg-slate-900 z-10">
                     <tr className="border-b border-slate-200 dark:border-slate-700">
-                      <th className="text-left py-2 px-2 font-medium text-slate-600 dark:text-slate-400 w-12">#</th>
-                      <th className="text-left py-2 px-2 font-medium text-slate-600 dark:text-slate-400">Repository</th>
+                      <th className="text-left py-2 px-2 font-medium text-slate-600 dark:text-slate-400 w-12">
+                        #
+                      </th>
+                      <th className="text-left py-2 px-2 font-medium text-slate-600 dark:text-slate-400">
+                        Repository
+                      </th>
                       <th className="text-right py-2 px-2 font-medium text-slate-600 dark:text-slate-400 w-24">
                         Stars
                       </th>
@@ -133,7 +137,9 @@ function DependentsPage() {
                           key={dep.url}
                           className="border-b border-slate-100 dark:border-slate-800 transition-colors duration-150 bg-white dark:bg-slate-950 hover:bg-blue-50 dark:hover:bg-blue-950/40"
                         >
-                          <td className="py-2 px-2 text-slate-500 dark:text-slate-400">{index + 1}</td>
+                          <td className="py-2 px-2 text-slate-500 dark:text-slate-400">
+                            {index + 1}
+                          </td>
                           <td className="py-2 px-2">
                             <a
                               href={dep.url}
diff --git a/apps/dashboard/src/pages/HomePage.tsx b/apps/dashboard/src/pages/HomePage.tsx
@@ -34,28 +34,32 @@ function HomePage() {
   const features = [
     {
       title: "Rolldown Stats",
-      description: "Track build performance metrics and bundle size evolution across Rolldown versions",
+      description:
+        "Track build performance metrics and bundle size evolution across Rolldown versions",
       icon: <Package className="w-6 h-6" />,
       link: "/rolldown-stats",
       color: "blue",
     },
     {
       title: "Minification Benchmarks",
-      description: "Compare performance of different JavaScript minification tools and their compression ratios",
+      description:
+        "Compare performance of different JavaScript minification tools and their compression ratios",
       icon: <Zap className="w-6 h-6" />,
       link: "/minification",
       color: "amber",
     },
     {
       title: "NPM Packages",
-      description: "Monitor package statistics including downloads, versions, and maintainer information",
+      description:
+        "Monitor package statistics including downloads, versions, and maintainer information",
       icon: <Sparkles className="w-6 h-6" />,
       link: "/npm-packages",
       color: "green",
     },
     {
       title: "GitHub Dependents",
-      description: "Explore repositories that depend on key packages with star counts and usage insights",
+      description:
+        "Explore repositories that depend on key packages with star counts and usage insights",
       icon: <GitBranch className="w-6 h-6" />,
       link: "/dependents",
       color: "purple",
diff --git a/apps/dashboard/src/pages/MinificationBenchmarksPage.tsx b/apps/dashboard/src/pages/MinificationBenchmarksPage.tsx
@@ -29,7 +29,9 @@ function MinificationBenchmarksPage() {
           <div className="flex items-center justify-between">
             <div>
               <p className="text-sm font-medium text-amber-600 dark:text-amber-300">Minifiers</p>
-              <p className="text-2xl font-bold text-amber-900 dark:text-white">{minifiers.length}</p>
+              <p className="text-2xl font-bold text-amber-900 dark:text-white">
+                {minifiers.length}
+              </p>
             </div>
             <Gauge className="w-8 h-8 text-amber-500" />
           </div>
@@ -46,7 +48,9 @@ function MinificationBenchmarksPage() {
         <Card className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-blue-200 dark:border-blue-800">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm font-medium text-blue-600 dark:text-blue-300">Best Compression</p>
+              <p className="text-sm font-medium text-blue-600 dark:text-blue-300">
+                Best Compression
+              </p>
               <p className="text-2xl font-bold text-blue-900 dark:text-white">Terser</p>
             </div>
             <FileDown className="w-8 h-8 text-blue-500" />
diff --git a/apps/dashboard/src/pages/RolldownStatsPage.tsx b/apps/dashboard/src/pages/RolldownStatsPage.tsx
@@ -28,7 +28,9 @@ function RolldownStatsPage() {
         <Card className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-blue-200 dark:border-blue-800">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm font-medium text-blue-600 dark:text-blue-300">Current Bundle Size</p>
+              <p className="text-sm font-medium text-blue-600 dark:text-blue-300">
+                Current Bundle Size
+              </p>
               <p className="text-2xl font-bold text-blue-900 dark:text-white">
                 {Math.round(latestVersion.totalSize / 1024)} KB
               </p>
@@ -40,16 +42,22 @@ function RolldownStatsPage() {
           <div className="flex items-center justify-between">
             <div>
               <p className="text-sm font-medium text-purple-600 dark:text-purple-300">Build Time</p>
-              <p className="text-2xl font-bold text-purple-900 dark:text-white">{latestVersion.buildTime}ms</p>
+              <p className="text-2xl font-bold text-purple-900 dark:text-white">
+                {latestVersion.buildTime}ms
+              </p>
             </div>
             <Clock className="w-8 h-8 text-purple-500" />
           </div>
         </Card>
         <Card className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border-green-200 dark:border-green-800">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm font-medium text-green-600 dark:text-green-300">Total Versions</p>
-              <p className="text-2xl font-bold text-green-900 dark:text-white">{rolldownStatsData.length}</p>
+              <p className="text-sm font-medium text-green-600 dark:text-green-300">
+                Total Versions
+              </p>
+              <p className="text-2xl font-bold text-green-900 dark:text-white">
+                {rolldownStatsData.length}
+              </p>
             </div>
             <TrendingUp className="w-8 h-8 text-green-500" />
           </div>
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
@@ -20,12 +20,14 @@ export function Button({
     "inline-flex items-center justify-center font-medium transition-all duration-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2";
 
   const variantClasses = {
-    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600",
+    primary:
+      "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600",
     secondary:
       "bg-slate-200 text-slate-900 hover:bg-slate-300 focus:ring-slate-500 dark:bg-slate-700 dark:text-white dark:hover:bg-slate-600",
     ghost:
       "bg-transparent text-slate-600 hover:bg-slate-100 focus:ring-slate-500 dark:text-slate-300 dark:hover:bg-slate-800",
-    danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600",
+    danger:
+      "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600",
   };
 
   const sizeClasses = {
diff --git a/packages/ui/src/Card.tsx b/packages/ui/src/Card.tsx
@@ -9,7 +9,14 @@ interface CardProps {
   noPadding?: boolean;
 }
 
-export function Card({ children, className = "", title, subtitle, headerAction, noPadding = false }: CardProps) {
+export function Card({
+  children,
+  className = "",
+  title,
+  subtitle,
+  headerAction,
+  noPadding = false,
+}: CardProps) {
   return (
     <div
       className={`bg-white dark:bg-slate-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm ${className}`}
@@ -23,7 +30,9 @@ export function Card({ children, className = "", title, subtitle, headerAction,
                   {title}
                 </h3>
               )}
-              {subtitle && <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{subtitle}</p>}
+              {subtitle && (
+                <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{subtitle}</p>
+              )}
             </div>
             {headerAction && <div className="ml-4">{headerAction}</div>}
           </div>
@@ -34,6 +43,12 @@ export function Card({ children, className = "", title, subtitle, headerAction,
   );
 }
 
-export function CardGrid({ children, className = "" }: { children: ReactNode; className?: string }) {
+export function CardGrid({
+  children,
+  className = "",
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
   return <div className={`grid gap-6 ${className}`}>{children}</div>;
 }
diff --git a/packages/utils/src/minification-data.ts b/packages/utils/src/minification-data.ts
@@ -57,5 +57,7 @@ export const getLibraryData = (library: string, metric: "time" | "compression")
   });
 
   // Sort data: time from smallest to largest (fastest to slowest), compression from largest to smallest (best to worst)
-  return data.sort((a, b) => (metric === "time" ? a.value - b.value : a.minzippedBytes - b.minzippedBytes));
+  return data.sort((a, b) =>
+    metric === "time" ? a.value - b.value : a.minzippedBytes - b.minzippedBytes,
+  );
 };
diff --git a/packages/utils/src/rolldown-formatters.ts b/packages/utils/src/rolldown-formatters.ts
@@ -19,7 +19,10 @@ export const bundleSizeDiffTooltipFormatter = (value: any, name: string, props:
     : " | Publication date unavailable";
 
   if (data.isBaseline) {
-    return [`${formatNumberWithCommas(data.currentSize)} bytes (baseline)${publicationDateText}`, "Bundle Size"];
+    return [
+      `${formatNumberWithCommas(data.currentSize)} bytes (baseline)${publicationDateText}`,
+      "Bundle Size",
+    ];
   }
 
   const sign = value >= 0 ? "+" : "";
diff --git a/tools/fetch-github-dependents.mjs b/tools/fetch-github-dependents.mjs
@@ -77,7 +77,9 @@ async function fetchDependents() {
           latestDependents,
         };
 
-        console.log(`  ✅ Found ${topDependents.length} top + ${latestDependents.length} latest dependents for ${pkg}`);
+        console.log(
+          `  ✅ Found ${topDependents.length} top + ${latestDependents.length} latest dependents for ${pkg}`,
+        );
 
         // Show top 5 for this package
         if (topDependents.length > 0) {
@@ -112,7 +114,10 @@ async function fetchDependents() {
   console.log(`\n✅ Successfully saved all dependents to ${outputPath}`);
 
   // Summary
-  const totalPackages = Object.values(repositories).reduce((sum, packages) => sum + Object.keys(packages).length, 0);
+  const totalPackages = Object.values(repositories).reduce(
+    (sum, packages) => sum + Object.keys(packages).length,
+    0,
+  );
   console.log(`\n📊 Summary:`);
   console.log(`  - Repositories processed: ${Object.keys(repositories).length}`);
   console.log(`  - Packages processed: ${totalPackages}`);
diff --git a/tools/override-rolldown.mjs b/tools/override-rolldown.mjs
diff --git a/vite.config.ts b/vite.config.ts
