😴 Snorlax — Automated UI Blueprint & Visual Flow Engine

Snorlax is an autonomous web application crawler, visual blueprint engine, and flow graph generator. It automatically explores web applications, traverses navigation hierarchies, executes exhaustive button-click loops, captures full-page scrollable screenshots, and renders an interactive, expanded tree graph canvas with non-overlapping action connectors and direct export gateways to Figma and Google Stitch.

---

✨ Key Features

• 🌐 Universal Framework Compatibility: Works seamlessly across React, Next.js, Vue, Angular, Svelte, static HTML, WordPress, Shopify, Bootstrap, Tailwind, and custom Web Components.
• 🎨 Sleek Dark Mode UI Canvas: Modern slate aesthetics (#070a11), dot pattern background, color-coded depth badges (L0 Emerald, L1 Cyan, L2 Purple), full-page screenshot previews, and monospace URL footers.
• 🌳 Expanded Multi-Row Tree Layout: Automatically wraps large level node sets into structured 5-column grid rows, preventing horizontal canvas stretching.
• 🔀 Distributed Connector Ports: Dynamically calculates non-overlapping anchor positions for every edge line, ensuring arrow connectors never stack or overlap.
• 🚀 Direct Export Gateway:
  • ❖ Export to Figma: Export full blueprint node schemas and screen frames directly to Figma.
  • ✦ Export to Google Stitch: Export visual UI graph flows for Google Stitch integration.
  • ⬇ Download Graph: Export raw blueprint JSON graph schemas for offline analysis.
• 🛡️ Crash Prevention & Hyper-Fast Crawling: Built-in Playwright sandbox security flags, safe DOM link extractions, dropdown expansion, and exception handling.
• 📱 Full-Page Height Screenshots: Captures the entire scrollable height of every page without clipping.

---

🚀 Quick Start Guide

Option 1: Using Snorlax CLI (Recommended & Universal)

1. Navigate to Crawler Package & Run CLI:

cd packages/crawler
npx tsx src/cli.ts --url <WEBSITE_URL> --out <OUTPUT_DIR>

2. Command Examples

• Local Dev Server (Vite / React / Next.js / Vue / Angular / Static HTML):

  cd packages/crawler
  npx tsx src/cli.ts --url http://localhost:5173 --out .snorlax-output

• Public Live Website:

  cd packages/crawler
  npx tsx src/cli.ts --url https://example.com --out .snorlax-output

• Protected / Authenticated Routes (e.g. /admin):

  cd packages/crawler
  npx tsx src/cli.ts --url http://localhost:3000 --out .snorlax-output --routes "/admin:admin@example.com:secret123"

---

Option 2: Using the VS Code Extension

1. Open the project folder in VS Code (d:\DEV\projects\snorlax).
2. Press F5 to launch the Extension Development Host window.
3. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run:

   Snorlax: Start UI Blueprint Discovery
   

4. Target URL: Input your application URL (or leave blank to auto-detect active dev servers).
5. Click Start Discovery to render the interactive blueprint canvas.

---

📁 Generated Blueprint Output

After exploration completes, the output folder (e.g. .snorlax-output) automatically contains:

• 🌐 Interactive Graph Interface (index.html): Open directly in any browser! Features draggable cards, non-overlapping connector lines, zoom, pan, export toolbar, and full-resolution screenshot popups.
• 📷 Full-Page PNG Screenshots: home.png, _menu.png, _about.png, _events.png, etc.
• 📄 Blueprint Graph Data (blueprint-data.json): Contains complete node hierarchy, depth levels, parent state IDs, and directed action edges.

---

🏗️ Repository Architecture

snorlax/
├── packages/
│   ├── crawler/           # Core Playwright exploration engine & CLI (src/cli.ts)
│   ├── vscode-extension/  # VS Code extension & Webview canvas engine (src/extension.ts)
│   └── viewer-ui/         # Modern React Flow standalone canvas viewer (src/App.tsx)
├── package.json           # Root workspace configuration
└── README.md              # Project documentation

---

🛠️ Building & Verifying

To compile each package cleanly with TypeScript:

# Build Crawler package
cd packages/crawler && npx tsc

# Build VS Code Extension package
cd packages/vscode-extension && npx tsc

# Build Canvas Viewer UI package
cd packages/viewer-ui && npm run build