useCharts

Author: graphieros

.lighthouserc.json

@@ -16,7 +16,7 @@
     },
     "assert": {
       "assertions": {
-        "categories:accessibility": ["warn", { "minScore": 0.9 }]
+        "categories:accessibility": ["warn", { "minScore": 1 }]
       }
     },
     "upload": {

.oxlintrc.json

@@ -10,7 +10,8 @@
     "no-console": "warn",
     "no-await-in-loop": "off",
     "unicorn/no-array-sort": "off",
-    "no-restricted-globals": "error"
+    "no-restricted-globals": "error",
+    "typescript/consistent-type-imports": "error"
   },
   "ignorePatterns": [
     ".output/**",

README.md

@@ -18,6 +18,18 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 - **URL compatible** – Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works.
 - **Simplicity** – No noise, cluttered display, or confusing UI. If in doubt: choose simplicity.
 
+## Shortcuts
+
+> [!IMPORTANT]  
+> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npm.dev). If you know others who would be interested, please invite them too!
+
+- [chat.npmx.dev](https://chat.npmx.dev) - Discord Server
+- [social.npmx.dev](https://social.npmx.dev) - Bluesky Profile
+- [repo.npmx.dev](https://repo.npmx.dev) - GitHub Repository
+- [issues.npmx.dev](https://issues.npmx.dev) - GitHub Issues
+- [coc.npmx.dev](https://coc.npmx.dev) - Code of Conduct
+- [contributing.npmx.dev](https://contributing.npmx.dev) - Contributing Guide
+
 ## Features
 
 ### Package browsing
@@ -29,15 +41,18 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 - **Provenance indicators** – verified build badges for packages with npm provenance
 - **Multi-provider repository support** – stars/forks from GitHub, GitLab, Bitbucket, Codeberg, Gitee, and Sourcehut
 - **JSR availability** – see if scoped packages are also available on JSR
-- **Package badges** – module format (ESM/CJS/dual), TypeScript types, and engine constraints
+- **Package badges** – module format (ESM/CJS/dual), TypeScript types (with `@types/*` links), and engine constraints
 - **Outdated dependency indicators** – visual cues showing which dependencies are behind
 - **Vulnerability warnings** – security advisories from the OSV database
 - **Download statistics** – weekly download counts with sparkline charts
-- **Install size** – total install size including dependencies
+- **Install size** – total install size (including transitive dependencies)
 - **Playground links** – quick access to StackBlitz, CodeSandbox, and other demo environments from READMEs
 - **Infinite search** – auto-load additional search pages as you scroll
-- **Keyboard navigation** – press `/` to focus search, arrow keys to navigate results, Enter to select
+- **Keyboard navigation** – press `/` to focus search, `.` to open code viewer, arrow keys to navigate results
+- **Deprecation notices** – clear warnings for deprecated packages and versions
+- **Version range resolution** – dependency ranges (e.g., `^1.0.0`) resolve to actual installed versions
 - **Claim new packages** – register new package names directly from search results (via local connector)
+- **Clickable version tags** – navigate directly to any version from the versions list
 
 ### User & org pages
 
@@ -65,10 +80,12 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 | Install size calculation       |    ❌     |    ✅    |
 | JSR cross-reference            |    ❌     |    ✅    |
 | Vulnerability warnings         |    ✅     |    ✅    |
+| Deprecation notices            |    ✅     |    ✅    |
 | Download charts                |    ✅     |    ✅    |
 | Playground links               |    ❌     |    ✅    |
 | Keyboard navigation            |    ❌     |    ✅    |
 | Multi-provider repo support    |    ❌     |    ✅    |
+| Version range resolution       |    ❌     |    ✅    |
 | Dependents list                |    ✅     |    🚧    |
 | Package admin (access/owners)  |    ✅     |    🚧    |
 | Org/team management            |    ✅     |    🚧    |
@@ -105,12 +122,13 @@ npmx.dev supports npm permalinks – just replace `npmjs.com` with `npmx.dev
 
 npmx.dev also supports shorter, cleaner URLs:
 
-| Pattern        | Example                                            |
-| -------------- | -------------------------------------------------- |
-| `/<package>`   | [`/nuxt`](https://npmx.dev/nuxt)                   |
-| `/@scope/name` | [`/@nuxt/kit`](https://npmx.dev/@nuxt/kit)         |
-| `/@org`        | [`/@nuxt`](https://npmx.dev/@nuxt)                 |
-| `/~username`   | [`/~sindresorhus`](https://npmx.dev/~sindresorhus) |
+| Pattern            | Example                                            |
+| ------------------ | -------------------------------------------------- |
+| `/<package>`       | [`/nuxt`](https://npmx.dev/nuxt)                   |
+| `/<pkg>@<version>` | [`/vue@3.4.0`](https://npmx.dev/vue@3.4.0)         |
+| `/@scope/name`     | [`/@nuxt/kit`](https://npmx.dev/@nuxt/kit)         |
+| `/@org`            | [`/@nuxt`](https://npmx.dev/@nuxt)                 |
+| `/~username`       | [`/~sindresorhus`](https://npmx.dev/~sindresorhus) |
 
 ## Tech stack
 
@@ -122,7 +140,7 @@ npmx.dev also supports shorter, cleaner URLs:
 
 ## Contributing
 
-I'd welcome contributions &ndash; please do feel free to poke around and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running!
+We welcome contributions &ndash; please do feel free to poke around and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running!
 
 ## Related projects
 
@@ -132,7 +150,7 @@ I'd welcome contributions &ndash; please do feel free to poke around and improve
 - [npm-alt](https://npm.willow.sh/) &ndash; An alternative npm package browser
 - [npkg.lorypelli.dev](https://npkg.lorypelli.dev/) &ndash; An alternative frontend to npm made with as little client-side JavaScript as possible
 
-If you're building something cool, let me know! 🙏
+If you're building something cool, let us know! 🙏
 
 ## License
 

app/app.vue

@@ -195,6 +195,10 @@ button {
   margin-top: 2rem;
   margin-bottom: 1rem;
   line-height: 1.3;
+
+  a {
+    text-decoration: none;
+  }
 }
 
 /* Visual styling based on original README heading level */

app/components/AppFooter.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-const isMounted = ref(false)
-const isVisible = ref(false)
-const isScrollable = ref(true)
-const lastScrollY = ref(0)
-const footerRef = ref<HTMLElement>()
+const isMounted = shallowRef(false)
+const isVisible = shallowRef(false)
+const isScrollable = shallowRef(true)
+const lastScrollY = shallowRef(0)
+const footerRef = useTemplateRef('footerRef')
 
 // Check if CSS scroll-state container queries are supported
 // Once this becomes baseline, we can remove the JS scroll handling entirely
-const supportsScrollStateQueries = ref(false)
+const supportsScrollStateQueries = useSupported(() => {
+  return isMounted.value && CSS.supports('container-type', 'scroll-state')
+})
 
 function checkScrollable() {
   return document.documentElement.scrollHeight > window.innerHeight
@@ -48,26 +50,17 @@ function onResize() {
   updateFooterPadding()
 }
 
-onMounted(() => {
-  // Feature detect CSS scroll-state container queries (Chrome 133+)
-  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/@container#scroll-state_container_descriptors
-  supportsScrollStateQueries.value = CSS.supports('container-type', 'scroll-state')
+useEventListener('scroll', onScroll, { passive: true })
+useEventListener('resize', onResize, { passive: true })
 
+onMounted(() => {
   nextTick(() => {
     lastScrollY.value = window.scrollY
     isScrollable.value = checkScrollable()
     updateFooterPadding()
     // Only apply dynamic classes after mount to avoid hydration mismatch
     isMounted.value = true
   })
-
-  window.addEventListener('scroll', onScroll, { passive: true })
-  window.addEventListener('resize', onResize, { passive: true })
-})
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', onScroll)
-  window.removeEventListener('resize', onResize)
 })
 </script>
 
@@ -83,9 +76,9 @@ onUnmounted(() => {
         : // JS-controlled: fixed position, hidden by default, transition only after mount
           isScrollable
           ? [
-              'fixed bottom-0 left-0 right-0 z-40 translate-y-full',
+              'fixed bottom-0 left-0 right-0 z-40',
               isMounted && 'transition-transform duration-300 ease-out',
-              isVisible && 'translate-y-0',
+              isVisible ? 'translate-y-0' : 'translate-y-full',
             ]
           : 'mt-auto',
     ]"
@@ -97,19 +90,25 @@ onUnmounted(() => {
         <p class="text-xs text-fg-muted m-0 sm:hidden">not affiliated with npm, Inc.</p>
         <div class="flex items-center gap-4 sm:gap-6">
           <a
-            href="https://github.com/npmx-dev/npmx.dev"
+            href="https://repo.npmx.dev"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
+            class="link-subtle font-mono text-xs min-h-11 min-w- flex items-center"
           >
             source
           </a>
-          <span class="text-border">|</span>
           <a
-            href="https://roe.dev"
+            href="https://social.npmx.dev"
+            rel="noopener noreferrer"
+            class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
+          >
+            social
+          </a>
+          <a
+            href="https://chat.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
           >
-            @danielroe
+            chat
           </a>
         </div>
       </div>

app/components/AppHeader.vue

@@ -30,12 +30,15 @@ withDefaults(
           <NuxtLink
             to="/search"
             class="link-subtle font-mono text-sm inline-flex items-center gap-2"
+            aria-keyshortcuts="/"
           >
             search
             <kbd
               class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
-              >/</kbd
+              aria-hidden="true"
             >
+              /
+            </kbd>
           </NuxtLink>
         </li>
         <li v-if="showConnector" class="flex">

app/components/AppTooltip.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   position?: 'top' | 'bottom' | 'left' | 'right'
 }>()
 
-const isVisible = ref(false)
+const isVisible = shallowRef(false)
 const tooltipId = useId()
 
 const positionClasses: Record<string, string> = {

app/components/ClaimPackageModal.vue

@@ -19,12 +19,12 @@ const {
 } = useConnector()
 
 // Fetch name availability when modal opens
-const checkResult = ref<CheckNameResult | null>(null)
+const checkResult = shallowRef<CheckNameResult | null>(null)
 
-const isChecking = ref(false)
-const isPublishing = ref(false)
-const publishError = ref<string | null>(null)
-const publishSuccess = ref(false)
+const isChecking = shallowRef(false)
+const isPublishing = shallowRef(false)
+const publishError = shallowRef<string | null>(null)
+const publishSuccess = shallowRef(false)
 
 async function checkAvailability() {
   isChecking.value = true
@@ -125,7 +125,7 @@ const previewPackageJson = computed(() => {
   }
 })
 
-const connectorModalOpen = ref(false)
+const connectorModalOpen = shallowRef(false)
 </script>
 
 <template>

app/components/CodeMobileTreeDrawer.vue

@@ -7,7 +7,7 @@ defineProps<{
   baseUrl: string
 }>()
 
-const isOpen = ref(false)
+const isOpen = shallowRef(false)
 
 // Close drawer on navigation
 const route = useRoute()

app/components/CodeViewer.vue

@@ -9,7 +9,7 @@ const emit = defineEmits<{
   lineClick: [lineNum: number, event: MouseEvent]
 }>()
 
-const codeRef = ref<HTMLElement>()
+const codeRef = useTemplateRef('codeRef')
 
 // Generate line numbers array
 const lineNumbers = computed(() => {