Fix Try it button to dispatch play event and load editor on demand

Remove data-example attribute from the Try it button since the code is
already in the terminal body. In setupDocMode, remove the toolbar and
buttons that were visible even when the tiny-editor was hidden. Instead,
create a hidden container and listen for a "play" custom event on the
tiny-editor element to trigger game creation. The API page dispatches
this event when the Try it button is clicked.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: dwursteisen

tiny-doc/src/docs/templates/pages/api.peb

@@ -245,7 +245,7 @@
         var editor = wrapper.querySelector('tiny-editor');
         if (terminal && editor) {
             terminal.style.display = 'none';
-            editor.style.display = '';
+            editor.dispatchEvent(new Event('play'));
         }
     });
 

tiny-doc/src/docs/templates/partials/fn-card.peb

@@ -24,7 +24,7 @@
                 <span class="terminal__dot terminal__dot--yellow"></span>
                 <span class="terminal__dot terminal__dot--green"></span>
                 <span class="terminal__filename">example.lua</span>
-                <a class="fn-card__try-btn" data-example="{{ fn.example }}">
+                <a class="fn-card__try-btn">
                     <span class="material-symbols-outlined" style="font-size: 1rem; vertical-align: middle;">play_arrow</span>
                     Try it
                 </a>

tiny-web-editor/src/jsMain/kotlin/Main.kt

@@ -83,52 +83,28 @@ private fun setupDocMode(
     val spritePath = game.getAttribute("sprite")
     val levelPath = game.getAttribute("level")
 
-    val toolbar = document.createElement("div") {
-        setAttribute("class", "tiny-toolbar")
-    }
-    game.before(toolbar)
-
-    val link = document.createElement("a") {
-        setAttribute("id", "link-editor-$index")
-        setAttribute("class", "tiny-play tiny-button")
-        setAttribute("href", "#link-editor-$index")
-    } as HTMLAnchorElement
-    toolbar.appendChild(link)
-
-    val playLink = document.createElement("div").apply {
+    val container = document.createElement("div").apply {
         setAttribute("class", "tiny-container")
+        asDynamic().style.display = "none"
     }
-    toolbar.after(playLink)
+    game.after(container)
 
     val codeToUse = decodedCode ?: "-- Update the code to update the game!\n$code"
 
-    var clicked = false
-    link.innerHTML = """<i data-lucide="play"></i> Run and edit this example"""
-    link.onclick = { _ ->
-        if (!clicked) {
-            createGame(playLink, index, codeToUse, spritePath, levelPath, rootPath)
-            clicked = true
+    var started = false
+    game.addEventListener("play", {
+        if (!started) {
+            container.asDynamic().style.display = ""
+            createGame(container, index, codeToUse, spritePath, levelPath, rootPath)
+            started = true
         }
-        true
-    }
-
-    val editorLink = (
-        document.createElement("a") {
-            setAttribute("class", "tiny-button tiny-button-right")
-            id = "share-$index"
-            innerHTML = """<i data-lucide="external-link"></i> Editor"""
-        } as HTMLAnchorElement
-    ).apply {
-        val b64 = Base64.encode(code.encodeToByteArray())
-        href = "editor.html?game=$b64"
-        target = "_blank"
-    }
-
-    toolbar.appendChild(editorLink)
+    })
 
     // There is a user code. Let's unfold the game.
     if (savedCode != null) {
-        createGame(playLink, index, codeToUse, spritePath, levelPath, rootPath)
+        container.asDynamic().style.display = ""
+        createGame(container, index, codeToUse, spritePath, levelPath, rootPath)
+        started = true
     }
 }