feat: add docs demo runtime build

frontend/package.json

@@ -3,7 +3,9 @@
   "scripts": {
     "build:webapp:svelte:main": "vite build --config ./vite.config.mjs",
     "build:webapp:svelte:admin": "vite build --config ./vite.config.mjs --mode admin",
+    "build:webapp:svelte:docs-demo": "vite build --config ./vite.config.mjs --mode docs-demo",
     "build:webapp:svelte": "npm run build:webapp:svelte:main && npm run build:webapp:svelte:admin",
+    "build:docs-demo": "npm run build:webapp:svelte:docs-demo && npm run build:webapp:svelte:admin",
     "build:webapp:css": "npm run build:webapp:svelte",
     "build:webapp:js": "node ./scripts/build_subscription_webapp_js.mjs",
     "build:webapp": "npm run build:webapp:svelte && npm run build:webapp:js",

frontend/src/docsDemoEntry.js

@@ -0,0 +1,58 @@
+import { mount } from "svelte";
+
+import App from "./App.svelte";
+import PreviewBoard from "./PreviewBoard.svelte";
+import { mockApi } from "./lib/webapp/mockApi.js";
+import { DEV_MOCK, applyPreviewMock } from "./lib/webapp/previewMock.js";
+import "./styles.css";
+
+const RUNTIME_BASE = "/demo/runtime";
+const DEFAULT_FAVICON_DIGEST = "19b2a242e5b7bc2d";
+
+function runtimePath(path) {
+  return `${RUNTIME_BASE}/${String(path || "").replace(/^\/+/, "")}`;
+}
+
+function copyThemeAssets(catalog) {
+  const themes = catalog?.themes || [];
+  for (const theme of themes) {
+    const cssFile = String(theme?.css_file || "").trim();
+    if (!theme?.key || !cssFile || cssFile.startsWith("/") || /^(?:https?:)?\/\//i.test(cssFile)) {
+      continue;
+    }
+    theme.css_file = runtimePath(`themes/${theme.key}/${cssFile}`);
+  }
+}
+
+function prepareMockConfig() {
+  const logoUrl = runtimePath("default-brand/default-logo.webp");
+  const faviconUrl = runtimePath(`default-brand/favicons/${DEFAULT_FAVICON_DIGEST}/icon-180.png`);
+  DEV_MOCK.config.logoUrl = logoUrl;
+  DEV_MOCK.config.faviconUrl = faviconUrl;
+  DEV_MOCK.config.adminJsAsset = runtimePath("subscription_webapp_admin.js");
+  DEV_MOCK.config.adminCssAsset = runtimePath("subscription_webapp_admin.css");
+  DEV_MOCK.config.apiBase = "/api";
+  copyThemeAssets(DEV_MOCK.config.themesCatalog);
+  copyThemeAssets(DEV_MOCK.data.themes_catalog);
+}
+
+const params = new URLSearchParams(window.location.search);
+applyPreviewMock(params.get("mock"));
+prepareMockConfig();
+
+const target = document.getElementById("app");
+if (target) {
+  target.replaceChildren();
+  mount(App, {
+    target,
+    props: {
+      mockRuntime: {
+        source: DEV_MOCK,
+        applyPreviewMock: () => {},
+        mockApi,
+        PreviewBoard,
+        docsDemo: true,
+      },
+    },
+  });
+}

frontend/vite.config.mjs

@@ -10,7 +10,17 @@ const templateDir = path.resolve(__dirname, "../backend/bot/app/web/templates");
 
 export default defineConfig(({ mode }) => {
   const isAdminBuild = mode === "admin";
-  const outputBase = isAdminBuild ? "subscription_webapp_admin" : "subscription_webapp";
+  const isDocsDemoBuild = mode === "docs-demo";
+  const outputBase = isAdminBuild
+    ? "subscription_webapp_admin"
+    : isDocsDemoBuild
+      ? "subscription_webapp_docs_demo"
+      : "subscription_webapp";
+  const entry = isAdminBuild
+    ? "src/adminEntry.js"
+    : isDocsDemoBuild
+      ? "src/docsDemoEntry.js"
+      : "src/main.js";
 
   return {
     resolve: {
@@ -32,7 +42,7 @@ export default defineConfig(({ mode }) => {
       sourcemap: false,
       cssCodeSplit: false,
       lib: {
-        entry: path.resolve(__dirname, isAdminBuild ? "src/adminEntry.js" : "src/main.js"),
+        entry: path.resolve(__dirname, entry),
         name: isAdminBuild ? "SubscriptionWebAppAdmin" : "SubscriptionWebApp",
         formats: ["iife"],
         fileName: () => `${outputBase}.js`,