plexus-peers 0.2.0 → 0.2.2

package/README.md

@@ -1,6 +1,6 @@
 # Plexus
 
-CLI and a small web UI to inspect **direct dependencies** from a `package.json`: peer dependency ranges vs what is installed, optional **BundlePhobia**-style bundle size hints, and a **`--fix`** mode that queries npm for upgrade and cascade notes.
+CLI and a small web UI to inspect **direct dependencies** from a `package.json`: peer dependency ranges vs what is installed, optional **[bundlejs.com](https://bundlejs.com/)** bundled gzip hints (esbuild), and a **`--fix`** mode that queries npm for upgrade and cascade notes.
 
 Requires **Node.js 18+** (uses the built-in `fetch` API).
 
@@ -37,7 +37,7 @@ npx plexus-peers -f ./path/to/package.json
 | `--out <path>` | HTML output path (with `--html`) |
 | `--conflicts-only` | Only list packages that have peer issues |
 | `--fix` | Call `npm` for latest metadata and print resolution hints (chatty; avoid on CI if logs matter) |
-| `--bundlesize` | With `--html`, query [BundlePhobia](https://bundlephobia.com/) per direct dependency (slow, rate limits may apply) |
+| `--bundlesize` | With `--html`, query [bundlejs.com](https://bundlejs.com/) per direct dependency (slow) |
 | `--pkg <name>` | Focus on one direct dependency and related peer rows |
 
 Examples:

package/bin/plexus.js

@@ -2,6 +2,7 @@
 'use strict';
 
 const path = require('path');
+const { color } = require('../lib/ansi');
 const { runFilesystemAnalysis } = require('../lib/engine');
 const { startServer } = require('../lib/server');
 
@@ -20,7 +21,7 @@ Options:
   --out <path>         HTML output path (with --html)
   --conflicts-only     Terminal: only packages with peer issues
   --fix                Query npm for upgrade / cascade hints (noisy on CI)
-  --bundlesize         With --html: fetch gzip sizes from BundlePhobia (slow)
+  --bundlesize         With --html: fetch bundled gzip sizes from bundlejs.com (slow)
   --pkg <name>         Focus on one direct dependency and its peers
 
 Serve:
@@ -125,6 +126,15 @@ async function main() {
     return;
   }
 
+  if (parsed.flags.bundleSize && !parsed.flags.html) {
+    console.error(
+      color(
+        'Note: --bundlesize only applies with --html (bundlejs.com gzip sizes in the report file). Terminal output is unchanged — use e.g. --html --bundlesize.\n',
+        'yellow',
+      ),
+    );
+  }
+
   await runFilesystemAnalysis({ rootDir: parsed.rootDir, flags: parsed.flags });
 }
 

package/lib/fix.js

@@ -2,7 +2,7 @@
 
 const { color } = require('./ansi');
 const { satisfies } = require('./graph');
-const { queryNpm } = require('./npm');
+const { fetchLatestPackageManifest, registryFetchConcurrency } = require('./npm');
 
 /**
  * For each real conflict (version mismatch, not just missing optional):
@@ -10,7 +10,7 @@ const { queryNpm } = require('./npm');
  *  2. Check if latest fixes the conflict (its new peer range accepts the installed version).
  *  3. Check if latest introduces NEW conflicts (cascade detection).
  */
-function resolveConflicts(graph, directDeps, getInstalledVersion, options = {}) {
+async function resolveConflicts(graph, directDeps, getInstalledVersion, options = {}) {
   const silent = options.silent === true;
   const log = (...args) => {
     if (!silent) console.log(...args);
@@ -40,21 +40,33 @@ function resolveConflicts(graph, directDeps, getInstalledVersion, options = {})
 
   const pkgsToCheck = [...new Set(conflicts.map(c => c.pkg))];
 
-  log(color(`\nQuerying npm for ${pkgsToCheck.length} package(s)…`, 'gray'));
+  log(color(`\nQuerying npm registry for ${pkgsToCheck.length} package(s)…`, 'gray'));
+
+  const limit = registryFetchConcurrency();
+  const manifestByPkg = new Map();
+  for (let i = 0; i < pkgsToCheck.length; i += limit) {
+    const batch = pkgsToCheck.slice(i, i + limit);
+    await Promise.all(
+      batch.map(async pkg => {
+        const m = await fetchLatestPackageManifest(pkg);
+        manifestByPkg.set(pkg, m);
+      }),
+    );
+  }
 
   const resolutions = {};
 
   for (const pkg of pkgsToCheck) {
     write(`  ${color(pkg, 'cyan')} … `);
-    const info = queryNpm(pkg);
+    const info = manifestByPkg.get(pkg);
     if (!info) {
       log(color('not found on npm', 'yellow'));
       continue;
     }
 
-    const latest = info['dist-tags']?.latest;
+    const latest = info.version;
     if (!latest) {
-      log(color('no dist-tags.latest', 'yellow'));
+      log(color('no version on latest', 'yellow'));
       continue;
     }
 

package/lib/npm.js

@@ -17,21 +17,62 @@ function queryNpm(pkg) {
   }
 }
 
+/** Strip "v"; bundlejs needs a concrete version string. */
+function normalizePkgVersionForBundleQuery(version) {
+  if (version == null || version === '') return null;
+  const v = String(version).trim().replace(/^v/i, '');
+  return v || null;
+}
+
+const BUNDLE_API_UA = 'plexus-peers (+https://github.com/arnaudmanaranche/plexus; bundle gzip check)';
+
+/**
+ * [bundlejs](https://bundlejs.com/) — esbuild bundles `export * from 'pkg@ver'`, minifies, reports gzip.
+ */
 async function getBundleSize(pkgName, version) {
-  try {
-    const url = `https://bundlephobia.com/api/size?package=${encodeURIComponent(pkgName)}@${version}`;
-    const res = await fetch(url, { signal: AbortSignal.timeout(10000) });
-    if (!res.ok) return null;
-    const data = await res.json();
-    return { size: data.size, gzip: data.gzip };
-  } catch {
-    return null;
+  const ver = normalizePkgVersionForBundleQuery(version);
+  if (!ver) return null;
+  const pkgSpec = `${pkgName}@${ver}`;
+  const url = `https://deno.bundlejs.com/?q=${encodeURIComponent(pkgSpec)}`;
+  const maxAttempts = 3;
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    if (attempt > 0) await new Promise(r => setTimeout(r, 900 * attempt));
+    try {
+      const res = await fetch(url, {
+        headers: {
+          Accept: 'application/json',
+          'User-Agent': BUNDLE_API_UA,
+        },
+        signal: AbortSignal.timeout(60000),
+      });
+      if (res.status === 429 || res.status === 503) continue;
+      if (!res.ok) return null;
+      const ct = res.headers.get('content-type') || '';
+      if (!ct.includes('application/json')) return null;
+      const data = await res.json();
+      const s = data.size;
+      if (!s || typeof s !== 'object') return null;
+      const rawU = s.rawUncompressedSize;
+      const rawC = s.rawCompressedSize;
+      if (typeof rawU !== 'number' || typeof rawC !== 'number') return null;
+      if (!Number.isFinite(rawU) || !Number.isFinite(rawC)) return null;
+      return { size: rawU, gzip: rawC };
+    } catch {
+      if (attempt === maxAttempts - 1) return null;
+    }
   }
+  return null;
 }
 
+/** Smaller/faster packument for semver resolution (full version list, slim per-version docs). */
 async function fetchResolvedPackageManifest(name, range) {
   const url = `https://registry.npmjs.org/${encodeURIComponent(name)}`;
-  const res = await fetch(url, { signal: AbortSignal.timeout(20000) });
+  const res = await fetch(url, {
+    headers: {
+      Accept: 'application/vnd.npm.install-v1+json; q=1.0, application/json; q=0.8',
+    },
+    signal: AbortSignal.timeout(20000),
+  });
   if (!res.ok) return null;
   const data = await res.json();
   const versions = Object.keys(data.versions || {});
@@ -40,11 +81,25 @@ async function fetchResolvedPackageManifest(name, range) {
   return data.versions[best];
 }
 
+/** Latest dist manifest only — used by --fix (avoids full `npm info` + huge JSON per package). */
+async function fetchLatestPackageManifest(name) {
+  const url = `https://registry.npmjs.org/${encodeURIComponent(name)}/latest`;
+  const res = await fetch(url, { signal: AbortSignal.timeout(15000) });
+  if (!res.ok) return null;
+  return res.json();
+}
+
 function registryFetchConcurrency() {
   const n = Number(process.env.PLEXUS_REGISTRY_CONCURRENCY || 10);
   return Math.max(1, Math.min(50, n > 0 ? n : 10));
 }
 
+/** bundlejs.com builds are slow; keep concurrency low (`PLEXUS_BUNDLE_SIZE_CONCURRENCY`, default 3). */
+function bundleSizeFetchConcurrency() {
+  const n = Number(process.env.PLEXUS_BUNDLE_SIZE_CONCURRENCY || 3);
+  return Math.max(1, Math.min(8, n > 0 ? n : 3));
+}
+
 async function createRegistryContext(directDeps) {
   const pkgs = new Map();
   const names = Object.keys(directDeps);
@@ -80,6 +135,8 @@ module.exports = {
   queryNpm,
   getBundleSize,
   fetchResolvedPackageManifest,
+  fetchLatestPackageManifest,
   createRegistryContext,
   registryFetchConcurrency,
+  bundleSizeFetchConcurrency,
 };

package/lib/render-html.js

@@ -8,6 +8,22 @@ function renderHtml(graph, directDeps, rootPkg, resolutions = {}, bundleSizes =
     meta.source === 'registry'
       ? ' — versions resolved from npm registry (no local node_modules)'
       : '';
+  const bundleSizeRequested = meta.bundleSizeRequested === true;
+  const directDepCount = Object.keys(directDeps).length;
+  const bundleResolvedCount = Object.keys(bundleSizes).length;
+  const bundleNote =
+    bundleSizeRequested && directDepCount > 0
+      ? bundleResolvedCount === 0
+        ? ' — Bundled gzip (bundlejs.com) was requested, but no sizes were returned (timeouts, build failures, or rate limits). Try again or lower PLEXUS_BUNDLE_SIZE_CONCURRENCY.'
+        : bundleResolvedCount < directDepCount
+          ? ` — Bundled gzip: ${bundleResolvedCount} of ${directDepCount} direct dependencies; missing entries show “gzip n/a” on the card.`
+          : ' — Bundled gzip estimates (esbuild via bundlejs.com) are shown on each direct dependency card.'
+      : '';
+  const rootVerTrim =
+    rootPkg.version != null && String(rootPkg.version).trim() !== ''
+      ? String(rootPkg.version).trim()
+      : '';
+  const heroVerHtml = rootVerTrim !== '' ? ` <span class="hero-ver">v${esc(rootVerTrim)}</span>` : '';
   const directSet = new Set(Object.keys(directDeps));
 
   const entries = Object.entries(graph).sort(([a], [b]) => a.localeCompare(b));
@@ -22,8 +38,9 @@ function renderHtml(graph, directDeps, rootPkg, resolutions = {}, bundleSizes =
     return acc + info.peerDeps.filter(p => p.ok).length;
   }, 0);
 
-  // Size stats
+  // Size stats (registry / upload paths have no disk data — omit stat instead of "0 B")
   const totalDiskSize = entries.reduce((acc, [, info]) => acc + (info.diskSize ?? 0), 0);
+  const showDiskTotalStat = totalDiskSize > 0;
 
   // Abbreviate long semver ranges for compact display
   function shortRange(range) {
@@ -111,13 +128,28 @@ function renderHtml(graph, directDeps, rootPkg, resolutions = {}, bundleSizes =
           ? `<div class="required-by">peer of: ${info.requiredBy.map(r => `<a href="#pkg-${slug(r)}">${esc(r)}</a>`).join(', ')}</div>`
           : '';
 
-      return `<div class="card ${statusClass}" id="pkg-${slug(pkgName)}" data-conflicts="${conflictPeers.length}" data-pkg="${esc(pkgName)}" data-size="${info.diskSize ?? 0}">
+      const versionTrim =
+        info.version != null && String(info.version).trim() !== '' ? String(info.version).trim() : '';
+      const versionBadge =
+        versionTrim !== ''
+          ? `<span class="pkg-version">v${esc(versionTrim)}</span>`
+          : info.missing
+            ? `<span class="pkg-version" title="Not installed">?</span>`
+            : '';
+
+      return `<div class="card ${statusClass}" id="pkg-${slug(pkgName)}" data-conflicts="${conflictPeers.length}" data-pkg="${esc(pkgName)}" data-size="${info.diskSize ?? 0}" data-bundle-gzip="${bundleInfo ? bundleInfo.gzip : 0}">
       <div class="card-header">
         <a href="${esc(npmPackageUrl(pkgName))}" target="_blank" class="pkg-name">${esc(pkgName)}</a>
         <span class="pkg-meta">
-          <span class="pkg-version">v${info.missing ? '?' : esc(info.version)}</span>
+          ${versionBadge}
           ${sizeStr ? `<span class="size-badge ${sizeCls}">${esc(sizeStr)}</span>` : ''}
-          ${bundleInfo ? `<span class="size-badge size-bundle" title="Bundle size (gzip)">gzip ${esc(formatBytes(bundleInfo.gzip))}</span>` : ''}
+          ${
+            bundleInfo
+              ? `<span class="size-badge size-bundle" title="Bundled + minified + gzip (bundlejs.com export * from pkg)">gzip ${esc(formatBytes(bundleInfo.gzip))}</span>`
+              : bundleSizeRequested && isDirect
+                ? `<span class="size-badge size-bundle-missing" title="bundlejs.com could not build this entry (invalid version, native-only package, timeout, or rate limit).">gzip n/a</span>`
+                : ''
+          }
         </span>
         <div class="badges">
           ${isDirect ? '<span class="badge badge-direct">direct</span>' : ''}
@@ -130,6 +162,30 @@ function renderHtml(graph, directDeps, rootPkg, resolutions = {}, bundleSizes =
     })
     .join('\n');
 
+  const hasConflictCards = entries.some(([, info]) =>
+    info.peerDeps.some(p => !p.ok && p.installed),
+  );
+  /** Show "No issues" only when there is at least one conflict (otherwise redundant with "All"). */
+  const showNoIssuesFilter = conflictCount > 0;
+
+  const toolbarRows = [
+    '<input type="text" id="search" placeholder="Search packages…">',
+    '<button type="button" class="filter-btn active" data-filter="all">All</button>',
+  ];
+  if (hasConflictCards) {
+    toolbarRows.push(
+      '<button type="button" class="filter-btn" data-filter="conflicts" id="plexus-filter-conflicts">Conflicts only</button>',
+    );
+  }
+  toolbarRows.push('<button type="button" class="filter-btn" data-filter="direct">Direct only</button>');
+  if (showNoIssuesFilter) {
+    toolbarRows.push('<button type="button" class="filter-btn" data-filter="ok">No issues</button>');
+  }
+  toolbarRows.push(
+    '<button type="button" class="filter-btn" id="sort-size-btn" style="margin-left:auto">Sort by size ↕</button>',
+  );
+  const toolbarHtml = `<div class="toolbar">\n  ${toolbarRows.join('\n  ')}\n</div>`;
+
   const conflictSummaryRows = entries
     .flatMap(([pkgName, info]) =>
       info.peerDeps
@@ -285,10 +341,23 @@ function renderHtml(graph, directDeps, rootPkg, resolutions = {}, bundleSizes =
   .copy-json-btn.copied { color: var(--green); border-color: rgba(134,239,172,0.35); }
   .json-block-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--code); }
   .json-block { margin: 0; background: transparent; border: none; border-radius: 0; padding: 20px 22px; font-size: 12px; font-family: ui-monospace, monospace; overflow-x: auto; white-space: pre; color: var(--text); line-height: 1.65; }
-  .json-block mark { background: rgba(255,255,255,0.12); color: var(--text-bright); border-radius: 3px; padding: 0 2px; }
+  .json-block.json-block-suggested { line-height: 1.42; }
+  .json-block-header-text { min-width: 0; flex: 1; }
+  .json-block .json-line-changed {
+    display: inline;
+    padding: 0 6px 0 9px;
+    border-left: 3px solid var(--green);
+    border-radius: 0 2px 2px 0;
+    margin: 0 0 0 -12px;
+    background: linear-gradient(90deg, rgba(20,83,45,0.4) 0%, rgba(20,83,45,0.07) 62%, transparent 100%);
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+    color: var(--text-bright);
+  }
   .version-ok { color: var(--green); }
   .size-badge { font-size: 10px; padding: 2px 7px; border-radius: 6px; font-family: ui-monospace, monospace; }
   .size-bundle { background: rgba(63,63,70,0.45); color: var(--muted); border: 1px solid var(--border); }
+  .size-bundle-missing { background: rgba(63,63,70,0.25); color: var(--muted2); border: 1px dashed var(--border-hover); font-style: italic; }
   .size-large { background: rgba(127,29,29,0.35); color: #fca5a5; }
   .size-medium { background: rgba(120,53,15,0.35); color: var(--yellow); }
   .size-small { background: rgba(20,83,45,0.35); color: var(--green); }
@@ -303,8 +372,8 @@ function renderHtml(graph, directDeps, rootPkg, resolutions = {}, bundleSizes =
 <div class="shell">
 <header class="hero">
   <h1>Plexus</h1>
-  <p class="hero-meta"><strong>${esc(rootPkg.name ?? '(unnamed)')}</strong> <span class="hero-ver">v${esc(rootPkg.version ?? '?')}</span></p>
-  <p class="hero-sub">Peer dependency analysis${sourceNote}</p>
+  <p class="hero-meta"><strong>${esc(rootPkg.name ?? '(unnamed)')}</strong>${heroVerHtml}</p>
+  <p class="hero-sub">Peer dependency analysis${sourceNote}${bundleNote}</p>
   <p class="generated">Generated ${esc(new Date().toLocaleString())}</p>
 </header>
 
@@ -314,17 +383,14 @@ function renderHtml(graph, directDeps, rootPkg, resolutions = {}, bundleSizes =
   <div class="stat"><div class="stat-num num-ok">${okCount}</div><div class="stat-label">Satisfied peers</div></div>
   <div class="stat"><div class="stat-num num-conflict">${conflictCount}</div><div class="stat-label">Conflicts</div></div>
   <div class="stat"><div class="stat-num num-warning">${missingOptionalCount}</div><div class="stat-label">Missing optional</div></div>
-  <div class="stat"><div class="stat-num num-neutral" style="font-size:17px">${esc(formatBytes(totalDiskSize))}</div><div class="stat-label">Total disk (node_modules)</div></div>
+${
+  showDiskTotalStat
+    ? `  <div class="stat"><div class="stat-num num-neutral" style="font-size:17px">${esc(formatBytes(totalDiskSize))}</div><div class="stat-label">Total disk (node_modules)</div></div>`
+    : ''
+}
 </div>
 
-<div class="toolbar">
-  <input type="text" id="search" placeholder="Search packages…">
-  <button class="filter-btn active" data-filter="all">All</button>
-  <button class="filter-btn" data-filter="conflicts">Conflicts only</button>
-  <button class="filter-btn" data-filter="direct">Direct only</button>
-  <button class="filter-btn" data-filter="ok">No issues</button>
-  <button class="filter-btn" id="sort-size-btn" style="margin-left:auto">Sort by size ↕</button>
-</div>
+${toolbarHtml}
 
 <div class="grid-wrap">
   <h2 class="grid-heading">Packages</h2>
@@ -368,7 +434,7 @@ ${
             return `<tr>
       <td><a href="${esc(npmPackageUrl(pkg))}" target="_blank" class="pkg-link">${esc(pkg)}</a></td>
       <td><code>${esc(r.current)}</code> → <code class="version-ok">^${esc(r.latest)}</code></td>
-      <td>${fixesHtml}${stillHtml}</td>
+      <td>${fixesHtml}${stillHtml ? ` ${stillHtml}` : ''}</td>
       <td>${cascadeHtml}</td>
     </tr>`;
           })
@@ -393,33 +459,32 @@ ${
           if (suggested.dependencies?.[pkg]) suggested.dependencies[pkg] = `^${r.latest}`;
           if (suggested.devDependencies?.[pkg]) suggested.devDependencies[pkg] = `^${r.latest}`;
         }
-        const changed = Object.keys(resolutions);
-        const markRe = new RegExp(
-          `"(${changed.map(p => p.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})"`,
-          'g',
-        );
-        const markHolders = [];
+        const changedSet = new Set(Object.keys(resolutions));
+        const depLineRe = /^(\s*)("([^"]+)":\s*"[^"]*")(,?)$/;
         let depsJson = JSON.stringify(
           { dependencies: suggested.dependencies, devDependencies: suggested.devDependencies },
           null,
           2,
         );
-        depsJson = depsJson.replace(markRe, (_, pkgName) => {
-          const h = `<mark>&quot;${esc(pkgName)}&quot;</mark>`;
-          markHolders.push(h);
-          return `__PLEXUS_M${markHolders.length - 1}__`;
-        });
-        depsJson = esc(depsJson);
-        markHolders.forEach((h, i) => {
-          depsJson = depsJson.replace(`__PLEXUS_M${i}__`, h);
-        });
+        depsJson = depsJson
+          .split('\n')
+          .map(line => {
+            const m = line.match(depLineRe);
+            if (m && changedSet.has(m[3])) {
+              return `<span class="json-line-changed">${esc(m[1] + m[2] + (m[4] || ''))}</span>`;
+            }
+            return esc(line);
+          })
+          .join('\n');
         return `<div class="conflict-table-section">
   <div class="json-block-header">
-    <h2 class="h2-fix">Suggested package.json (highlighted = changed)</h2>
+    <div class="json-block-header-text">
+      <h2 class="h2-fix">Suggested package.json</h2>
+    </div>
     <button type="button" class="copy-json-btn" id="copy-suggested-json" aria-label="Copy JSON to clipboard">Copy JSON</button>
   </div>
   <div class="json-block-wrap">
-    <pre class="json-block" id="suggested-json-pre">${depsJson}</pre>
+    <pre class="json-block json-block-suggested" id="suggested-json-pre">${depsJson}</pre>
   </div>
 </div>`;
       })()
@@ -437,43 +502,53 @@ ${
     arrow.textContent = rows.classList.contains('hidden') ? '▸' : '▾';
   }
 
-  document.addEventListener('DOMContentLoaded', function() {
+  function fallbackCopyJson(text) {
+    try {
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'fixed';
+      ta.style.left = '-9999px';
+      document.body.appendChild(ta);
+      ta.select();
+      var ok = document.execCommand('copy');
+      document.body.removeChild(ta);
+      return ok;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  /* Run immediately: DOMContentLoaded often does not fire after document.write() / blob report. */
+  (function () {
     var currentFilter = 'all';
     var sortedBySize = false;
     var searchInput = document.getElementById('search');
     var grid = document.getElementById('grid');
+    if (!grid) return;
 
-    searchInput.addEventListener('input', filterCards);
+    var conflictsBtn = document.getElementById('plexus-filter-conflicts');
+    if (conflictsBtn && !grid.querySelector('.card-conflict')) {
+      conflictsBtn.remove();
+    }
 
-    document.querySelectorAll('.filter-btn[data-filter]').forEach(function(btn) {
-      btn.addEventListener('click', function() {
-        currentFilter = btn.getAttribute('data-filter');
-        document.querySelectorAll('.filter-btn[data-filter]').forEach(function(b) { b.classList.remove('active'); });
-        btn.classList.add('active');
-        filterCards();
-      });
-    });
+    function effectiveSize(card) {
+      var disk = parseInt(card.getAttribute('data-size') || '0', 10) || 0;
+      var gzip = parseInt(card.getAttribute('data-bundle-gzip') || '0', 10) || 0;
+      return disk > 0 ? disk : gzip;
+    }
 
-    var sortBtn = document.getElementById('sort-size-btn');
-    if (sortBtn) {
-      sortBtn.addEventListener('click', function() {
-        sortedBySize = !sortedBySize;
-        sortBtn.classList.toggle('active', sortedBySize);
-        sortBtn.textContent = sortedBySize ? 'Sort by name ↕' : 'Sort by size ↕';
-        var cards = Array.from(grid.querySelectorAll('.card'));
-        cards.sort(function(a, b) {
-          if (sortedBySize) {
-            return parseInt(b.getAttribute('data-size') || 0) - parseInt(a.getAttribute('data-size') || 0);
-          }
-          return (a.getAttribute('data-pkg') || '').localeCompare(b.getAttribute('data-pkg') || '');
-        });
-        cards.forEach(function(card) { grid.appendChild(card); });
+    function getGridCards() {
+      var g = document.getElementById('grid');
+      if (!g) return [];
+      return Array.from(g.children).filter(function (el) {
+        return el.nodeType === 1 && el.classList.contains('card');
       });
     }
 
     function filterCards() {
-      var search = searchInput.value.toLowerCase();
-      document.querySelectorAll('.card').forEach(function(card) {
+      var search = (searchInput && searchInput.value) ? searchInput.value.toLowerCase() : '';
+      getGridCards().forEach(function (card) {
         var pkg = (card.getAttribute('data-pkg') || '').toLowerCase();
         var hasConflict = card.classList.contains('card-conflict');
         var hasWarning = card.classList.contains('card-warning');
@@ -490,6 +565,89 @@ ${
       });
     }
 
+    if (searchInput) searchInput.addEventListener('input', filterCards);
+
+    document.querySelectorAll('.filter-btn[data-filter]').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        currentFilter = btn.getAttribute('data-filter');
+        document.querySelectorAll('.filter-btn[data-filter]').forEach(function (b) {
+          b.classList.remove('active');
+        });
+        btn.classList.add('active');
+        filterCards();
+      });
+    });
+
+    /* Delegated click: survives edge cases where target is a text node; always use live #grid. */
+    document.addEventListener(
+      'click',
+      function (e) {
+        var t = e.target;
+        while (t && t.nodeType !== 1) t = t.parentNode;
+        var sortBtn = t && t.closest ? t.closest('#sort-size-btn') : null;
+        if (!sortBtn) return;
+        try {
+          var gridEl = document.getElementById('grid');
+          if (!gridEl) return;
+
+          var nextBySize = !sortedBySize;
+          var cards = Array.from(gridEl.children).filter(function (el) {
+            return el.nodeType === 1 && el.classList.contains('card');
+          });
+          if (cards.length === 0) return;
+
+          var pkgKey = function (c) {
+            return (c.getAttribute('data-pkg') || '').toLowerCase();
+          };
+          var eff = cards.map(function (c) {
+            return effectiveSize(c);
+          });
+          var allSameSizes =
+            eff.length > 0 && eff.every(function (s) {
+              return s === eff[0];
+            });
+
+          cards.sort(function (a, b) {
+            if (nextBySize) {
+              var sa = effectiveSize(a);
+              var sb = effectiveSize(b);
+              if (sb !== sa) return sb - sa;
+              /* All sizes tied (often 0): reverse name vs initial report order so the grid visibly changes */
+              if (allSameSizes) return pkgKey(b).localeCompare(pkgKey(a));
+              return pkgKey(a).localeCompare(pkgKey(b));
+            }
+            return pkgKey(a).localeCompare(pkgKey(b));
+          });
+
+          while (gridEl.firstChild) gridEl.removeChild(gridEl.firstChild);
+          var frag = document.createDocumentFragment();
+          for (var i = 0; i < cards.length; i++) {
+            frag.appendChild(cards[i]);
+          }
+          gridEl.appendChild(frag);
+          void gridEl.offsetWidth;
+
+          sortedBySize = nextBySize;
+          sortBtn.classList.toggle('active', sortedBySize);
+          sortBtn.textContent = sortedBySize ? 'Sort by name ↕' : 'Sort by size ↕';
+
+          console.log('[plexus] sort applied', {
+            mode: sortedBySize ? 'by_size' : 'by_name',
+            cards: cards.length,
+            allSameSizes: nextBySize ? allSameSizes : null,
+            firstThree: Array.prototype.slice.call(gridEl.children, 0, 3).map(function (n) {
+              return n.getAttribute('data-pkg');
+            }),
+          });
+
+          filterCards();
+        } catch (err) {
+          console.error('[plexus] sort failed', err);
+        }
+      },
+      false,
+    );
+
     var copyJsonBtn = document.getElementById('copy-suggested-json');
     var suggestedJsonPre = document.getElementById('suggested-json-pre');
     if (copyJsonBtn && suggestedJsonPre) {
@@ -505,34 +663,22 @@ ${
           }, 2000);
         }
         if (navigator.clipboard && navigator.clipboard.writeText) {
-          navigator.clipboard.writeText(text).then(function () { done(true); }).catch(function () {
-            if (fallbackCopyJson(text)) done(true);
-            else done(false);
-          });
+          navigator.clipboard
+            .writeText(text)
+            .then(function () {
+              done(true);
+            })
+            .catch(function () {
+              if (fallbackCopyJson(text)) done(true);
+              else done(false);
+            });
         } else {
           if (fallbackCopyJson(text)) done(true);
           else done(false);
         }
       });
     }
-  });
-
-  function fallbackCopyJson(text) {
-    try {
-      var ta = document.createElement('textarea');
-      ta.value = text;
-      ta.setAttribute('readonly', '');
-      ta.style.position = 'fixed';
-      ta.style.left = '-9999px';
-      document.body.appendChild(ta);
-      ta.select();
-      var ok = document.execCommand('copy');
-      document.body.removeChild(ta);
-      return ok;
-    } catch (e) {
-      return false;
-    }
-  }
+  })();
 </script>
 </body>
 </html>`;

package/lib/run-analysis.js

@@ -8,7 +8,7 @@ const { color } = require('./ansi');
 const { formatBytes } = require('./format');
 const { createFsContext, buildGraph } = require('./graph');
 const { resolveConflicts } = require('./fix');
-const { getBundleSize, createRegistryContext, registryFetchConcurrency } = require('./npm');
+const { getBundleSize, createRegistryContext, bundleSizeFetchConcurrency } = require('./npm');
 const { renderHtml } = require('./render-html');
 const { printGraph, printSummary } = require('./terminal');
 
@@ -46,6 +46,12 @@ async function runFilesystemAnalysis(opts) {
     ...(rootPkg.devDependencies ?? {}),
   };
 
+  if (Object.keys(directDeps).length === 0) {
+    console.log(color('No dependencies or devDependencies in package.json — nothing to analyze.', 'red'));
+    process.exitCode = 1;
+    return;
+  }
+
   if (focusPkg && !directDeps[focusPkg]) {
     console.log(color(`Package "${focusPkg}" not found in dependencies.`, 'red'));
     process.exitCode = 1;
@@ -56,7 +62,7 @@ async function runFilesystemAnalysis(opts) {
   const graph = buildGraph(directDeps, ctx);
 
   const resolutions = fixMode
-    ? resolveConflicts(graph, directDeps, ctx.getInstalledVersion).resolutions
+    ? (await resolveConflicts(graph, directDeps, ctx.getInstalledVersion)).resolutions
     : {};
 
   if (fixMode && !htmlMode) {
@@ -94,7 +100,7 @@ async function runFilesystemAnalysis(opts) {
     let bundleSizes = {};
     if (bundleSizeMode) {
       const directKeys = Object.keys(directDeps);
-      console.log(color(`\nQuerying bundlephobia for ${directKeys.length} packages…`, 'gray'));
+      console.log(color(`\nQuerying bundlejs.com sizes for ${directKeys.length} packages…`, 'gray'));
       for (const pkg of directKeys) {
         const ver = ctx.getInstalledVersion(pkg);
         if (!ver) continue;
@@ -111,6 +117,7 @@ async function runFilesystemAnalysis(opts) {
 
     const html = renderHtml(graph, directDeps, rootPkg, resolutions, bundleSizes, {
       source: 'filesystem',
+      bundleSizeRequested: bundleSizeMode,
     });
     const outPath = outFile ? path.resolve(outFile) : path.join(rootDir, 'dep-graph.html');
     fs.writeFileSync(outPath, html, 'utf8');
@@ -141,6 +148,13 @@ async function runRegistryAnalysis(rootPkg, flags = {}) {
   };
   const maxDirect = Math.max(1, Number(process.env.PLEXUS_MAX_DIRECT_DEPS || 250) || 250);
   const directCount = Object.keys(directDeps).length;
+  if (directCount === 0) {
+    const err = new Error(
+      'This package.json has no dependencies or devDependencies — nothing to analyze.',
+    );
+    err.statusCode = 400;
+    throw err;
+  }
   if (directCount > maxDirect) {
     const err = new Error(`Too many direct dependencies (${directCount}; max ${maxDirect}).`);
     err.statusCode = 400;
@@ -150,12 +164,12 @@ async function runRegistryAnalysis(rootPkg, flags = {}) {
   const graph = buildGraph(directDeps, ctx);
   const fixMode = flags.fix === true;
   const resolutions = fixMode
-    ? resolveConflicts(graph, directDeps, ctx.getInstalledVersion, { silent: true }).resolutions
+    ? (await resolveConflicts(graph, directDeps, ctx.getInstalledVersion, { silent: true })).resolutions
     : {};
   let bundleSizes = {};
   if (flags.bundleSize) {
     const names = Object.keys(directDeps);
-    const limit = registryFetchConcurrency();
+    const limit = bundleSizeFetchConcurrency();
     for (let i = 0; i < names.length; i += limit) {
       const batch = names.slice(i, i + limit);
       await Promise.all(
@@ -170,6 +184,7 @@ async function runRegistryAnalysis(rootPkg, flags = {}) {
   }
   const html = renderHtml(graph, directDeps, rootPkg, resolutions, bundleSizes, {
     source: 'registry',
+    bundleSizeRequested: flags.bundleSize === true,
   });
   return { graph, directDeps, resolutions, bundleSizes, html };
 }

package/lib/server.js

@@ -27,10 +27,28 @@ function corsForPages(req, res, next) {
   next();
 }
 
+/** One JSON line per /api request for Render logs and log drains (duration_ms, status). */
+function structuredApiLog(req, res, next) {
+  if (!req.path.startsWith('/api')) return next();
+  const start = Date.now();
+  res.on('finish', () => {
+    const line = JSON.stringify({
+      event: 'api_call',
+      path: req.path,
+      method: req.method,
+      duration_ms: Date.now() - start,
+      status: res.statusCode,
+    });
+    console.log(line);
+  });
+  next();
+}
+
 function createApp() {
   const app = express();
   app.use(corsForPages);
   app.use(express.json({ limit: '3mb' }));
+  app.use(structuredApiLog);
 
   const publicDir = path.join(__dirname, '..', 'public');
   app.use(express.static(publicDir));

package/lib/terminal.js

@@ -18,9 +18,13 @@ function printGraph(graph, directDeps, options = {}) {
     if (conflictsOnly && info.peerDeps.every(p => p.ok)) continue;
 
     const isDirect = directSet.has(pkgName);
+    const vTrim =
+      info.version != null && String(info.version).trim() !== '' ? String(info.version).trim() : '';
     const versionStr = info.missing
       ? color('NOT INSTALLED', 'red', 'bold')
-      : color(`v${info.version}`, 'gray');
+      : vTrim !== ''
+        ? color(`v${vTrim}`, 'gray')
+        : color('—', 'gray');
 
     const tag = isDirect ? color(' [direct]', 'blue') : '';
     console.log(`\n${color(pkgName, 'bold', 'cyan')}${tag} ${versionStr}`);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "plexus-peers",
-  "version": "0.2.0",
-  "description": "Plexus — CLI and mini web UI for peer dependency analysis and BundlePhobia-style size hints",
+  "version": "0.2.2",
+  "description": "Plexus — CLI and mini web UI for peer dependency analysis",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,11 +21,17 @@
   },
   "scripts": {
     "start": "node bin/plexus.js serve",
+    "start:dev": "nodemon -q --watch lib --watch bin --watch public --ext js,cjs,mjs,html,css --delay 200ms bin/plexus.js serve",
     "plexus": "node bin/plexus.js",
-    "plexus-peers": "node bin/plexus.js"
+    "plexus-peers": "node bin/plexus.js",
+    "build:css": "tailwindcss -i ./tailwind.source.css -o ./public/plexus.css --minify"
   },
   "dependencies": {
     "express": "^4.21.2",
     "semver": "^7.7.1"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.11",
+    "tailwindcss": "^3.4.17"
   }
 }

package/public/index.html

@@ -6,24 +6,7 @@
   <!-- Optional: override API host (e.g. custom GitHub Pages domain). Empty = rules in script below. -->
   <meta name="plexus-api-base" content="">
   <title>Plexus — package.json analysis</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          colors: {
-            plexus: {
-              void: '#050505',
-              base: '#0a0a0a',
-              raised: '#111111',
-              subtle: '#171717',
-              code: '#1c1c1c',
-            },
-          },
-        },
-      },
-    };
-  </script>
+  <link rel="stylesheet" href="plexus.css">
 </head>
 <body class="relative box-border min-h-screen overflow-x-hidden bg-plexus-base text-zinc-300 font-sans antialiased">
   <!-- Ambient background (low contrast, non-interactive) -->
@@ -42,7 +25,7 @@
         <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tight text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.85),0_0_40px_rgba(10,10,10,0.9)]">
           Plexus
         </h1>
-        <span class="inline-flex items-center rounded-lg border border-zinc-700/80 bg-plexus-code px-2.5 py-1 text-xs sm:text-sm font-mono font-medium text-zinc-400 tabular-nums shrink-0" translate="no">v0.2.0</span>
+        <span class="inline-flex items-center rounded-lg border border-zinc-700/80 bg-plexus-code px-2.5 py-1 text-xs sm:text-sm font-mono font-medium text-zinc-400 tabular-nums shrink-0" translate="no">v0.2.1</span>
       </div>
       <p class="text-sm text-zinc-500 mb-5 md:mb-6">
         <a href="https://github.com/arnaudmanaranche/plexus" target="_blank" rel="noopener noreferrer" class="text-zinc-400 hover:text-white underline-offset-4 hover:underline transition-colors">GitHub</a>
@@ -54,34 +37,40 @@
         <code class="text-base sm:text-lg md:text-xl font-mono text-zinc-400 bg-plexus-code px-2 py-0.5 rounded-md">node_modules</code>.
       </p>
 
-      <div class="relative z-[1] w-full max-w-2xl mx-auto rounded-2xl border border-zinc-800/90 bg-plexus-raised/92 backdrop-blur-md p-8 sm:p-10 md:p-12 text-left shadow-[0_24px_80px_rgba(0,0,0,0.45),0_0_0_1px_rgba(255,255,255,0.04)]">
-        <label class="block border-2 border-dashed border-zinc-800 rounded-xl py-14 sm:py-16 px-6 text-center cursor-pointer text-zinc-500 text-lg sm:text-xl transition-colors duration-200 hover:border-zinc-600 hover:text-zinc-300 hover:bg-plexus-subtle/50">
-          <input type="file" id="file" class="hidden" accept=".json,application/json">
-          <span id="fileLabel">Choose a package.json file</span>
-        </label>
-
-        <div class="mt-8 flex flex-col gap-4">
-          <label class="flex items-start gap-3 cursor-pointer text-zinc-500 text-base sm:text-lg select-none leading-snug">
-            <input type="checkbox" id="optFix" class="mt-1 size-4 shrink-0 rounded border-zinc-700 bg-plexus-subtle text-zinc-200 focus:ring-2 focus:ring-zinc-600 focus:ring-offset-0 focus:ring-offset-plexus-base accent-zinc-300">
-            <span>Include <code class="text-sm font-mono text-zinc-400 bg-plexus-code px-1.5 py-0.5 rounded">--fix</code> resolution plan (extra npm requests)</span>
-          </label>
-          <label class="flex items-start gap-3 cursor-pointer text-zinc-500 text-base sm:text-lg select-none leading-snug">
-            <input type="checkbox" id="optBundle" class="mt-1 size-4 shrink-0 rounded border-zinc-700 bg-plexus-subtle text-zinc-200 focus:ring-2 focus:ring-zinc-600 focus:ring-offset-0 focus:ring-offset-plexus-base accent-zinc-300">
-            <span>BundlePhobia sizes (slower)</span>
+      <div id="zone" class="relative z-[1] w-full max-w-2xl mx-auto rounded-2xl border border-zinc-800/90 bg-plexus-raised/92 backdrop-blur-md p-8 sm:p-10 md:p-12 text-left shadow-[0_24px_80px_rgba(0,0,0,0.45),0_0_0_1px_rgba(255,255,255,0.04)]">
+        <div id="zone-panel-upload">
+          <label class="block border-2 border-dashed border-zinc-800 rounded-xl py-14 sm:py-16 px-6 text-center cursor-pointer text-zinc-500 text-lg sm:text-xl transition-colors duration-200 hover:border-zinc-600 hover:text-zinc-300 hover:bg-plexus-subtle/50">
+            <input type="file" id="file" class="hidden" accept=".json,application/json">
+            <span id="fileLabel">Choose a package.json file</span>
           </label>
-        </div>
 
-        <button type="button" id="run" disabled
-          class="mt-10 w-full py-4 sm:py-5 rounded-xl bg-zinc-200 text-zinc-950 text-lg sm:text-xl font-semibold tracking-tight cursor-pointer transition-colors hover:bg-white disabled:opacity-40 disabled:hover:bg-zinc-200 disabled:cursor-not-allowed">
-          Generate report
-        </button>
-
-        <p class="mt-8 text-center text-sm sm:text-base text-zinc-600 leading-relaxed">
-          CLI:
-          <code class="font-mono text-zinc-500 bg-plexus-code px-2 py-0.5 rounded-md">npx plexus-peers --html</code>
-          from your project root for disk sizes and transitive peers via
-          <code class="font-mono text-zinc-500 bg-plexus-code px-2 py-0.5 rounded-md">node_modules</code>.
-        </p>
+          <div class="mt-8 flex flex-col gap-4">
+            <label class="flex items-start gap-3 cursor-pointer text-zinc-500 text-base sm:text-lg select-none leading-snug">
+              <input type="checkbox" id="optFix" class="mt-1 size-4 shrink-0 rounded border-zinc-700 bg-plexus-subtle text-zinc-200 focus:ring-2 focus:ring-zinc-600 focus:ring-offset-0 focus:ring-offset-plexus-base accent-zinc-300">
+              <span>Include resolution plan (extra npm requests)</span>
+            </label>
+            <label class="flex items-start gap-3 cursor-pointer text-zinc-500 text-base sm:text-lg select-none leading-snug">
+              <input type="checkbox" id="optBundle" class="mt-1 size-4 shrink-0 rounded border-zinc-700 bg-plexus-subtle text-zinc-200 focus:ring-2 focus:ring-zinc-600 focus:ring-offset-0 focus:ring-offset-plexus-base accent-zinc-300">
+              <span>Bundle size via bundlejs.com (slower)</span>
+            </label>
+          </div>
+
+          <button type="button" id="run" disabled
+            class="mt-10 w-full py-4 sm:py-5 rounded-xl bg-zinc-200 text-zinc-950 text-lg sm:text-xl font-semibold tracking-tight cursor-pointer transition-colors hover:bg-white disabled:opacity-40 disabled:hover:bg-zinc-200 disabled:cursor-not-allowed">
+            Generate report
+          </button>
+          <p class="mt-3 text-center text-xs sm:text-sm text-zinc-600 leading-snug">
+            Large manifests can take 20–90s (longer with <span class="text-zinc-500">bundlejs.com</span> size checks).
+          </p>
+
+          <p class="mt-8 text-center text-sm sm:text-base text-zinc-600 leading-relaxed">
+            CLI:
+            <code class="font-mono text-zinc-500 bg-plexus-code px-2 py-0.5 rounded-md">npx plexus-peers --html</code>
+            from your project root for disk sizes and transitive peers via
+            <code class="font-mono text-zinc-500 bg-plexus-code px-2 py-0.5 rounded-md">node_modules</code>.
+          </p>
+        </div>
+        <div id="zone-panel-progress" class="hidden" aria-live="polite" aria-busy="true"></div>
       </div>
     </div>
   </main>
@@ -104,7 +93,267 @@
       var toastTimer = null;
       var optFix = document.getElementById('optFix');
       var optBundle = document.getElementById('optBundle');
+      var uploadPanel = document.getElementById('zone-panel-upload');
+      var progressPanel = document.getElementById('zone-panel-progress');
+      var zoneEl = document.getElementById('zone');
       var parsed = null;
+      var progressSimTimer = null;
+
+      function directDepCount(pkg) {
+        if (!pkg || typeof pkg !== 'object') return 0;
+        var d = pkg.dependencies;
+        var dev = pkg.devDependencies;
+        var n = 0;
+        if (d && typeof d === 'object' && !Array.isArray(d)) n += Object.keys(d).length;
+        if (dev && typeof dev === 'object' && !Array.isArray(dev)) n += Object.keys(dev).length;
+        return n;
+      }
+
+      /** Direct dependency names in deterministic order (matches server merge: deps then devDeps keys, sorted). */
+      function getDirectDepNames(pkg) {
+        var d =
+          pkg.dependencies && typeof pkg.dependencies === 'object' && !Array.isArray(pkg.dependencies)
+            ? pkg.dependencies
+            : {};
+        var dev =
+          pkg.devDependencies &&
+          typeof pkg.devDependencies === 'object' &&
+          !Array.isArray(pkg.devDependencies)
+            ? pkg.devDependencies
+            : {};
+        var seen = Object.create(null);
+        var out = [];
+        Object.keys(d).forEach(function (k) {
+          if (!seen[k]) {
+            seen[k] = true;
+            out.push(k);
+          }
+        });
+        Object.keys(dev).forEach(function (k) {
+          if (!seen[k]) {
+            seen[k] = true;
+            out.push(k);
+          }
+        });
+        out.sort(function (a, b) {
+          return a.localeCompare(b);
+        });
+        return out;
+      }
+
+      function stopProgressSimulation() {
+        if (progressSimTimer) {
+          clearInterval(progressSimTimer);
+          progressSimTimer = null;
+        }
+      }
+
+      function showDependencyProgress(depNames) {
+        stopProgressSimulation();
+        uploadPanel.classList.add('hidden');
+        progressPanel.classList.remove('hidden');
+        progressPanel.setAttribute('aria-busy', 'true');
+        zoneEl.setAttribute('aria-busy', 'true');
+
+        progressPanel.innerHTML = '';
+        var n = depNames.length;
+
+        var title = document.createElement('p');
+        title.className = 'text-zinc-200 text-lg font-medium mb-4 text-center';
+        title.textContent = 'Analyzing dependencies…';
+
+        var pill = document.createElement('div');
+        pill.className =
+          'mx-auto max-w-md rounded-full border border-zinc-700/75 bg-plexus-void/60 px-6 py-5 sm:px-8 sm:py-6 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)]';
+
+        var stack = document.createElement('div');
+        stack.className = 'flex flex-col items-center justify-center gap-1.5 text-center font-mono';
+
+        var rowTop = document.createElement('div');
+        rowTop.className =
+          'plexus-pill-row-top flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center gap-2 text-xs sm:text-sm transition-all duration-500 ease-out';
+        var rowMid = document.createElement('div');
+        rowMid.className =
+          'plexus-pill-row-mid flex min-h-[1.6rem] w-full max-w-[20rem] items-center justify-center gap-2 px-2 text-sm sm:text-base font-medium text-zinc-100 transition-all duration-500 ease-out';
+        var rowBot = document.createElement('div');
+        rowBot.className =
+          'plexus-pill-row-bot flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center gap-2 text-xs sm:text-sm transition-all duration-500 ease-out';
+
+        stack.appendChild(rowTop);
+        stack.appendChild(rowMid);
+        stack.appendChild(rowBot);
+        pill.appendChild(stack);
+
+        var countEl = document.createElement('p');
+        countEl.className = 'mt-4 text-center text-xs text-zinc-600 tabular-nums';
+
+        progressPanel.appendChild(title);
+        progressPanel.appendChild(pill);
+        progressPanel.appendChild(countEl);
+
+        function rowLine(iconText, iconClass, pkgName) {
+          var frag = document.createDocumentFragment();
+          if (iconText) {
+            var ic = document.createElement('span');
+            ic.className = iconClass;
+            ic.textContent = iconText;
+            ic.setAttribute('aria-hidden', 'true');
+            frag.appendChild(ic);
+          }
+          var nm = document.createElement('span');
+          nm.className = 'truncate';
+          nm.textContent = pkgName || '';
+          frag.appendChild(nm);
+          return frag;
+        }
+
+        function clearRow(el) {
+          while (el.firstChild) {
+            el.removeChild(el.firstChild);
+          }
+        }
+
+        /**
+         * step = number of packages already finished; middle scans depNames[step] when step < n.
+         * step === n: all done (briefly before report opens).
+         */
+        function paint(step) {
+          clearRow(rowTop);
+
+          if (step < n) {
+            if (step > 0) {
+              rowTop.className =
+                'plexus-pill-row-top flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center gap-2 text-xs sm:text-sm opacity-45 text-zinc-500 transition-all duration-500 ease-out';
+              rowTop.appendChild(
+                rowLine('✓', 'shrink-0 text-emerald-400/85', depNames[step - 1]),
+              );
+            } else {
+              rowTop.className =
+                'plexus-pill-row-top flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center text-xs sm:text-sm opacity-0 pointer-events-none transition-all duration-500 ease-out';
+            }
+
+            clearRow(rowMid);
+            rowMid.className =
+              'plexus-pill-row-mid flex min-h-[1.6rem] w-full max-w-[20rem] items-center justify-center gap-2 px-2 text-sm sm:text-base font-medium text-zinc-100 transition-all duration-500 ease-out';
+            var scanIcon = document.createElement('span');
+            scanIcon.className =
+              'shrink-0 text-amber-400 animate-[pulse_2.2s_ease-in-out_infinite]';
+            scanIcon.textContent = '◐';
+            scanIcon.setAttribute('aria-hidden', 'true');
+            rowMid.appendChild(scanIcon);
+            var midName = document.createElement('span');
+            midName.className = 'truncate text-zinc-100';
+            midName.textContent = depNames[step];
+            rowMid.appendChild(midName);
+
+            clearRow(rowBot);
+            if (step < n - 1) {
+              rowBot.className =
+                'plexus-pill-row-bot flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center gap-2 text-xs sm:text-sm opacity-40 text-zinc-500 transition-all duration-500 ease-out';
+              var inIcon = document.createElement('span');
+              inIcon.className = 'shrink-0 text-zinc-600';
+              inIcon.textContent = '·';
+              inIcon.setAttribute('aria-hidden', 'true');
+              rowBot.appendChild(inIcon);
+              var botName = document.createElement('span');
+              botName.className = 'truncate';
+              botName.textContent = depNames[step + 1];
+              rowBot.appendChild(botName);
+            } else {
+              rowBot.className =
+                'plexus-pill-row-bot flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center text-xs sm:text-sm opacity-0 pointer-events-none transition-all duration-500 ease-out';
+            }
+
+            countEl.textContent = Math.min(step + 1, n) + ' / ' + n;
+          } else {
+            clearRow(rowTop);
+            clearRow(rowMid);
+            clearRow(rowBot);
+
+            if (n === 1) {
+              rowTop.className =
+                'plexus-pill-row-top flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center text-xs sm:text-sm opacity-0';
+              rowMid.className =
+                'plexus-pill-row-mid flex min-h-[1.6rem] w-full max-w-[20rem] items-center justify-center gap-2 px-2 text-sm sm:text-base font-medium text-zinc-100';
+              rowMid.appendChild(rowLine('✓', 'shrink-0 text-emerald-400', depNames[0]));
+              rowBot.className =
+                'plexus-pill-row-bot flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center opacity-0';
+            } else {
+              rowTop.className =
+                'plexus-pill-row-top flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center gap-2 text-xs sm:text-sm opacity-45 text-zinc-500';
+              rowTop.appendChild(
+                rowLine('✓', 'shrink-0 text-emerald-400/85', depNames[n - 2]),
+              );
+              rowMid.className =
+                'plexus-pill-row-mid flex min-h-[1.6rem] w-full max-w-[20rem] items-center justify-center gap-2 px-2 text-sm sm:text-base font-medium text-zinc-100';
+              rowMid.appendChild(rowLine('✓', 'shrink-0 text-emerald-400', depNames[n - 1]));
+              rowBot.className =
+                'plexus-pill-row-bot flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center opacity-0';
+            }
+            countEl.textContent = n + ' / ' + n;
+          }
+        }
+
+        var step = 0;
+        var serverWaitShown = false;
+        paint(step);
+
+        function showServerWaitingUi() {
+          if (serverWaitShown) return;
+          serverWaitShown = true;
+          title.textContent = 'Finishing report on server…';
+          countEl.className = 'mt-4 text-center text-xs sm:text-sm text-zinc-500 leading-relaxed max-w-lg mx-auto';
+          countEl.textContent =
+            'The dependency list above is only a visual rhythm — work continues until /api/analyze responds. Bundle size mode can take several minutes.';
+          clearRow(rowTop);
+          clearRow(rowMid);
+          clearRow(rowBot);
+          rowTop.className =
+            'plexus-pill-row-top flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center opacity-0 pointer-events-none';
+          rowBot.className =
+            'plexus-pill-row-bot flex min-h-[1.35rem] w-full max-w-[18rem] items-center justify-center opacity-0 pointer-events-none';
+          rowMid.className =
+            'plexus-pill-row-mid flex min-h-[2.5rem] w-full max-w-[22rem] items-center justify-center gap-2 px-3 text-sm text-zinc-300';
+          var dot = document.createElement('span');
+          dot.className = 'shrink-0 text-amber-400 animate-pulse';
+          dot.textContent = '●';
+          dot.setAttribute('aria-hidden', 'true');
+          var msg = document.createElement('span');
+          msg.textContent = 'Waiting for response…';
+          rowMid.appendChild(dot);
+          rowMid.appendChild(msg);
+        }
+
+        function flushRemaining() {
+          stopProgressSimulation();
+          paint(n);
+        }
+
+        if (n > 0) {
+          /* Advance through dependency names only; never imply “all done” until the POST returns. */
+          var intervalMs = Math.min(2800, Math.max(950, Math.floor(42000 / n)));
+          progressSimTimer = setInterval(function () {
+            if (step < n - 1) {
+              step++;
+              paint(step);
+            } else {
+              stopProgressSimulation();
+              showServerWaitingUi();
+            }
+          }, intervalMs);
+        }
+
+        return { flushRemaining: flushRemaining };
+      }
+
+      function hideDependencyProgress() {
+        stopProgressSimulation();
+        progressPanel.innerHTML = '';
+        progressPanel.classList.add('hidden');
+        progressPanel.setAttribute('aria-busy', 'false');
+        zoneEl.setAttribute('aria-busy', 'false');
+        uploadPanel.classList.remove('hidden');
+      }
 
       function analyzeUrl() {
         var meta = document.querySelector('meta[name="plexus-api-base"]');
@@ -149,6 +398,14 @@
             if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
               throw new Error('JSON must be a package.json object.');
             }
+            if (directDepCount(parsed) === 0) {
+              showToast(
+                'This package.json has no dependencies or devDependencies — nothing to analyze.',
+              );
+              parsed = null;
+              runBtn.disabled = true;
+              return;
+            }
             runBtn.disabled = false;
           } catch (e) {
             showToast(e.message || 'Invalid JSON.');
@@ -159,9 +416,16 @@
 
       runBtn.addEventListener('click', function () {
         if (!parsed) return;
+        if (directDepCount(parsed) === 0) {
+          showToast(
+            'This package.json has no dependencies or devDependencies — nothing to analyze.',
+          );
+          return;
+        }
         hideToast();
+        var depNames = getDirectDepNames(parsed);
+        var progressCtl = showDependencyProgress(depNames);
         runBtn.disabled = true;
-        runBtn.textContent = 'Analyzing…';
         var pkgForApi = Object.assign({}, parsed);
         delete pkgForApi.private;
         delete pkgForApi.main;
@@ -189,13 +453,19 @@
             return res.text();
           })
           .then(function (html) {
-            var w = window.open('', '_blank');
+            stopProgressSimulation();
+            if (progressCtl && progressCtl.flushRemaining) progressCtl.flushRemaining();
+            var blob = new Blob([html], { type: 'text/html;charset=utf-8' });
+            var url = URL.createObjectURL(blob);
+            var w = window.open('about:blank', '_blank');
             if (w) {
-              w.document.write(html);
-              w.document.close();
+              w.location.href = url;
+              setTimeout(function () {
+                try {
+                  URL.revokeObjectURL(url);
+                } catch (e) {}
+              }, 60000);
             } else {
-              var blob = new Blob([html], { type: 'text/html' });
-              var url = URL.createObjectURL(blob);
               window.location.href = url;
             }
           })
@@ -207,6 +477,7 @@
             showToast(m);
           })
           .finally(function () {
+            hideDependencyProgress();
             runBtn.disabled = false;
             runBtn.textContent = 'Generate report';
           });

package/public/plexus.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-left-36{left:-9rem}.-right-28{right:-7rem}.bottom-\[18\%\]{bottom:18%}.left-1\/2{left:50%}.right-4{right:1rem}.top-0{top:0}.top-6{top:1.5rem}.top-\[28\%\]{top:28%}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.z-\[1\]{z-index:1}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-14{margin-bottom:3.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.box-border{box-sizing:border-box}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.size-4{width:1rem;height:1rem}.h-\[min\(22rem\2c 45vw\)\]{height:min(22rem,45vw)}.h-\[min\(28rem\2c 50vw\)\]{height:min(28rem,50vw)}.h-\[min\(78vh\2c 600px\)\]{height:min(78vh,600px)}.min-h-\[1\.35rem\]{min-height:1.35rem}.min-h-\[1\.6rem\]{min-height:1.6rem}.min-h-screen{min-height:100vh}.w-\[calc\(100vw_-_2rem\)\]{width:calc(100vw - 2rem)}.w-\[min\(22rem\2c 45vw\)\]{width:min(22rem,45vw)}.w-\[min\(28rem\2c 50vw\)\]{width:min(28rem,50vw)}.w-\[min\(92vw\2c 820px\)\]{width:min(92vw,820px)}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-\[18rem\]{max-width:18rem}.max-w-\[20rem\]{max-width:20rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/3{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/3{--tw-translate-y:-33.333333%}.-translate-y-2{--tw-translate-y:-0.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-\[pulse_2\.2s_ease-in-out_infinite\]{animation:pulse 2.2s ease-in-out infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-xl{border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-dashed{border-style:dashed}.border-red-900\/80{border-color:rgba(127,29,29,.8)}.border-zinc-700{--tw-border-opacity:1;border-color:rgb(63 63 70/var(--tw-border-opacity,1))}.border-zinc-700\/75{border-color:rgba(63,63,70,.75)}.border-zinc-700\/80{border-color:rgba(63,63,70,.8)}.border-zinc-800{--tw-border-opacity:1;border-color:rgb(39 39 42/var(--tw-border-opacity,1))}.border-zinc-800\/90{border-color:rgba(39,39,42,.9)}.bg-plexus-base{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity,1))}.bg-plexus-code{--tw-bg-opacity:1;background-color:rgb(28 28 28/var(--tw-bg-opacity,1))}.bg-plexus-subtle{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.bg-plexus-void\/60{background-color:rgba(5,5,5,.6)}.bg-red-950\/95{background-color:rgba(69,10,10,.95)}.bg-white\/\[0\.028\]{background-color:hsla(0,0%,100%,.028)}.bg-zinc-200{--tw-bg-opacity:1;background-color:rgb(228 228 231/var(--tw-bg-opacity,1))}.bg-zinc-400\/\[0\.04\]{background-color:hsla(240,5%,65%,.04)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-plexus-void\/25{--tw-gradient-from:rgba(5,5,5,.25) var(--tw-gradient-from-position);--tw-gradient-to:rgba(5,5,5,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-white\/\[0\.055\]{--tw-gradient-from:hsla(0,0%,100%,.055) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-zinc-500\/\[0\.04\]{--tw-gradient-to:hsla(240,4%,46%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(240,4%,46%,.04) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-plexus-void\/75{--tw-gradient-to:rgba(5,5,5,.75) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-tight{letter-spacing:-.025em}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-emerald-400\/85{color:rgba(52,211,153,.85)}.text-red-100{--tw-text-opacity:1;color:rgb(254 226 226/var(--tw-text-opacity,1))}.text-red-300\/90{color:hsla(0,94%,82%,.9)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-zinc-100{--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity,1))}.text-zinc-200{--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.text-zinc-300{--tw-text-opacity:1;color:rgb(212 212 216/var(--tw-text-opacity,1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-zinc-600{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.text-zinc-950{--tw-text-opacity:1;color:rgb(9 9 11/var(--tw-text-opacity,1))}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-zinc-300{accent-color:#d4d4d8}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-45{opacity:.45}.opacity-\[0\.4\]{opacity:.4}.shadow-\[0_24px_80px_rgba\(0\2c 0\2c 0\2c 0\.45\)\2c 0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.04\)\]{--tw-shadow:0 24px 80px rgba(0,0,0,.45),0 0 0 1px hsla(0,0%,100%,.04);--tw-shadow-colored:0 24px 80px var(--tw-shadow-color),0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_8px_30px_rgba\(0\2c 0\2c 0\2c 0\.45\)\]{--tw-shadow:0 8px 30px rgba(0,0,0,.45);--tw-shadow-colored:0 8px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.05\)\]{--tw-shadow:inset 0 1px 0 0 hsla(0,0%,100%,.05);--tw-shadow-colored:inset 0 1px 0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur-3xl{--tw-blur:blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-md,.backdrop-blur-sm{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[background-image\:radial-gradient\(rgba\(255\2c 255\2c 255\2c 0\.042\)_1px\2c transparent_1px\)\]{background-image:radial-gradient(hsla(0,0%,100%,.042) 1px,transparent 0)}.\[background-size\:40px_40px\]{background-size:40px 40px}.\[text-shadow\:0_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.85\)\2c 0_0_40px_rgba\(10\2c 10\2c 10\2c 0\.9\)\]{text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 40px hsla(0,0%,4%,.9)}.hover\:border-zinc-600:hover{--tw-border-opacity:1;border-color:rgb(82 82 91/var(--tw-border-opacity,1))}.hover\:bg-plexus-subtle\/50:hover{background-color:hsla(0,0%,9%,.5)}.hover\:bg-red-900\/60:hover{background-color:rgba(127,29,29,.6)}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:text-zinc-300:hover{--tw-text-opacity:1;color:rgb(212 212 216/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-zinc-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(82 82 91/var(--tw-ring-opacity,1))}.focus\:ring-offset-0:focus{--tw-ring-offset-width:0px}.focus\:ring-offset-plexus-base:focus{--tw-ring-offset-color:#0a0a0a}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:hover\:bg-zinc-200:hover:disabled{--tw-bg-opacity:1;background-color:rgb(228 228 231/var(--tw-bg-opacity,1))}@media (min-width:640px){.sm\:-left-24{left:-6rem}.sm\:-right-20{right:-5rem}.sm\:gap-4{gap:1rem}.sm\:p-10{padding:2.5rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.sm\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:mb-16{margin-bottom:4rem}.md\:mb-4{margin-bottom:1rem}.md\:mb-6{margin-bottom:1.5rem}.md\:p-12{padding:3rem}.md\:py-28{padding-top:7rem;padding-bottom:7rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:text-7xl{font-size:4.5rem;line-height:1}}