From 999327172e3ab96cd46e83f302459eb75461e230 Mon Sep 17 00:00:00 2001
From: Aaron Sinclair <aaron.sinclair@bettercomp.com>
Date: Sat, 15 Nov 2025 15:16:06 -0800
Subject: [PATCH] Reorganize HighFive example into highfive/ subdirectory
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Structure Before:**
examples/
  ├── HighFive.py, HighFive.html, HighFive.wasm, HighFive.ll (loose files)
  ├── highfive.html (old duplicate)
  ├── tabs/Tabs.*
  └── textinput/TextInput.*

**Structure After:**
examples/
  ├── highfive/HighFive.*
  ├── tabs/Tabs.*
  └── textinput/TextInput.*

**Changes:**
- Moved all HighFive.* files to examples/highfive/ subdirectory
- Updated paths in HighFive.html: runtime/ → ../runtime/
- Removed old duplicate highfive.html file
- Now consistent with tabs/ and textinput/ structure

**Testing:**
Access via: http://localhost:8111/highfive/HighFive.html

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 examples/highfive.html                | 314 --------------------------
 examples/{ => highfive}/HighFive.html |   6 +-
 examples/{ => highfive}/HighFive.ll   |   0
 examples/{ => highfive}/HighFive.py   |   0
 examples/{ => highfive}/HighFive.wasm | Bin
 5 files changed, 3 insertions(+), 317 deletions(-)
 delete mode 100644 examples/highfive.html
 rename examples/{ => highfive}/HighFive.html (94%)
 rename examples/{ => highfive}/HighFive.ll (100%)
 rename examples/{ => highfive}/HighFive.py (100%)
 rename examples/{ => highfive}/HighFive.wasm (100%)

diff --git a/examples/highfive.html b/examples/highfive.html
deleted file mode 100644
index 86bd6dd..0000000
--- a/examples/highfive.html
+++ /dev/null
@@ -1,314 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HighFive Counter - Reactive Signals in 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;
-        }
-        .pipeline {
-            margin: 20px 0;
-            font-family: monospace;
-            font-size: 12px;
-            line-height: 1.8;
-            background: #fff;
-            padding: 15px;
-            border-radius: 4px;
-        }
-        .status {
-            margin: 10px 0;
-            padding: 10px;
-            background: #e8f4f8;
-            border-left: 4px solid #0066cc;
-            border-radius: 4px;
-            font-family: monospace;
-            font-size: 13px;
-        }
-        .success {
-            background: #efe;
-            border-left-color: #0a0;
-            color: #060;
-        }
-        .error {
-            background: #fee;
-            border-left-color: #c00;
-            color: #c00;
-        }
-        #app {
-            background: white;
-            padding: 40px;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-            min-height: 150px;
-        }
-        /* Component styles */
-        .high-five-app {
-            text-align: center;
-        }
-        .high-five-app p {
-            font-size: 18px;
-            margin: 15px 0;
-        }
-        .high-five-app .count {
-            font-size: 32px;
-            font-weight: bold;
-            color: #0066cc;
-            margin: 25px 0;
-        }
-        .high-five-app button {
-            font-size: 18px;
-            padding: 15px 40px;
-            background: #0066cc;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .high-five-app button:hover {
-            background: #0052a3;
-            transform: scale(1.05);
-        }
-        .high-five-app button:active {
-            transform: scale(0.98);
-        }
-    </style>
-</head>
-<body>
-    <div class="header">
-        <h1>🎭 Ritz Framework - HighFive Counter</h1>
-        <p><strong>Reactive Signals in WebAssembly</strong></p>
-        <div class="pipeline">
-✨ Signal stored in WASM memory<br>
-✨ Event handler exported from WASM<br>
-✨ Click → WASM → Signal update → DOM update<br>
-<br>
-Pipeline: HighFive.py → LLVM IR → clang → WASM
-        </div>
-    </div>
-
-    <div class="status" id="status">⏳ Initializing...</div>
-
-    <div id="app"></div>
-
-    <script>
-        // Enhanced Ritz Runtime with Signal and Event support
-        class RitzRuntime {
-            constructor(rootElement) {
-                this.rootElement = rootElement;
-                this.nodes = new Map();
-                this.nextNodeId = 1;
-                this.log = [];
-                this.wasmInstance = null;
-                this.eventHandlers = new Map(); // handler_name -> wasm function
-            }
-
-            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_bind_event(elemId, eventNamePtr, handlerNamePtr) {
-                const element = this.nodes.get(elemId);
-                const eventName = this.readString(eventNamePtr);
-                const handlerName = this.readString(handlerNamePtr);
-
-                if (element && this.wasmInstance) {
-                    const handler = this.wasmInstance.exports[handlerName];
-                    if (handler) {
-                        element.addEventListener(eventName, () => {
-                            console.log(`[Event] ${eventName} → calling WASM ${handlerName}()`);
-                            handler();
-                            // After handler runs, read signal and update DOM
-                            this.updateSignalDisplay();
-                        });
-                        this.log.push(`bindEvent(${elemId}, "${eventName}", "${handlerName}")`);
-                    } else {
-                        console.error(`Handler ${handlerName} not found in WASM exports`);
-                    }
-                }
-            }
-
-            js_set_root(elemId) {
-                const element = this.nodes.get(elemId);
-                if (element) {
-                    this.rootElement.innerHTML = '';
-                    this.rootElement.appendChild(element);
-                    this.log.push(`setRoot(${elemId})`);
-                }
-            }
-
-            js_update_text_content(nodeId, textPtr) {
-                const node = this.nodes.get(nodeId);
-                const text = this.readString(textPtr);
-                if (node) {
-                    node.textContent = text;
-                    this.log.push(`updateTextContent(${nodeId}, "${text}")`);
-                }
-            }
-
-            updateSignalDisplay() {
-                // Call WASM getter function to read signal value
-                if (!this.wasmInstance || !this.wasmInstance.exports.get_high_fives) {
-                    return;
-                }
-
-                // Call the exported getter function
-                const signalValue = this.wasmInstance.exports.get_high_fives();
-
-                console.log(`[Signal] high_fives = ${signalValue}`);
-
-                // Update DOM elements bound to this signal
-                // TODO: Track signal-to-DOM bindings during render
-                const countElements = document.querySelectorAll('.count');
-                countElements.forEach(el => {
-                    el.textContent = `High fives: ${signalValue}`;
-                });
-            }
-
-            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;
-            }
-
-            setWasmInstance(instance) {
-                this.wasmInstance = instance;
-            }
-
-            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 HighFive.wasm...';
-                const response = await fetch('HighFive.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),
-                        js_bind_event: (e, n, h) => runtime.js_bind_event(e, n, h),
-                        js_update_text_content: (n, t) => runtime.js_update_text_content(n, t),
-                    }
-                };
-
-                const { instance } = await WebAssembly.instantiate(wasmBytes, imports);
-                wasmInstance = instance;
-
-                // Give runtime access to WASM
-                runtime.setMemory(instance.exports.memory);
-                runtime.setWasmInstance(instance);
-
-                status.textContent = '⏳ Rendering component...';
-
-                // Call the render function
-                instance.exports.render_HighFive();
-
-                // Initial signal display update
-                runtime.updateSignalDisplay();
-
-                status.textContent = '✅ HighFive rendered! Click the button to test reactivity.';
-                status.className = 'status success';
-
-                // Log the operations
-                console.log('Runtime operations:', runtime.getLog());
-                console.log('🎉 Reactive signals working in WASM!');
-                console.log('Debug commands:');
-                console.log('  runtime.getLog() - View operations');
-                console.log('  wasmInstance.exports - View WASM exports');
-                console.log('  wasmInstance.exports.signal_high_fives.value - Read signal value');
-
-            } 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>
diff --git a/examples/HighFive.html b/examples/highfive/HighFive.html
similarity index 94%
rename from examples/HighFive.html
rename to examples/highfive/HighFive.html
index 234fc89..5a2d878 100644
--- a/examples/HighFive.html
+++ b/examples/highfive/HighFive.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HighFive Counter - Ritz Framework</title>
-    <link rel="stylesheet" href="runtime/ritz-debug.css">
+    <link rel="stylesheet" href="../runtime/ritz-debug.css">
     <style>
         body {
             font-family: system-ui, sans-serif;
@@ -80,8 +80,8 @@ ritzInstance.exports.increment()</pre>
         </div>
     </div>
 
-    <script src="runtime/ritz-runtime.js"></script>
-    <script src="runtime/ritz-debug.js"></script>
+    <script src="../runtime/ritz-runtime.js"></script>
+    <script src="../runtime/ritz-debug.js"></script>
     <script>
         // Wait for DOM to be ready
         if (document.readyState === 'loading') {
diff --git a/examples/HighFive.ll b/examples/highfive/HighFive.ll
similarity index 100%
rename from examples/HighFive.ll
rename to examples/highfive/HighFive.ll
diff --git a/examples/HighFive.py b/examples/highfive/HighFive.py
similarity index 100%
rename from examples/HighFive.py
rename to examples/highfive/HighFive.py
diff --git a/examples/HighFive.wasm b/examples/highfive/HighFive.wasm
similarity index 100%
rename from examples/HighFive.wasm
rename to examples/highfive/HighFive.wasm