From 60bbad9c68925402c485aba139500e5ed5668432 Mon Sep 17 00:00:00 2001
From: Aaron Sinclair <aaron.sinclair@bettercomp.com>
Date: Sat, 15 Nov 2025 12:15:04 -0800
Subject: [PATCH] Fix TextInput.html to use correct RitzLoader API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed from RitzRuntime.loadComponent() (doesn't exist) to
new RitzLoader().load() (correct API).

Also updated DOM element IDs:
- #root → #app (RitzLoader default)
- Added #status div for load status messages
- Added styling for status indicator

Should now load properly in browser.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 examples/textinput/TextInput.html | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/examples/textinput/TextInput.html b/examples/textinput/TextInput.html
index 5f896c0..7372584 100644
--- a/examples/textinput/TextInput.html
+++ b/examples/textinput/TextInput.html
@@ -105,19 +105,38 @@
             line-height: 1.6;
         }
 
-        #root {
+        #app {
             width: 100%;
         }
+
+        #status {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 10px 20px;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            font-size: 14px;
+            font-weight: 600;
+            color: #667eea;
+        }
     </style>
 </head>
 <body>
-    <div id="root">Loading...</div>
+    <div id="app">Loading...</div>
+    <div id="status"></div>
 
     <script src="../runtime/ritz-runtime.js"></script>
     <script>
-        RitzRuntime.loadComponent('TextInput.wasm', 'TextInput', 'root')
-            .then(() => console.log('✅ TextInput loaded'))
-            .catch(err => console.error('❌ Failed to load:', err));
+        // Wait for DOM to be ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                new RitzLoader().load('TextInput.wasm', 'TextInput');
+            });
+        } else {
+            new RitzLoader().load('TextInput.wasm', 'TextInput');
+        }
     </script>
 </body>
 </html>