Add NPM stats page for each library

Author: KevinVandy

.gitignore

@@ -29,3 +29,4 @@ dist
 .content-collections
 
 test-results
+.claude/CLAUDE.md

src/components/DocsLayout.tsx

@@ -378,6 +378,10 @@ const useMenuConfig = ({
         label: 'Contributors',
         to: '/$libraryId/$version/docs/contributors',
       },
+      {
+        label: 'NPM Stats',
+        to: '/$libraryId/$version/docs/npm-stats',
+      },
       ...(config.sections.find((d) => d.label === 'Community Resources')
         ? [
             {
@@ -471,6 +475,8 @@ export function DocsLayout({
 
   const isExample = matches.some((d) => d.pathname.includes('/examples/'))
 
+  const isNpmStats = matches.some((d) => d.pathname.includes('/docs/npm-stats'))
+
   const detailsRef = React.useRef<HTMLElement>(null!)
 
   const flatMenu = React.useMemo(
@@ -750,6 +756,7 @@ export function DocsLayout({
                 !isLandingPage && 'min-h-[88dvh] sm:min-h-0',
                 !isLandingPage &&
                   !isExample &&
+                  !isNpmStats &&
                   !isFullWidth &&
                   'mx-auto w-[900px]',
               )}

src/components/npm-stats/ColorPickerPopover.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { HexColorPicker } from 'react-colorful'
+
+export interface ColorPickerPopoverProps {
+  packageName: string
+  position: { x: number; y: number }
+  currentColor: string
+  onColorChange: (packageName: string, color: string) => void
+  onReset: (packageName: string) => void
+  onClose: () => void
+}
+
+/**
+ * A popover component for picking package colors.
+ * Shows a hex color picker with Reset and Done buttons.
+ */
+export function ColorPickerPopover({
+  packageName,
+  position,
+  currentColor,
+  onColorChange,
+  onReset,
+  onClose,
+}: ColorPickerPopoverProps) {
+  return (
+    <div
+      className="fixed z-50 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2"
+      style={{
+        left: position.x,
+        top: position.y,
+      }}
+    >
+      <div className="flex justify-between items-center mb-2">
+        <span className="text-sm font-medium">Pick a color</span>
+      </div>
+      <HexColorPicker
+        color={currentColor}
+        onChange={(color: string) => onColorChange(packageName, color)}
+      />
+      <div className="flex justify-between mt-2">
+        <button
+          onClick={() => {
+            onReset(packageName)
+            onClose()
+          }}
+          className="px-2 py-1 text-sm text-gray-500 hover:text-red-500"
+        >
+          Reset
+        </button>
+        <button
+          onClick={onClose}
+          className="px-2 py-1 text-sm text-blue-500 hover:text-blue-600"
+        >
+          Done
+        </button>
+      </div>
+    </div>
+  )
+}