Implement package loading in playground website

docs/CLAUDE.md

@@ -0,0 +1,80 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Overview
+
+This is the interactive documentation site for purescript-analyzer. It provides a browser-based playground for exploring PureScript type checking, CST parsing, and package loading via a WASM-compiled version of the compiler core.
+
+## Commands
+
+```bash
+# Install dependencies
+pnpm install
+
+# Development (builds WASM + starts Vite dev server with HMR)
+pnpm dev
+
+# Production build (optimized WASM + minified JS)
+pnpm build
+
+# Type checking
+pnpm typecheck
+
+# Format code
+pnpm format
+
+# Preview production build
+pnpm preview
+```
+
+## Architecture
+
+```
+User Input (MonacoEditor)
+    ↓
+App.tsx (state management)
+    ↓
+useDocsLib hook (Comlink worker proxy)
+    ↓
+worker/docs-lib.ts (Web Worker, isolated thread)
+    ↓
+WASM engine (src/wasm/src/lib.rs)
+    ↓
+Compiler Core crates (../compiler-core/*)
+    ↓
+Results → Panel components
+```
+
+**Key architectural decisions:**
+
+- **Thread isolation**: All compiler operations run in a Web Worker via Comlink, preventing UI blocking
+- **WASM integration**: The `src/wasm/` crate compiles to WebAssembly and exposes `parse()`, `check()`, `register_module()`, and `clear_packages()` functions
+- **Package system**: Fetches from `packages.registry.purescript.org`, decompresses tar.gz with pako, caches in localStorage, resolves transitive dependencies topologically
+
+## Key Directories
+
+- `src/components/` - React UI components including Monaco editor integration
+- `src/components/Editor/purescript.ts` - PureScript language registration for Monaco
+- `src/hooks/` - Custom hooks (`useDocsLib` for WASM worker, `useDebounce`)
+- `src/lib/packages/` - Package fetching, caching, and dependency resolution
+- `src/worker/` - Comlink-exposed Web Worker that loads WASM
+- `src/wasm/` - Rust crate that compiles to WASM, links all compiler-core crates
+
+## Stack
+
+- React 18 + TypeScript + Vite
+- Tailwind CSS 4 with Catppuccin theme (Macchiato dark, Latte light)
+- Monaco Editor for code editing
+- Comlink for type-safe worker communication
+- wasm-pack for WASM compilation
+
+## WASM Crate
+
+The `src/wasm/` directory contains a Rust crate that:
+- Links to 13 compiler-core crates via relative paths
+- Exposes functions via `wasm-bindgen`
+- Uses `serde-wasm-bindgen` for JS interop
+- Tracks performance timing via `web-sys::Performance`
+
+Rebuild WASM manually: `cd src/wasm && wasm-pack build --target web`

docs/package.json

@@ -17,18 +17,25 @@
     "@fontsource/manrope": "^5.2.8",
     "comlink": "^4.4.2",
     "monaco-editor": "^0.52.0",
+    "pako": "^2.1.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "wouter": "^3.9.0"
   },
   "devDependencies": {
+    "@iconify-json/ri": "^1.2.7",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
     "@tailwindcss/vite": "^4.1.0",
+    "@types/pako": "^2.0.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "docs-lib": "workspace:*",
     "prettier": "^3.7.4",
     "tailwindcss": "^4.1.0",
     "typescript": "^5.9.2",
+    "unplugin-icons": "^22.5.0",
     "vite": "^5.4.19"
   },
   "packageManager": "[email protected]+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"