vite-plugin-l10n-c 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Blosharper
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,41 @@
-# Temporary Holding Version
+# vite-plugin-l10n-c
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Development-only translation editor for Vite 5+ (Node 22.12+; bundles target Node 22).
+
+```ts
+import i18n from 'vite-plugin-l10n-c'
+export default { plugins: [i18n({ baseLanguage: 'en' })] }
+```
+
+Open `/i18n/` on the dev server. Inline options override
+`l10n-c.config.json` in the Vite root. The package ships its editor assets.
+It adds no production build or preview middleware. GET `/i18n/api/locales`
+returns flattened language dictionaries; POST `/i18n/api/publish` accepts
+`{ changes: { en: { 'ui.start': 'Start' } } }`. Publish writes local files.
+Only exact API routes match. Language/key validation rejects traversal and
+prototype keys before writes; cross-origin write requests are rejected.
+
+Configuration uses the same options as `l10n-c`: `localesDir` (default
+`public/locales`), `baseLanguage` (default `ko`), `sourcePaths`, `sourceIgnore`,
+`mirrors`, `allowedRoots`, `referencePrefixes` and `languageOrder`. Paths resolve
+from the Vite project root. For example:
+
+```json
+{
+  "localesDir": "messages",
+  "baseLanguage": "en",
+  "languageOrder": ["en", "fr"]
+}
+```
+
+Each `messages/en/ui.json` owns its `ui` root. Use the editor to search keys or
+values, filter domains/languages, click a cell to edit and **Publish** to save.
+CSV exports the filtered rows with drafts. The fixed `/i18n/` routes also apply
+when Vite has a base path. File writes are sequential; a filesystem failure may
+leave partial writes. Keep the dev server on a trusted development machine.
+
+The tarball includes ESM/CommonJS builds, types, editor HTML/JS, README and MIT
+license. See the [full documentation](https://github.com/Blosharper/l10n-c#readme)
+for compatibility options and CLI checks.
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,145 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => i18nPlugin
+});
+module.exports = __toCommonJS(index_exports);
+var import_promises = __toESM(require("fs/promises"), 1);
+var import_node_path = __toESM(require("path"), 1);
+var import_node_url = require("url");
+var import_l10n_c = require("l10n-c");
+var import_meta = {};
+var assetsDir = typeof __dirname !== "undefined" ? import_node_path.default.resolve(__dirname, "../ui") : (0, import_node_url.fileURLToPath)(new URL("../ui", import_meta.url));
+async function readChanges(req) {
+  const origin = req.headers.origin;
+  if (origin && new URL(origin).host !== req.headers.host)
+    throw new Error("Cross-origin writes are not allowed");
+  if (!req.headers["content-type"]?.startsWith("application/json"))
+    throw new Error("Expected application/json");
+  let body = "";
+  for await (const chunk of req) {
+    body += chunk.toString();
+    if (Buffer.byteLength(body) > 2 * 1024 * 1024)
+      throw new Error("Payload exceeds 2 MiB");
+  }
+  const payload = JSON.parse(body);
+  if (!payload || typeof payload !== "object" || Array.isArray(payload) || !("changes" in payload))
+    throw new Error("Expected { changes: { language: { key: value } } }");
+  const changes = payload.changes;
+  if (!changes || typeof changes !== "object" || Array.isArray(changes))
+    throw new Error("Changes must be an object");
+  for (const [language, data] of Object.entries(changes)) {
+    (0, import_l10n_c.assertSegment)(language, "language");
+    (0, import_l10n_c.validateChanges)(data);
+  }
+  return changes;
+}
+function i18nPlugin(options = {}) {
+  let store;
+  return {
+    name: "vite-plugin-l10n-c",
+    apply: "serve",
+    async configResolved(config) {
+      store = await (0, import_l10n_c.createI18n)(options, config.root);
+    },
+    configureServer(server) {
+      const localesDir = store.config.localesDir;
+      server.watcher.add(localesDir);
+      const onChange = (_event, file) => {
+        const relative = import_node_path.default.relative(localesDir, import_node_path.default.resolve(file));
+        const segments = relative.split(import_node_path.default.sep);
+        if (segments.length === 2 && !relative.startsWith("..") && segments[1].endsWith(".json")) {
+          server.ws.send("i18n-update", { locale: segments[0] });
+        }
+      };
+      server.watcher.on("all", onChange);
+      server.httpServer?.once(
+        "close",
+        () => server.watcher.off("all", onChange)
+      );
+      server.middlewares.use(async (req, res, next) => {
+        const pathname = (req.url ?? "").split("?")[0];
+        const json = (status, data) => {
+          res.statusCode = status;
+          res.setHeader("Content-Type", "application/json; charset=utf-8");
+          res.end(JSON.stringify(data));
+        };
+        try {
+          if (req.method === "GET" && pathname === "/i18n/api/locales") {
+            json(200, await store.getLocales());
+            return;
+          }
+          if (req.method === "GET" && pathname === "/i18n/api/config") {
+            json(200, {
+              baseLanguage: store.config.baseLanguage,
+              languageOrder: store.config.languageOrder
+            });
+            return;
+          }
+          if (req.method === "POST" && pathname === "/i18n/api/publish") {
+            let changes;
+            try {
+              changes = await readChanges(req);
+            } catch (error) {
+              json(400, { error: error.message });
+              return;
+            }
+            for (const [language, data] of Object.entries(changes)) {
+              if (Object.keys(data).length)
+                await store.saveLocale(language, data);
+            }
+            json(200, { success: true });
+            return;
+          }
+          if (req.method === "GET" && ["/i18n", "/i18n/", "/i18n/index.html"].includes(pathname)) {
+            const html = await import_promises.default.readFile(
+              import_node_path.default.join(assetsDir, "index.html"),
+              "utf8"
+            );
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.end(await server.transformIndexHtml("/i18n/", html));
+            return;
+          }
+          if (req.method === "GET" && pathname === "/i18n/app.js") {
+            res.setHeader("Content-Type", "text/javascript; charset=utf-8");
+            res.end(await import_promises.default.readFile(import_node_path.default.join(assetsDir, "app.js"), "utf8"));
+            return;
+          }
+          next();
+        } catch (error) {
+          json(500, { error: error.message });
+        }
+      });
+    }
+  };
+}
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import fs from 'node:fs/promises'\nimport path from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport type { IncomingMessage } from 'node:http'\nimport type { Plugin } from 'vite'\nimport {\n  createI18n,\n  assertSegment,\n  validateChanges,\n  type I18nConfig,\n  type LocaleStore,\n} from 'l10n-c'\n\nexport type { I18nConfig } from 'l10n-c'\nconst assetsDir =\n  typeof __dirname !== 'undefined'\n    ? path.resolve(__dirname, '../ui')\n    : fileURLToPath(new URL('../ui', import.meta.url))\n\nasync function readChanges(\n  req: IncomingMessage,\n): Promise<Record<string, Record<string, string>>> {\n  const origin = req.headers.origin\n  if (origin && new URL(origin).host !== req.headers.host)\n    throw new Error('Cross-origin writes are not allowed')\n  if (!req.headers['content-type']?.startsWith('application/json'))\n    throw new Error('Expected application/json')\n  let body = ''\n  for await (const chunk of req) {\n    body += chunk.toString()\n    if (Buffer.byteLength(body) > 2 * 1024 * 1024)\n      throw new Error('Payload exceeds 2 MiB')\n  }\n  const payload: unknown = JSON.parse(body)\n  if (\n    !payload ||\n    typeof payload !== 'object' ||\n    Array.isArray(payload) ||\n    !('changes' in payload)\n  )\n    throw new Error('Expected { changes: { language: { key: value } } }')\n  const changes = payload.changes\n  if (!changes || typeof changes !== 'object' || Array.isArray(changes))\n    throw new Error('Changes must be an object')\n  // Validate every entry before the first filesystem write.\n  for (const [language, data] of Object.entries(changes)) {\n    assertSegment(language, 'language')\n    validateChanges(data)\n  }\n  return changes as Record<string, Record<string, string>>\n}\n\n/** Development-only locale editor. Open /i18n/ on the Vite dev server. */\nexport default function i18nPlugin(options: I18nConfig = {}): Plugin {\n  let store: LocaleStore\n  return {\n    name: 'vite-plugin-l10n-c',\n    apply: 'serve',\n    async configResolved(config) {\n      store = await createI18n(options, config.root)\n    },\n    configureServer(server) {\n      const localesDir = store.config.localesDir\n      server.watcher.add(localesDir)\n      const onChange = (_event: string, file: string) => {\n        const relative = path.relative(localesDir, path.resolve(file))\n        const segments = relative.split(path.sep)\n        if (\n          segments.length === 2 &&\n          !relative.startsWith('..') &&\n          segments[1].endsWith('.json')\n        ) {\n          server.ws.send('i18n-update', { locale: segments[0] })\n        }\n      }\n      server.watcher.on('all', onChange)\n      server.httpServer?.once('close', () =>\n        server.watcher.off('all', onChange),\n      )\n      server.middlewares.use(async (req, res, next) => {\n        const pathname = (req.url ?? '').split('?')[0]\n        const json = (status: number, data: unknown) => {\n          res.statusCode = status\n          res.setHeader('Content-Type', 'application/json; charset=utf-8')\n          res.end(JSON.stringify(data))\n        }\n        try {\n          if (req.method === 'GET' && pathname === '/i18n/api/locales') {\n            json(200, await store.getLocales())\n            return\n          }\n          if (req.method === 'GET' && pathname === '/i18n/api/config') {\n            json(200, {\n              baseLanguage: store.config.baseLanguage,\n              languageOrder: store.config.languageOrder,\n            })\n            return\n          }\n          if (req.method === 'POST' && pathname === '/i18n/api/publish') {\n            let changes: Record<string, Record<string, string>>\n            try {\n              changes = await readChanges(req)\n            } catch (error) {\n              json(400, { error: (error as Error).message })\n              return\n            }\n            for (const [language, data] of Object.entries(changes)) {\n              if (Object.keys(data).length)\n                await store.saveLocale(language, data)\n            }\n            json(200, { success: true })\n            return\n          }\n          if (\n            req.method === 'GET' &&\n            ['/i18n', '/i18n/', '/i18n/index.html'].includes(pathname)\n          ) {\n            const html = await fs.readFile(\n              path.join(assetsDir, 'index.html'),\n              'utf8',\n            )\n            res.setHeader('Content-Type', 'text/html; charset=utf-8')\n            res.end(await server.transformIndexHtml('/i18n/', html))\n            return\n          }\n          if (req.method === 'GET' && pathname === '/i18n/app.js') {\n            res.setHeader('Content-Type', 'text/javascript; charset=utf-8')\n            res.end(await fs.readFile(path.join(assetsDir, 'app.js'), 'utf8'))\n            return\n          }\n          next()\n        } catch (error) {\n          json(500, { error: (error as Error).message })\n        }\n      })\n    },\n  }\n}\n"],"mappings":"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","names":["path","fs"]}

package/dist/index.d.cts

@@ -0,0 +1,8 @@
+import { Plugin } from 'vite';
+import { I18nConfig } from 'l10n-c';
+export { I18nConfig } from 'l10n-c';
+
+/** Development-only locale editor. Open /i18n/ on the Vite dev server. */
+declare function i18nPlugin(options?: I18nConfig): Plugin;
+
+export { i18nPlugin as default };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from 'vite';
+import { I18nConfig } from 'l10n-c';
+export { I18nConfig } from 'l10n-c';
+
+/** Development-only locale editor. Open /i18n/ on the Vite dev server. */
+declare function i18nPlugin(options?: I18nConfig): Plugin;
+
+export { i18nPlugin as default };

package/dist/index.js

@@ -0,0 +1,117 @@
+// src/index.ts
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+import {
+  createI18n,
+  assertSegment,
+  validateChanges
+} from "l10n-c";
+var assetsDir = typeof __dirname !== "undefined" ? path.resolve(__dirname, "../ui") : fileURLToPath(new URL("../ui", import.meta.url));
+async function readChanges(req) {
+  const origin = req.headers.origin;
+  if (origin && new URL(origin).host !== req.headers.host)
+    throw new Error("Cross-origin writes are not allowed");
+  if (!req.headers["content-type"]?.startsWith("application/json"))
+    throw new Error("Expected application/json");
+  let body = "";
+  for await (const chunk of req) {
+    body += chunk.toString();
+    if (Buffer.byteLength(body) > 2 * 1024 * 1024)
+      throw new Error("Payload exceeds 2 MiB");
+  }
+  const payload = JSON.parse(body);
+  if (!payload || typeof payload !== "object" || Array.isArray(payload) || !("changes" in payload))
+    throw new Error("Expected { changes: { language: { key: value } } }");
+  const changes = payload.changes;
+  if (!changes || typeof changes !== "object" || Array.isArray(changes))
+    throw new Error("Changes must be an object");
+  for (const [language, data] of Object.entries(changes)) {
+    assertSegment(language, "language");
+    validateChanges(data);
+  }
+  return changes;
+}
+function i18nPlugin(options = {}) {
+  let store;
+  return {
+    name: "vite-plugin-l10n-c",
+    apply: "serve",
+    async configResolved(config) {
+      store = await createI18n(options, config.root);
+    },
+    configureServer(server) {
+      const localesDir = store.config.localesDir;
+      server.watcher.add(localesDir);
+      const onChange = (_event, file) => {
+        const relative = path.relative(localesDir, path.resolve(file));
+        const segments = relative.split(path.sep);
+        if (segments.length === 2 && !relative.startsWith("..") && segments[1].endsWith(".json")) {
+          server.ws.send("i18n-update", { locale: segments[0] });
+        }
+      };
+      server.watcher.on("all", onChange);
+      server.httpServer?.once(
+        "close",
+        () => server.watcher.off("all", onChange)
+      );
+      server.middlewares.use(async (req, res, next) => {
+        const pathname = (req.url ?? "").split("?")[0];
+        const json = (status, data) => {
+          res.statusCode = status;
+          res.setHeader("Content-Type", "application/json; charset=utf-8");
+          res.end(JSON.stringify(data));
+        };
+        try {
+          if (req.method === "GET" && pathname === "/i18n/api/locales") {
+            json(200, await store.getLocales());
+            return;
+          }
+          if (req.method === "GET" && pathname === "/i18n/api/config") {
+            json(200, {
+              baseLanguage: store.config.baseLanguage,
+              languageOrder: store.config.languageOrder
+            });
+            return;
+          }
+          if (req.method === "POST" && pathname === "/i18n/api/publish") {
+            let changes;
+            try {
+              changes = await readChanges(req);
+            } catch (error) {
+              json(400, { error: error.message });
+              return;
+            }
+            for (const [language, data] of Object.entries(changes)) {
+              if (Object.keys(data).length)
+                await store.saveLocale(language, data);
+            }
+            json(200, { success: true });
+            return;
+          }
+          if (req.method === "GET" && ["/i18n", "/i18n/", "/i18n/index.html"].includes(pathname)) {
+            const html = await fs.readFile(
+              path.join(assetsDir, "index.html"),
+              "utf8"
+            );
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.end(await server.transformIndexHtml("/i18n/", html));
+            return;
+          }
+          if (req.method === "GET" && pathname === "/i18n/app.js") {
+            res.setHeader("Content-Type", "text/javascript; charset=utf-8");
+            res.end(await fs.readFile(path.join(assetsDir, "app.js"), "utf8"));
+            return;
+          }
+          next();
+        } catch (error) {
+          json(500, { error: error.message });
+        }
+      });
+    }
+  };
+}
+export {
+  i18nPlugin as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import fs from 'node:fs/promises'\nimport path from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport type { IncomingMessage } from 'node:http'\nimport type { Plugin } from 'vite'\nimport {\n  createI18n,\n  assertSegment,\n  validateChanges,\n  type I18nConfig,\n  type LocaleStore,\n} from 'l10n-c'\n\nexport type { I18nConfig } from 'l10n-c'\nconst assetsDir =\n  typeof __dirname !== 'undefined'\n    ? path.resolve(__dirname, '../ui')\n    : fileURLToPath(new URL('../ui', import.meta.url))\n\nasync function readChanges(\n  req: IncomingMessage,\n): Promise<Record<string, Record<string, string>>> {\n  const origin = req.headers.origin\n  if (origin && new URL(origin).host !== req.headers.host)\n    throw new Error('Cross-origin writes are not allowed')\n  if (!req.headers['content-type']?.startsWith('application/json'))\n    throw new Error('Expected application/json')\n  let body = ''\n  for await (const chunk of req) {\n    body += chunk.toString()\n    if (Buffer.byteLength(body) > 2 * 1024 * 1024)\n      throw new Error('Payload exceeds 2 MiB')\n  }\n  const payload: unknown = JSON.parse(body)\n  if (\n    !payload ||\n    typeof payload !== 'object' ||\n    Array.isArray(payload) ||\n    !('changes' in payload)\n  )\n    throw new Error('Expected { changes: { language: { key: value } } }')\n  const changes = payload.changes\n  if (!changes || typeof changes !== 'object' || Array.isArray(changes))\n    throw new Error('Changes must be an object')\n  // Validate every entry before the first filesystem write.\n  for (const [language, data] of Object.entries(changes)) {\n    assertSegment(language, 'language')\n    validateChanges(data)\n  }\n  return changes as Record<string, Record<string, string>>\n}\n\n/** Development-only locale editor. Open /i18n/ on the Vite dev server. */\nexport default function i18nPlugin(options: I18nConfig = {}): Plugin {\n  let store: LocaleStore\n  return {\n    name: 'vite-plugin-l10n-c',\n    apply: 'serve',\n    async configResolved(config) {\n      store = await createI18n(options, config.root)\n    },\n    configureServer(server) {\n      const localesDir = store.config.localesDir\n      server.watcher.add(localesDir)\n      const onChange = (_event: string, file: string) => {\n        const relative = path.relative(localesDir, path.resolve(file))\n        const segments = relative.split(path.sep)\n        if (\n          segments.length === 2 &&\n          !relative.startsWith('..') &&\n          segments[1].endsWith('.json')\n        ) {\n          server.ws.send('i18n-update', { locale: segments[0] })\n        }\n      }\n      server.watcher.on('all', onChange)\n      server.httpServer?.once('close', () =>\n        server.watcher.off('all', onChange),\n      )\n      server.middlewares.use(async (req, res, next) => {\n        const pathname = (req.url ?? '').split('?')[0]\n        const json = (status: number, data: unknown) => {\n          res.statusCode = status\n          res.setHeader('Content-Type', 'application/json; charset=utf-8')\n          res.end(JSON.stringify(data))\n        }\n        try {\n          if (req.method === 'GET' && pathname === '/i18n/api/locales') {\n            json(200, await store.getLocales())\n            return\n          }\n          if (req.method === 'GET' && pathname === '/i18n/api/config') {\n            json(200, {\n              baseLanguage: store.config.baseLanguage,\n              languageOrder: store.config.languageOrder,\n            })\n            return\n          }\n          if (req.method === 'POST' && pathname === '/i18n/api/publish') {\n            let changes: Record<string, Record<string, string>>\n            try {\n              changes = await readChanges(req)\n            } catch (error) {\n              json(400, { error: (error as Error).message })\n              return\n            }\n            for (const [language, data] of Object.entries(changes)) {\n              if (Object.keys(data).length)\n                await store.saveLocale(language, data)\n            }\n            json(200, { success: true })\n            return\n          }\n          if (\n            req.method === 'GET' &&\n            ['/i18n', '/i18n/', '/i18n/index.html'].includes(pathname)\n          ) {\n            const html = await fs.readFile(\n              path.join(assetsDir, 'index.html'),\n              'utf8',\n            )\n            res.setHeader('Content-Type', 'text/html; charset=utf-8')\n            res.end(await server.transformIndexHtml('/i18n/', html))\n            return\n          }\n          if (req.method === 'GET' && pathname === '/i18n/app.js') {\n            res.setHeader('Content-Type', 'text/javascript; charset=utf-8')\n            res.end(await fs.readFile(path.join(assetsDir, 'app.js'), 'utf8'))\n            return\n          }\n          next()\n        } catch (error) {\n          json(500, { error: (error as Error).message })\n        }\n      })\n    },\n  }\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,55 @@
 {
   "name": "vite-plugin-l10n-c",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Development-only Vite translation manager for l10n-c",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "ui/index.html",
+    "ui/app.js"
+  ],
+  "scripts": {
+    "build": "tsup && esbuild ui/app.ts --bundle --format=esm --target=es2022 --outfile=ui/app.js",
+    "prepublishOnly": "npm run build"
+  },
+  "author": "firejune",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Blosharper/l10n-c.git",
+    "directory": "packages/vite-plugin-l10n-c"
+  },
+  "bugs": {
+    "url": "https://github.com/Blosharper/l10n-c/issues"
+  },
+  "homepage": "https://github.com/Blosharper/l10n-c#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^7.3.0",
+    "esbuild": "^0.25.0"
+  },
+  "dependencies": {
+    "l10n-c": "^0.2.0"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  }
+}

package/ui/app.js

@@ -0,0 +1,402 @@
+// ui/app.ts
+var localesData = {};
+var languages = [];
+var allKeys = [];
+var filteredKeys = [];
+var categories = [];
+var visibleLanguages = [];
+var selectedCategories = [];
+var selectedLanguages = [];
+var changes = {};
+var tableHead = document.getElementById("table-head");
+var tableBody = document.getElementById("table-body");
+var btnPublish = document.getElementById("btn-publish");
+var btnDownloadCsv = document.getElementById(
+  "btn-download-csv"
+);
+var searchInput = document.getElementById("search");
+var categoryAnchor = document.getElementById("category-anchor");
+var categoryItems = document.getElementById("category-items");
+var categoryDropdown = document.getElementById("category-dropdown");
+var languageAnchor = document.getElementById("language-anchor");
+var languageItems = document.getElementById("language-items");
+var languageDropdown = document.getElementById("language-dropdown");
+var scrollSentinel = document.getElementById("scroll-sentinel");
+var tableContainer = document.getElementById("table-container");
+var progressBar = document.getElementById("progress-bar");
+var visibilityObserver;
+async function init() {
+  try {
+    const res = await fetch("/i18n/api/locales");
+    if (!res.ok) throw new Error("Failed to fetch locales");
+    localesData = await res.json();
+    const configResponse = await fetch("/i18n/api/config");
+    if (!configResponse.ok)
+      throw new Error("Failed to fetch editor configuration");
+    const { languageOrder: predefinedOrder } = await configResponse.json();
+    const availableLangs = Object.keys(localesData);
+    languages = predefinedOrder.filter((l) => availableLangs.includes(l));
+    languages.push(
+      ...availableLangs.filter((l) => !predefinedOrder.includes(l))
+    );
+    const keySet = /* @__PURE__ */ new Set();
+    const catSet = /* @__PURE__ */ new Set();
+    for (const lang of languages) {
+      for (const key of Object.keys(localesData[lang])) {
+        if (!key.startsWith("_meta")) {
+          keySet.add(key);
+          if (key.includes(".")) {
+            const cat = key.split(".")[0];
+            if (cat !== "_meta") {
+              catSet.add(cat);
+            }
+          }
+        }
+      }
+    }
+    allKeys = Array.from(keySet).sort();
+    categories = Array.from(catSet).sort();
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has("search")) searchInput.value = urlParams.get("search");
+    selectedCategories = urlParams.has("category") ? urlParams.get("category").split(",") : [];
+    selectedCategories.sort(
+      (a, b) => categories.indexOf(a) - categories.indexOf(b)
+    );
+    selectedLanguages = urlParams.has("language") ? urlParams.get("language").split(",").filter((l) => languages.includes(l)) : [];
+    selectedLanguages.sort(
+      (a, b) => languages.indexOf(a) - languages.indexOf(b)
+    );
+    categories.forEach((cat) => {
+      const li = document.createElement("li");
+      const cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.value = cat;
+      cb.checked = selectedCategories.includes(cat);
+      cb.addEventListener("change", () => {
+        if (cb.checked) {
+          selectedCategories.push(cat);
+          selectedCategories.sort(
+            (a, b) => categories.indexOf(a) - categories.indexOf(b)
+          );
+        } else selectedCategories = selectedCategories.filter((c) => c !== cat);
+        updateDropdownAnchor(categoryAnchor, selectedCategories, "Categories");
+        applyFilters();
+      });
+      li.appendChild(cb);
+      const count = allKeys.filter(
+        (key) => key === cat || key.startsWith(cat + ".")
+      ).length;
+      li.appendChild(document.createTextNode(` ${cat} (${count})`));
+      categoryItems.appendChild(li);
+    });
+    updateDropdownAnchor(categoryAnchor, selectedCategories, "Categories");
+    languages.forEach((l) => {
+      const li = document.createElement("li");
+      const cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.value = l;
+      cb.checked = selectedLanguages.includes(l);
+      cb.addEventListener("change", () => {
+        if (cb.checked) {
+          selectedLanguages.push(l);
+          selectedLanguages.sort(
+            (a, b) => languages.indexOf(a) - languages.indexOf(b)
+          );
+        } else selectedLanguages = selectedLanguages.filter((x) => x !== l);
+        updateDropdownAnchor(languageAnchor, selectedLanguages, "Languages");
+        applyFilters();
+      });
+      li.appendChild(cb);
+      li.appendChild(document.createTextNode(` ${l.toUpperCase()}`));
+      languageItems.appendChild(li);
+    });
+    updateDropdownAnchor(languageAnchor, selectedLanguages, "Languages");
+    setupDropdown(categoryDropdown, categoryAnchor);
+    setupDropdown(languageDropdown, languageAnchor);
+    languages.forEach((l) => changes[l] = {});
+    setupObservers();
+    applyFilters();
+    setTimeout(() => {
+      const savedScroll = localStorage.getItem("i18nScrollTop");
+      if (savedScroll) {
+        tableContainer.scrollTop = parseInt(savedScroll, 10);
+      }
+    }, 100);
+  } catch (err) {
+    console.error(err);
+    alert(`Failed to load locales: ${err.message}`);
+  }
+}
+function setupObservers() {
+  visibilityObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const tr = entry.target;
+        if (entry.isIntersecting) {
+          fillRow(tr);
+        } else {
+          if (!tr.querySelector(".editing")) {
+            clearRow(tr);
+          }
+        }
+      });
+    },
+    {
+      root: tableContainer,
+      rootMargin: "200px"
+    }
+  );
+}
+function applyFilters() {
+  const filterText = searchInput.value.toLowerCase();
+  visibleLanguages = selectedLanguages.length > 0 ? selectedLanguages : languages;
+  const url = new URL(window.location.href);
+  if (filterText) url.searchParams.set("search", filterText);
+  else url.searchParams.delete("search");
+  if (selectedCategories.length > 0)
+    url.searchParams.set("category", selectedCategories.join(","));
+  else url.searchParams.delete("category");
+  if (selectedLanguages.length > 0)
+    url.searchParams.set("language", selectedLanguages.join(","));
+  else url.searchParams.delete("language");
+  window.history.replaceState({}, "", url);
+  const prevScrollTop = tableContainer.scrollTop;
+  filteredKeys = allKeys.filter((key) => {
+    if (selectedCategories.length > 0) {
+      const matchCat = selectedCategories.some(
+        (cat) => key === cat || key.startsWith(cat + ".")
+      );
+      if (!matchCat) return false;
+    }
+    let match = key.toLowerCase().includes(filterText);
+    if (!match) {
+      for (const lang of visibleLanguages) {
+        const rawVal = localesData[lang][key];
+        const val = rawVal === null || rawVal === void 0 ? "" : String(rawVal);
+        if (val.toLowerCase().includes(filterText)) {
+          match = true;
+          break;
+        }
+      }
+    }
+    return match;
+  });
+  tableHead.innerHTML = `<th class="key-col">Key (${filteredKeys.length})</th>`;
+  const counts = visibleLanguages.map((lang) => {
+    return filteredKeys.filter((key) => {
+      return localesData[lang][key] !== void 0 || changes[lang][key] !== void 0;
+    }).length;
+  });
+  const maxCount = Math.max(...counts);
+  visibleLanguages.forEach((lang, idx) => {
+    const count = counts[idx];
+    const cls = count !== maxCount ? ' class="warning"' : "";
+    tableHead.innerHTML += `<th${cls}>${lang.toUpperCase()} (${count})</th>`;
+  });
+  renderVirtualTable();
+  setTimeout(() => {
+    tableContainer.scrollTop = prevScrollTop;
+  }, 0);
+}
+function renderVirtualTable() {
+  visibilityObserver.disconnect();
+  tableBody.innerHTML = "";
+  const fragment = document.createDocumentFragment();
+  for (let i = 0; i < filteredKeys.length; i++) {
+    const tr = document.createElement("tr");
+    tr.className = "virtual-row";
+    tr.dataset.index = String(i);
+    visibilityObserver.observe(tr);
+    fragment.appendChild(tr);
+  }
+  tableBody.appendChild(fragment);
+  updateProgressBar();
+}
+function clearRow(tr) {
+  tr.innerHTML = "";
+}
+function fillRow(tr) {
+  if (tr.childElementCount > 0) return;
+  const index = parseInt(tr.dataset.index || "0", 10);
+  const key = filteredKeys[index];
+  if (!key) return;
+  const fragment = document.createDocumentFragment();
+  const tdKey = document.createElement("td");
+  tdKey.className = "key-label";
+  tdKey.textContent = key;
+  tdKey.title = key;
+  fragment.appendChild(tdKey);
+  visibleLanguages.forEach((lang) => {
+    const td = document.createElement("td");
+    td.className = "editable-cell";
+    const rawVal = localesData[lang][key];
+    const val = rawVal === null || rawVal === void 0 ? "" : String(rawVal);
+    const isMissing = !val.trim();
+    if (isMissing) td.classList.add("missing");
+    let changedVal = changes[lang][key];
+    let displayVal = changedVal !== void 0 ? changedVal : val;
+    if (changedVal !== void 0) {
+      td.classList.add("changed");
+      td.classList.remove("missing");
+    }
+    const contentDiv = document.createElement("div");
+    contentDiv.className = "cell-content";
+    contentDiv.textContent = displayVal || (isMissing ? "(Empty)" : "");
+    td.appendChild(contentDiv);
+    td.addEventListener("click", () => {
+      if (td.classList.contains("editing")) return;
+      td.classList.add("editing");
+      changedVal = changes[lang][key];
+      const currentValue = localesData[lang][key];
+      displayVal = changedVal !== void 0 ? changedVal : String(currentValue ?? "");
+      const textarea = document.createElement("textarea");
+      textarea.value = displayVal;
+      textarea.placeholder = isMissing ? "(Empty)" : "";
+      contentDiv.style.visibility = "hidden";
+      td.appendChild(textarea);
+      textarea.focus();
+      textarea.style.height = "auto";
+      textarea.style.height = textarea.scrollHeight + "px";
+      textarea.addEventListener("input", function() {
+        this.style.height = "auto";
+        this.style.height = this.scrollHeight + "px";
+      });
+      textarea.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          textarea.blur();
+        }
+      });
+      textarea.addEventListener("blur", () => {
+        const newVal = textarea.value;
+        handleInput(lang, key, newVal, td);
+        contentDiv.textContent = newVal || (!newVal.trim() ? "(Empty)" : "");
+        contentDiv.style.visibility = "visible";
+        textarea.remove();
+        td.classList.remove("editing");
+      });
+    });
+    fragment.appendChild(td);
+  });
+  tr.appendChild(fragment);
+}
+function updateProgressBar() {
+  const scrollHeight = tableContainer.scrollHeight;
+  const clientHeight = tableContainer.clientHeight;
+  const scrollTop = tableContainer.scrollTop;
+  const maxScroll = scrollHeight - clientHeight;
+  if (maxScroll <= 0) {
+    progressBar.style.width = "0%";
+    progressBar.style.left = "0%";
+    return;
+  }
+  const widthPercent = clientHeight / scrollHeight * 100;
+  const leftPercent = scrollTop / scrollHeight * 100;
+  progressBar.style.width = `${Math.min(widthPercent, 100)}%`;
+  progressBar.style.left = `${Math.min(leftPercent, 100)}%`;
+}
+tableContainer.addEventListener("scroll", () => {
+  updateProgressBar();
+  localStorage.setItem("i18nScrollTop", tableContainer.scrollTop.toString());
+});
+window.addEventListener("resize", updateProgressBar);
+function handleInput(lang, key, value, tdElement) {
+  const rawOriginal = localesData[lang][key];
+  const original = rawOriginal === null || rawOriginal === void 0 ? "" : String(rawOriginal);
+  if (value !== original) {
+    changes[lang][key] = value;
+    tdElement.classList.add("changed");
+    if (value.trim()) tdElement.classList.remove("missing");
+  } else {
+    delete changes[lang][key];
+    tdElement.classList.remove("changed");
+    if (!value.trim()) tdElement.classList.add("missing");
+  }
+  updatePublishButton();
+}
+function updatePublishButton() {
+  let count = 0;
+  languages.forEach((lang) => {
+    count += Object.keys(changes[lang]).length;
+  });
+  btnPublish.textContent = `\u{1F680} Publish (${count})`;
+  btnPublish.disabled = count === 0;
+}
+btnPublish.addEventListener("click", async () => {
+  try {
+    btnPublish.disabled = true;
+    btnPublish.textContent = "\u{1F680} Publishing...";
+    const res = await fetch("/i18n/api/publish", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ changes })
+    });
+    if (!res.ok) throw new Error("Publish failed");
+    btnPublish.textContent = "\u{1F680} Saved successfully!";
+    languages.forEach((lang) => {
+      Object.assign(localesData[lang], changes[lang]);
+      changes[lang] = {};
+    });
+    document.querySelectorAll(".changed").forEach((el) => el.classList.remove("changed"));
+    setTimeout(() => {
+      updatePublishButton();
+    }, 2e3);
+  } catch (err) {
+    console.error(err);
+    alert(`Error: ${err.message}`);
+    updatePublishButton();
+  }
+});
+function downloadCSV() {
+  let csvContent = "\uFEFF";
+  const headers = ["Key", ...visibleLanguages.map((l) => l.toUpperCase())];
+  csvContent += headers.map(escapeCSV).join(",") + "\n";
+  for (const key of filteredKeys) {
+    const row = [key];
+    for (const lang of visibleLanguages) {
+      let val = changes[lang][key] !== void 0 ? changes[lang][key] : localesData[lang][key];
+      val = val === null || val === void 0 ? "" : String(val);
+      row.push(escapeCSV(val));
+    }
+    csvContent += row.join(",") + "\n";
+  }
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  const dateStr = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+  a.href = url;
+  a.download = `l10n-c_${dateStr}.csv`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+function escapeCSV(str) {
+  if (str.includes(",") || str.includes("\n") || str.includes('"')) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+btnDownloadCsv.addEventListener("click", downloadCSV);
+searchInput.addEventListener("input", () => {
+  applyFilters();
+});
+function setupDropdown(dropdown, anchor) {
+  anchor.addEventListener("click", (e) => {
+    dropdown.classList.toggle("visible");
+    e.stopPropagation();
+  });
+}
+document.addEventListener("click", (e) => {
+  if (!categoryDropdown.contains(e.target))
+    categoryDropdown.classList.remove("visible");
+  if (!languageDropdown.contains(e.target))
+    languageDropdown.classList.remove("visible");
+});
+function updateDropdownAnchor(anchor, selected, typeName) {
+  if (selected.length === 0) {
+    anchor.textContent = `All ${typeName}`;
+  } else {
+    anchor.textContent = selected.join(", ");
+  }
+}
+init();

package/ui/index.html

@@ -0,0 +1,365 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>l10n-c Translation Manager</title>
+    <style>
+      :root {
+        --bg-color: #121212;
+        --panel-bg: #1e1e1e;
+        --text-main: #e0e0e0;
+        --text-muted: #888;
+        --border-color: #333;
+        --primary: #bb86fc;
+        --danger: #cf6679;
+        --highlight: rgba(187, 134, 252, 0.1);
+      }
+      body {
+        font-family:
+          'Inter',
+          -apple-system,
+          BlinkMacSystemFont,
+          'Segoe UI',
+          Roboto,
+          Helvetica,
+          Arial,
+          sans-serif;
+        margin: 0;
+        padding: 0;
+        background-color: var(--bg-color);
+        color: var(--text-main);
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        overflow: hidden;
+      }
+      header {
+        background-color: var(--panel-bg);
+        padding: 1rem 2rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid var(--border-color);
+        flex-shrink: 0;
+        z-index: 100;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+      }
+      h1 {
+        margin: 0;
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--primary);
+      }
+      .header-actions {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+      }
+      button {
+        background-color: var(--primary);
+        color: #000;
+        border: none;
+        padding: 0.5rem 1.2rem;
+        font-size: 0.85rem;
+        font-weight: 600;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+      }
+      button:hover:not(:disabled) {
+        opacity: 0.9;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(187, 134, 252, 0.2);
+      }
+      button:disabled {
+        background-color: var(--border-color);
+        color: var(--text-muted);
+        cursor: not-allowed;
+      }
+
+      .table-container {
+        flex-grow: 1;
+        overflow-y: auto;
+        overflow-x: auto;
+        position: relative;
+      }
+      table {
+        width: 100%;
+        min-width: max-content;
+        border-collapse: collapse;
+        table-layout: fixed;
+      }
+      th,
+      td {
+        border: 1px solid var(--border-color);
+        padding: 0;
+        vertical-align: top;
+      }
+      th {
+        background-color: #1a1a1a;
+        color: var(--text-muted);
+        text-align: left;
+        padding: 0.75rem 1rem;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        position: sticky;
+        top: -1px;
+        z-index: 10;
+        min-width: 240px;
+      }
+      th::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -1px;
+        height: 1px;
+        background-color: var(--border-color);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+        pointer-events: none;
+        z-index: 11;
+      }
+      th.key-col {
+        width: 128px;
+        min-width: 128px;
+        max-width: 128px;
+        background-color: #161616;
+        border-right: 2px solid var(--border-color);
+      }
+      th.warning {
+        color: var(--danger);
+      }
+      .key-label {
+        padding: 0.8rem;
+        font-size: 0.75rem;
+        font-family: monospace;
+        color: var(--primary);
+        background-color: #161616;
+        border-right: 2px solid var(--border-color);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .editable-cell {
+        position: relative;
+      }
+      .cell-content {
+        min-height: 20px;
+        white-space: pre-wrap;
+        word-break: break-word;
+        padding: 0.6rem 0.8rem;
+        font-size: 0.75rem;
+        cursor: text;
+        line-height: 1.4;
+      }
+      .editable-cell:hover .cell-content {
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+      .missing .cell-content {
+        color: var(--danger);
+        opacity: 0.7;
+      }
+      textarea {
+        width: 100%;
+        min-height: 48px;
+        background: var(--highlight);
+        border: 2px solid var(--primary);
+        color: var(--text-main);
+        padding: 0.6rem 0.8rem;
+        box-sizing: border-box;
+        resize: vertical;
+        font-family: inherit;
+        font-size: 0.75rem;
+        line-height: 1.4;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 20;
+      }
+      textarea:focus {
+        outline: none;
+      }
+      .changed {
+        border-left: 3px solid var(--primary);
+      }
+
+      #search {
+        padding: 0.5rem;
+        border-radius: 4px;
+        border: 1px solid var(--border-color);
+        background: var(--bg-color);
+        color: var(--text-main);
+        width: 128px;
+      }
+      #category {
+        padding: 0.5rem;
+        border-radius: 4px;
+        border: 1px solid var(--border-color);
+        background: var(--bg-color);
+        color: var(--text-main);
+      }
+
+      .pagination {
+        display: none;
+      }
+
+      #scroll-sentinel {
+        height: 20px;
+        margin-top: 10px;
+      }
+
+      /* Custom Dropdown Check List */
+      .dropdown-check-list {
+        display: inline-block;
+        position: relative;
+        background: var(--bg-color);
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+        min-width: 128px;
+        color: var(--text-main);
+        cursor: pointer;
+        user-select: none;
+        max-width: 128px;
+      }
+      .dropdown-check-list .anchor {
+        display: block;
+        padding: 0.5rem 2rem 0.5rem 0.5rem;
+        position: relative;
+        font-size: 0.85rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .dropdown-check-list .anchor::after {
+        content: '▼';
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 0.7rem;
+      }
+      .dropdown-check-list .items {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: -1px;
+        right: -1px;
+        background: var(--panel-bg);
+        border: 1px solid var(--border-color);
+        border-top: none;
+        z-index: 1000;
+        max-height: 400px;
+        overflow-y: auto;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+      }
+      .dropdown-check-list.visible .items {
+        display: block;
+      }
+      .dropdown-check-list .items li {
+        padding: 0.5rem;
+        font-size: 0.8rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      .dropdown-check-list .items li:hover {
+        background: rgba(255, 255, 255, 0.05);
+      }
+      .dropdown-check-list .items input[type='checkbox'] {
+        cursor: pointer;
+      }
+
+
+      .virtual-row {
+        height: 14px;
+      }
+      .virtual-row td {
+        height: 14px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      ::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+      }
+      ::-webkit-scrollbar-track {
+        background: var(--bg-color);
+      }
+      ::-webkit-scrollbar-thumb {
+        background: var(--border-color);
+        border-radius: 5px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: var(--text-muted);
+      }
+
+      .progress-container {
+        height: 3px;
+        width: 100%;
+        background-color: var(--border-color);
+        flex-shrink: 0;
+        position: relative;
+      }
+      .progress-bar {
+        height: 100%;
+        width: 0%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        background: linear-gradient(90deg, #bb86fc, #ff79c6);
+        box-shadow: 0 0 8px var(--primary);
+        border-radius: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1>🌸 I18n Manager</h1>
+      <div class="header-actions">
+        <div id="language-dropdown" class="dropdown-check-list">
+          <span class="anchor" id="language-anchor">All Languages</span>
+          <ul class="items" id="language-items"></ul>
+        </div>
+        <div id="category-dropdown" class="dropdown-check-list">
+          <span class="anchor" id="category-anchor">All Categories</span>
+          <ul class="items" id="category-items"></ul>
+        </div>
+        <input type="text" id="search" placeholder="Search keys or translations..." />
+
+        <button id="btn-download-csv">📥 CSV</button>
+        <button id="btn-publish" disabled>🚀 Publish (0)</button>
+      </div>
+    </header>
+
+    <div class="progress-container">
+      <div class="progress-bar" id="progress-bar"></div>
+    </div>
+
+    <div class="table-container" id="table-container">
+      <table id="i18n-table">
+        <thead>
+          <tr id="table-head">
+            <!-- Dynamically generated -->
+          </tr>
+        </thead>
+        <tbody id="table-body">
+          <!-- Dynamically generated -->
+        </tbody>
+      </table>
+      <div id="scroll-sentinel"></div>
+    </div>
+
+    <script type="module" src="/i18n/app.js"></script>
+  </body>
+</html>