@kokimoki/kit 1.6.7 → 1.8.0

package/dist/kokimoki-kit-plugin.js

@@ -15,35 +15,143 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.kokimokiKitPlugin = kokimokiKitPlugin;
-const bson_objectid_1 = __importDefault(require("bson-objectid"));
+exports.kokimokiKitPlugin = exports.getI18nMeta = void 0;
 const promises_1 = __importDefault(require("fs/promises"));
+const node_html_parser_1 = require("node-html-parser");
+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 app_meta_schema_1 = require("./schemas/app-meta-schema");
 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; } });
+/**
+ * Built-in app meta store configuration.
+ * Automatically injected into all apps for server-side meta tag injection.
+ */
+const BUILT_IN_APP_META_STORE = {
+    pattern: app_meta_schema_1.APP_META_STORE_NAME,
+    schema: app_meta_schema_1.appMetaStoreSchema,
+    local: false,
+};
 function kokimokiKitPlugin(config) {
+    // Combine user stores with built-in stores
+    const allStores = [...(config.stores ?? []), BUILT_IN_APP_META_STORE];
+    // 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;
+    /**
+     * Resolve asset path for meta tags.
+     * In production, prepends %KM_ASSETS% placeholder for relative paths.
+     * In dev, returns path as-is since assets are served from root.
+     */
+    function resolveAssetUrl(path, isProduction) {
+        if (!path)
+            return path;
+        // Only prefix relative paths (starting with /)
+        if (isProduction && path.startsWith("/")) {
+            return `%KM_ASSETS%${path}`;
+        }
+        return path;
+    }
+    /**
+     * Resolve asset URLs in defaultAppMeta object.
+     * Creates a new object with ogImage and favicon paths resolved.
+     */
+    function resolveAppMetaAssets(meta, isProduction) {
+        if (!meta)
+            return null;
+        return {
+            ...meta,
+            ogImage: meta.ogImage
+                ? resolveAssetUrl(meta.ogImage, isProduction)
+                : undefined,
+            favicon: meta.favicon
+                ? resolveAssetUrl(meta.favicon, isProduction)
+                : undefined,
+        };
+    }
+    /**
+     * 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,12 +162,23 @@ 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") {
-                // NOTE: Try https://github.com/jsdom/jsdom instead of regex parsing
-                return html
-                    .replace("<head>", `<head>
-              <base href="%KM_BASE%">
-              <script id="kokimoki-env" type="application/json">
+                // Remove any existing km-loading element from the HTML
+                const processedHtml = (0, production_loading_screen_1.removeExistingLoadingScreen)(html);
+                // Parse HTML for DOM manipulation
+                const doc = (0, node_html_parser_1.parse)(processedHtml);
+                const head = doc.querySelector("head");
+                const body = doc.querySelector("body");
+                const htmlEl = doc.querySelector("html");
+                // Add base tag
+                head?.insertAdjacentHTML("afterbegin", `<base href="%KM_BASE%">`);
+                // Inject kokimoki-env script
+                head?.insertAdjacentHTML("afterbegin", `<script id="kokimoki-env" type="application/json">
               {
                 "dev": %KM_DEV%,
                 "test": %KM_TEST%,
@@ -68,11 +187,16 @@ 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%"
+                "assets": "%KM_ASSETS%",
+                "defaultAppMeta": ${JSON.stringify(resolveAppMetaAssets(config.defaultAppMeta, true))}
               }
-              </script>
-              <script>
+              </script>`);
+                // Inject assets URL helper script
+                head?.insertAdjacentHTML("beforeend", `<script>
                 window.__toAssetsUrl = (path) => {
                   if (path.startsWith("km-proxy")) {
                     return "/%KM_BUILD_ID%/" + path;
@@ -80,66 +204,140 @@ function kokimokiKitPlugin(config) {
 
                   return "%KM_ASSETS%/" + path;
                 };
-              </script>
-            `)
-                    .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}`);
+              </script>`);
+                // Inject loading screen
+                head?.insertAdjacentHTML("beforeend", production_loading_screen_1.loadingScreenStyles);
+                head?.insertAdjacentHTML("beforeend", production_loading_screen_1.loadingScreenScript);
+                body?.insertAdjacentHTML("afterbegin", production_loading_screen_1.loadingScreenElement);
+                // Inject meta tags from defaultAppMeta
+                if (config.defaultAppMeta) {
+                    const meta = config.defaultAppMeta;
+                    if (meta.lang) {
+                        htmlEl?.setAttribute("lang", meta.lang);
+                    }
+                    if (meta.title) {
+                        head?.insertAdjacentHTML("beforeend", `<title>${meta.title}</title>`);
+                    }
+                    if (meta.description) {
+                        head?.insertAdjacentHTML("beforeend", `<meta name="description" content="${meta.description}" />`);
+                    }
+                    if (meta.ogTitle ?? meta.title) {
+                        head?.insertAdjacentHTML("beforeend", `<meta property="og:title" content="${meta.ogTitle ?? meta.title}" />`);
+                    }
+                    if (meta.ogDescription ?? meta.description) {
+                        head?.insertAdjacentHTML("beforeend", `<meta property="og:description" content="${meta.ogDescription ?? meta.description}" />`);
+                    }
+                    if (meta.ogImage) {
+                        head?.insertAdjacentHTML("beforeend", `<meta property="og:image" content="${resolveAssetUrl(meta.ogImage, true)}" />`);
+                    }
+                    if (meta.favicon) {
+                        head?.insertAdjacentHTML("beforeend", `<link rel="icon" type="image/png" href="${resolveAssetUrl(meta.favicon, true)}" />`);
+                    }
+                }
+                // Update asset URLs in link and script tags
+                doc.querySelectorAll("link[href]").forEach((el) => {
+                    const href = el.getAttribute("href");
+                    if (href) {
+                        el.setAttribute("href", `%KM_ASSETS%${href.startsWith("/") ? "" : "/"}${href}`);
+                    }
                 });
+                doc.querySelectorAll("script[src]").forEach((el) => {
+                    const src = el.getAttribute("src");
+                    if (src) {
+                        el.setAttribute("src", `%KM_ASSETS%${src.startsWith("/") ? "" : "/"}${src}`);
+                    }
+                });
+                return doc.toString();
             }
-            // Ensure .kokimoki directory exists
-            try {
-                await promises_1.default.mkdir(".kokimoki");
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            }
-            catch (e) {
-                if (e?.code !== "EEXIST") {
-                    throw e;
-                }
+            // 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)();
             }
-            // 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)(allStores);
+            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));
-            // }
-            // Inject the app id into the index.html
-            html = html.replace("<head>", `<head>
-          <script id="kokimoki-env" type="application/json">
+            let defaultProjectConfig = {};
+            if (config.defaultProjectConfigPath && config.schema) {
+                const defaultProjectConfigFile = await promises_1.default.readFile(config.defaultProjectConfigPath, "utf8");
+                defaultProjectConfig = config.schema.parse(yaml.parse(defaultProjectConfigFile));
+            }
+            // Parse HTML for DOM manipulation
+            const doc = (0, node_html_parser_1.parse)(html);
+            const head = doc.querySelector("head");
+            const htmlEl = doc.querySelector("html");
+            // Inject kokimoki-env script
+            const envScript = (0, node_html_parser_1.parse)(`<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)},
+            "defaultAppMeta": ${JSON.stringify(config.defaultAppMeta ?? null)}
           }
           </script>`);
+            head?.insertAdjacentHTML("afterbegin", envScript.toString());
+            // Inject meta tags from defaultAppMeta in development
+            if (config.defaultAppMeta) {
+                const meta = config.defaultAppMeta;
+                if (meta.lang) {
+                    htmlEl?.setAttribute("lang", meta.lang);
+                }
+                if (meta.title) {
+                    head?.insertAdjacentHTML("beforeend", `<title>${meta.title}</title>`);
+                }
+                if (meta.description) {
+                    head?.insertAdjacentHTML("beforeend", `<meta name="description" content="${meta.description}" />`);
+                }
+                if (meta.ogTitle ?? meta.title) {
+                    head?.insertAdjacentHTML("beforeend", `<meta property="og:title" content="${meta.ogTitle ?? meta.title}" />`);
+                }
+                if (meta.ogDescription ?? meta.description) {
+                    head?.insertAdjacentHTML("beforeend", `<meta property="og:description" content="${meta.ogDescription ?? meta.description}" />`);
+                }
+                if (meta.ogImage) {
+                    head?.insertAdjacentHTML("beforeend", `<meta property="og:image" content="${meta.ogImage}" />`);
+                }
+                if (meta.favicon) {
+                    head?.insertAdjacentHTML("beforeend", `<link rel="icon" type="image/png" href="${meta.favicon}" />`);
+                }
+            }
             // Inject default project style in development
             if (config.defaultProjectStylePath) {
                 const defaultProjectStyle = await promises_1.default.readFile(config.defaultProjectStylePath, "utf8");
-                html = html.replace("</body>", `<style id="km-dev-style">${(0, preprocess_style_1.preprocessStyle)(defaultProjectStyle)}</style></body>`);
+                const body = doc.querySelector("body");
+                body?.insertAdjacentHTML("beforeend", `<style id="km-dev-style">${(0, preprocess_style_1.preprocessStyle)(defaultProjectStyle)}</style>`);
             }
-            return html;
+            return doc.toString();
         },
         // write kokimoki metadata to .kokimoki directory
         async generateBundle(_, _bundle) {
@@ -153,6 +351,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 +363,173 @@ function kokimokiKitPlugin(config) {
                 build: "dist",
                 defaultProjectConfigPath: config.defaultProjectConfigPath,
                 defaultProjectStylePath: config.defaultProjectStylePath,
+                defaultAppMeta: config.defaultAppMeta,
+                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 (always includes built-in stores)
+            const storesWithJsonSchema = allStores.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)(allStores);
+                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)(allStores);
+                    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)(allStores);
+                    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 +537,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 +563,78 @@ 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)({
+                    rows: config.devView,
+                    appMeta: config.defaultAppMeta,
+                });
+                res.statusCode = 200;
+                res.setHeader("Content-Type", "text/html");
+                res.setHeader("Cache-Control", "no-cache");
+                res.end(devViewHtml);
+            });
         },
     };
 }
+exports.kokimokiKitPlugin = kokimokiKitPlugin;