uisnap 0.1.0

package/examples/scroll-perf-trace.js

@@ -0,0 +1,43 @@
+// Capture Chrome DevTools Performance trace (not Playwright trace)
+// This captures actual browser performance: paint, layout, JS execution
+// Usage: node dist/pw.js exec examples/scroll-perf-trace.js http://localhost:4321
+
+// Get CDP session
+const cdp = await context.newCDPSession(page);
+
+// Start Chrome tracing
+console.log('Starting Chrome performance trace...');
+await utils.startChromeTrace(cdp);
+
+// Navigate to Part 2
+await page.goto('http://localhost:4321');
+await page.getByRole('link', { name: /part 2/i }).click();
+await page.waitForLoadState('networkidle');
+
+console.log('Page loaded, scrolling through sections...');
+
+// Scroll down through sections
+await page.evaluate(() => window.scrollTo({ top: 500, behavior: 'smooth' }));
+await page.waitForTimeout(500);
+
+await page.evaluate(() => window.scrollTo({ top: 1000, behavior: 'smooth' }));
+await page.waitForTimeout(500);
+
+await page.evaluate(() => window.scrollTo({ top: 2000, behavior: 'smooth' }));
+await page.waitForTimeout(500);
+
+await page.evaluate(() => window.scrollTo({ top: 3000, behavior: 'smooth' }));
+await page.waitForTimeout(500);
+
+console.log('Stopping trace and importing to database...');
+
+// Stop tracing and auto-import to DuckDB
+const tracePath = path.join(utils.baseOutputDir, 'chrome-trace.json');
+const dbPath = await utils.stopChromeTraceAndImport(cdp, tracePath);
+
+console.log('\n✓ Chrome trace analysis complete!');
+console.log('\nAnalyze with canned queries:');
+console.log(`  chrome-trace-analyze ${dbPath}`);
+console.log(`  chrome-trace-analyze ${dbPath} --long-tasks`);
+console.log(`  chrome-trace-analyze ${dbPath} --js-time`);
+console.log(`  chrome-trace-analyze ${dbPath} --full`);

package/examples/simple-capture.js

@@ -0,0 +1,28 @@
+// Example: Simple custom data extraction
+//
+// Usage: pw-debug exec examples/simple-capture.js https://example.com
+//
+// This demonstrates basic data extraction without multi-step capture
+
+await page.goto(args[0] || 'https://example.com');
+
+// Extract custom data
+const data = await page.evaluate(() => {
+  return {
+    title: document.title,
+    links: Array.from(document.links).map(link => ({
+      text: link.textContent?.trim(),
+      href: link.href,
+    })),
+    headings: Array.from(document.querySelectorAll('h1, h2, h3')).map(h => ({
+      level: h.tagName,
+      text: h.textContent?.trim(),
+    })),
+  };
+});
+
+// Write to disk
+utils.writeJson('page-data.json', data);
+
+console.log(`Extracted ${data.links.length} links and ${data.headings.length} headings`);
+console.log('Data saved to page-data.json');

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "uisnap",
+  "version": "0.1.0",
+  "description": "UI snapshot debugging for frontend development. Capture browser state to disk once, query efficiently many times.",
+  "author": "Tony Chu",
+  "license": "MIT",
+  "keywords": [
+    "uisnap",
+    "snapshot",
+    "capture",
+    "debugging",
+    "frontend",
+    "ui",
+    "playwright",
+    "browser",
+    "claude-code"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tonyhschu/uisnap.git"
+  },
+  "bugs": {
+    "url": "https://github.com/tonyhschu/uisnap/issues"
+  },
+  "homepage": "https://github.com/tonyhschu/uisnap#readme",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "uisnap": "dist/pw.js",
+    "uisnap-diagnose": "dist/diagnose.js",
+    "uisnap-analyze-console": "dist/analyze-console.js",
+    "uisnap-analyze-network": "dist/analyze-network.js",
+    "uisnap-query-a11y": "dist/query-a11y.js",
+    "uisnap-trace-import": "dist/trace-import.js",
+    "uisnap-chrome-trace-import": "dist/chrome-trace-import.js",
+    "uisnap-chrome-trace-analyze": "dist/chrome-trace-analyze.js"
+  },
+  "files": [
+    "dist",
+    "examples",
+    ".claude",
+    "README.md",
+    "CHANGELOG.md",
+    "SKILL-INSTALLATION.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "prepublishOnly": "npm run clean && npm run build",
+    "dev": "npm run build && node dist/pw.js",
+    "postinstall": "echo '\n✓ uisnap installed!\n\nNext step: Install Chromium browser:\n  npx playwright install chromium\n\nThen try:\n  uisnap snapshot https://example.com\n'"
+  },
+  "dependencies": {
+    "adm-zip": "^0.5.16",
+    "duckdb-async": "^1.4.2",
+    "playwright": "^1.49.0",
+    "yaml": "^2.6.1"
+  },
+  "devDependencies": {
+    "@types/adm-zip": "^0.5.7",
+    "@types/node": "^22.10.2",
+    "@vitest/ui": "^4.0.16",
+    "typescript": "^5.7.2",
+    "vitest": "^4.0.16"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}