Merge branch 'npmx-dev:main' into main

Author: NormVg

app/components/PackageCard.vue

@@ -84,6 +84,10 @@ const emit = defineEmits<{
                 />
               </dd>
             </div>
+            <div v-if="result.package.license" class="flex items-center gap-1.5">
+              <dt class="sr-only">License</dt>
+              <dd>{{ result.package.license }}</dd>
+            </div>
           </dl>
         </div>
         <!-- Mobile: downloads on separate row -->

app/components/PackageVersions.vue

@@ -120,9 +120,8 @@ const tagVersions = ref<Map<string, VersionDisplay[]>>(new Map())
 const loadingTags = ref<Set<string>>(new Set())
 
 const otherVersionsExpanded = shallowRef(false)
-const otherMajorGroups = shallowRef<
-  Array<{ major: number; versions: VersionDisplay[]; expanded: boolean }>
->([])
+const expandedMajorGroups = ref<Set<number>>(new Set())
+const otherMajorGroups = shallowRef<Array<{ major: number; versions: VersionDisplay[] }>>([])
 const otherVersionsLoading = shallowRef(false)
 
 // Cached full version list (local to component instance)
@@ -222,8 +221,8 @@ function processLoadedVersions(allVersions: PackageVersionInfo[]) {
   otherMajorGroups.value = sortedMajors.map(major => ({
     major,
     versions: byMajor.get(major)!,
-    expanded: false,
   }))
+  expandedMajorGroups.value.clear()
 }
 
 // Expand a tag row
@@ -277,10 +276,11 @@ async function expandOtherVersions() {
 }
 
 // Toggle a major group
-function toggleMajorGroup(index: number) {
-  const group = otherMajorGroups.value[index]
-  if (group) {
-    group.expanded = !group.expanded
+function toggleMajorGroup(major: number) {
+  if (expandedMajorGroups.value.has(major)) {
+    expandedMajorGroups.value.delete(major)
+  } else {
+    expandedMajorGroups.value.add(major)
   }
 }
 
@@ -497,20 +497,24 @@ function getTagVersions(tag: string): VersionDisplay[] {
 
           <!-- Major version groups (untagged versions) -->
           <template v-if="otherMajorGroups.length > 0">
-            <div v-for="(group, groupIndex) in otherMajorGroups" :key="group.major">
+            <div v-for="group in otherMajorGroups" :key="group.major">
               <!-- Major group header -->
               <button
                 v-if="group.versions.length > 1"
                 type="button"
                 class="w-full text-left py-1"
-                :aria-expanded="group.expanded"
+                :aria-expanded="expandedMajorGroups.has(group.major)"
                 :title="group.versions[0]?.version"
-                @click="toggleMajorGroup(groupIndex)"
+                @click="toggleMajorGroup(group.major)"
               >
                 <div class="flex items-center gap-2">
                   <span
                     class="w-3 h-3 transition-transform duration-200 text-fg-subtle"
-                    :class="group.expanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
+                    :class="
+                      expandedMajorGroups.has(group.major)
+                        ? 'i-carbon-chevron-down'
+                        : 'i-carbon-chevron-right'
+                    "
                   />
                   <span
                     class="font-mono text-xs truncate"
@@ -567,7 +571,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
               </div>
 
               <!-- Major group versions -->
-              <div v-if="group.expanded && group.versions.length > 1" class="ml-5 space-y-0.5">
+              <div
+                v-if="expandedMajorGroups.has(group.major) && group.versions.length > 1"
+                class="ml-5 space-y-0.5"
+              >
                 <div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
                   <div class="flex items-center justify-between gap-2">
                     <NuxtLink

cli/package.json

@@ -27,7 +27,7 @@
   ],
   "scripts": {
     "build": "tsdown",
-    "dev": "node --experimental-strip-types src/cli.ts",
+    "dev": "NPMX_CLI_DEV=true node --experimental-strip-types src/cli.ts",
     "test:types": "tsc --noEmit"
   },
   "dependencies": {

cli/src/cli.ts

@@ -10,6 +10,8 @@ import { getNpmUser } from './npm-client.ts'
 import { initLogger, showToken, logInfo, logWarning, logError } from './logger.ts'
 
 const DEFAULT_PORT = 31415
+const DEFAULT_FRONTEND_URL = 'https://npmx.dev/'
+const DEV_FRONTEND_URL = 'http://localhost:3000/'
 
 async function runNpmLogin(): Promise<boolean> {
   return new Promise(resolve => {
@@ -43,6 +45,8 @@ const main = defineCommand({
   },
   async run({ args }) {
     const port = Number.parseInt(args.port as string, 10) || DEFAULT_PORT
+    const frontendUrl =
+      process.env.NPMX_CLI_DEV === 'true' ? DEV_FRONTEND_URL : DEFAULT_FRONTEND_URL
 
     initLogger()
 
@@ -90,7 +94,7 @@ const main = defineCommand({
     logInfo(`Authenticated as: ${npmUser}`)
 
     const token = generateToken()
-    showToken(token, port)
+    showToken(token, port, frontendUrl)
 
     const app = createConnectorApp(token)
 

cli/src/logger.ts

@@ -63,8 +63,8 @@ export function logMessage(message: string): void {
 /**
  * Show the connection token in a nice box
  */
-export function showToken(token: string, port: number): void {
-  const connectUrl = `https://npmx.dev/?token=${token}&port=${port}`
+export function showToken(token: string, port: number, frontendUrl: string): void {
+  const connectUrl = `${frontendUrl}?token=${token}&port=${port}`
 
   p.note(
     [

shared/types/npm-registry.ts

@@ -147,6 +147,7 @@ export interface NpmSearchPackage {
   author?: NpmPerson
   publisher?: NpmSearchPublisher
   maintainers?: NpmPerson[]
+  license?: string
 }
 
 export interface NpmSearchScore {