Implement Python → LLVM IR → WASM reactive framework

MAJOR ACHIEVEMENT: Full working reactive framework!

## What's Working

✅ Python → AST → Ritz IR → LLVM IR → WASM pipeline
✅ Reactive signals stored in WASM memory (@signal_name = global i32)
✅ Event handlers exported from WASM and callable from JS
✅ Clean runtime with RitzLoader and debug tools
✅ Two working examples: HelloWorld and HighFive counter

## Core Components

### Parser (ritz/parser.py)
- Uses Python's ast module to parse components
- Handles @component decorator, signals, event handlers
- Supports yield, with statements, f-strings, augmented assignment (+=)
- Clean syntax: from ritz.syntax import *

### LLVM IR Code Generator (ritz/llvm_codegen_signals.py)
- Generates LLVM IR directly (not C!)
- Signals as global variables in WASM memory
- Exports getter/setter functions for each signal
- Exports event handler functions for JS to call
- UTF-8 string handling

### Build System (ritz/build.py)
- Python → AST → IR → LLVM IR → clang --target=wasm32 → WASM
- Saves intermediate .ll files for inspection
- Debug symbols support (-g flag)

### Runtime (runtime/ritz-runtime.js)
- RitzRuntime class: DOM bridge for WASM
- RitzLoader class: Simplified component loading
- Debug bar with Ctrl+` toggle
- Signal updates trigger DOM updates

## Examples

### HelloWorld.py
Simple static content - renders <p>Hello World</p>

### HighFive.py
Reactive counter with:
- Signal in WASM memory (high_fives = signal(0))
- Event handler (increment function)
- DOM updates on signal change

## Test Coverage

- 4 parser tests (all passing)
- 4 LLVM codegen tests (all passing)
- 4 signal parsing tests (all passing)
- Code formatted with black and ruff

## Next Steps

- <script type="text/ritz"> in-browser compilation
- Better signal-to-DOM binding tracking
- More complex examples (TodoMVC, forms, lists)
- Playwright browser tests

---

This is a genuinely innovative framework: write Python, compile to WASM,
run with reactive signals in WASM memory. No virtual DOM, no transpilation,
just compiled Python with fine-grained reactivity.

🎉 Python → WASM → Reactive UI is REAL!

examples/index.html

@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ritz HelloWorld - Python → WASM</title>
+    <style>
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            max-width: 800px;
+            margin: 50px auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .header {
+            border-bottom: 2px solid #333;
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+        }
+        .status {
+            margin: 10px 0;
+            padding: 10px;
+            background: #e8f4f8;
+            border-left: 4px solid #0066cc;
+            border-radius: 4px;
+            font-family: monospace;
+            font-size: 13px;
+        }
+        .error {
+            background: #fee;
+            border-left-color: #c00;
+            color: #c00;
+        }
+        .success {
+            background: #efe;
+            border-left-color: #0a0;
+            color: #060;
+        }
+        #app {
+            background: white;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            min-height: 100px;
+        }
+        .pipeline {
+            margin: 20px 0;
+            font-family: monospace;
+            font-size: 12px;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>🎭 Ritz Framework</h1>
+        <p><strong>Python → LLVM IR → WebAssembly</strong></p>
+        <div class="pipeline">
+HelloWorld.py → ast.parse() → Ritz IR → LLVM IR → clang → WASM
+        </div>
+    </div>
+
+    <div class="status" id="status">⏳ Initializing...</div>
+
+    <div id="app"></div>
+
+    <script>
+        // Ritz Runtime - provides DOM bridge for WASM
+        class RitzRuntime {
+            constructor(rootElement) {
+                this.rootElement = rootElement;
+                this.nodes = new Map();
+                this.nextNodeId = 1;
+                this.log = [];
+            }
+
+            js_create_element(tagPtr) {
+                const tag = this.readString(tagPtr);
+                const element = document.createElement(tag);
+                const id = this.nextNodeId++;
+                this.nodes.set(id, element);
+                this.log.push(`createElement("${tag}") = ${id}`);
+                return id;
+            }
+
+            js_create_text(textPtr) {
+                const text = this.readString(textPtr);
+                const textNode = document.createTextNode(text);
+                const id = this.nextNodeId++;
+                this.nodes.set(id, textNode);
+                this.log.push(`createTextNode("${text}") = ${id}`);
+                return id;
+            }
+
+            js_append_child(parentId, childId) {
+                const parent = this.nodes.get(parentId);
+                const child = this.nodes.get(childId);
+                if (parent && child) {
+                    parent.appendChild(child);
+                    this.log.push(`appendChild(${parentId}, ${childId})`);
+                }
+            }
+
+            js_set_attribute(elemId, namePtr, valuePtr) {
+                const element = this.nodes.get(elemId);
+                const name = this.readString(namePtr);
+                const value = this.readString(valuePtr);
+                if (element) {
+                    if (name === 'class') {
+                        element.className = value;
+                    } else {
+                        element.setAttribute(name, value);
+                    }
+                    this.log.push(`setAttribute(${elemId}, "${name}", "${value}")`);
+                }
+            }
+
+            js_set_root(elemId) {
+                const element = this.nodes.get(elemId);
+                if (element) {
+                    this.rootElement.innerHTML = '';
+                    this.rootElement.appendChild(element);
+                    this.log.push(`setRoot(${elemId})`);
+                }
+            }
+
+            readString(ptr) {
+                if (!this.memory) return '';
+                const bytes = new Uint8Array(this.memory.buffer, ptr);
+                let length = 0;
+                while (bytes[length] !== 0) length++;
+                return new TextDecoder().decode(bytes.slice(0, length));
+            }
+
+            setMemory(memory) {
+                this.memory = memory;
+            }
+
+            getLog() {
+                return this.log;
+            }
+        }
+
+        // Global runtime for debugging
+        let runtime = null;
+        let wasmInstance = null;
+
+        // Load and run WASM
+        async function main() {
+            const status = document.getElementById('status');
+            const appRoot = document.getElementById('app');
+
+            try {
+                status.textContent = '⏳ Creating runtime...';
+                runtime = new RitzRuntime(appRoot);
+
+                status.textContent = '⏳ Loading HelloWorld.wasm...';
+                const response = await fetch('HelloWorld.wasm');
+                if (!response.ok) {
+                    throw new Error(`Failed to load WASM: ${response.status}`);
+                }
+
+                const wasmBytes = await response.arrayBuffer();
+
+                status.textContent = '⏳ Instantiating WASM module...';
+
+                // Create imports for WASM
+                const imports = {
+                    env: {
+                        js_create_element: (ptr) => runtime.js_create_element(ptr),
+                        js_create_text: (ptr) => runtime.js_create_text(ptr),
+                        js_append_child: (p, c) => runtime.js_append_child(p, c),
+                        js_set_attribute: (e, n, v) => runtime.js_set_attribute(e, n, v),
+                        js_set_root: (e) => runtime.js_set_root(e),
+                    }
+                };
+
+                const { instance } = await WebAssembly.instantiate(wasmBytes, imports);
+                wasmInstance = instance; // Store globally for debugging
+
+                // Give runtime access to WASM memory
+                runtime.setMemory(instance.exports.memory);
+
+                status.textContent = '⏳ Rendering component...';
+
+                // Call the render function
+                instance.exports.render_HelloWorld();
+
+                status.textContent = '✅ HelloWorld rendered successfully!';
+                status.className = 'status success';
+
+                // Log the operations
+                console.log('Runtime operations:', runtime.getLog());
+                console.log('🎉 WASM successfully loaded and executed!');
+                console.log('Debug commands:');
+                console.log('  runtime.getLog() - View DOM operations');
+                console.log('  wasmInstance.exports - View WASM exports');
+                console.log('  wasmInstance.exports.render_HelloWorld() - Re-render');
+
+            } catch (error) {
+                status.textContent = `❌ Error: ${error.message}`;
+                status.className = 'status error';
+                console.error('Error:', error);
+            }
+        }
+
+        // Run when page loads
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', main);
+        } else {
+            main();
+        }
+    </script>
+</body>
+</html>