@kokimoki/kit 1.6.7 → 1.7.0

package/dist/dev-frame/render-dev-frame.js

@@ -0,0 +1,160 @@
+"use strict";
+/**
+ * Renders the dev frame HTML page - a multi-window view for development
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderDevFrame = renderDevFrame;
+const styles_1 = require("./styles");
+/**
+ * Generate URL for a dev frame iframe
+ */
+function generateFrameUrl(key, context) {
+    const contextBase64 = btoa(JSON.stringify(context));
+    return `?key=${encodeURIComponent(key)}&context=${encodeURIComponent(contextBase64)}`;
+}
+/**
+ * Generate the frame HTML for a single dev frame cell
+ */
+function renderCell(cell, isDuplicate) {
+    if (isDuplicate) {
+        return `
+      <div class="dev-frame dev-frame-error" data-frame-key="${cell.label}">
+        <div class="dev-frame-header">
+          <span class="dev-frame-title">${cell.label}</span>
+        </div>
+        <div class="dev-frame-warning">
+          <div class="dev-frame-warning-icon">⚠️</div>
+          <div class="dev-frame-warning-title">Duplicate Label</div>
+          <div class="dev-frame-warning-message">
+            Label "<strong>${cell.label}</strong>" is already used by another cell.<br>
+            Each cell must have a unique label.
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    const url = generateFrameUrl(cell.label, cell.clientContext);
+    return `
+    <div class="dev-frame" data-frame-key="${cell.label}">
+      <div class="dev-frame-header">
+        <span class="dev-frame-title">${cell.label}</span>
+        <a class="dev-frame-link" href="${url}" target="_blank" rel="noopener noreferrer">New tab</a>
+        <button class="dev-frame-btn" onclick="clearFrameStorage('${cell.label}')">Reset</button>
+      </div>
+      <div class="dev-frame-content">
+        <div class="dev-frame-error-overlay" id="error-${cell.label}" style="display: none;">
+          <div class="dev-frame-error-icon">⚠️</div>
+          <div class="dev-frame-error-title">Error</div>
+          <pre class="dev-frame-error-message" id="error-msg-${cell.label}"></pre>
+          <button class="dev-frame-error-btn" onclick="reloadFrame('${cell.label}')">Reload</button>
+        </div>
+        <iframe 
+          id="frame-${cell.label}" 
+          title="${cell.label}" 
+          src="${url}"
+        ></iframe>
+      </div>
+    </div>
+  `;
+}
+/**
+ * Generate the HTML for a row of frames, tracking seen labels for duplicate detection
+ */
+function renderRow(cells, seenLabels) {
+    const cellsHtml = cells
+        .map((cell) => {
+        const isDuplicate = seenLabels.has(cell.label);
+        seenLabels.add(cell.label);
+        return renderCell(cell, isDuplicate);
+    })
+        .join("\n");
+    return `<div class="dev-row">${cellsHtml}</div>`;
+}
+/**
+ * Generate the JavaScript for dev frame functionality
+ */
+function renderScript() {
+    return `
+    <script>
+      // Track iframe references
+      const frames = {};
+
+      // Initialize frame references after DOM loads
+      document.querySelectorAll('.dev-frame iframe').forEach(iframe => {
+        const key = iframe.id.replace('frame-', '');
+        frames[key] = iframe;
+      });
+
+      // Handle messages from iframes
+      window.addEventListener('message', (event) => {
+        // Find which iframe sent this message
+        const frameEntry = Object.entries(frames).find(
+          ([_, iframe]) => iframe.contentWindow === event.source
+        );
+
+        if (!frameEntry) return;
+        const [key, iframe] = frameEntry;
+
+        // If iframe requests its client key (sends appId), respond with key
+        if (event.data && event.data.appId) {
+          iframe.contentWindow.postMessage({ clientKey: key }, '*');
+        }
+
+        // If iframe signals error, show error overlay
+        if (event.data && event.data.type === 'km:error') {
+          const errorOverlay = document.getElementById('error-' + key);
+          const errorMsg = document.getElementById('error-msg-' + key);
+          
+          if (errorOverlay) errorOverlay.style.display = 'flex';
+          if (errorMsg) {
+            const stack = event.data.stack || event.data.message;
+            errorMsg.textContent = stack;
+          }
+        }
+      });
+
+      // Clear storage for a specific frame
+      function clearFrameStorage(key) {
+        const iframe = frames[key];
+        if (iframe && iframe.contentWindow) {
+          iframe.contentWindow.postMessage('km:clearStorage', '*');
+        }
+      }
+
+      // Reload a specific frame
+      function reloadFrame(key) {
+        const iframe = frames[key];
+        const errorOverlay = document.getElementById('error-' + key);
+        
+        if (errorOverlay) errorOverlay.style.display = 'none';
+        if (iframe) {
+          iframe.src = iframe.src;
+        }
+      }
+    </script>
+  `;
+}
+/**
+ * Render the complete dev frame HTML page
+ */
+function renderDevFrame(config) {
+    const { title = "Dev View", rows } = config;
+    // Track seen labels across all rows for duplicate detection
+    const seenLabels = new Set();
+    const rowsHtml = rows.map((row) => renderRow(row, seenLabels)).join("\n");
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+  <style>${styles_1.devFrameStyles}</style>
+</head>
+<body>
+  <div class="dev-container">
+    ${rowsHtml}
+  </div>
+  ${renderScript()}
+</body>
+</html>`;
+}

package/dist/dev-frame/styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * CSS styles for the dev frame
+ */
+export declare const devFrameStyles = "\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  html, body {\n    height: 100%;\n    overflow: hidden;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n\n  .dev-container {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    height: 100dvh;\n    background: #E4D8B4;\n  }\n\n  .dev-row {\n    display: flex;\n    flex: 1;\n    gap: 2px;\n    min-height: 0;\n  }\n\n  .dev-frame {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    background: #ECE3CA;\n  }\n\n  .dev-frame-header {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n    padding: 8px;\n    font-size: 14px;\n    color: #793205;\n  }\n\n  .dev-frame-title {\n    font-weight: 600;\n  }\n\n  .dev-frame-link {\n    color: #793205;\n    text-decoration: none;\n  }\n\n  .dev-frame-link:hover {\n    text-decoration: underline;\n  }\n\n  .dev-frame-btn {\n    background: none;\n    border: none;\n    color: #793205;\n    cursor: pointer;\n    font-size: 14px;\n    font-family: inherit;\n  }\n\n  .dev-frame-btn:hover {\n    text-decoration: underline;\n  }\n\n  .dev-frame-content {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n  }\n\n  .dev-frame iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n\n  .dev-frame-error .dev-frame-header {\n    background: #fee2e2;\n    color: #991b1b;\n  }\n\n  .dev-frame-warning {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 20px;\n    background: #fef3c7;\n    color: #92400e;\n    text-align: center;\n  }\n\n  .dev-frame-warning-icon {\n    font-size: 48px;\n    margin-bottom: 12px;\n  }\n\n  .dev-frame-warning-title {\n    font-size: 18px;\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: #b45309;\n  }\n\n  .dev-frame-warning-message {\n    font-size: 14px;\n    line-height: 1.5;\n    color: #92400e;\n  }\n\n  .dev-frame-error-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 20px;\n    background: linear-gradient(135deg, #2d1f1f 0%, #1f1a1a 100%);\n    z-index: 15;\n    color: #fca5a5;\n    text-align: center;\n    overflow: auto;\n  }\n\n  .dev-frame-error-icon {\n    font-size: 36px;\n    margin-bottom: 12px;\n  }\n\n  .dev-frame-error-title {\n    font-size: 18px;\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: #f87171;\n  }\n\n  .dev-frame-error-message {\n    font-size: 12px;\n    line-height: 1.5;\n    color: #fca5a5;\n    background: rgba(0, 0, 0, 0.3);\n    padding: 12px;\n    border-radius: 8px;\n    max-width: 100%;\n    max-height: 200px;\n    overflow: auto;\n    white-space: pre-wrap;\n    word-break: break-word;\n    text-align: left;\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  }\n\n  .dev-frame-error-btn {\n    margin-top: 16px;\n    padding: 8px 16px;\n    background: #ef4444;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 14px;\n    font-family: inherit;\n    transition: background 0.2s;\n  }\n\n  .dev-frame-error-btn:hover {\n    background: #dc2626;\n  }\n";

package/dist/dev-frame/styles.js

@@ -0,0 +1,191 @@
+"use strict";
+/**
+ * CSS styles for the dev frame
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.devFrameStyles = void 0;
+exports.devFrameStyles = `
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html, body {
+    height: 100%;
+    overflow: hidden;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  .dev-container {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    height: 100dvh;
+    background: #E4D8B4;
+  }
+
+  .dev-row {
+    display: flex;
+    flex: 1;
+    gap: 2px;
+    min-height: 0;
+  }
+
+  .dev-frame {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    background: #ECE3CA;
+  }
+
+  .dev-frame-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+    padding: 8px;
+    font-size: 14px;
+    color: #793205;
+  }
+
+  .dev-frame-title {
+    font-weight: 600;
+  }
+
+  .dev-frame-link {
+    color: #793205;
+    text-decoration: none;
+  }
+
+  .dev-frame-link:hover {
+    text-decoration: underline;
+  }
+
+  .dev-frame-btn {
+    background: none;
+    border: none;
+    color: #793205;
+    cursor: pointer;
+    font-size: 14px;
+    font-family: inherit;
+  }
+
+  .dev-frame-btn:hover {
+    text-decoration: underline;
+  }
+
+  .dev-frame-content {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .dev-frame iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+
+  .dev-frame-error .dev-frame-header {
+    background: #fee2e2;
+    color: #991b1b;
+  }
+
+  .dev-frame-warning {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background: #fef3c7;
+    color: #92400e;
+    text-align: center;
+  }
+
+  .dev-frame-warning-icon {
+    font-size: 48px;
+    margin-bottom: 12px;
+  }
+
+  .dev-frame-warning-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #b45309;
+  }
+
+  .dev-frame-warning-message {
+    font-size: 14px;
+    line-height: 1.5;
+    color: #92400e;
+  }
+
+  .dev-frame-error-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background: linear-gradient(135deg, #2d1f1f 0%, #1f1a1a 100%);
+    z-index: 15;
+    color: #fca5a5;
+    text-align: center;
+    overflow: auto;
+  }
+
+  .dev-frame-error-icon {
+    font-size: 36px;
+    margin-bottom: 12px;
+  }
+
+  .dev-frame-error-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: #f87171;
+  }
+
+  .dev-frame-error-message {
+    font-size: 12px;
+    line-height: 1.5;
+    color: #fca5a5;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 12px;
+    border-radius: 8px;
+    max-width: 100%;
+    max-height: 200px;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+    text-align: left;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  }
+
+  .dev-frame-error-btn {
+    margin-top: 16px;
+    padding: 8px 16px;
+    background: #ef4444;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-family: inherit;
+    transition: background 0.2s;
+  }
+
+  .dev-frame-error-btn:hover {
+    background: #dc2626;
+  }
+`;

package/dist/dev-i18n.d.ts

@@ -0,0 +1,56 @@
+export type I18nResources = {
+    [lng: string]: {
+        [ns: string]: Record<string, unknown>;
+    };
+};
+/**
+ * i18n metadata for a build.
+ */
+export interface I18nMeta {
+    path: string;
+    primaryLng: string;
+    namespaces: string[];
+    languages: string[];
+}
+export interface DevAppInfo {
+    appId: string;
+    apiKey: string;
+    endpoint: string;
+    buildUrl?: string;
+}
+/**
+ * Load i18n resources from a folder path.
+ * Expected structure: `{i18nPath}/{lng}/{namespace}.json`
+ */
+export declare function loadI18nFromPath(i18nPath: string): Promise<I18nResources>;
+/**
+ * Scan an i18n folder and return i18n metadata.
+ * Expected structure: `{i18nPath}/{lng}/{namespace}.json`
+ *
+ * @param i18nPath - Path to i18n folder relative to cwd
+ * @param primaryLng - Source language code for AI translations (default: 'en')
+ * @returns i18n metadata with path, primaryLng, namespaces, and languages
+ *
+ * @example
+ * ```typescript
+ * const i18n = await getI18nMeta('./src/i18n', 'en');
+ * // Returns: {
+ * //   path: 'km-i18n',
+ * //   primaryLng: 'en',
+ * //   namespaces: ['ui', 'game', 'setup'],
+ * //   languages: ['en', 'et']
+ * // }
+ * ```
+ */
+export declare function getI18nMeta(i18nPath: string, primaryLng?: string): Promise<I18nMeta | null>;
+/**
+ * Sync primary language i18n files to the dev app build directory (initial sync).
+ * Only uploads primaryLng since that's what AI translations use as source.
+ * Other local languages are served by kit's dev middleware.
+ */
+export declare function syncAllI18nToDevApp(devAppInfo: DevAppInfo, i18nResources: I18nResources, primaryLng?: string): Promise<void>;
+/**
+ * Sync a single i18n file to the dev app build directory.
+ * Only syncs if the file is for the primary language.
+ */
+export declare function syncI18nFile(devAppInfo: DevAppInfo, i18nPath: string, changedFilePath: string, primaryLng?: string): Promise<void>;

package/dist/dev-i18n.js

@@ -0,0 +1,164 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadI18nFromPath = loadI18nFromPath;
+exports.getI18nMeta = getI18nMeta;
+exports.syncAllI18nToDevApp = syncAllI18nToDevApp;
+exports.syncI18nFile = syncI18nFile;
+const promises_1 = __importDefault(require("fs/promises"));
+const path_1 = __importDefault(require("path"));
+const dev_app_1 = require("./dev-app");
+/**
+ * Load i18n resources from a folder path.
+ * Expected structure: `{i18nPath}/{lng}/{namespace}.json`
+ */
+async function loadI18nFromPath(i18nPath) {
+    const resources = {};
+    const absolutePath = path_1.default.resolve(process.cwd(), i18nPath);
+    try {
+        const entries = await promises_1.default.readdir(absolutePath, { withFileTypes: true });
+        const languageDirs = entries.filter((e) => e.isDirectory());
+        for (const langDir of languageDirs) {
+            const lng = langDir.name;
+            const langPath = path_1.default.join(absolutePath, lng);
+            const files = await promises_1.default.readdir(langPath);
+            const jsonFiles = files.filter((f) => f.endsWith(".json"));
+            if (jsonFiles.length > 0) {
+                resources[lng] = {};
+                for (const jsonFile of jsonFiles) {
+                    const ns = jsonFile.replace(".json", "");
+                    const filePath = path_1.default.join(langPath, jsonFile);
+                    const content = await promises_1.default.readFile(filePath, "utf8");
+                    resources[lng][ns] = JSON.parse(content);
+                }
+            }
+        }
+    }
+    catch (error) {
+        console.error(`[kokimoki-kit] Failed to load i18n from path "${i18nPath}":`, error);
+    }
+    return resources;
+}
+/**
+ * Scan an i18n folder and return i18n metadata.
+ * Expected structure: `{i18nPath}/{lng}/{namespace}.json`
+ *
+ * @param i18nPath - Path to i18n folder relative to cwd
+ * @param primaryLng - Source language code for AI translations (default: 'en')
+ * @returns i18n metadata with path, primaryLng, namespaces, and languages
+ *
+ * @example
+ * ```typescript
+ * const i18n = await getI18nMeta('./src/i18n', 'en');
+ * // Returns: {
+ * //   path: 'km-i18n',
+ * //   primaryLng: 'en',
+ * //   namespaces: ['ui', 'game', 'setup'],
+ * //   languages: ['en', 'et']
+ * // }
+ * ```
+ */
+async function getI18nMeta(i18nPath, primaryLng = "en") {
+    const absolutePath = path_1.default.resolve(process.cwd(), i18nPath);
+    const languages = [];
+    const namespacesSet = new Set();
+    try {
+        const entries = await promises_1.default.readdir(absolutePath, { withFileTypes: true });
+        const languageDirs = entries.filter((e) => e.isDirectory());
+        for (const langDir of languageDirs) {
+            const lng = langDir.name;
+            const langPath = path_1.default.join(absolutePath, lng);
+            const dirFiles = await promises_1.default.readdir(langPath);
+            const jsonFiles = dirFiles.filter((f) => f.endsWith(".json"));
+            if (jsonFiles.length > 0) {
+                languages.push(lng);
+                for (const jsonFile of jsonFiles) {
+                    namespacesSet.add(jsonFile.replace(".json", ""));
+                }
+            }
+        }
+    }
+    catch (error) {
+        console.error(`[kokimoki-kit] Failed to scan i18n path "${i18nPath}":`, error);
+        return null;
+    }
+    if (languages.length === 0) {
+        return null;
+    }
+    return {
+        path: "km-i18n",
+        primaryLng,
+        namespaces: Array.from(namespacesSet),
+        languages,
+    };
+}
+/**
+ * Sync primary language i18n files to the dev app build directory (initial sync).
+ * Only uploads primaryLng since that's what AI translations use as source.
+ * Other local languages are served by kit's dev middleware.
+ */
+async function syncAllI18nToDevApp(devAppInfo, i18nResources, primaryLng = "en") {
+    const primaryNamespaces = i18nResources[primaryLng];
+    if (!primaryNamespaces || Object.keys(primaryNamespaces).length === 0) {
+        return;
+    }
+    const { appId, apiKey, endpoint } = devAppInfo;
+    const syncedFiles = [];
+    // Collect namespaces from primary language only
+    const namespaces = Object.keys(primaryNamespaces);
+    // Set i18n metadata first
+    try {
+        await (0, dev_app_1.setDevAppI18n)(endpoint, apiKey, appId, {
+            path: "km-i18n",
+            primaryLng,
+            namespaces,
+        });
+        console.warn(`[kokimoki-kit] Set i18n metadata: ${namespaces.join(", ")}`);
+    }
+    catch (e) {
+        console.warn(`[kokimoki-kit] Failed to set i18n metadata:`, e instanceof Error ? e.message : e);
+        return;
+    }
+    // Upload primary language translations (used as source for AI translations)
+    for (const [ns, translations] of Object.entries(primaryNamespaces)) {
+        try {
+            await (0, dev_app_1.setDevAppTranslation)(endpoint, apiKey, appId, primaryLng, ns, translations);
+            syncedFiles.push(`${primaryLng}/${ns}`);
+        }
+        catch (e) {
+            console.warn(`[kokimoki-kit] Failed to sync translation ${primaryLng}/${ns}:`, e instanceof Error ? e.message : e);
+        }
+    }
+    if (syncedFiles.length > 0) {
+        console.warn(`[kokimoki-kit] Synced i18n: ${syncedFiles.join(", ")}`);
+    }
+}
+/**
+ * Sync a single i18n file to the dev app build directory.
+ * Only syncs if the file is for the primary language.
+ */
+async function syncI18nFile(devAppInfo, i18nPath, changedFilePath, primaryLng = "en") {
+    const i18nAbsolutePath = path_1.default.resolve(process.cwd(), i18nPath);
+    const relativePath = path_1.default.relative(i18nAbsolutePath, changedFilePath);
+    const parts = relativePath.split(path_1.default.sep);
+    if (parts.length !== 2)
+        return;
+    const [lng, filename] = parts;
+    const ns = filename.replace(".json", "");
+    // Only sync primary language (used as source for AI translations)
+    if (lng !== primaryLng) {
+        return;
+    }
+    const { appId, apiKey, endpoint } = devAppInfo;
+    try {
+        const content = await promises_1.default.readFile(changedFilePath, "utf8");
+        const translations = JSON.parse(content);
+        await (0, dev_app_1.setDevAppTranslation)(endpoint, apiKey, appId, lng, ns, translations);
+        console.warn(`[kokimoki-kit] Synced i18n: ${lng}/${ns}`);
+    }
+    catch (e) {
+        console.warn(`[kokimoki-kit] Failed to sync i18n ${lng}/${ns}:`, e instanceof Error ? e.message : e);
+    }
+}

package/dist/dev-overlays.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Development overlay HTML templates for kokimoki-kit plugin
+ */
+export interface DevAppError {
+    code: string;
+    message: string;
+}
+/**
+ * Generate a full loading page HTML that polls for initialization completion
+ */
+export declare function renderLoadingPage(): string;
+/**
+ * Generate error page HTML for dev app errors (full page)
+ */
+export declare function renderErrorPage(error: DevAppError): string;
+/**
+ * Generate stores changed warning page HTML (full page, not overlay)
+ */
+export declare function renderStoresChangedPage(canReset: boolean): string;