Merge remote-tracking branch 'origin/main' into vt/feat-exec

Author: danielroe

.lighthouserc.json

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

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 formal announcement at that point. Please avoid sharing the website or the invite link to discord in social media in a direct way. The repo is public, so people that care about the project can easily find it and join us. Anyone that wants to help is more than welcomed to [join us in Discord](https://chat.npm.dev). If you know others that 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/components/AppFooter.vue

@@ -83,9 +83,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 +97,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/OrgMembersPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NewOperation } from '~/composables/useConnector'
+import { buildScopeTeam } from '~/utils/npm'
 
 const props = defineProps<{
   orgName: string
@@ -144,10 +145,10 @@ async function loadTeamMemberships() {
   try {
     const teamsResult = await listOrgTeams(props.orgName)
     if (teamsResult) {
-      // Teams come as "org:team" format
+      // Teams come as "org:team" format from npm, need @scope:team for API calls
       const teamPromises = teamsResult.map(async (fullTeamName: string) => {
         const teamName = fullTeamName.replace(`${props.orgName}:`, '')
-        const membersResult = await listTeamUsers(fullTeamName)
+        const membersResult = await listTeamUsers(buildScopeTeam(props.orgName, teamName))
         if (membersResult) {
           teamMembers.value[teamName] = membersResult
         }
@@ -183,7 +184,7 @@ async function handleAddMember() {
     // Second operation: add user to team (if a team is selected)
     // This depends on the org operation completing first
     if (newTeam.value && addedOrgOp) {
-      const scopeTeam = `${props.orgName}:${newTeam.value}`
+      const scopeTeam = buildScopeTeam(props.orgName, newTeam.value)
       const teamOperation: NewOperation = {
         type: 'team:add-user',
         params: {

app/components/OrgTeamsPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NewOperation } from '~/composables/useConnector'
+import { buildScopeTeam } from '~/utils/npm'
 
 const props = defineProps<{
   orgName: string
@@ -103,7 +104,7 @@ async function loadTeamUsers(teamName: string) {
   isLoadingUsers.value[teamName] = true
 
   try {
-    const scopeTeam = `${props.orgName}:${teamName}`
+    const scopeTeam = buildScopeTeam(props.orgName, teamName)
     const result = await listTeamUsers(scopeTeam)
     if (result) {
       teamUsers.value[teamName] = result
@@ -135,7 +136,7 @@ async function handleCreateTeam() {
   isCreatingTeam.value = true
   try {
     const teamName = newTeamName.value.trim()
-    const scopeTeam = `${props.orgName}:${teamName}`
+    const scopeTeam = buildScopeTeam(props.orgName, teamName)
     const operation: NewOperation = {
       type: 'team:create',
       params: { scopeTeam },
@@ -153,7 +154,7 @@ async function handleCreateTeam() {
 
 // Destroy team
 async function handleDestroyTeam(teamName: string) {
-  const scopeTeam = `${props.orgName}:${teamName}`
+  const scopeTeam = buildScopeTeam(props.orgName, teamName)
   const operation: NewOperation = {
     type: 'team:destroy',
     params: { scopeTeam },
@@ -171,7 +172,7 @@ async function handleAddUser(teamName: string) {
   isAddingUser.value = true
   try {
     const username = newUserUsername.value.trim().replace(/^@/, '')
-    const scopeTeam = `${props.orgName}:${teamName}`
+    const scopeTeam = buildScopeTeam(props.orgName, teamName)
 
     let dependsOnId: string | undefined
 
@@ -213,7 +214,7 @@ async function handleAddUser(teamName: string) {
 
 // Remove user from team
 async function handleRemoveUser(teamName: string, username: string) {
-  const scopeTeam = `${props.orgName}:${teamName}`
+  const scopeTeam = buildScopeTeam(props.orgName, teamName)
   const operation: NewOperation = {
     type: 'team:rm-user',
     params: { scopeTeam, user: username },

app/components/PackageAccessControls.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NewOperation } from '~/composables/useConnector'
+import { buildScopeTeam } from '~/utils/npm'
 
 const props = defineProps<{
   packageName: string
@@ -96,7 +97,7 @@ async function handleGrantAccess() {
 
   isGranting.value = true
   try {
-    const scopeTeam = `${orgName.value}:${selectedTeam.value}`
+    const scopeTeam = buildScopeTeam(orgName.value, selectedTeam.value)
     const operation: NewOperation = {
       type: 'access:grant',
       params: {