From d459eb2b846035fcdffb43122111050bce9f6806 Mon Sep 17 00:00:00 2001
From: Ryan Kiley <ryanekiley@gmail.com>
Date: Sat, 10 Oct 2026 16:13:13 -0700
Subject: [PATCH] Put a run example's fold toggle inside its stage

The landing shows the schema toggle under the copy, above the pane on phones, but the page put it after the pane, so Tab visited thirty panel controls before reaching it. The generator now writes the toggle between the demo and the panel, so the order matches the screen; the layout doesn't move.
---
 site/build-site.mjs | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/site/build-site.mjs b/site/build-site.mjs
index 6c2e312..e552b03 100644
--- a/site/build-site.mjs
+++ b/site/build-site.mjs
@@ -148,15 +148,6 @@ function renderExample(ex, ids, captioned) {
   }
   const heading = ex.title ? `<h2>${esc(ex.title)}</h2>` : "";
 
-  let live = "";
-  if (ex.run) {
-    const target = ex.target != null ? `<div class="ex-target">${ex.target}</div>` : "";
-    const mount = ex.noMount ? "" : `<div class="ex-mount"></div>`;
-    live = `<div class="ex-live${target ? "" : " ex-live-solo"}">${target}${mount}</div>`;
-  } else if (ex.html) {
-    live = `<div class="ex-live ex-live-markup"><div class="ex-target">${ex.html}</div></div>`;
-  }
-
   let code = "";
   if (ex.run) code = codeBlock(highlightJS(extractBody(ex.run)), "js");
   else if (ex.html) code = codeBlock(highlightHTML(dedent(ex.html).trim()), "html");
@@ -167,10 +158,27 @@ function renderExample(ex, ids, captioned) {
   }
 
   // A fold is a toggle and a separate body (not one <details>), so a layout can set the toggle
-  // in one place and open the code in another; site.js wires the button to the body.
+  // in one place and open the code in another; site.js wires the button to the body. In a run
+  // example the toggle sits inside the stage, between the demo and the panel, so the page's
+  // order (and so Tab's) matches a layout that shows it under the demo; the body follows the
+  // stage. hidden="until-found": closed, but find-in-page still reaches the code and opens it.
   if (ex.foldCode && !ex.id) throw new Error(`example "${ex.title || "?"}": foldCode needs an id (the toggle points at its body by it)`);
-  // hidden="until-found": closed, but find-in-page still reaches the code and opens it.
-  if (code && ex.foldCode) code = `<div class="ex-fold"><button class="ex-fold-toggle" type="button" aria-expanded="false" aria-controls="fold-${ex.id}">${esc(ex.foldCode)}</button></div><div class="ex-fold-body" id="fold-${ex.id}" hidden="until-found">${code}</div>`;
+  let toggle = "";
+  if (code && ex.foldCode) {
+    toggle = `<div class="ex-fold"><button class="ex-fold-toggle" type="button" aria-expanded="false" aria-controls="fold-${ex.id}">${esc(ex.foldCode)}</button></div>`;
+    code = `<div class="ex-fold-body" id="fold-${ex.id}" hidden="until-found">${code}</div>`;
+  }
+
+  let live = "";
+  if (ex.run) {
+    const target = ex.target != null ? `<div class="ex-target">${ex.target}</div>` : "";
+    const mount = ex.noMount ? "" : `<div class="ex-mount"></div>`;
+    live = `<div class="ex-live${target ? "" : " ex-live-solo"}">${target}${toggle}${mount}</div>`;
+    toggle = "";
+  } else if (ex.html) {
+    live = `<div class="ex-live ex-live-markup"><div class="ex-target">${ex.html}</div></div>`;
+  }
+  code = toggle + code;
 
   const note = captioned
     ? `<p class="ex-note"><code>mount</code> is the panel's slot inside the stage${ex.target != null ? "; <code>target</code> is the demo surface it controls" : ""}. In your own page you'd just <code>document.body.append(panel.el)</code>.</p>`