refactor: use extended useVisibleItems for progressive org loading

Extend useVisibleItems with an optional onExpand callback that supports
async data loading. Wire it into the org page so expanding triggers
loadAll() to fetch remaining packages from Algolia.

- useVisibleItems gains onExpand + isExpanding (backwards-compatible)
- useOrgPackages keeps progressive loading (250 on SSR, rest on demand)
- Promise lock scoped inside composable (fixes cross-instance bug)
- Org page uses useVisibleItems(packages, 250, { onExpand: loadAll })

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Adebesin-Cell

.claude/skills/vite-plus

@@ -0,0 +1 @@
+../../node_modules/vite-plus/skills/vite-plus

.trae/skills/vite-plus

@@ -0,0 +1 @@
+../../node_modules/vite-plus/skills/vite-plus

CLAUDE.md

@@ -0,0 +1,76 @@
+<!--VITE PLUS START-->
+
+# Using Vite+, the Unified Toolchain for the Web
+
+This project is using Vite+, a unified toolchain built on top of Vite, Rolldown, Vitest, tsdown, Oxlint, Oxfmt, and Vite Task. Vite+ wraps runtime management, package management, and frontend tooling in a single global CLI called `vp`. Vite+ is distinct from Vite, but it invokes Vite through `vp dev` and `vp build`.
+
+## Vite+ Workflow
+
+`vp` is a global binary that handles the full development lifecycle. Run `vp help` to print a list of commands and `vp <command> --help` for information about a specific command.
+
+### Start
+
+- create - Create a new project from a template
+- migrate - Migrate an existing project to Vite+
+- config - Configure hooks and agent integration
+- staged - Run linters on staged files
+- install (`i`) - Install dependencies
+- env - Manage Node.js versions
+
+### Develop
+
+- dev - Run the development server
+- check - Run format, lint, and TypeScript type checks
+- lint - Lint code
+- fmt - Format code
+- test - Run tests
+
+### Execute
+
+- run - Run monorepo tasks
+- exec - Execute a command from local `node_modules/.bin`
+- dlx - Execute a package binary without installing it as a dependency
+- cache - Manage the task cache
+
+### Build
+
+- build - Build for production
+- pack - Build libraries
+- preview - Preview production build
+
+### Manage Dependencies
+
+Vite+ automatically detects and wraps the underlying package manager such as pnpm, npm, or Yarn through the `packageManager` field in `package.json` or package manager-specific lockfiles.
+
+- add - Add packages to dependencies
+- remove (`rm`, `un`, `uninstall`) - Remove packages from dependencies
+- update (`up`) - Update packages to latest versions
+- dedupe - Deduplicate dependencies
+- outdated - Check for outdated packages
+- list (`ls`) - List installed packages
+- why (`explain`) - Show why a package is installed
+- info (`view`, `show`) - View package information from the registry
+- link (`ln`) / unlink - Manage local package links
+- pm - Forward a command to the package manager
+
+### Maintain
+
+- upgrade - Update `vp` itself to the latest version
+
+These commands map to their corresponding tools. For example, `vp dev --port 3000` runs Vite's dev server and works the same as Vite. `vp test` runs JavaScript tests through the bundled Vitest. The version of all tools can be checked using `vp --version`. This is useful when researching documentation, features, and bugs.
+
+## Common Pitfalls
+
+- **Using the package manager directly:** Do not use pnpm, npm, or Yarn directly. Vite+ can handle all package manager operations.
+- **Always use Vite commands to run tools:** Don't attempt to run `vp vitest` or `vp oxlint`. They do not exist. Use `vp test` and `vp lint` instead.
+- **Running scripts:** Vite+ commands take precedence over `package.json` scripts. If there is a `test` script defined in `scripts` that conflicts with the built-in `vp test` command, run it using `vp run test`.
+- **Do not install Vitest, Oxlint, Oxfmt, or tsdown directly:** Vite+ wraps these tools. They must not be installed directly. You cannot upgrade these tools by installing their latest versions. Always use Vite+ commands.
+- **Use Vite+ wrappers for one-off binaries:** Use `vp dlx` instead of package-manager-specific `dlx`/`npx` commands.
+- **Import JavaScript modules from `vite-plus`:** Instead of importing from `vite` or `vitest`, all modules should be imported from the project's `vite-plus` dependency. For example, `import { defineConfig } from 'vite-plus';` or `import { expect, test, vi } from 'vite-plus/test';`. You must not install `vitest` to import test utilities.
+- **Type-Aware Linting:** There is no need to install `oxlint-tsgolint`, `vp lint --type-aware` works out of the box.
+
+## Review Checklist for Agents
+
+- [ ] Run `vp install` after pulling remote changes and before getting started.
+- [ ] Run `vp check` and `vp test` to validate changes.
+<!--VITE PLUS END-->

app/composables/npm/useOrgPackages.ts

@@ -9,25 +9,22 @@ const INITIAL_BATCH_SIZE = 250
 const ALGOLIA_BATCH_SIZE = 1000
 
 export interface OrgPackagesResponse extends NpmSearchResponse {
-  /** Total number of packages in the org (may exceed objects.length if not all loaded yet) */
+  /** Total number of packages in the org (may exceed objects.length before loadAll) */
   totalPackages: number
-  /** Whether there are more packages that haven't been loaded yet */
-  isTruncated: boolean
 }
 
 function emptyOrgResponse(): OrgPackagesResponse {
   return {
     ...emptySearchResponse(),
     totalPackages: 0,
-    isTruncated: false,
   }
 }
 
 /**
  * Fetch packages for an npm organization with progressive loading.
  *
  * 1. Gets the authoritative package list from the npm registry (single request)
- * 2. Fetches metadata for the first batch immediately
+ * 2. Fetches metadata for the first batch immediately (fast SSR)
  * 3. Remaining packages are loaded on-demand via `loadAll()`
  */
 export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
@@ -40,22 +37,11 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
   })
   const { getPackagesByNameSlice } = useAlgoliaSearch()
 
-  // --- Progressive loading state ---
-  const cache = shallowRef<{
-    org: string
-    allNames: string[]
-    objects: NpmSearchResult[]
-    totalPackages: number
-  } | null>(null)
+  // Tracks all package names so loadAll() knows what to fetch
+  const allNames = shallowRef<string[]>([])
+  const loadedObjects = shallowRef<NpmSearchResult[]>([])
 
-  const isLoadingMore = shallowRef(false)
-
-  const hasMore = computed(() => {
-    if (!cache.value) return false
-    return cache.value.objects.length < cache.value.allNames.length
-  })
-
-  // Promise lock to prevent duplicate loadAll calls
+  // Promise lock — scoped inside the composable to avoid cross-instance sharing
   let loadAllPromise: Promise<void> | null = null
 
   const asyncData = useLazyAsyncData(
@@ -90,11 +76,12 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
       }
 
       if (packageNames.length === 0) {
-        cache.value = { org, allNames: [], objects: [], totalPackages: 0 }
+        allNames.value = []
+        loadedObjects.value = []
         return emptyOrgResponse()
       }
 
-      const totalPackages = packageNames.length
+      allNames.value = packageNames
       const initialNames = packageNames.slice(0, INITIAL_BATCH_SIZE)
 
       // Fetch metadata for first batch
@@ -135,30 +122,25 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
           .map(metaToSearchResult)
       }
 
-      cache.value = {
-        org,
-        allNames: packageNames,
-        objects: initialObjects,
-        totalPackages,
-      }
+      loadedObjects.value = initialObjects
 
       return {
         isStale: false,
         objects: initialObjects,
         total: initialObjects.length,
-        totalPackages,
-        isTruncated: packageNames.length > initialObjects.length,
+        totalPackages: packageNames.length,
         time: new Date().toISOString(),
       } satisfies OrgPackagesResponse
     },
     { default: emptyOrgResponse },
   )
 
-  /** Load all remaining packages that weren't fetched in the initial batch */
+  /** Load all remaining packages that weren't fetched in the initial batch. */
   async function loadAll(): Promise<void> {
-    if (!hasMore.value) return
+    const names = allNames.value
+    if (names.length <= loadedObjects.value.length) return
 
-    // Reuse existing promise if already running
+    // Reuse in-flight promise to prevent duplicate fetches
     if (loadAllPromise) {
       await loadAllPromise
       return
@@ -173,109 +155,71 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
   }
 
   async function _doLoadAll(): Promise<void> {
-    const currentCache = cache.value
-    if (!currentCache || currentCache.objects.length >= currentCache.allNames.length) return
+    const names = allNames.value
+    const current = loadedObjects.value
+    if (names.length <= current.length) return
 
-    const org = currentCache.org
-    isLoadingMore.value = true
+    const org = toValue(orgName)
+    const remainingNames = names.slice(current.length)
 
-    try {
-      const remainingNames = currentCache.allNames.slice(currentCache.objects.length)
+    let newObjects: NpmSearchResult[] = []
 
-      if (searchProviderValue.value === 'algolia') {
-        // Split remaining into batches and fetch in parallel
-        const batches: string[][] = []
-        for (let i = 0; i < remainingNames.length; i += ALGOLIA_BATCH_SIZE) {
-          batches.push(remainingNames.slice(i, i + ALGOLIA_BATCH_SIZE))
-        }
+    if (searchProviderValue.value === 'algolia') {
+      const batches: string[][] = []
+      for (let i = 0; i < remainingNames.length; i += ALGOLIA_BATCH_SIZE) {
+        batches.push(remainingNames.slice(i, i + ALGOLIA_BATCH_SIZE))
+      }
 
-        const results = await Promise.allSettled(
-          batches.map(batch => getPackagesByNameSlice(batch)),
-        )
+      const results = await Promise.allSettled(batches.map(batch => getPackagesByNameSlice(batch)))
 
-        if (toValue(orgName) !== org) return
+      if (toValue(orgName) !== org) return
 
-        const newObjects: NpmSearchResult[] = []
-        for (const result of results) {
-          if (result.status === 'fulfilled') {
-            newObjects.push(...result.value)
-          }
+      for (const result of results) {
+        if (result.status === 'fulfilled') {
+          newObjects.push(...result.value)
         }
-
-        if (newObjects.length > 0) {
-          const existingNames = new Set(currentCache.objects.map(o => o.package.name))
-          const deduped = newObjects.filter(o => !existingNames.has(o.package.name))
-          cache.value = {
-            ...currentCache,
-            objects: [...currentCache.objects, ...deduped],
+      }
+    } else {
+      const metaResults = await mapWithConcurrency(
+        remainingNames,
+        async name => {
+          try {
+            return await $fetch<PackageMetaResponse>(
+              `/api/registry/package-meta/${encodePackageName(name)}`,
+            )
+          } catch {
+            return null
           }
-        }
-      } else {
-        // npm fallback: fetch with concurrency
-        const metaResults = await mapWithConcurrency(
-          remainingNames,
-          async name => {
-            try {
-              return await $fetch<PackageMetaResponse>(
-                `/api/registry/package-meta/${encodePackageName(name)}`,
-              )
-            } catch {
-              return null
-            }
-          },
-          10,
-        )
+        },
+        10,
+      )
 
-        if (toValue(orgName) !== org) return
+      if (toValue(orgName) !== org) return
 
-        const newObjects = metaResults
-          .filter((meta): meta is PackageMetaResponse => meta !== null)
-          .map(metaToSearchResult)
-
-        if (newObjects.length > 0) {
-          const existingNames = new Set(currentCache.objects.map(o => o.package.name))
-          const deduped = newObjects.filter(o => !existingNames.has(o.package.name))
-          cache.value = {
-            ...currentCache,
-            objects: [...currentCache.objects, ...deduped],
-          }
-        }
-      }
-    } finally {
-      isLoadingMore.value = false
+      newObjects = metaResults
+        .filter((meta): meta is PackageMetaResponse => meta !== null)
+        .map(metaToSearchResult)
     }
-  }
 
-  // Reset cache when provider changes
-  watch(
-    () => searchProviderValue.value,
-    () => {
-      cache.value = null
-      loadAllPromise = null
-    },
-  )
+    if (newObjects.length > 0) {
+      const existingNames = new Set(current.map(o => o.package.name))
+      const deduped = newObjects.filter(o => !existingNames.has(o.package.name))
+      const all = [...current, ...deduped]
+      loadedObjects.value = all
 
-  // Computed data that prefers cache
-  const data = computed<OrgPackagesResponse | null>(() => {
-    const org = toValue(orgName)
-    if (cache.value && cache.value.org === org) {
-      return {
+      // Update asyncData so the page sees the new objects
+      asyncData.data.value = {
         isStale: false,
-        objects: cache.value.objects,
-        total: cache.value.objects.length,
-        totalPackages: cache.value.totalPackages,
-        isTruncated: cache.value.objects.length < cache.value.allNames.length,
+        objects: all,
+        total: all.length,
+        totalPackages: names.length,
         time: new Date().toISOString(),
       }
     }
-    return asyncData.data.value
-  })
+  }
 
   return {
     ...asyncData,
-    data,
-    isLoadingMore,
-    hasMore,
     loadAll,
   }
 }