From 2b4a8d6953dfb544ce48f016754931555f8cc809 Mon Sep 17 00:00:00 2001
From: 3252a8 <3252a8@proton.me>
Date: Thu, 4 Jun 2026 11:02:06 +0300
Subject: [PATCH] fix: load docs demo runtime index directly

---
 docs-site/public/demo/demo-shell.js | 14 ++++++++++----
 docs-site/src/pages/demo.astro      |  4 ++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/docs-site/public/demo/demo-shell.js b/docs-site/public/demo/demo-shell.js
index 542012f..2bf6b07 100644
--- a/docs-site/public/demo/demo-shell.js
+++ b/docs-site/public/demo/demo-shell.js
@@ -1,5 +1,6 @@
 const frame = document.getElementById("demo-frame");
 const runtimeBase = "/demo/runtime";
+const runtimeAppPath = `${runtimeBase}/app/index.html`;
 const demoBase = "/demo";
 const defaultMock = "tariffs";
 const publicRouteAliases = new Map([["/app", "/home"]]);
@@ -145,7 +146,7 @@ if (initialMock !== "emails") {
   params.delete("screen");
   params.delete("admin_section");
   params.set("path", initialRoute);
-  frame.src = `${runtimeBase}/app/?${params.toString()}${window.location.hash || ""}`;
+  frame.src = `${runtimeAppPath}?${params.toString()}${window.location.hash || ""}`;
 }
 
 const routeFromRuntimeUrl = (url) => {
@@ -155,7 +156,11 @@ const routeFromRuntimeUrl = (url) => {
   const runtimePath = normalizePath(
     url.pathname.slice(runtimeBase.length) || "/home",
   );
-  if (runtimePath === "/app" || runtimePath === "/app.html") {
+  if (
+    runtimePath === "/app" ||
+    runtimePath === "/app/index.html" ||
+    runtimePath === "/app.html"
+  ) {
     return normalizePath(url.searchParams.get("path") || "/home");
   }
   return runtimePath;
@@ -171,7 +176,7 @@ const runtimeSrc = (route, searchParams = new URLSearchParams()) => {
   nextParams.delete("screen");
   nextParams.delete("admin_section");
   nextParams.set("path", normalizePath(route));
-  return `${runtimeBase}/app/?${nextParams.toString()}${window.location.hash || ""}`;
+  return `${runtimeAppPath}?${nextParams.toString()}${window.location.hash || ""}`;
 };
 const topbar = document.querySelector(".demo-topbar");
 const toggle = document.querySelector(".demo-topbar__toggle");
@@ -226,7 +231,8 @@ const setCollapsed = (collapsed) => {
 
 toggle?.addEventListener("click", () => setCollapsed(false));
 hide?.addEventListener("click", () => setCollapsed(true));
-if (stateSelect) stateSelect.value = normalizeStateMock(params.get("mock") || initialMock);
+if (stateSelect)
+  stateSelect.value = normalizeStateMock(params.get("mock") || initialMock);
 setDemoMode(initialMock);
 stateSelect?.addEventListener("change", () => {
   const mock = normalizeStateMock(stateSelect.value);
diff --git a/docs-site/src/pages/demo.astro b/docs-site/src/pages/demo.astro
index f5ce8e4..75f8f1a 100644
--- a/docs-site/src/pages/demo.astro
+++ b/docs-site/src/pages/demo.astro
@@ -1,7 +1,7 @@
 ---
 import { emailPreviews } from '../lib/emailPreviews.mjs';
 
-const defaultDemoSrc = '/demo/runtime/app/?path=/home&mock=tariffs';
+const defaultDemoSrc = '/demo/runtime/app/index.html?path=/home&mock=tariffs';
 const docsHref = '/getting-started/demo/';
 ---
 
@@ -529,7 +529,7 @@ const docsHref = '/getting-started/demo/';
                       title={`Email preview: ${preview.title}`}
                       srcdoc={preview.html}
                       loading="lazy"
-                      sandbox=""
+                      sandbox="allow-scripts"
                     ></iframe>
                   </div>
                 </div>