@hydration-audit/dashboard 0.2.1 → 0.2.2

package/dist/index.cjs

@@ -38,6 +38,7 @@ module.exports = __toCommonJS(index_exports);
 var import_node_http = __toESM(require("http"), 1);
 var import_node_fs = __toESM(require("fs"), 1);
 var import_node_path = __toESM(require("path"), 1);
+var import_node_url = require("url");
 var import_ws = require("ws");
 var import_meta = {};
 var MIME_TYPES = {
@@ -56,10 +57,8 @@ async function startDashboard(reportPath, port = 4173) {
   } catch {
     console.warn(`Could not read report at ${absoluteReportPath}`);
   }
-  const staticDir = import_node_path.default.resolve(
-    import_node_path.default.dirname(new URL(import_meta.url).pathname),
-    "app"
-  );
+  const currentDir = import_node_path.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url));
+  const staticDir = import_node_fs.default.existsSync(import_node_path.default.join(currentDir, "app")) ? import_node_path.default.join(currentDir, "app") : currentDir;
   const server = import_node_http.default.createServer((req, res) => {
     const url = req.url ?? "/";
     if (url === "/api/report") {

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/server.ts"],"sourcesContent":["export { startDashboard } from './server.js';\n","import http from 'node:http';\nimport fs from 'node:fs';\nimport path from 'node:path';\nimport { WebSocketServer } from 'ws';\nimport type { AnalysisReport } from '@hydration-audit/core';\n\nconst MIME_TYPES: Record<string, string> = {\n  '.html': 'text/html',\n  '.js': 'application/javascript',\n  '.css': 'text/css',\n  '.json': 'application/json',\n  '.svg': 'image/svg+xml',\n};\n\n/**\n * Start the dashboard server.\n * Serves a static SPA and provides a WebSocket for live report updates.\n */\nexport async function startDashboard(\n  reportPath: string,\n  port = 4173,\n): Promise<{ url: string; close: () => void }> {\n  const absoluteReportPath = path.resolve(reportPath);\n\n  // Read the initial report\n  let currentReport: AnalysisReport | null = null;\n  try {\n    const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n    currentReport = JSON.parse(content);\n  } catch {\n    console.warn(`Could not read report at ${absoluteReportPath}`);\n  }\n\n  const staticDir = path.resolve(\n    path.dirname(new URL(import.meta.url).pathname),\n    'app',\n  );\n\n  const server = http.createServer((req, res) => {\n    const url = req.url ?? '/';\n\n    // API endpoint for report data\n    if (url === '/api/report') {\n      res.writeHead(200, { 'Content-Type': 'application/json' });\n      res.end(JSON.stringify(currentReport ?? { error: 'No report loaded' }));\n      return;\n    }\n\n    // Serve static files\n    let filePath = path.join(staticDir, url === '/' ? 'index.html' : url);\n    const ext = path.extname(filePath);\n\n    // SPA fallback — serve index.html for non-file routes\n    if (!ext) {\n      filePath = path.join(staticDir, 'index.html');\n    }\n\n    try {\n      const content = fs.readFileSync(filePath);\n      const mime = MIME_TYPES[path.extname(filePath)] ?? 'text/plain';\n      res.writeHead(200, { 'Content-Type': mime });\n      res.end(content);\n    } catch {\n      res.writeHead(404);\n      res.end('Not found');\n    }\n  });\n\n  // WebSocket for live reload\n  const wss = new WebSocketServer({ server });\n\n  // Watch report file for changes\n  let watcher: fs.FSWatcher | null = null;\n  try {\n    watcher = fs.watch(absoluteReportPath, () => {\n      try {\n        const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n        currentReport = JSON.parse(content);\n        // Notify all connected clients\n        for (const client of wss.clients) {\n          if (client.readyState === 1) {\n            client.send(JSON.stringify({ type: 'update', report: currentReport }));\n          }\n        }\n      } catch {\n        // Ignore parse errors during write\n      }\n    });\n  } catch {\n    console.warn('Could not watch report file for changes');\n  }\n\n  return new Promise((resolve) => {\n    server.listen(port, () => {\n      const url = `http://localhost:${port}`;\n      console.log(`\\n  Dashboard running at ${url}\\n`);\n      resolve({\n        url,\n        close: () => {\n          watcher?.close();\n          wss.close();\n          server.close();\n        },\n      });\n    });\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,uBAAiB;AACjB,qBAAe;AACf,uBAAiB;AACjB,gBAAgC;AAHhC;AAMA,IAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AACV;AAMA,eAAsB,eACpB,YACA,OAAO,MACsC;AAC7C,QAAM,qBAAqB,iBAAAA,QAAK,QAAQ,UAAU;AAGlD,MAAI,gBAAuC;AAC3C,MAAI;AACF,UAAM,UAAU,eAAAC,QAAG,aAAa,oBAAoB,OAAO;AAC3D,oBAAgB,KAAK,MAAM,OAAO;AAAA,EACpC,QAAQ;AACN,YAAQ,KAAK,4BAA4B,kBAAkB,EAAE;AAAA,EAC/D;AAEA,QAAM,YAAY,iBAAAD,QAAK;AAAA,IACrB,iBAAAA,QAAK,QAAQ,IAAI,IAAI,YAAY,GAAG,EAAE,QAAQ;AAAA,IAC9C;AAAA,EACF;AAEA,QAAM,SAAS,iBAAAE,QAAK,aAAa,CAAC,KAAK,QAAQ;AAC7C,UAAM,MAAM,IAAI,OAAO;AAGvB,QAAI,QAAQ,eAAe;AACzB,UAAI,UAAU,KAAK,EAAE,gBAAgB,mBAAmB,CAAC;AACzD,UAAI,IAAI,KAAK,UAAU,iBAAiB,EAAE,OAAO,mBAAmB,CAAC,CAAC;AACtE;AAAA,IACF;AAGA,QAAI,WAAW,iBAAAF,QAAK,KAAK,WAAW,QAAQ,MAAM,eAAe,GAAG;AACpE,UAAM,MAAM,iBAAAA,QAAK,QAAQ,QAAQ;AAGjC,QAAI,CAAC,KAAK;AACR,iBAAW,iBAAAA,QAAK,KAAK,WAAW,YAAY;AAAA,IAC9C;AAEA,QAAI;AACF,YAAM,UAAU,eAAAC,QAAG,aAAa,QAAQ;AACxC,YAAM,OAAO,WAAW,iBAAAD,QAAK,QAAQ,QAAQ,CAAC,KAAK;AACnD,UAAI,UAAU,KAAK,EAAE,gBAAgB,KAAK,CAAC;AAC3C,UAAI,IAAI,OAAO;AAAA,IACjB,QAAQ;AACN,UAAI,UAAU,GAAG;AACjB,UAAI,IAAI,WAAW;AAAA,IACrB;AAAA,EACF,CAAC;AAGD,QAAM,MAAM,IAAI,0BAAgB,EAAE,OAAO,CAAC;AAG1C,MAAI,UAA+B;AACnC,MAAI;AACF,cAAU,eAAAC,QAAG,MAAM,oBAAoB,MAAM;AAC3C,UAAI;AACF,cAAM,UAAU,eAAAA,QAAG,aAAa,oBAAoB,OAAO;AAC3D,wBAAgB,KAAK,MAAM,OAAO;AAElC,mBAAW,UAAU,IAAI,SAAS;AAChC,cAAI,OAAO,eAAe,GAAG;AAC3B,mBAAO,KAAK,KAAK,UAAU,EAAE,MAAM,UAAU,QAAQ,cAAc,CAAC,CAAC;AAAA,UACvE;AAAA,QACF;AAAA,MACF,QAAQ;AAAA,MAER;AAAA,IACF,CAAC;AAAA,EACH,QAAQ;AACN,YAAQ,KAAK,yCAAyC;AAAA,EACxD;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,WAAO,OAAO,MAAM,MAAM;AACxB,YAAM,MAAM,oBAAoB,IAAI;AACpC,cAAQ,IAAI;AAAA,yBAA4B,GAAG;AAAA,CAAI;AAC/C,cAAQ;AAAA,QACN;AAAA,QACA,OAAO,MAAM;AACX,mBAAS,MAAM;AACf,cAAI,MAAM;AACV,iBAAO,MAAM;AAAA,QACf;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;","names":["path","fs","http"]}
+{"version":3,"sources":["../src/index.ts","../src/server.ts"],"sourcesContent":["export { startDashboard } from './server.js';\n","import http from 'node:http';\nimport fs from 'node:fs';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport { WebSocketServer } from 'ws';\nimport type { AnalysisReport } from '@hydration-audit/core';\n\nconst MIME_TYPES: Record<string, string> = {\n  '.html': 'text/html',\n  '.js': 'application/javascript',\n  '.css': 'text/css',\n  '.json': 'application/json',\n  '.svg': 'image/svg+xml',\n};\n\n/**\n * Start the dashboard server.\n * Serves a static SPA and provides a WebSocket for live report updates.\n */\nexport async function startDashboard(\n  reportPath: string,\n  port = 4173,\n): Promise<{ url: string; close: () => void }> {\n  const absoluteReportPath = path.resolve(reportPath);\n\n  // Read the initial report\n  let currentReport: AnalysisReport | null = null;\n  try {\n    const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n    currentReport = JSON.parse(content);\n  } catch {\n    console.warn(`Could not read report at ${absoluteReportPath}`);\n  }\n\n  const currentDir = path.dirname(fileURLToPath(import.meta.url));\n  const staticDir = fs.existsSync(path.join(currentDir, 'app'))\n    ? path.join(currentDir, 'app')\n    : currentDir;\n\n  const server = http.createServer((req, res) => {\n    const url = req.url ?? '/';\n\n    // API endpoint for report data\n    if (url === '/api/report') {\n      res.writeHead(200, { 'Content-Type': 'application/json' });\n      res.end(JSON.stringify(currentReport ?? { error: 'No report loaded' }));\n      return;\n    }\n\n    // Serve static files\n    let filePath = path.join(staticDir, url === '/' ? 'index.html' : url);\n    const ext = path.extname(filePath);\n\n    // SPA fallback — serve index.html for non-file routes\n    if (!ext) {\n      filePath = path.join(staticDir, 'index.html');\n    }\n\n    try {\n      const content = fs.readFileSync(filePath);\n      const mime = MIME_TYPES[path.extname(filePath)] ?? 'text/plain';\n      res.writeHead(200, { 'Content-Type': mime });\n      res.end(content);\n    } catch {\n      res.writeHead(404);\n      res.end('Not found');\n    }\n  });\n\n  // WebSocket for live reload\n  const wss = new WebSocketServer({ server });\n\n  // Watch report file for changes\n  let watcher: fs.FSWatcher | null = null;\n  try {\n    watcher = fs.watch(absoluteReportPath, () => {\n      try {\n        const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n        currentReport = JSON.parse(content);\n        // Notify all connected clients\n        for (const client of wss.clients) {\n          if (client.readyState === 1) {\n            client.send(JSON.stringify({ type: 'update', report: currentReport }));\n          }\n        }\n      } catch {\n        // Ignore parse errors during write\n      }\n    });\n  } catch {\n    console.warn('Could not watch report file for changes');\n  }\n\n  return new Promise((resolve) => {\n    server.listen(port, () => {\n      const url = `http://localhost:${port}`;\n      console.log(`\\n  Dashboard running at ${url}\\n`);\n      resolve({\n        url,\n        close: () => {\n          watcher?.close();\n          wss.close();\n          server.close();\n        },\n      });\n    });\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,uBAAiB;AACjB,qBAAe;AACf,uBAAiB;AACjB,sBAA8B;AAC9B,gBAAgC;AAJhC;AAOA,IAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AACV;AAMA,eAAsB,eACpB,YACA,OAAO,MACsC;AAC7C,QAAM,qBAAqB,iBAAAA,QAAK,QAAQ,UAAU;AAGlD,MAAI,gBAAuC;AAC3C,MAAI;AACF,UAAM,UAAU,eAAAC,QAAG,aAAa,oBAAoB,OAAO;AAC3D,oBAAgB,KAAK,MAAM,OAAO;AAAA,EACpC,QAAQ;AACN,YAAQ,KAAK,4BAA4B,kBAAkB,EAAE;AAAA,EAC/D;AAEA,QAAM,aAAa,iBAAAD,QAAK,YAAQ,+BAAc,YAAY,GAAG,CAAC;AAC9D,QAAM,YAAY,eAAAC,QAAG,WAAW,iBAAAD,QAAK,KAAK,YAAY,KAAK,CAAC,IACxD,iBAAAA,QAAK,KAAK,YAAY,KAAK,IAC3B;AAEJ,QAAM,SAAS,iBAAAE,QAAK,aAAa,CAAC,KAAK,QAAQ;AAC7C,UAAM,MAAM,IAAI,OAAO;AAGvB,QAAI,QAAQ,eAAe;AACzB,UAAI,UAAU,KAAK,EAAE,gBAAgB,mBAAmB,CAAC;AACzD,UAAI,IAAI,KAAK,UAAU,iBAAiB,EAAE,OAAO,mBAAmB,CAAC,CAAC;AACtE;AAAA,IACF;AAGA,QAAI,WAAW,iBAAAF,QAAK,KAAK,WAAW,QAAQ,MAAM,eAAe,GAAG;AACpE,UAAM,MAAM,iBAAAA,QAAK,QAAQ,QAAQ;AAGjC,QAAI,CAAC,KAAK;AACR,iBAAW,iBAAAA,QAAK,KAAK,WAAW,YAAY;AAAA,IAC9C;AAEA,QAAI;AACF,YAAM,UAAU,eAAAC,QAAG,aAAa,QAAQ;AACxC,YAAM,OAAO,WAAW,iBAAAD,QAAK,QAAQ,QAAQ,CAAC,KAAK;AACnD,UAAI,UAAU,KAAK,EAAE,gBAAgB,KAAK,CAAC;AAC3C,UAAI,IAAI,OAAO;AAAA,IACjB,QAAQ;AACN,UAAI,UAAU,GAAG;AACjB,UAAI,IAAI,WAAW;AAAA,IACrB;AAAA,EACF,CAAC;AAGD,QAAM,MAAM,IAAI,0BAAgB,EAAE,OAAO,CAAC;AAG1C,MAAI,UAA+B;AACnC,MAAI;AACF,cAAU,eAAAC,QAAG,MAAM,oBAAoB,MAAM;AAC3C,UAAI;AACF,cAAM,UAAU,eAAAA,QAAG,aAAa,oBAAoB,OAAO;AAC3D,wBAAgB,KAAK,MAAM,OAAO;AAElC,mBAAW,UAAU,IAAI,SAAS;AAChC,cAAI,OAAO,eAAe,GAAG;AAC3B,mBAAO,KAAK,KAAK,UAAU,EAAE,MAAM,UAAU,QAAQ,cAAc,CAAC,CAAC;AAAA,UACvE;AAAA,QACF;AAAA,MACF,QAAQ;AAAA,MAER;AAAA,IACF,CAAC;AAAA,EACH,QAAQ;AACN,YAAQ,KAAK,yCAAyC;AAAA,EACxD;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,WAAO,OAAO,MAAM,MAAM;AACxB,YAAM,MAAM,oBAAoB,IAAI;AACpC,cAAQ,IAAI;AAAA,yBAA4B,GAAG;AAAA,CAAI;AAC/C,cAAQ;AAAA,QACN;AAAA,QACA,OAAO,MAAM;AACX,mBAAS,MAAM;AACf,cAAI,MAAM;AACV,iBAAO,MAAM;AAAA,QACf;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;","names":["path","fs","http"]}

package/dist/index.html

@@ -0,0 +1,439 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Hydration Tax Dashboard</title>
+  <style>
+    :root {
+      --bg: #0f1117;
+      --surface: #1a1d27;
+      --surface-2: #242833;
+      --border: #2e3345;
+      --text: #e1e4ed;
+      --text-dim: #8b90a0;
+      --green: #4ade80;
+      --yellow: #facc15;
+      --red: #f87171;
+      --blue: #60a5fa;
+      --purple: #c084fc;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.5;
+    }
+
+    .header {
+      padding: 1.5rem 2rem;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .header h1 { font-size: 1.25rem; font-weight: 600; }
+    .header .meta { color: var(--text-dim); font-size: 0.85rem; }
+    .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; animation: pulse 2s infinite; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+    .dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.5rem 2rem; }
+    .card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 1.25rem;
+    }
+    .card h2 { font-size: 0.9rem; font-weight: 500; color: var(--text-dim); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
+    .card.full { grid-column: 1 / -1; }
+
+    /* Summary Cards */
+    .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; grid-column: 1 / -1; }
+    .stat-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 1rem 1.25rem;
+    }
+    .stat-card .label { font-size: 0.8rem; color: var(--text-dim); }
+    .stat-card .value { font-size: 1.75rem; font-weight: 700; margin-top: 0.25rem; }
+    .stat-card .value.green { color: var(--green); }
+    .stat-card .value.yellow { color: var(--yellow); }
+    .stat-card .value.red { color: var(--red); }
+
+    /* Treemap */
+    .treemap-container { width: 100%; aspect-ratio: 2/1; position: relative; }
+    .treemap-node {
+      position: absolute;
+      border: 1px solid var(--bg);
+      border-radius: 4px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      font-weight: 500;
+      overflow: hidden;
+      transition: opacity 0.2s;
+      cursor: pointer;
+    }
+    .treemap-node:hover { opacity: 0.85; }
+    .treemap-node .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%; }
+    .treemap-node .size { font-size: 0.7rem; opacity: 0.8; }
+
+    /* Island Table */
+    table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
+    th { text-align: left; padding: 0.6rem 0.75rem; color: var(--text-dim); font-weight: 500; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; }
+    th:hover { color: var(--text); }
+    td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
+    tr:hover td { background: var(--surface-2); }
+    .directive { padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; }
+    .directive-load { background: rgba(248, 113, 113, 0.15); color: var(--red); }
+    .directive-idle { background: rgba(250, 204, 21, 0.15); color: var(--yellow); }
+    .directive-visible { background: rgba(74, 222, 128, 0.15); color: var(--green); }
+    .directive-media { background: rgba(96, 165, 250, 0.15); color: var(--blue); }
+    .directive-only { background: rgba(192, 132, 252, 0.15); color: var(--purple); }
+
+    /* Issues */
+    .issue { padding: 0.75rem 1rem; margin-bottom: 0.5rem; border-radius: 8px; font-size: 0.85rem; }
+    .issue-error { background: rgba(248, 113, 113, 0.1); border-left: 3px solid var(--red); }
+    .issue-warning { background: rgba(250, 204, 21, 0.1); border-left: 3px solid var(--yellow); }
+    .issue-info { background: rgba(96, 165, 250, 0.1); border-left: 3px solid var(--blue); }
+    .issue .rec { color: var(--text-dim); font-size: 0.8rem; margin-top: 0.25rem; }
+
+    /* Budget Gauge */
+    .gauge { position: relative; height: 24px; background: var(--surface-2); border-radius: 12px; overflow: hidden; margin-top: 0.5rem; }
+    .gauge-fill { height: 100%; border-radius: 12px; transition: width 0.5s ease; }
+    .gauge-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.75rem; font-weight: 600; }
+
+    .loading { text-align: center; padding: 4rem; color: var(--text-dim); }
+
+    @media (max-width: 768px) {
+      .dashboard { grid-template-columns: 1fr; }
+      .stats { grid-template-columns: repeat(2, 1fr); }
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div class="loading">Loading report...</div>
+  </div>
+
+  <script type="module">
+    let report = null;
+    let sortColumn = 'gzip';
+    let sortAsc = false;
+
+    // ─── Data Loading ──────────────────────────────────────────
+    async function loadReport() {
+      try {
+        const res = await fetch('/api/report');
+        report = await res.json();
+        render();
+      } catch (e) {
+        document.getElementById('app').innerHTML = '<div class="loading">Failed to load report. Make sure the report file exists.</div>';
+      }
+    }
+
+    // WebSocket live reload
+    function connectWS() {
+      try {
+        const ws = new WebSocket(`ws://${location.host}`);
+        ws.onmessage = (event) => {
+          const data = JSON.parse(event.data);
+          if (data.type === 'update') {
+            report = data.report;
+            render();
+          }
+        };
+        ws.onclose = () => setTimeout(connectWS, 3000);
+      } catch {}
+    }
+
+    // ─── Rendering ─────────────────────────────────────────────
+    function render() {
+      if (!report || report.error) {
+        document.getElementById('app').innerHTML = '<div class="loading">No report data available. Run <code>hydration-audit analyze</code> first.</div>';
+        return;
+      }
+
+      const app = document.getElementById('app');
+      app.innerHTML = `
+        ${renderHeader()}
+        ${renderStats()}
+        <div class="dashboard">
+          <div class="card">
+            <h2>Bundle Size Treemap</h2>
+            <div class="treemap-container" id="treemap"></div>
+          </div>
+          <div class="card">
+            <h2>Budget Usage</h2>
+            ${renderBudgetGauges()}
+          </div>
+          <div class="card full">
+            <h2>Islands</h2>
+            ${renderIslandTable()}
+          </div>
+          <div class="card full">
+            <h2>Issues (${getAllIssues().length})</h2>
+            ${renderIssues()}
+          </div>
+        </div>
+      `;
+
+      renderTreemap();
+      attachSortHandlers();
+    }
+
+    function renderHeader() {
+      return `<div class="header">
+        <div>
+          <h1>Hydration Tax Dashboard</h1>
+          <div class="meta">${report.projectName} &middot; ${report.framework} &middot; ${new Date(report.timestamp).toLocaleString()}</div>
+        </div>
+        <div class="meta"><span class="live-dot"></span>Live</div>
+      </div>`;
+    }
+
+    function renderStats() {
+      const t = report.totals;
+      const sizeClass = t.totalGzipSize > 300000 ? 'red' : t.totalGzipSize > 150000 ? 'yellow' : 'green';
+      const issueClass = t.issuesBySeverity.error > 0 ? 'red' : t.issuesBySeverity.warning > 0 ? 'yellow' : 'green';
+
+      return `<div class="stats">
+        <div class="stat-card">
+          <div class="label">Total Islands</div>
+          <div class="value">${t.totalIslands}</div>
+        </div>
+        <div class="stat-card">
+          <div class="label">Total JS (gzip)</div>
+          <div class="value ${sizeClass}">${formatBytes(t.totalGzipSize)}</div>
+        </div>
+        <div class="stat-card">
+          <div class="label">Total JS (brotli)</div>
+          <div class="value">${formatBytes(t.totalBrotliSize)}</div>
+        </div>
+        <div class="stat-card">
+          <div class="label">Issues</div>
+          <div class="value ${issueClass}">${t.totalIssues}</div>
+        </div>
+      </div>`;
+    }
+
+    function renderBudgetGauges() {
+      const config = report.config;
+      if (!config) return '<p style="color:var(--text-dim)">No budget config</p>';
+
+      const gauges = [];
+
+      // Per-page budgets
+      for (const page of report.pages) {
+        const pct = Math.min((page.totalGzipSize / config.thresholds.pageBudget) * 100, 100);
+        const color = pct > 100 ? 'var(--red)' : pct > 66 ? 'var(--yellow)' : 'var(--green)';
+        gauges.push(`
+          <div style="margin-bottom:1rem">
+            <div style="display:flex;justify-content:space-between;font-size:0.8rem;margin-bottom:4px">
+              <span>${page.route}</span>
+              <span>${formatBytes(page.totalGzipSize)} / ${formatBytes(config.thresholds.pageBudget)}</span>
+            </div>
+            <div class="gauge">
+              <div class="gauge-fill" style="width:${Math.min(pct, 100)}%;background:${color}"></div>
+            </div>
+          </div>
+        `);
+      }
+
+      // Total budget
+      const totalPct = Math.min((report.totals.totalGzipSize / config.thresholds.totalBudget) * 100, 100);
+      const totalColor = totalPct > 100 ? 'var(--red)' : totalPct > 66 ? 'var(--yellow)' : 'var(--green)';
+      gauges.push(`
+        <div style="margin-top:1.5rem">
+          <div style="display:flex;justify-content:space-between;font-size:0.8rem;margin-bottom:4px">
+            <strong>Total Site Budget</strong>
+            <span>${formatBytes(report.totals.totalGzipSize)} / ${formatBytes(config.thresholds.totalBudget)}</span>
+          </div>
+          <div class="gauge">
+            <div class="gauge-fill" style="width:${Math.min(totalPct, 100)}%;background:${totalColor}"></div>
+          </div>
+        </div>
+      `);
+
+      return gauges.join('');
+    }
+
+    function renderIslandTable() {
+      const islands = getSortedIslands();
+      if (islands.length === 0) return '<p style="color:var(--text-dim)">No islands found</p>';
+
+      const arrow = (col) => sortColumn === col ? (sortAsc ? ' ↑' : ' ↓') : '';
+
+      return `<table>
+        <thead>
+          <tr>
+            <th data-sort="name">Name${arrow('name')}</th>
+            <th data-sort="directive">Directive${arrow('directive')}</th>
+            <th data-sort="framework">Framework${arrow('framework')}</th>
+            <th data-sort="gzip">Gzip${arrow('gzip')}</th>
+            <th data-sort="brotli">Brotli${arrow('brotli')}</th>
+            <th data-sort="issues">Issues${arrow('issues')}</th>
+            <th>Pages</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${islands.map(i => `<tr>
+            <td><strong>${i.component.name}</strong></td>
+            <td><span class="directive directive-${i.component.directive.split(':')[1]}">${i.component.directive}</span></td>
+            <td>${i.component.uiFramework}</td>
+            <td>${formatBytes(i.bundle.totalGzipSize)}</td>
+            <td style="color:var(--text-dim)">${formatBytes(i.bundle.totalBrotliSize)}</td>
+            <td>${i.issues.length > 0 ? `<span style="color:var(--yellow)">${i.issues.length}</span>` : '<span style="color:var(--green)">0</span>'}</td>
+            <td style="color:var(--text-dim);font-size:0.8rem">${i.component.pages.join(', ')}</td>
+          </tr>`).join('')}
+        </tbody>
+      </table>`;
+    }
+
+    function renderIssues() {
+      const issues = getAllIssues();
+      if (issues.length === 0) return '<p style="color:var(--green)">No issues found!</p>';
+
+      return issues.map(issue => `
+        <div class="issue issue-${issue.severity}">
+          <div>${issue.message}</div>
+          <div class="rec">${issue.recommendation}</div>
+        </div>
+      `).join('');
+    }
+
+    // ─── Treemap ───────────────────────────────────────────────
+    function renderTreemap() {
+      const container = document.getElementById('treemap');
+      if (!container || !report.islands.length) return;
+
+      const width = container.offsetWidth;
+      const height = container.offsetHeight;
+
+      // Build hierarchy data
+      const data = {
+        name: 'root',
+        children: report.islands.map(i => ({
+          name: i.component.name,
+          value: Math.max(i.bundle.totalGzipSize, 100), // min size for visibility
+          gzip: i.bundle.totalGzipSize,
+          directive: i.component.directive,
+          issues: i.issues.length,
+        })),
+      };
+
+      // Simple treemap layout (no d3 dependency — inline squarify)
+      const nodes = squarify(data.children, 0, 0, width, height);
+
+      container.innerHTML = nodes.map(n => {
+        const color = getNodeColor(n);
+        const textColor = '#fff';
+        return `<div class="treemap-node" style="left:${n.x}px;top:${n.y}px;width:${n.w}px;height:${n.h}px;background:${color}" title="${n.name}: ${formatBytes(n.gzip)}">
+          ${n.w > 60 && n.h > 30 ? `<div class="name">${n.name}</div>` : ''}
+          ${n.w > 50 && n.h > 45 ? `<div class="size">${formatBytes(n.gzip)}</div>` : ''}
+        </div>`;
+      }).join('');
+    }
+
+    function getNodeColor(node) {
+      if (node.issues > 0) {
+        return node.gzip > 100000 ? 'rgba(248,113,113,0.6)' : 'rgba(250,204,21,0.5)';
+      }
+      if (node.gzip > 50000) return 'rgba(250,204,21,0.4)';
+      if (node.gzip > 20000) return 'rgba(96,165,250,0.4)';
+      return 'rgba(74,222,128,0.4)';
+    }
+
+    // Simple squarified treemap layout
+    function squarify(items, x, y, w, h) {
+      const total = items.reduce((s, i) => s + i.value, 0);
+      if (total === 0 || items.length === 0) return [];
+
+      const sorted = [...items].sort((a, b) => b.value - a.value);
+      const result = [];
+      let cx = x, cy = y, cw = w, ch = h;
+
+      for (const item of sorted) {
+        const ratio = item.value / total;
+        const isWide = cw >= ch;
+
+        let nw, nh;
+        if (isWide) {
+          nw = cw * ratio;
+          nh = ch;
+          result.push({ ...item, x: cx, y: cy, w: Math.max(nw - 2, 0), h: Math.max(nh - 2, 0) });
+          cx += nw;
+          cw -= nw;
+        } else {
+          nw = cw;
+          nh = ch * ratio;
+          result.push({ ...item, x: cx, y: cy, w: Math.max(nw - 2, 0), h: Math.max(nh - 2, 0) });
+          cy += nh;
+          ch -= nh;
+        }
+      }
+
+      return result;
+    }
+
+    // ─── Sorting ───────────────────────────────────────────────
+    function getSortedIslands() {
+      const islands = [...(report.islands || [])];
+      islands.sort((a, b) => {
+        let va, vb;
+        switch (sortColumn) {
+          case 'name': va = a.component.name; vb = b.component.name; break;
+          case 'directive': va = a.component.directive; vb = b.component.directive; break;
+          case 'framework': va = a.component.uiFramework; vb = b.component.uiFramework; break;
+          case 'gzip': va = a.bundle.totalGzipSize; vb = b.bundle.totalGzipSize; break;
+          case 'brotli': va = a.bundle.totalBrotliSize; vb = b.bundle.totalBrotliSize; break;
+          case 'issues': va = a.issues.length; vb = b.issues.length; break;
+          default: va = a.bundle.totalGzipSize; vb = b.bundle.totalGzipSize;
+        }
+        if (typeof va === 'string') return sortAsc ? va.localeCompare(vb) : vb.localeCompare(va);
+        return sortAsc ? va - vb : vb - va;
+      });
+      return islands;
+    }
+
+    function attachSortHandlers() {
+      document.querySelectorAll('th[data-sort]').forEach(th => {
+        th.addEventListener('click', () => {
+          const col = th.dataset.sort;
+          if (sortColumn === col) { sortAsc = !sortAsc; }
+          else { sortColumn = col; sortAsc = false; }
+          render();
+        });
+      });
+    }
+
+    // ─── Helpers ───────────────────────────────────────────────
+    function getAllIssues() {
+      if (!report) return [];
+      return [
+        ...(report.islands || []).flatMap(i => i.issues),
+        ...(report.pages || []).flatMap(p => p.issues),
+        ...(report.issues || []),
+      ];
+    }
+
+    function formatBytes(bytes) {
+      if (!bytes || bytes === 0) return '0 B';
+      if (bytes < 1024) return bytes + ' B';
+      const kb = bytes / 1024;
+      if (kb < 1024) return kb.toFixed(1) + ' KB';
+      return (kb / 1024).toFixed(2) + ' MB';
+    }
+
+    // ─── Init ──────────────────────────────────────────────────
+    loadReport();
+    connectWS();
+    window.addEventListener('resize', () => { if (report) renderTreemap(); });
+  </script>
+</body>
+</html>

package/dist/index.mjs

@@ -2,6 +2,7 @@
 import http from "http";
 import fs from "fs";
 import path from "path";
+import { fileURLToPath } from "url";
 import { WebSocketServer } from "ws";
 var MIME_TYPES = {
   ".html": "text/html",
@@ -19,10 +20,8 @@ async function startDashboard(reportPath, port = 4173) {
   } catch {
     console.warn(`Could not read report at ${absoluteReportPath}`);
   }
-  const staticDir = path.resolve(
-    path.dirname(new URL(import.meta.url).pathname),
-    "app"
-  );
+  const currentDir = path.dirname(fileURLToPath(import.meta.url));
+  const staticDir = fs.existsSync(path.join(currentDir, "app")) ? path.join(currentDir, "app") : currentDir;
   const server = http.createServer((req, res) => {
     const url = req.url ?? "/";
     if (url === "/api/report") {

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/server.ts"],"sourcesContent":["import http from 'node:http';\nimport fs from 'node:fs';\nimport path from 'node:path';\nimport { WebSocketServer } from 'ws';\nimport type { AnalysisReport } from '@hydration-audit/core';\n\nconst MIME_TYPES: Record<string, string> = {\n  '.html': 'text/html',\n  '.js': 'application/javascript',\n  '.css': 'text/css',\n  '.json': 'application/json',\n  '.svg': 'image/svg+xml',\n};\n\n/**\n * Start the dashboard server.\n * Serves a static SPA and provides a WebSocket for live report updates.\n */\nexport async function startDashboard(\n  reportPath: string,\n  port = 4173,\n): Promise<{ url: string; close: () => void }> {\n  const absoluteReportPath = path.resolve(reportPath);\n\n  // Read the initial report\n  let currentReport: AnalysisReport | null = null;\n  try {\n    const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n    currentReport = JSON.parse(content);\n  } catch {\n    console.warn(`Could not read report at ${absoluteReportPath}`);\n  }\n\n  const staticDir = path.resolve(\n    path.dirname(new URL(import.meta.url).pathname),\n    'app',\n  );\n\n  const server = http.createServer((req, res) => {\n    const url = req.url ?? '/';\n\n    // API endpoint for report data\n    if (url === '/api/report') {\n      res.writeHead(200, { 'Content-Type': 'application/json' });\n      res.end(JSON.stringify(currentReport ?? { error: 'No report loaded' }));\n      return;\n    }\n\n    // Serve static files\n    let filePath = path.join(staticDir, url === '/' ? 'index.html' : url);\n    const ext = path.extname(filePath);\n\n    // SPA fallback — serve index.html for non-file routes\n    if (!ext) {\n      filePath = path.join(staticDir, 'index.html');\n    }\n\n    try {\n      const content = fs.readFileSync(filePath);\n      const mime = MIME_TYPES[path.extname(filePath)] ?? 'text/plain';\n      res.writeHead(200, { 'Content-Type': mime });\n      res.end(content);\n    } catch {\n      res.writeHead(404);\n      res.end('Not found');\n    }\n  });\n\n  // WebSocket for live reload\n  const wss = new WebSocketServer({ server });\n\n  // Watch report file for changes\n  let watcher: fs.FSWatcher | null = null;\n  try {\n    watcher = fs.watch(absoluteReportPath, () => {\n      try {\n        const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n        currentReport = JSON.parse(content);\n        // Notify all connected clients\n        for (const client of wss.clients) {\n          if (client.readyState === 1) {\n            client.send(JSON.stringify({ type: 'update', report: currentReport }));\n          }\n        }\n      } catch {\n        // Ignore parse errors during write\n      }\n    });\n  } catch {\n    console.warn('Could not watch report file for changes');\n  }\n\n  return new Promise((resolve) => {\n    server.listen(port, () => {\n      const url = `http://localhost:${port}`;\n      console.log(`\\n  Dashboard running at ${url}\\n`);\n      resolve({\n        url,\n        close: () => {\n          watcher?.close();\n          wss.close();\n          server.close();\n        },\n      });\n    });\n  });\n}\n"],"mappings":";AAAA,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,SAAS,uBAAuB;AAGhC,IAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AACV;AAMA,eAAsB,eACpB,YACA,OAAO,MACsC;AAC7C,QAAM,qBAAqB,KAAK,QAAQ,UAAU;AAGlD,MAAI,gBAAuC;AAC3C,MAAI;AACF,UAAM,UAAU,GAAG,aAAa,oBAAoB,OAAO;AAC3D,oBAAgB,KAAK,MAAM,OAAO;AAAA,EACpC,QAAQ;AACN,YAAQ,KAAK,4BAA4B,kBAAkB,EAAE;AAAA,EAC/D;AAEA,QAAM,YAAY,KAAK;AAAA,IACrB,KAAK,QAAQ,IAAI,IAAI,YAAY,GAAG,EAAE,QAAQ;AAAA,IAC9C;AAAA,EACF;AAEA,QAAM,SAAS,KAAK,aAAa,CAAC,KAAK,QAAQ;AAC7C,UAAM,MAAM,IAAI,OAAO;AAGvB,QAAI,QAAQ,eAAe;AACzB,UAAI,UAAU,KAAK,EAAE,gBAAgB,mBAAmB,CAAC;AACzD,UAAI,IAAI,KAAK,UAAU,iBAAiB,EAAE,OAAO,mBAAmB,CAAC,CAAC;AACtE;AAAA,IACF;AAGA,QAAI,WAAW,KAAK,KAAK,WAAW,QAAQ,MAAM,eAAe,GAAG;AACpE,UAAM,MAAM,KAAK,QAAQ,QAAQ;AAGjC,QAAI,CAAC,KAAK;AACR,iBAAW,KAAK,KAAK,WAAW,YAAY;AAAA,IAC9C;AAEA,QAAI;AACF,YAAM,UAAU,GAAG,aAAa,QAAQ;AACxC,YAAM,OAAO,WAAW,KAAK,QAAQ,QAAQ,CAAC,KAAK;AACnD,UAAI,UAAU,KAAK,EAAE,gBAAgB,KAAK,CAAC;AAC3C,UAAI,IAAI,OAAO;AAAA,IACjB,QAAQ;AACN,UAAI,UAAU,GAAG;AACjB,UAAI,IAAI,WAAW;AAAA,IACrB;AAAA,EACF,CAAC;AAGD,QAAM,MAAM,IAAI,gBAAgB,EAAE,OAAO,CAAC;AAG1C,MAAI,UAA+B;AACnC,MAAI;AACF,cAAU,GAAG,MAAM,oBAAoB,MAAM;AAC3C,UAAI;AACF,cAAM,UAAU,GAAG,aAAa,oBAAoB,OAAO;AAC3D,wBAAgB,KAAK,MAAM,OAAO;AAElC,mBAAW,UAAU,IAAI,SAAS;AAChC,cAAI,OAAO,eAAe,GAAG;AAC3B,mBAAO,KAAK,KAAK,UAAU,EAAE,MAAM,UAAU,QAAQ,cAAc,CAAC,CAAC;AAAA,UACvE;AAAA,QACF;AAAA,MACF,QAAQ;AAAA,MAER;AAAA,IACF,CAAC;AAAA,EACH,QAAQ;AACN,YAAQ,KAAK,yCAAyC;AAAA,EACxD;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,WAAO,OAAO,MAAM,MAAM;AACxB,YAAM,MAAM,oBAAoB,IAAI;AACpC,cAAQ,IAAI;AAAA,yBAA4B,GAAG;AAAA,CAAI;AAC/C,cAAQ;AAAA,QACN;AAAA,QACA,OAAO,MAAM;AACX,mBAAS,MAAM;AACf,cAAI,MAAM;AACV,iBAAO,MAAM;AAAA,QACf;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../src/server.ts"],"sourcesContent":["import http from 'node:http';\nimport fs from 'node:fs';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport { WebSocketServer } from 'ws';\nimport type { AnalysisReport } from '@hydration-audit/core';\n\nconst MIME_TYPES: Record<string, string> = {\n  '.html': 'text/html',\n  '.js': 'application/javascript',\n  '.css': 'text/css',\n  '.json': 'application/json',\n  '.svg': 'image/svg+xml',\n};\n\n/**\n * Start the dashboard server.\n * Serves a static SPA and provides a WebSocket for live report updates.\n */\nexport async function startDashboard(\n  reportPath: string,\n  port = 4173,\n): Promise<{ url: string; close: () => void }> {\n  const absoluteReportPath = path.resolve(reportPath);\n\n  // Read the initial report\n  let currentReport: AnalysisReport | null = null;\n  try {\n    const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n    currentReport = JSON.parse(content);\n  } catch {\n    console.warn(`Could not read report at ${absoluteReportPath}`);\n  }\n\n  const currentDir = path.dirname(fileURLToPath(import.meta.url));\n  const staticDir = fs.existsSync(path.join(currentDir, 'app'))\n    ? path.join(currentDir, 'app')\n    : currentDir;\n\n  const server = http.createServer((req, res) => {\n    const url = req.url ?? '/';\n\n    // API endpoint for report data\n    if (url === '/api/report') {\n      res.writeHead(200, { 'Content-Type': 'application/json' });\n      res.end(JSON.stringify(currentReport ?? { error: 'No report loaded' }));\n      return;\n    }\n\n    // Serve static files\n    let filePath = path.join(staticDir, url === '/' ? 'index.html' : url);\n    const ext = path.extname(filePath);\n\n    // SPA fallback — serve index.html for non-file routes\n    if (!ext) {\n      filePath = path.join(staticDir, 'index.html');\n    }\n\n    try {\n      const content = fs.readFileSync(filePath);\n      const mime = MIME_TYPES[path.extname(filePath)] ?? 'text/plain';\n      res.writeHead(200, { 'Content-Type': mime });\n      res.end(content);\n    } catch {\n      res.writeHead(404);\n      res.end('Not found');\n    }\n  });\n\n  // WebSocket for live reload\n  const wss = new WebSocketServer({ server });\n\n  // Watch report file for changes\n  let watcher: fs.FSWatcher | null = null;\n  try {\n    watcher = fs.watch(absoluteReportPath, () => {\n      try {\n        const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n        currentReport = JSON.parse(content);\n        // Notify all connected clients\n        for (const client of wss.clients) {\n          if (client.readyState === 1) {\n            client.send(JSON.stringify({ type: 'update', report: currentReport }));\n          }\n        }\n      } catch {\n        // Ignore parse errors during write\n      }\n    });\n  } catch {\n    console.warn('Could not watch report file for changes');\n  }\n\n  return new Promise((resolve) => {\n    server.listen(port, () => {\n      const url = `http://localhost:${port}`;\n      console.log(`\\n  Dashboard running at ${url}\\n`);\n      resolve({\n        url,\n        close: () => {\n          watcher?.close();\n          wss.close();\n          server.close();\n        },\n      });\n    });\n  });\n}\n"],"mappings":";AAAA,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAGhC,IAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AACV;AAMA,eAAsB,eACpB,YACA,OAAO,MACsC;AAC7C,QAAM,qBAAqB,KAAK,QAAQ,UAAU;AAGlD,MAAI,gBAAuC;AAC3C,MAAI;AACF,UAAM,UAAU,GAAG,aAAa,oBAAoB,OAAO;AAC3D,oBAAgB,KAAK,MAAM,OAAO;AAAA,EACpC,QAAQ;AACN,YAAQ,KAAK,4BAA4B,kBAAkB,EAAE;AAAA,EAC/D;AAEA,QAAM,aAAa,KAAK,QAAQ,cAAc,YAAY,GAAG,CAAC;AAC9D,QAAM,YAAY,GAAG,WAAW,KAAK,KAAK,YAAY,KAAK,CAAC,IACxD,KAAK,KAAK,YAAY,KAAK,IAC3B;AAEJ,QAAM,SAAS,KAAK,aAAa,CAAC,KAAK,QAAQ;AAC7C,UAAM,MAAM,IAAI,OAAO;AAGvB,QAAI,QAAQ,eAAe;AACzB,UAAI,UAAU,KAAK,EAAE,gBAAgB,mBAAmB,CAAC;AACzD,UAAI,IAAI,KAAK,UAAU,iBAAiB,EAAE,OAAO,mBAAmB,CAAC,CAAC;AACtE;AAAA,IACF;AAGA,QAAI,WAAW,KAAK,KAAK,WAAW,QAAQ,MAAM,eAAe,GAAG;AACpE,UAAM,MAAM,KAAK,QAAQ,QAAQ;AAGjC,QAAI,CAAC,KAAK;AACR,iBAAW,KAAK,KAAK,WAAW,YAAY;AAAA,IAC9C;AAEA,QAAI;AACF,YAAM,UAAU,GAAG,aAAa,QAAQ;AACxC,YAAM,OAAO,WAAW,KAAK,QAAQ,QAAQ,CAAC,KAAK;AACnD,UAAI,UAAU,KAAK,EAAE,gBAAgB,KAAK,CAAC;AAC3C,UAAI,IAAI,OAAO;AAAA,IACjB,QAAQ;AACN,UAAI,UAAU,GAAG;AACjB,UAAI,IAAI,WAAW;AAAA,IACrB;AAAA,EACF,CAAC;AAGD,QAAM,MAAM,IAAI,gBAAgB,EAAE,OAAO,CAAC;AAG1C,MAAI,UAA+B;AACnC,MAAI;AACF,cAAU,GAAG,MAAM,oBAAoB,MAAM;AAC3C,UAAI;AACF,cAAM,UAAU,GAAG,aAAa,oBAAoB,OAAO;AAC3D,wBAAgB,KAAK,MAAM,OAAO;AAElC,mBAAW,UAAU,IAAI,SAAS;AAChC,cAAI,OAAO,eAAe,GAAG;AAC3B,mBAAO,KAAK,KAAK,UAAU,EAAE,MAAM,UAAU,QAAQ,cAAc,CAAC,CAAC;AAAA,UACvE;AAAA,QACF;AAAA,MACF,QAAQ;AAAA,MAER;AAAA,IACF,CAAC;AAAA,EACH,QAAQ;AACN,YAAQ,KAAK,yCAAyC;AAAA,EACxD;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,WAAO,OAAO,MAAM,MAAM;AACxB,YAAM,MAAM,oBAAoB,IAAI;AACpC,cAAQ,IAAI;AAAA,yBAA4B,GAAG;AAAA,CAAI;AAC/C,cAAQ;AAAA,QACN;AAAA,QACA,OAAO,MAAM;AACX,mBAAS,MAAM;AACf,cAAI,MAAM;AACV,iBAAO,MAAM;AAAA,QACf;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydration-audit/dashboard",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Web dashboard for visualizing JavaScript hydration costs",
   "type": "module",
   "exports": {
@@ -21,7 +21,7 @@
     "preact": "^10.24.0",
     "d3-hierarchy": "^3.1.2",
     "ws": "^8.18.0",
-    "@hydration-audit/core": "0.2.1"
+    "@hydration-audit/core": "0.2.2"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.9.0",