@kokimoki/kit 1.6.7 → 1.7.0

package/dist/kokimoki-kit-plugin.js

@@ -36,14 +36,89 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getI18nMeta = void 0;
 exports.kokimokiKitPlugin = kokimokiKitPlugin;
-const bson_objectid_1 = __importDefault(require("bson-objectid"));
 const promises_1 = __importDefault(require("fs/promises"));
+const path_1 = __importDefault(require("path"));
 const yaml = __importStar(require("yaml"));
 const v4_1 = require("zod/v4");
+const api_1 = require("./api");
+const credentials_1 = require("./credentials");
+const dev_app_1 = require("./dev-app");
+const dev_frame_1 = require("./dev-frame");
+const dev_i18n_1 = require("./dev-i18n");
+const dev_overlays_1 = require("./dev-overlays");
 const preprocess_style_1 = require("./preprocess-style");
+const production_loading_screen_1 = require("./production-loading-screen");
 const version_1 = require("./version");
+var dev_i18n_2 = require("./dev-i18n");
+Object.defineProperty(exports, "getI18nMeta", { enumerable: true, get: function () { return dev_i18n_2.getI18nMeta; } });
 function kokimokiKitPlugin(config) {
+    // Cache for loaded i18n resources
+    let cachedI18n = null;
+    // Cache dev app info for syncing
+    let devAppInfo = null;
+    // Initialization state
+    let initState = "pending";
+    let initPromise = null;
+    // Cached dev app result
+    let cachedDevAppResult = null;
+    /**
+     * Start initialization if not already started.
+     * Returns a promise that resolves when initialization is complete.
+     */
+    function startInitialization() {
+        if (initPromise) {
+            return initPromise;
+        }
+        if (initState !== "pending") {
+            return Promise.resolve();
+        }
+        initState = "initializing";
+        initPromise = (async () => {
+            try {
+                // Get or create dev app
+                cachedDevAppResult = await (0, dev_app_1.getOrCreateDevApp)({
+                    conceptId: config.conceptId,
+                    endpoint: config.endpoint,
+                });
+                const { appId, buildUrl, organization, error: devAppError, } = cachedDevAppResult;
+                // Store dev app info for i18n syncing
+                if (organization && !devAppError) {
+                    const credentials = await (0, credentials_1.readCredentials)();
+                    const apiKey = credentials?.apiKeys?.[organization.id];
+                    if (apiKey) {
+                        devAppInfo = {
+                            appId,
+                            apiKey,
+                            endpoint: config.endpoint ?? api_1.DEFAULT_ENDPOINT,
+                            buildUrl,
+                        };
+                        // Sync i18n files to dev app on startup
+                        const i18nResources = await getI18nResources();
+                        await (0, dev_i18n_1.syncAllI18nToDevApp)(devAppInfo, i18nResources, config.i18nPrimaryLng ?? "en");
+                    }
+                }
+                initState = "ready";
+            }
+            catch (e) {
+                console.error("[kokimoki-kit] Initialization error:", e);
+                initState = "error";
+            }
+        })();
+        return initPromise;
+    }
+    async function getI18nResources() {
+        if (cachedI18n)
+            return cachedI18n;
+        if (config.i18nPath) {
+            cachedI18n = await (0, dev_i18n_1.loadI18nFromPath)(config.i18nPath);
+        }
+        else {
+            cachedI18n = {};
+        }
+        return cachedI18n;
+    }
     return {
         name: "kokimoki-kit",
         async transform(code, id) {
@@ -54,9 +129,16 @@ function kokimokiKitPlugin(config) {
             return code;
         },
         async transformIndexHtml(html) {
+            // Load i18n resources (from path or config)
+            const i18nResources = await getI18nResources();
+            // Extract namespace names and language codes from i18n config
+            const i18nNamespaces = Object.keys(Object.values(i18nResources)[0] ?? {});
+            const i18nLanguages = Object.keys(i18nResources);
             if (process.env.NODE_ENV !== "development") {
+                // Remove any existing km-loading element from the HTML
+                const processedHtml = (0, production_loading_screen_1.removeExistingLoadingScreen)(html);
                 // NOTE: Try https://github.com/jsdom/jsdom instead of regex parsing
-                return html
+                const result = processedHtml
                     .replace("<head>", `<head>
               <base href="%KM_BASE%">
               <script id="kokimoki-env" type="application/json">
@@ -68,6 +150,9 @@ function kokimokiKitPlugin(config) {
                 "code": "%KM_CODE%",
                 "clientContext": "%KM_CLIENT_CONTEXT%",
                 "config": "%KM_CONFIG%",
+                "i18nPath": "km-i18n",
+                "i18nNamespaces": ${JSON.stringify(i18nNamespaces)},
+                "i18nLanguages": ${JSON.stringify(i18nLanguages)},
                 "base": "%KM_BASE%",
                 "assets": "%KM_ASSETS%"
               }
@@ -80,58 +165,67 @@ function kokimokiKitPlugin(config) {
 
                   return "%KM_ASSETS%/" + path;
                 };
-              </script>
+              </script>${production_loading_screen_1.loadingScreenStyles}${production_loading_screen_1.loadingScreenScript}
             `)
+                    .replace(/<body([^>]*)>/, `<body$1>${production_loading_screen_1.loadingScreenElement}`)
                     .replace(/<link.*?href="(.*?)".*?>/g, (match, p1) => {
                     return match.replace(p1, `%KM_ASSETS%${p1.startsWith("/") ? "" : "/"}${p1}`);
                 })
                     .replace(/<script.*?src="(.*?)".*?>/g, (match, p1) => {
                     return match.replace(p1, `%KM_ASSETS%${p1.startsWith("/") ? "" : "/"}${p1}`);
                 });
+                return result;
             }
-            // Ensure .kokimoki directory exists
-            try {
-                await promises_1.default.mkdir(".kokimoki");
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            // Development mode: ensure initialization is started and wait for it
+            if (initState === "pending" || initState === "initializing") {
+                // Start initialization if not already started
+                startInitialization();
+                // Return loading page - it will poll and reload when ready
+                return (0, dev_overlays_1.renderLoadingPage)();
             }
-            catch (e) {
-                if (e?.code !== "EEXIST") {
-                    throw e;
-                }
-            }
-            // Try to read the app id from the .kokimoki/app-id file
-            let appId;
-            try {
-                appId = await promises_1.default.readFile(".kokimoki/app-id", "utf8");
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            // Get cached dev app result (should be available after initialization)
+            const { appId, buildUrl, organization, error: devAppError, } = cachedDevAppResult ?? {
+                appId: "",
+                buildUrl: undefined,
+                organization: undefined,
+                error: { code: "INIT_ERROR", message: "Initialization failed" },
+            };
+            // Check if stores configuration has changed
+            const currentStoresHash = (0, dev_app_1.computeStoresHash)(config.stores);
+            const previousStoresHash = await (0, dev_app_1.readStoresHash)();
+            const storesChanged = previousStoresHash !== null && previousStoresHash !== currentStoresHash;
+            // Write initial stores hash if it doesn't exist yet
+            if (previousStoresHash === null) {
+                await (0, dev_app_1.writeStoresHash)(currentStoresHash);
             }
-            catch (e) {
-                if (e?.code !== "ENOENT") {
-                    throw e;
-                }
+            // Return full stores changed page if stores configuration has changed
+            if (storesChanged) {
+                return (0, dev_overlays_1.renderStoresChangedPage)(!!organization);
             }
-            // If the app id doesn't exist, generate a new one
-            if (!appId) {
-                appId = new bson_objectid_1.default().toHexString();
-                await promises_1.default.writeFile(".kokimoki/app-id", appId);
+            // Return full error page if there's a dev app error
+            if (devAppError) {
+                return (0, dev_overlays_1.renderErrorPage)(devAppError);
             }
             // Get default config
-            // let defaultProjectConfig = config.schema.parse(undefined);
-            // if (config.defaultProjectConfigPath) {
-            const defaultProjectConfigFile = await promises_1.default.readFile(config.defaultProjectConfigPath, "utf8");
-            const defaultProjectConfig = config.schema.parse(yaml.parse(defaultProjectConfigFile));
-            // }
+            let defaultProjectConfig = {};
+            if (config.defaultProjectConfigPath && config.schema) {
+                const defaultProjectConfigFile = await promises_1.default.readFile(config.defaultProjectConfigPath, "utf8");
+                defaultProjectConfig = config.schema.parse(yaml.parse(defaultProjectConfigFile));
+            }
             // Inject the app id into the index.html
             html = html.replace("<head>", `<head>
           <script id="kokimoki-env" type="application/json">
           {
             "dev": true,
             "test": true,
-            "host": "y-wss.kokimoki.com",
+            "host": "${config.host ?? "y-wss.kokimoki.com"}",
             "appId": "${appId}",
             "configObject": ${JSON.stringify(defaultProjectConfig)},
+            "i18nNamespaces": ${JSON.stringify(i18nNamespaces)},
+            "i18nLanguages": ${JSON.stringify(i18nLanguages)},
             "base": "/",
-            "assets": "/"
+            "assets": "/",
+            "buildUrl": ${JSON.stringify(buildUrl ?? null)}
           }
           </script>`);
             // Inject default project style in development
@@ -153,6 +247,10 @@ function kokimokiKitPlugin(config) {
                     throw e;
                 }
             }
+            // Get i18n metadata
+            const i18n = config.i18nPath
+                ? await (0, dev_i18n_1.getI18nMeta)(config.i18nPath, config.i18nPrimaryLng ?? "en")
+                : null;
             // write config
             await promises_1.default.writeFile(".kokimoki/config.json", JSON.stringify({
                 kokimokiKitVersion: version_1.KOKIMOKI_KIT_VERSION,
@@ -161,49 +259,174 @@ function kokimokiKitPlugin(config) {
                 build: "dist",
                 defaultProjectConfigPath: config.defaultProjectConfigPath,
                 defaultProjectStylePath: config.defaultProjectStylePath,
+                i18n,
             }, null, 2));
             // write schema
-            const jsonSchema = v4_1.z.toJSONSchema(config.schema, {
-                override(ctx) {
-                    // check if schema is discriminated union
-                    if (ctx.zodSchema._zod.def.type === "union" &&
-                        "discriminator" in ctx.zodSchema._zod.def) {
-                        const discriminator = ctx.zodSchema._zod.def
-                            .discriminator;
-                        ctx.jsonSchema.type = "object";
-                        ctx.jsonSchema.discriminator = { propertyName: discriminator };
-                        ctx.jsonSchema.required = [discriminator];
-                        ctx.jsonSchema.oneOf = ctx.jsonSchema.anyOf.map((objectSchema) => ({
-                            properties: objectSchema.properties,
-                            additionalProperties: objectSchema.additionalProperties,
-                            required: (objectSchema.required ?? []).filter((prop) => prop !== discriminator),
-                        }));
-                        delete ctx.jsonSchema.anyOf;
-                    }
-                    // Remove fields that have a default from the required list
-                    if (ctx.jsonSchema.properties && ctx.jsonSchema.required) {
-                        const properties = ctx.jsonSchema.properties;
-                        ctx.jsonSchema.required = ctx.jsonSchema.required.filter((field) => !("default" in properties[field]));
-                    }
-                    // Make sure property has description if set in zod schema
-                    if ("description" in ctx.zodSchema) {
-                        ctx.jsonSchema.description = ctx.zodSchema.description;
-                    }
-                },
-            });
+            const jsonSchema = config.schema
+                ? v4_1.z.toJSONSchema(config.schema, {
+                    override(ctx) {
+                        // check if schema is discriminated union
+                        if (ctx.zodSchema._zod.def.type === "union" &&
+                            "discriminator" in ctx.zodSchema._zod.def) {
+                            const discriminator = ctx.zodSchema._zod.def
+                                .discriminator;
+                            ctx.jsonSchema.type = "object";
+                            ctx.jsonSchema.discriminator = { propertyName: discriminator };
+                            ctx.jsonSchema.required = [discriminator];
+                            ctx.jsonSchema.oneOf = ctx.jsonSchema.anyOf.map((objectSchema) => ({
+                                properties: objectSchema.properties,
+                                additionalProperties: objectSchema.additionalProperties,
+                                required: (objectSchema.required ?? []).filter((prop) => prop !== discriminator),
+                            }));
+                            delete ctx.jsonSchema.anyOf;
+                        }
+                        // Remove fields that have a default from the required list
+                        if (ctx.jsonSchema.properties && ctx.jsonSchema.required) {
+                            const properties = ctx.jsonSchema.properties;
+                            ctx.jsonSchema.required = ctx.jsonSchema.required.filter((field) => !("default" in properties[field]));
+                        }
+                        // Make sure property has description if set in zod schema
+                        if ("description" in ctx.zodSchema) {
+                            ctx.jsonSchema.description = ctx.zodSchema
+                                .description;
+                        }
+                    },
+                })
+                : {
+                    type: "object",
+                    properties: {},
+                };
             await promises_1.default.writeFile(".kokimoki/schema.json", JSON.stringify(jsonSchema, null, 2));
-            // // write schema defaults as json
-            // await fs.writeFile(
-            //   ".kokimoki/schema-defaults.json",
-            //   JSON.stringify(defaultJsonSchemaValue, null, 2)
-            // );
-            // // write schema defaults as yaml
-            // await fs.writeFile(
-            //   ".kokimoki/schema-defaults.yaml",
-            //   yaml.stringify(defaultJsonSchemaValue)
-            // );
+            // write stores config with JSON schemas to build output
+            if (config.stores) {
+                const storesWithJsonSchema = config.stores.map((store) => ({
+                    pattern: store.pattern,
+                    local: store.local,
+                    schema: v4_1.z.toJSONSchema(store.schema),
+                }));
+                this.emitFile({
+                    type: "asset",
+                    fileName: "km-stores.json",
+                    source: JSON.stringify(storesWithJsonSchema, null, 2),
+                });
+            }
+            // write i18n files to build output as individual files per lng/ns
+            const i18nResources = await getI18nResources();
+            if (Object.keys(i18nResources).length > 0) {
+                const i18nManifest = {};
+                for (const [lng, namespaces] of Object.entries(i18nResources)) {
+                    i18nManifest[lng] = {};
+                    for (const [ns, translations] of Object.entries(namespaces)) {
+                        const fileName = `km-i18n/${lng}/${ns}.json`;
+                        this.emitFile({
+                            type: "asset",
+                            fileName,
+                            source: JSON.stringify(translations, null, 2),
+                        });
+                        // Store relative path - server can prepend assets base or modify URLs
+                        i18nManifest[lng][ns] = fileName;
+                    }
+                }
+                // Emit manifest mapping lng/ns to URLs
+                this.emitFile({
+                    type: "asset",
+                    fileName: "km-i18n.json",
+                    source: JSON.stringify(i18nManifest, null, 2),
+                });
+            }
         },
         configureServer(server) {
+            // Start initialization as early as possible (don't wait for first request)
+            startInitialization();
+            // Helper to check stores changed status
+            async function checkStoresChanged() {
+                const currentStoresHash = (0, dev_app_1.computeStoresHash)(config.stores);
+                const previousStoresHash = await (0, dev_app_1.readStoresHash)();
+                return (previousStoresHash !== null &&
+                    previousStoresHash !== currentStoresHash);
+            }
+            // Serve i18n JSON files in development
+            server.middlewares.use("/__kokimoki/i18n", async (req, res, next) => {
+                // Parse URL: /__kokimoki/i18n/{lng}/{ns}.json
+                const match = req.url?.match(/^\/([^/]+)\/([^/]+)\.json$/);
+                if (!match) {
+                    return next();
+                }
+                const [, lng, ns] = match;
+                try {
+                    const i18nResources = await getI18nResources();
+                    const translations = i18nResources[lng]?.[ns];
+                    if (!translations) {
+                        res.statusCode = 404;
+                        res.setHeader("Content-Type", "application/json");
+                        res.end(JSON.stringify({ error: `Translation not found: ${lng}/${ns}` }));
+                        return;
+                    }
+                    res.statusCode = 200;
+                    res.setHeader("Content-Type", "application/json");
+                    res.setHeader("Cache-Control", "no-cache");
+                    res.end(JSON.stringify(translations));
+                }
+                catch (e) {
+                    res.statusCode = 500;
+                    res.setHeader("Content-Type", "application/json");
+                    res.end(JSON.stringify({
+                        error: e instanceof Error ? e.message : "Unknown error",
+                    }));
+                }
+            });
+            // API endpoint to check if initialization is complete
+            server.middlewares.use("/__kokimoki/ready", async (_req, res) => {
+                res.statusCode = 200;
+                res.setHeader("Content-Type", "application/json");
+                res.setHeader("Cache-Control", "no-cache");
+                res.end(JSON.stringify({
+                    ready: initState === "ready" || initState === "error",
+                }));
+            });
+            // API endpoint to acknowledge stores hash change (dismiss the popup)
+            server.middlewares.use("/__kokimoki/stores-hash/acknowledge", async (_req, res) => {
+                try {
+                    const currentStoresHash = (0, dev_app_1.computeStoresHash)(config.stores);
+                    await (0, dev_app_1.writeStoresHash)(currentStoresHash);
+                    res.statusCode = 200;
+                    res.setHeader("Content-Type", "application/json");
+                    res.end(JSON.stringify({ success: true }));
+                }
+                catch (e) {
+                    res.statusCode = 500;
+                    res.setHeader("Content-Type", "application/json");
+                    res.end(JSON.stringify({
+                        error: e instanceof Error ? e.message : "Unknown error",
+                    }));
+                }
+            });
+            // API endpoint to reset dev app state (deletes app-id to create fresh dev app)
+            server.middlewares.use("/__kokimoki/dev-app/reset", async (_req, res) => {
+                try {
+                    // Delete the app-id file so a new dev app will be created
+                    await (0, dev_app_1.deleteAppId)();
+                    // Update the stores hash
+                    const currentStoresHash = (0, dev_app_1.computeStoresHash)(config.stores);
+                    await (0, dev_app_1.writeStoresHash)(currentStoresHash);
+                    // Reset initialization state so next request triggers re-initialization
+                    initState = "pending";
+                    initPromise = null;
+                    cachedDevAppResult = null;
+                    // Start re-initialization (polling from loading page will detect when ready)
+                    startInitialization();
+                    res.statusCode = 200;
+                    res.setHeader("Content-Type", "application/json");
+                    res.end(JSON.stringify({ success: true }));
+                }
+                catch (e) {
+                    res.statusCode = 500;
+                    res.setHeader("Content-Type", "application/json");
+                    res.end(JSON.stringify({
+                        error: e instanceof Error ? e.message : "Unknown error",
+                    }));
+                }
+            });
             // reload when defaultProjectConfigPath or defaultProjectStylePath changes
             if (config.defaultProjectConfigPath) {
                 server.watcher.add(config.defaultProjectConfigPath);
@@ -211,7 +434,25 @@ function kokimokiKitPlugin(config) {
             if (config.defaultProjectStylePath) {
                 server.watcher.add(config.defaultProjectStylePath);
             }
-            server.watcher.on("change", (file) => {
+            // Watch i18n folder for changes
+            if (config.i18nPath) {
+                const i18nAbsolutePath = path_1.default.resolve(process.cwd(), config.i18nPath);
+                server.watcher.add(i18nAbsolutePath);
+            }
+            server.watcher.on("change", async (file) => {
+                // Invalidate i18n cache on i18n file changes and sync to dev app
+                if (config.i18nPath) {
+                    const i18nAbsolutePath = path_1.default.resolve(process.cwd(), config.i18nPath);
+                    if (file.startsWith(i18nAbsolutePath) && file.endsWith(".json")) {
+                        cachedI18n = null;
+                        // Sync only the changed file to dev app (only primary language)
+                        if (devAppInfo) {
+                            await (0, dev_i18n_1.syncI18nFile)(devAppInfo, config.i18nPath, file, config.i18nPrimaryLng ?? "en");
+                        }
+                        server.ws.send({ type: "full-reload" });
+                        return;
+                    }
+                }
                 if (config.defaultProjectConfigPath?.match(file) ||
                     config.defaultProjectStylePath?.match(file)) {
                     server.ws.send({
@@ -219,6 +460,77 @@ function kokimokiKitPlugin(config) {
                     });
                 }
             });
+            // Intercept all root HTML requests to show loading/error/stores-changed/dev-view at root level
+            // This runs BEFORE Vite's built-in middleware so we can intercept index.html requests
+            server.middlewares.use(async (req, res, next) => {
+                const url = new URL(req.url || "/", "http://localhost");
+                // Only intercept root path requests (with or without key param)
+                if (url.pathname !== "/") {
+                    return next();
+                }
+                const hasKeyParam = url.searchParams.has("key");
+                // Show loading page while initializing (at root level only)
+                if (initState === "pending" || initState === "initializing") {
+                    if (!hasKeyParam) {
+                        res.statusCode = 200;
+                        res.setHeader("Content-Type", "text/html");
+                        res.setHeader("Cache-Control", "no-cache");
+                        res.end((0, dev_overlays_1.renderLoadingPage)());
+                        return;
+                    }
+                    // For iframe requests during init, let them wait via transformIndexHtml
+                    return next();
+                }
+                const { organization, error: devAppError } = cachedDevAppResult ?? {
+                    organization: undefined,
+                    error: { code: "INIT_ERROR", message: "Initialization failed" },
+                };
+                // Show error page at root level only
+                if (devAppError && !hasKeyParam) {
+                    res.statusCode = 200;
+                    res.setHeader("Content-Type", "text/html");
+                    res.setHeader("Cache-Control", "no-cache");
+                    res.end((0, dev_overlays_1.renderErrorPage)(devAppError));
+                    return;
+                }
+                // Check if stores configuration has changed
+                const storesChanged = await checkStoresChanged();
+                if (storesChanged) {
+                    if (!hasKeyParam) {
+                        // Root page: show stores changed page
+                        res.statusCode = 200;
+                        res.setHeader("Content-Type", "text/html");
+                        res.setHeader("Cache-Control", "no-cache");
+                        res.end((0, dev_overlays_1.renderStoresChangedPage)(!!organization));
+                    }
+                    else {
+                        // Iframe: reload parent to show stores changed page at root level
+                        res.statusCode = 200;
+                        res.setHeader("Content-Type", "text/html");
+                        res.setHeader("Cache-Control", "no-cache");
+                        res.end(`<!DOCTYPE html>
+<html><head><script>window.parent.location.reload();</script></head><body></body></html>`);
+                    }
+                    return;
+                }
+                // For requests with key param, continue to normal handling (Vite will serve index.html)
+                if (hasKeyParam) {
+                    return next();
+                }
+                // Dev view disabled or not configured, continue to normal handling
+                if (config.devView === false || config.devView === undefined) {
+                    return next();
+                }
+                // Render dev view HTML at root
+                const devViewHtml = (0, dev_frame_1.renderDevFrame)({
+                    title: "Dev View",
+                    rows: config.devView,
+                });
+                res.statusCode = 200;
+                res.setHeader("Content-Type", "text/html");
+                res.setHeader("Cache-Control", "no-cache");
+                res.end(devViewHtml);
+            });
         },
     };
 }

package/dist/production-loading-screen.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Production loading screen HTML/CSS/JS for kokimoki-kit plugin.
+ * This screen is injected into production builds and removed when km:ready is received.
+ */
+/**
+ * Loading screen styles
+ */
+export declare const loadingScreenStyles = "\n<style id=\"km-loading-style\">\n  #km-loading {\n    position: fixed;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 1.5rem;\n    background: #fff;\n    z-index: 9999;\n    transition: opacity 0.3s ease-out;\n    color: #1a1a2e;\n    text-decoration: none;\n  }\n  #km-loading.km-ready {\n    opacity: 0;\n    pointer-events: none;\n  }\n  #km-loading .km-spinner {\n    height: 2rem;\n    animation: km-spin 1s linear infinite;\n  }\n  #km-loading .km-logo {\n    height: 3rem;\n  }\n  #km-loading .km-powered {\n    font-size: 0.75rem;\n    font-weight: 600;\n    opacity: 0.65;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n  @keyframes km-spin {\n    to { transform: rotate(360deg); }\n  }\n</style>";
+/**
+ * km:ready listener script with 3s minimum display time
+ */
+export declare const loadingScreenScript = "\n<script>\n  (function() {\n    var startTime = Date.now();\n    var minDisplayTime = 3000;\n    var appReady = false;\n    \n    function hideLoading() {\n      var el = document.getElementById('km-loading');\n      var style = document.getElementById('km-loading-style');\n      if (el) {\n        el.classList.add('km-ready');\n        setTimeout(function() {\n          el.remove();\n          if (style) style.remove();\n        }, 300);\n      }\n    }\n    \n    function tryHide() {\n      if (!appReady) return;\n      var elapsed = Date.now() - startTime;\n      var remaining = Math.max(0, minDisplayTime - elapsed);\n      setTimeout(hideLoading, remaining);\n    }\n    \n    window.addEventListener('message', function(e) {\n      if (e.data === 'km:ready' && !appReady) {\n        appReady = true;\n        tryHide();\n      }\n    });\n  })();\n</script>";
+/**
+ * Loading screen HTML element with Games for Crowds branding
+ */
+export declare const loadingScreenElement = "<a href=\"https://gamesforcrowds.com\" target=\"_blank\" id=\"km-loading\">\n  <svg class=\"km-spinner\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path fill=\"currentColor\" d=\"M12 22q-2.05 0-3.875-.788t-3.187-2.15t-2.15-3.187T2 12q0-2.075.788-3.887t2.15-3.175t3.187-2.15T12 2q.425 0 .713.288T13 3t-.288.713T12 4Q8.675 4 6.337 6.338T4 12t2.338 5.663T12 20t5.663-2.337T20 12q0-.425.288-.712T21 11t.713.288T22 12q0 2.05-.788 3.875t-2.15 3.188t-3.175 2.15T12 22\"/>\n  </svg>\n  <svg class=\"km-logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 797.59 219.07\" fill=\"currentColor\">\n    <g>\n      <path d=\"M162.8,96.03c30.87-26.51,10.41-92.22-28.46-95.03-29.39-2.13-60.31-.26-90.99.07-.73,0-1.45-.02-2.17.09C20.3,4.26,3.91,21.33.05,41.8l-.05,123.54c2.6,4.28,5.58,6,10.54,3.94,6.74-3.82,26.58-29.17,31.77-30.22,1.69-.34,3.72.1,5.48-.03-1.15,26.53,19.87,47.52,45.62,49.88,10.24.94,31.34-1.93,39.43.57,8.71,2.7,26.57,28.84,33.53,29.55,3.29.34,7.74-2.14,8.38-5.52,1.72-9.15-2.16-26.7.23-34.77.33-1.1,7.39-8.47,9.02-10.98,16.21-24.98,7.36-61.07-21.22-71.74ZM50.83,121.59l-15.96,2.04-19.08,18.42V46.55c1.67-14.1,15.14-27.27,28.74-30.26,27.33,1.33,57.83-2.6,84.8-.28,20.06,1.73,36.5,34.92,31,55.08-7.53,27.65-45.72,17.08-67.02,18.97-18.52,1.65-36.21,13.88-42.47,31.53ZM170.32,159.08c-1.85,3-10.53,10.69-10.53,11.47v20.5c-1.75.44-2-.72-3.01-1.49-5.71-4.38-11.7-14.4-18.92-16.08-20.43-4.73-47.91,7.68-65.09-10.9-16.98-18.36-8.23-50.63,16.23-55.82,10.35-2.2,44.8-1.74,56.33-.74,24.82,2.14,38.05,31.97,25,53.07Z\"/>\n      <polygon points=\"573.74 181.88 556.14 122.98 538.69 122.81 519.73 181.89 501.74 122.88 481.24 122.88 508.73 212.9 525.78 213.95 527.35 213.29 545.25 152.88 564.73 212.9 583.28 213.42 611.24 122.88 590.24 122.88 573.74 181.88\"/>\n      <path d=\"M666.74,122.88c-13.74-1.63-30.44,1.21-44.5,0v91h40.5c2.92,0,11.75-2.85,14.86-4.14,38.57-16.14,31.3-81.86-10.86-86.86ZM678.08,187.22c-2.88,4.2-11.41,9.66-16.34,9.66h-20.5v-58c6.18.55,13.48-.75,19.5,0,22.38,2.79,28.85,31.55,17.34,48.34Z\"/>\n      <path d=\"M425,121.14c-41.35,5.24-51.11,67.28-16.45,87.94,28.45,16.96,67.81.39,70.73-33.66,2.97-34.62-18.81-58.77-54.28-54.28ZM427.98,198.64c-27.94-4.46-28.04-57.3,1.02-61.5,40.78-5.9,43.14,68.55-1.02,61.5Z\"/>\n      <path d=\"M363.48,127.14c-1.58-.84-10.61-4.26-11.74-4.26h-41.5v91h19v-33l11.58.92,18.92,32.08h21.5l-20.99-35.44c19.78-8.94,22.88-40.88,3.23-51.3ZM355.77,157.91c-1.32,4.05-6.98,7.97-11.02,7.97h-15.5v-27c5.36.62,12.39-.85,17.5,0,9.11,1.51,11.57,11.21,9.02,19.03Z\"/>\n      <path d=\"M777.02,179.61c-3.95-19.44-32.26-17.78-42.74-26.26-5.4-4.37-4.24-12.34,1.69-15.23,9.47-4.61,20.58,1.49,27.6,7.63l12.65-9.36c-10.04-12.51-23.17-17.41-39.22-15.24-28.56,3.86-35.71,38.53-7.02,50.5,9.33,3.89,33.09,5.53,28.6,20.07-3.99,12.93-29.66,6.57-35.83-2.65l-12.44,11.18c19.81,25.44,74.88,19.65,66.7-20.64Z\"/>\n      <path d=\"M267.5,198.64c-41.37,7.02-43.83-58.8-9.75-61.75,10.54-.91,17.28,3.56,24.13,10.88l14.35-7.92c-9.32-19.99-38.11-23.5-56.51-14.99-32.89,15.21-33.7,69.52-.86,85.89,19.28,9.61,48.03,5.78,58.38-14.86l-12.64-7.94c-5.5,3.74-10.09,9.5-17.1,10.69Z\"/>\n      <path d=\"M433.4,44.09l21.29,35.46c2.72,2.8,9.85,1.78,13.55,1.07l22.47-37.65v59.55h21.35V4.76l-20.8,1.11-27.53,50.58-29.76-51.69h-20.79v97.76h20.23v-58.43Z\"/>\n      <path d=\"M306.43,48.58h-42.7v16.85h21.35c-.27,13.22-7.04,21.88-20.74,22.52-41.54,1.94-38.23-76.19,5.07-66.97,7.84,1.67,10.69,7.85,16.21,11.88l15.05-8.01c-.07-9-13.02-17.18-20.95-19.79-43.1-14.17-73.97,23.73-63.98,65.1,11.75,48.67,85.6,47.68,90.69-4.17.54-5.55-.39-11.78,0-17.42Z\"/>\n      <path d=\"M340.09,81.68l33.82-.02,6.67,20.85h23.6L368.81,5.87c-1.88-2.26-20.12-1.02-24.2-.56l-34.81,97.22h23.6l6.7-20.83ZM356.43,29.47l10.67,34.84h-21.35l10.67-34.84Z\"/>\n      <polygon points=\"590.71 84.54 551.39 84.54 551.39 60.94 585.1 60.94 585.1 42.96 551.39 42.96 551.39 22.74 588.47 22.74 588.47 4.76 530.04 4.76 530.04 102.52 590.71 102.52 590.71 84.54\"/>\n      <path d=\"M608.77,97.39c25.08,16.57,67.45,5.44,61.46-30-1.89-11.15-12.36-17.09-21.93-20.77-7.64-2.94-35.54-8.52-22.36-22.37,8.09-8.51,23.15-1.69,30.32,5.07,2.52-1.37,13.45-9.1,13.04-11.48-14.3-20.97-60.08-20.5-65.72,7.08-2.89,14.13,1.82,25,14.48,31.72,10.24,5.44,38.71,7.15,31.37,24.24-3.47,8.09-18.1,7.13-25,4.22-4.16-1.76-9.85-8.71-12.66-8.29-2.01.3-13.33,8.46-13.03,10.32.38,2.39,7.73,8.73,10.04,10.25Z\"/>\n    </g>\n    <g>\n      <path fill=\"#3c63e7\" d=\"M735,55.98c-24.25,4.14-27.28,47.44,1.59,47.65,31.23.23,35.57-53.99-1.59-47.65ZM734.29,92.39c-9.51-2.94-5.29-24.14,2.49-26.5,16.88-5.12,14.38,31.73-2.49,26.5Z\"/>\n      <path fill=\"#3c63e7\" d=\"M716.28,56.67c-3.34-.27-7.15.39-10.41,0-1.21-.14-1.64.47-1.24-1.25,1.77-7.6,5.49-10.69,13.44-7.79l.86-10.79c-14.12-3.91-26.67,3.85-26.53,18.98l-8.25,1.69-1.3,9.08,8.13.02-3.61,36.13,12.26-.85,4.05-35.24h11.1c1.99-.47,1.49-8.28,1.51-9.99Z\"/>\n      <path fill=\"#3c63e7\" d=\"M796.72,56.17c-6.86-1.78-12.48,2-15.87,7.73l.45-7.22h-11.74s-4.51,46.06-4.51,46.06h12.65c2.16-13.01-1.47-38.8,18.96-34.32-.94-2.92,2.45-10.57.06-12.25Z\"/>\n    </g>\n  </svg>\n  <p class=\"km-powered\">Powered by Kokimoki</p>\n</a>";
+/**
+ * Removes any existing km-loading elements from HTML
+ */
+export declare function removeExistingLoadingScreen(html: string): string;