@tuhama/translation-manager 0.7.2 → 0.8.0

package/README.md

@@ -6,52 +6,79 @@ A modern, web-based interface for managing i18n translation files in React and o
 > This project is **AI-Ready**. AI agents can use the included `translations.skill` to automatically audit and manage your translations.
 
 ## Features
+
 - **Modern UI**: Dark mode, glassmorphism, and smooth animations.
 - **AI-Powered Translation**: Support for **OpenAI (GPT-4o)**, **Google Gemini**, and Google Cloud Translate.
 - **Context-Aware Scanning**: Extracts code snippets where translation keys are used, providing crucial context for AI translations.
 - **Missing Keys Detection**: Identifies translation keys used in source code but missing from files.
 - **Cleanup Tool**: Detects and batch-removes unused translation keys.
 - **Normalization**: Synchronizes keys across all languages and sorts them alphabetically with one click.
+- **External Namespaces**: Support for directory-based translation storage (e.g., `en/common.json`, `en/auth.json`).
+- **Multiple Namespace Scanning**: Automatically detects multiple `useTranslation` hooks and array-based namespace definitions in a single file.
+- **Deep Nesting**: Supports deep-nested directory structures for complex projects.
 - **Export/Import**: Export all missing translations to an **AI-Friendly** JSON file (including code context) for external translation.
 - **CLI Status**: Machine-readable JSON output for project health monitoring.
 - **Tree View**: Easy navigation and management of translation keys.
 - **Zero Config**: Auto-detects common locales folders.
 
 ## Installation
+
 Add it as a devDependency to your project:
+
 ```bash
 npm install -g @tuhama/translation-manager
 ```
+
 Or run directly with npx:
+
 ```bash
 npx @tuhama/translation-manager
 ```
 
 ## Usage
 
+### 📂 External Namespaces (Directory-based)
+
+Translation Manager now supports both flat JSON files (e.g., `en.json`) and directory-based namespaces. This is ideal for large projects where you want to split translations into logical modules.
+
+**How it works:**
+
+- If a folder named `en` exists in your locales directory, the manager will read all `.json` files inside it as namespaces.
+- Nested folders are also supported (e.g., `en/auth/errors.json` -> `en.auth.errors`).
+- When scanning source code, `useTranslation('auth')` will correctly map relative keys to the `auth` namespace.
+
 ### 🤖 AI-Friendly Localization
+
 The manager now extracts the **surrounding code** for every translation key it finds. This context is passed to AI models (like OpenAI or Gemini) to ensure highly accurate translations that respect your code's intent.
 
 ### 📤📥 Export/Import (AI-Enhanced)
+
 You can export all missing translation keys to a single JSON file. This export is **AI-Ready**, containing code snippets for each key so you can feed it to an LLM for context-aware translations.
 
 ### 📊 CLI Status
+
 Check your translation coverage programmatically:
+
 ```bash
 npx @tuhama/translation-manager status
 ```
+
 Outputs a machine-readable JSON summary of missing keys, coverage percentage, and project health.
 
 ### ⚠️ Missing Keys Detection
+
 The application automatically scans your source code for translation keys used (e.g., `t('key.name')`) but missing from your translation files. Click the "**Missing**" button in the sidebar to review and create them instantly.
 
 ### 🪄 Auto-Translation
+
 Configure Google Cloud, OpenAI, or Gemini in the settings to enable auto-translation. Use the "**Source-to-All**" button in the editor to quickly populate all languages.
 
 ## Configuration
+
 You can optionally create a `translation.config.json` in your project root:
 
 ### Using OpenAI (Recommended for AI Quality)
+
 ```json
 {
   "path": "src/locales",
@@ -64,6 +91,7 @@ You can optionally create a `translation.config.json` in your project root:
 ```
 
 ### Using Google Cloud Translate
+
 ```json
 {
   "path": "src/locales",
@@ -74,14 +102,17 @@ You can optionally create a `translation.config.json` in your project root:
 ```
 
 ## Development
+
 To work on this repo:
+
 1. `npm install`
 2. `cd web && npm install`
 3. `npm run dev` (starts both the API and the Vite UI)
 
 ## Limitations
+
 - **Dynamic Keys**: Highly dynamic keys (e.g. `t(someVar + '.key')`) may not be detected by the "Missing Keys" tool.
-- **Namespaces**: Currently optimized for single-namespace or default-namespace projects.
 
 ## License
+
 MIT © [Tuhama](mailto:tuhama.gh.qlyshi@gmail.com)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuhama/translation-manager",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "AI-powered i18n management with context-aware scanning and support for OpenAI, Gemini, and Google Translate.",
   "author": "Tuhama <tuhama.gh.qlyshi@gmail.com>",
   "license": "MIT",

package/src/core/Scanner.js

@@ -45,44 +45,62 @@ class Scanner {
      */
     async findUnusedKeys(allKeys) {
         const files = await this.getFiles();
-        const contents = await Promise.all(files.map(f => fs.readFile(f, 'utf-8')));
-        const combinedContent = contents.join('\n---\n');
-
         const used = new Set();
         const maybeUsed = new Set();
-        const unused = [];
 
-        allKeys.forEach(key => {
-            // 1. Literal usage
-            const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-            const literalRegex = new RegExp(`['"\`]${escapedKey}['"\`]`, 'g');
+        for (const file of files) {
+            const content = await fs.readFile(file, 'utf-8');
+            const namespaces = this.extractNamespace(content);
 
-            if (literalRegex.test(combinedContent)) {
-                used.add(key);
-                return;
-            }
+            allKeys.forEach(key => {
+                // If key is already marked as used, skip
+                if (used.has(key)) return;
 
-            // 2. Dynamic usage
-            const parts = key.split('.');
-            let isMaybeUsed = false;
+                // 1. Literal usage
+                const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                
+                // Check for full key match
+                const literalRegex = new RegExp(`['"\`]${escapedKey}['"\`]`, 'g');
+                if (literalRegex.test(content)) {
+                    used.add(key);
+                    return;
+                }
 
-            for (let i = 1; i < parts.length; i++) {
-                const prefix = parts.slice(0, i).join('.') + '.';
-                const escapedPrefix = prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-                const dynamicRegex = new RegExp("(['\"`]" + escapedPrefix + "['\"`].*?[+])|(['\"`]" + escapedPrefix + ".*?\\${)", 'g');
+                // Check for namespaced match if namespaces exist
+                for (const namespace of namespaces) {
+                    if (key.startsWith(namespace + '.')) {
+                        const relativeKey = key.substring(namespace.length + 1);
+                        const escapedRelativeKey = relativeKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                        const relativeRegex = new RegExp(`['"\`]${escapedRelativeKey}['"\`]`, 'g');
+                        if (relativeRegex.test(content)) {
+                            used.add(key);
+                            return;
+                        }
+                    }
+                }
 
-                if (dynamicRegex.test(combinedContent)) {
-                    isMaybeUsed = true;
-                    break;
+                // 2. Dynamic usage
+                const parts = key.split('.');
+                let isMaybeUsed = false;
+
+                for (let i = 1; i < parts.length; i++) {
+                    const prefix = parts.slice(0, i).join('.') + '.';
+                    const escapedPrefix = prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                    const dynamicRegex = new RegExp("(['\"`]" + escapedPrefix + "['\"`].*?[+])|(['\"`]" + escapedPrefix + ".*?\\${)", 'g');
+
+                    if (dynamicRegex.test(content)) {
+                        isMaybeUsed = true;
+                        break;
+                    }
                 }
-            }
 
-            if (isMaybeUsed) {
-                maybeUsed.add(key);
-            } else {
-                unused.push(key);
-            }
-        });
+                if (isMaybeUsed) {
+                    maybeUsed.add(key);
+                }
+            });
+        }
+
+        const unused = allKeys.filter(key => !used.has(key) && !maybeUsed.has(key));
 
         return {
             unused: unused.sort(),
@@ -90,6 +108,33 @@ class Scanner {
         };
     }
 
+    /**
+     * Extracts all namespaces from useTranslation('ns') or useTranslation(['ns1', 'ns2']) calls.
+     */
+    extractNamespace(content) {
+        const namespaces = new Set();
+        
+        // Match useTranslation('ns') or useTranslations('ns')
+        const singleRegex = /\buseTranslations?\(\s*['"\`]([^'"`]+)['"\`]/g;
+        let match;
+        while ((match = singleRegex.exec(content)) !== null) {
+            namespaces.add(match[1]);
+        }
+
+        // Match useTranslation(['ns1', 'ns2'])
+        const arrayRegex = /\buseTranslations?\(\s*\[([^\]]+)\]/g;
+        while ((match = arrayRegex.exec(content)) !== null) {
+            const nsArrayStr = match[1];
+            const nsRegex = /['"\`]([^'"`]+)['"\`]/g;
+            let nsMatch;
+            while ((nsMatch = nsRegex.exec(nsArrayStr)) !== null) {
+                namespaces.add(nsMatch[1]);
+            }
+        }
+
+        return Array.from(namespaces);
+    }
+
     /**
      * Finds keys that are used in source code but missing from translation files.
      * Returns an array of keys by default, or an object with context if includeContext is true.
@@ -104,32 +149,35 @@ class Scanner {
         // 2. i18n.t('key')
         // 3. i18nKey="key"
         // 4. <Trans i18nKey="key">
-        // 5. useTranslation(['namespace']) -> t('key')
         const patterns = [
-            /(?:\bt\(|i18n\.t\(|i18nKey=)\s*['"\`]([a-zA-Z0-9._-]+)['"\`]/g
+            /(?:\bt\(|i18n\.t\(|i18nKey=)\s*['"\`]([a-zA-Z0-9._:-]+)['"\`]/g
         ];
 
         for (const file of files) {
             const content = await fs.readFile(file, 'utf-8');
             const lines = content.split('\n');
+            const namespaces = this.extractNamespace(content);
+            const defaultNamespace = namespaces.length > 0 ? namespaces[0] : null;
 
             patterns.forEach(regex => {
                 let match;
-                // Reset regex state for each file
                 regex.lastIndex = 0;
                 while ((match = regex.exec(content)) !== null) {
-                    const key = match[1];
+                    let key = match[1];
+                    
+                    // Normalize colon to dot for internal representation if it's a namespace separator
+                    // and not just part of a key.
+                    if (key.includes(':')) {
+                        key = key.replace(':', '.');
+                    } else if (defaultNamespace) {
+                        // Apply default namespace if no colon was present
+                        key = `${defaultNamespace}.${key}`;
+                    }
                     
-                    // VALIDATION: Skip dynamic keys
-                    // 1. Skip if it contains template literal placeholders ${...}
-                    // 2. Skip if it's just the placeholder prefix ${
-                    // 3. Skip if it looks like a variable (no dots, no spaces, starts with lowercase and followed by camelCase etc) 
-                    //    - actually, dots are good, but ${ is the killer.
                     if (key.includes('${') || key.includes('`') || key.startsWith('$')) {
                         continue;
                     }
 
-                    // basic validation to avoid random strings and ensure it's not a translation file path
                     if (key && !existingKeysSet.has(key) && !key.includes('/') && !key.includes('\\')) {
                         if (includeContext) {
                             if (!missingKeysData[key]) {
@@ -139,10 +187,9 @@ class Scanner {
                                 };
                             }
                             
-                            // Find line number
                             const index = match.index;
                             const lineNo = content.substring(0, index).split('\n').length;
-                            const contextRange = 2; // lines before and after
+                            const contextRange = 2;
                             const startLine = Math.max(0, lineNo - contextRange - 1);
                             const endLine = Math.min(lines.length, lineNo + contextRange);
                             const contextLines = lines.slice(startLine, endLine);
@@ -172,38 +219,49 @@ class Scanner {
     async findContextForKeys(keys) {
         const files = await this.getFiles();
         const contextData = {};
-        const keysSet = new Set(keys);
 
         for (const file of files) {
             const content = await fs.readFile(file, 'utf-8');
             const lines = content.split('\n');
+            const namespaces = this.extractNamespace(content);
 
             keys.forEach(key => {
                 const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-                const regex = new RegExp(`['"\`]${escapedKey}['"\`]`, 'g');
+                const regexes = [new RegExp(`['"\`]${escapedKey}['"\`]`, 'g')];
                 
-                let match;
-                while ((match = regex.exec(content)) !== null) {
-                    if (!contextData[key]) {
-                        contextData[key] = {
-                            key,
-                            occurrences: []
-                        };
+                // Also check for relative key if it matches any of the namespaces
+                for (const namespace of namespaces) {
+                    if (key.startsWith(namespace + '.')) {
+                        const relativeKey = key.substring(namespace.length + 1);
+                        const escapedRelativeKey = relativeKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                        regexes.push(new RegExp(`['"\`]${escapedRelativeKey}['"\`]`, 'g'));
                     }
-
-                    const index = match.index;
-                    const lineNo = content.substring(0, index).split('\n').length;
-                    const contextRange = 2;
-                    const startLine = Math.max(0, lineNo - contextRange - 1);
-                    const endLine = Math.min(lines.length, lineNo + contextRange);
-                    const contextLines = lines.slice(startLine, endLine);
-
-                    contextData[key].occurrences.push({
-                        file: path.relative(this.targetDir, file),
-                        line: lineNo,
-                        context: contextLines.join('\n').trim()
-                    });
                 }
+
+                regexes.forEach(regex => {
+                    let match;
+                    while ((match = regex.exec(content)) !== null) {
+                        if (!contextData[key]) {
+                            contextData[key] = {
+                                key,
+                                occurrences: []
+                            };
+                        }
+
+                        const index = match.index;
+                        const lineNo = content.substring(0, index).split('\n').length;
+                        const contextRange = 2;
+                        const startLine = Math.max(0, lineNo - contextRange - 1);
+                        const endLine = Math.min(lines.length, lineNo + contextRange);
+                        const contextLines = lines.slice(startLine, endLine);
+
+                        contextData[key].occurrences.push({
+                            file: path.relative(this.targetDir, file),
+                            line: lineNo,
+                            context: contextLines.join('\n').trim()
+                        });
+                    }
+                });
             });
         }
 

package/src/core/Storage.js

@@ -47,14 +47,49 @@ class Storage {
      */
     async readAll() {
         const localesDir = await this.getLocalesDir();
-        const files = await fs.readdir(localesDir);
-        const jsonFiles = files.filter(f => f.endsWith('.json'));
+        const entries = await fs.readdir(localesDir, { withFileTypes: true });
 
         const translations = {};
-        for (const file of jsonFiles) {
-            const lang = path.basename(file, '.json');
-            const content = await fs.readJson(path.join(localesDir, file));
-            translations[lang] = content;
+
+        const readDirectory = async (dir, lang, prefix = []) => {
+            const files = await fs.readdir(dir, { withFileTypes: true });
+            const data = {};
+
+            for (const file of files) {
+                const fullPath = path.join(dir, file.name);
+                if (file.isDirectory()) {
+                    const nestedData = await readDirectory(fullPath, lang, [...prefix, file.name]);
+                    if (Object.keys(nestedData).length > 0) {
+                        data[file.name] = nestedData;
+                    }
+                } else if (file.isFile() && file.name.endsWith('.json')) {
+                    const ns = path.basename(file.name, '.json');
+                    try {
+                        data[ns] = await fs.readJson(fullPath);
+                    } catch (err) {
+                        throw new Error(`Failed to read translation file "${fullPath}": ${err.message}`);
+                    }
+                }
+            }
+            return data;
+        };
+
+        for (const entry of entries) {
+            const fullPath = path.join(localesDir, entry.name);
+
+            if (entry.isFile() && entry.name.endsWith('.json')) {
+                const lang = path.basename(entry.name, '.json');
+                try {
+                    const content = await fs.readJson(fullPath);
+                    translations[lang] = { ...translations[lang], ...content };
+                } catch (err) {
+                    throw new Error(`Failed to read translation file "${fullPath}": ${err.message}`);
+                }
+            } else if (entry.isDirectory()) {
+                const lang = entry.name;
+                const langData = await readDirectory(fullPath, lang);
+                translations[lang] = { ...translations[lang], ...langData };
+            }
         }
 
         return translations;
@@ -65,13 +100,42 @@ class Storage {
      */
     async write(lang, content, options = {}) {
         const localesDir = await this.getLocalesDir();
-        const filePath = path.join(localesDir, `${lang}.json`);
+        const langDir = path.join(localesDir, lang);
 
         // Sort the content before writing if sorting is enabled (default: true)
         const shouldSort = options.sort !== false;
         const finalContent = shouldSort ? Utilities.sortObject(content) : content;
 
-        await fs.writeJson(filePath, finalContent, { spaces: 2 });
+        const writeRecursive = async (dir, data) => {
+            await fs.ensureDir(dir);
+            for (const key in data) {
+                const value = data[key];
+                const fullPath = path.join(dir, `${key}.json`);
+                
+                // If the value is an object and NOT an empty object, and we want to support nested dirs
+                // we need to decide if we write it as a file or a directory.
+                // In i18next, usually one file = one namespace. Nested keys inside the file are NOT separate files.
+                // HOWEVER, our readAll now supports nested directories.
+                // To be consistent, if we read a nested directory, we should probably write it back as one.
+                
+                // Let's check if the directory already exists or if it's a new nested structure.
+                const potentialDir = path.join(dir, key);
+                if (typeof value === 'object' && value !== null && !Array.isArray(value) && await fs.pathExists(potentialDir) && (await fs.stat(potentialDir)).isDirectory()) {
+                    await writeRecursive(potentialDir, value);
+                } else {
+                    await fs.writeJson(fullPath, value, { spaces: 2 });
+                }
+            }
+        };
+
+        if (await fs.pathExists(langDir) && (await fs.stat(langDir)).isDirectory()) {
+            // Namespace mode
+            await writeRecursive(langDir, finalContent);
+        } else {
+            // Flat mode
+            const filePath = path.join(localesDir, `${lang}.json`);
+            await fs.writeJson(filePath, finalContent, { spaces: 2 });
+        }
     }
 
     /**

package/src/server.js

@@ -3,6 +3,7 @@ const cors = require('cors');
 const path = require('path');
 const history = require('express-history-api-fallback');
 const TranslatorManager = require('./core/TranslatorManager');
+const pkg = require('../package.json');
 
 /**
  * Starts the translation manager server.
@@ -194,7 +195,7 @@ function startServer(targetDir, port = 3000, config = {}) {
     });
 
     app.listen(port, () => {
-        console.log(`\x1b[32m✔\x1b[0m Translation Manager UI is running at http://localhost:${port}`);
+        console.log(`\x1b[32m✔\x1b[0m Translation Manager v${pkg.version} is running at http://localhost:${port}`);
     });
 }
 

package/translations.skill

@@ -3,7 +3,7 @@
 This skill enables an AI agent to efficiently manage i18n translations using the `@tuhama/translation-manager` library.
 
 ## Context
-This project uses a custom translation manager that supports AI-powered context extraction. Translation keys are stored in JSON files (usually in `src/locales` or `locales`).
+This project uses a custom translation manager that supports AI-powered context extraction. Translation keys are stored in JSON files (either flat files in `src/locales` or `locales`, or grouped into directories when using namespaces).
 
 ## Workflow
 
@@ -13,17 +13,19 @@ Before starting any work, always check the current status:
 - **Goal**: Identify missing translations, unused keys, and coverage percentage across all languages.
 
 ### 2. Identify Missing Keys from Code
-Find keys that are used in the source code (e.g., `t('key.name')`) but aren't defined in the JSON files:
+Find keys that are used in the source code (e.g., `t('key.name')` or `t('namespace:key.name')`) but aren't defined in the JSON files:
 - **Action**: Use the `Scanner` or the Web UI to find "Missing from files" keys.
 - **AI Task**: If you find missing keys, suggest descriptive key names based on their usage.
 
 ### 3. Generate Context-Aware Translations
 When translating, leverage the extracted code context:
 - **Rule**: Use the surrounding code snippets to determine the correct nuance (e.g., is "Save" a button or a noun?).
+- **Export**: The system allows exporting keys with context as JSON to facilitate bulk AI translation. Use this for mass updates.
 - **Style**: Maintain consistent tone across the app (default: professional and concise).
 - **Placeholders**: Always preserve `{name}`, `{{count}}`, or other interpolation markers.
 
-### 4. Maintain Key Consistency
+### 4. Maintain Key Consistency & Namespaces
+- **Namespaces**: The library supports namespaces (e.g., `namespace:key`). Ensure you respect the configured storage mode, storing them either as flattened keys or separated into directory-based namespace files.
 - **Naming**: Use dot-notation for nesting (e.g., `auth.login.button_label`).
 - **Sorting**: Keys should be kept in alphabetical order. Use the "Normalize" feature or `npx @tuhama/translation-manager normalize` (if available).
 - **Cleanup**: Periodically check for unused keys and remove them to keep bundle sizes small.

package/web/dist/assets/index-Bse_98vf.css

@@ -0,0 +1 @@
+:root{--bg-color:#0b0e14;--sidebar-bg:#111827cc;--accent-color:#7c3aed;--accent-hover:#6d28d9;--text-color:#f3f4f6;--text-muted:#9ca3af;--border-color:#ffffff14;--glass-bg:#ffffff08;--glass-blur:blur(20px);--green:#10b981;--red:#ef4444;--transition:all .25s ease}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6}#root{height:100vh;display:flex}.app-container{flex-direction:column;width:100%;height:100vh;display:flex}.app-body{flex:1;grid-template-columns:320px 1fr;display:grid;position:relative;overflow:hidden}@media (width<=1024px){.app-body{grid-template-columns:280px 1fr}}@media (width<=768px){.app-body{flex-direction:column;display:flex;overflow-y:auto}}.app-header{background:var(--sidebar-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--border-color);z-index:100;justify-content:space-between;align-items:center;min-height:70px;padding:16px 24px;display:flex}.header-left{align-items:center;display:flex}.brand-section{align-items:center;gap:16px;display:flex}.header-logo{filter:drop-shadow(0 0 8px #7c3aed66);border-radius:8px;width:36px;height:36px}.app-title{background:linear-gradient(135deg,#a78bfa 0%,#3b82f6 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:1.4rem;font-weight:800}.header-right{align-items:center;display:flex}.logo-container{align-items:center;display:flex;position:relative}.logo-glow{background:var(--accent-color);filter:blur(15px);opacity:.2;z-index:-1;border-radius:50%;width:40px;height:40px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.title-stack{flex-direction:column;display:flex}.title-row{align-items:center;gap:10px;display:flex}.version-badge{color:var(--accent-color);text-transform:uppercase;letter-spacing:.5px;background:#7c3aed1a;border:1px solid #7c3aed33;border-radius:4px;padding:2px 6px;font-size:.65rem;font-weight:700}.header-stats{align-items:center;gap:12px;margin-top:2px;display:flex}.stat-item{align-items:center;gap:4px;display:flex}.stat-value{color:#fff;font-size:.75rem;font-weight:800}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.7rem}.stat-divider{background:var(--border-color);width:1px;height:10px}@media (width<=768px){.header-stats{display:none}}.header-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.header-primary-btn{background:linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);color:#fff;cursor:pointer;transition:var(--transition);border:none;border-radius:8px;align-items:center;gap:8px;padding:10px 16px;font-size:.9rem;font-weight:600;display:flex}.header-primary-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #7c3aed4d}.header-btn{border:1px solid var(--border-color);color:var(--text-color);cursor:pointer;transition:var(--transition);white-space:nowrap;background:#ffffff0d;border-radius:6px;align-items:center;gap:6px;padding:8px 12px;font-size:.8rem;font-weight:500;display:flex}.header-btn:hover{border-color:var(--accent-color);color:var(--accent-color);background:#ffffff14;transform:translateY(-1px)}.mobile-menu-toggle{cursor:pointer;z-index:101;background:0 0;border:none;flex-direction:column;gap:4px;padding:8px;display:none}.mobile-menu-toggle span{background:var(--text-color);width:24px;height:2px;transition:var(--transition);border-radius:2px;display:block}@media (width<=768px){.mobile-menu-toggle{display:flex}.brand-section{gap:8px}.app-title{font-size:1.1rem}.header-logo{width:28px;height:28px}}.sidebar{background:var(--sidebar-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-right:1px solid var(--border-color);flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}@media (width<=768px){.sidebar{z-index:1000;background:#111827;width:300px;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%);box-shadow:20px 0 50px #00000080}.sidebar.open{transform:translate(0)}.sidebar-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;background:#0009;position:fixed;inset:0}}.sidebar-header-mobile{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:20px;display:none}@media (width<=768px){.sidebar-header-mobile{display:flex}}.sidebar-title{text-transform:uppercase;letter-spacing:1px;color:var(--accent-color);font-size:.85rem;font-weight:700}.sidebar-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.5rem}.sidebar-search{border-bottom:1px solid var(--border-color);padding:20px 16px}.search-input{border:1px solid var(--border-color);color:#fff;width:100%;transition:var(--transition);background:#0003;border-radius:10px;padding:12px 16px;font-size:.95rem}.search-input:focus{border-color:var(--accent-color);outline:none;box-shadow:0 0 0 2px #7c3aed1a}.search-input::placeholder{color:var(--text-muted)}.tree-view{flex:1;padding:16px;overflow-y:auto}.loading-state{color:var(--text-muted);justify-content:center;align-items:center;padding:40px 20px;font-style:italic;display:flex}.dropdown-container{position:relative}.dropdown-container:hover .dropdown-menu{opacity:1;pointer-events:auto;display:block;transform:translateY(0)}.dropdown-trigger{align-items:center;gap:8px;display:flex}.dropdown-menu{border:1px solid var(--border-color);z-index:1000;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);opacity:0;pointer-events:none;background:#111827;border-radius:12px;min-width:220px;padding:8px;transition:all .2s cubic-bezier(.4,0,.2,1);display:none;position:absolute;top:calc(100% + 8px);right:0;transform:translateY(10px);box-shadow:0 20px 40px #0009}.dropdown-menu:before{content:"";height:8px;position:absolute;top:-8px;left:0;right:0}.dropdown-item{width:100%;color:var(--text-color);cursor:pointer;transition:var(--transition);text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:12px;padding:10px 12px;font-size:.9rem;display:flex}.dropdown-item:hover{color:#fff;background:#7c3aed26}.item-icon{text-align:center;width:16px;font-size:1rem}.dropdown-divider{background:var(--border-color);height:1px;margin:8px 16px}.dropdown-arrow{color:var(--text-muted);transition:var(--transition);font-size:.8rem}.btn-icon{font-size:1rem}.key-tree{list-style:none}.tree-node{margin-bottom:2px}.tree-children{margin:0;padding:0;list-style:none}.tree-branch-header{cursor:pointer;transition:var(--transition);color:var(--text-color);border-radius:6px;align-items:center;padding:8px 14px;font-size:.9rem;font-weight:500;display:flex}.tree-branch-header:hover{background:#ffffff0d}.tree-branch-header.has-selected-child{color:#a78bfa;background:#7c3aed14}.tree-expand-icon{color:var(--text-muted);transition:var(--transition);text-align:center;width:12px;margin-right:8px;font-size:.8rem}.tree-branch-text{flex:1;align-items:center;gap:8px;display:flex}.tree-branch-count{color:var(--text-muted);font-size:.75rem;font-weight:400}.branch-indicator{margin-left:4px;font-size:.8rem}.branch-indicator.missing{filter:drop-shadow(0 0 3px #ef44444d)}.branch-indicator.unused{opacity:.6}.tree-leaf{cursor:pointer;transition:var(--transition);color:var(--text-muted);border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:2px;padding:8px 14px;font-size:.85rem;display:flex}.tree-leaf.unused{opacity:.5;font-style:italic}.tree-leaf.unused .tree-leaf-text:after{content:" (unused)";opacity:.7;margin-left:4px;font-size:.7rem}.tree-leaf-content{flex:1;align-items:center;display:flex}.tree-leaf-text{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.tree-leaf:hover{color:#fff;background:#ffffff0d}.tree-leaf.active{color:#a78bfa;background:#7c3aed26;font-weight:600}.tree-leaf.incomplete .tree-leaf-text{color:var(--text-muted)}.missing-translation-dot{filter:drop-shadow(0 0 5px #ef444480);margin-left:8px;font-size:.8rem}.delete-icon{opacity:0;color:var(--red);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:4px;padding:2px 4px;font-size:1.1rem}.tree-leaf:hover .delete-icon{opacity:1}.delete-icon:hover{background:#ef44441a}.editor{background:radial-gradient(circle at 100% 0,#7c3aed0d,#0000 400px),radial-gradient(circle at 0 100%,#3b82f60d,#0000 400px);justify-content:center;align-items:flex-start;padding:24px;display:flex;overflow-y:auto}@media (width<=768px){.editor{background:0 0;padding:16px}}.editor-form{width:100%;max-width:1100px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);background:#1f293766;border-radius:24px;flex-direction:column;height:fit-content;max-height:calc(100vh - 120px);display:flex;box-shadow:0 25px 50px -12px #00000080}@media (width<=768px){.editor-form{border-radius:16px;max-height:none}}.editor-main-form{flex-direction:column;flex:1;display:flex;overflow:hidden}.form-scroll-area{padding:32px 40px;overflow-y:auto}@media (width<=768px){.form-scroll-area{padding:24px 20px}}.form-group{text-align:left;margin-bottom:24px}.form-group.missing label{color:var(--red)}.form-group.missing input,.form-group.missing textarea{border-color:#ef44444d}.missing-label{margin-left:4px;font-size:.75rem;font-style:italic;font-weight:400}.form-group input,.form-group textarea{border:1px solid var(--border-color);color:#fff;background:#0000004d;border-radius:10px;width:100%;padding:14px;font-family:inherit;font-size:1rem}.form-group textarea{resize:vertical;min-height:100px}.form-actions-sticky{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border-color);background:#111827cc;border-bottom-right-radius:24px;border-bottom-left-radius:24px;margin-top:auto;padding:20px 40px}@media (width<=768px){.form-actions-sticky{z-index:10;padding:16px 20px;position:sticky;bottom:0}}.form-actions-content{justify-content:flex-end;gap:16px;display:flex}.primary-btn{background:var(--accent-color);color:#fff;cursor:pointer;transition:var(--transition);border:none;border-radius:10px;padding:14px 28px;font-weight:600}.primary-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.secondary-btn{border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:10px;padding:14px 28px;font-weight:600}.empty-state{text-align:center;max-width:500px}.hero-icon{filter:drop-shadow(0 0 20px #8b5cf64d);margin-bottom:24px;font-size:4rem}.empty-state h2{margin-bottom:12px;font-size:2rem}.empty-state p{color:var(--text-muted);margin-bottom:32px}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{border:1px solid var(--border-color);background:#1f2937;border-radius:20px;flex-direction:column;width:100%;max-width:600px;max-height:80vh;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}.modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:24px;display:flex}.modal-header h2,.modal-header h3{margin:0;font-size:1.25rem;font-weight:600}.settings-divider{border-bottom:1px solid var(--border-color);color:var(--primary-color);text-transform:uppercase;letter-spacing:.05em;margin:24px 0 16px;padding-bottom:8px;font-size:.9rem;font-weight:600}.close-btn{color:var(--text-muted);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:1.8rem;line-height:1;display:flex}.close-btn:hover{color:#fff;background:#ffffff0d}.modal-body{flex:1;padding:24px;overflow-y:auto}.cleanup-item{cursor:pointer;background:#ffffff08;border-radius:10px;align-items:center;gap:12px;margin-bottom:8px;padding:12px;display:flex}.cleanup-item:hover{background:#ffffff0f}.cleanup-item input{accent-color:var(--accent-color)}.maybe-used-warning{color:#f59e0b;align-items:center;gap:4px;margin-left:auto;font-size:.8rem;font-style:italic;display:flex}.modal-footer{border-top:1px solid var(--border-color);justify-content:flex-end;gap:12px;padding:20px;display:flex}.editor-header-row{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:24px 40px;display:flex}@media (width<=768px){.editor-header-row{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}}.editor-title-container{flex-direction:column;gap:4px;display:flex}.editor-subtitle{text-transform:uppercase;letter-spacing:.1em;color:var(--accent-color);font-size:.75rem;font-weight:700}.key-breadcrumbs{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.breadcrumb-part{color:#fff}.breadcrumb-separator{color:var(--text-muted);opacity:.5}.languages-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:24px;display:grid}@media (width<=1200px){.languages-grid{grid-template-columns:1fr}}.full-width-field{grid-column:1/-1}.magic-btn{color:#a78bfa;background:#7c3aed1a;border-color:#7c3aed4d;padding:10px 16px;font-size:.85rem}.magic-btn:hover{background:var(--accent-color);color:#fff}.label-row{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.label-row label{margin-bottom:0}.icon-btn{cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;display:flex}.icon-btn:hover{background:#ffffff1a}.magic-wand{opacity:.6;font-size:1.1rem}.form-group:hover .magic-wand{opacity:1}.alert{border-radius:10px;margin-bottom:20px;padding:12px 16px;font-size:.9rem}.warning-badge{color:#fbbf24;cursor:pointer;transition:var(--transition);background:#f59e0b1a;border:1px solid #f59e0b33;border-radius:8px;align-items:center;gap:8px;padding:8px 14px;font-size:.8rem;font-weight:600;display:flex}.warning-badge:hover{background:#f59e0b33;transform:translateY(-1px)}.alert-success{color:#34d399;background:#10b9811a;border:1px solid #10b9814d}.alert-error{color:#f87171;background:#ef44441a;border:1px solid #ef44444d}.wizard-step{margin-bottom:24px}.wizard-step label{color:var(--text-color);margin-bottom:12px;font-weight:600;display:block}.source-select{border:1px solid var(--border-color);color:#fff;background:#0000004d;border-radius:10px;width:100%;padding:12px;font-size:1rem}.report-summary{border:1px solid var(--border-color);background:#0003;border-radius:12px;padding:16px}.report-summary ul{color:var(--text-muted);margin-top:12px;padding-left:20px}.preview-container{border:1px solid var(--border-color);background:#0003;border-radius:12px;max-height:400px;padding:16px;overflow-y:auto}.lang-preview{margin-bottom:24px}.lang-preview h3{color:var(--accent-color);border-bottom:1px solid var(--border-color);margin-bottom:12px;padding-bottom:4px;font-size:.85rem}.preview-list{flex-direction:column;gap:8px;display:flex}.preview-item{gap:8px;font-size:.85rem;display:flex}.preview-key{color:var(--text-muted);font-weight:500}.preview-value{color:var(--text-color)}.settings-input{letter-spacing:2px}.settings-select{border:1px solid var(--border-color);color:#fff;appearance:none;cursor:pointer;width:100%;transition:var(--transition);background:#0000004d url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") right 14px center/16px no-repeat;border-radius:10px;padding:10px 14px;font-size:1rem}.settings-select:hover{border-color:var(--accent-color);background-color:#ffffff0d}.settings-select:focus{border-color:var(--accent-color);outline:none;box-shadow:0 0 0 2px #7c3aed1a}.help-text{color:var(--text-muted);margin-top:8px;font-size:.8rem}.help-text a{color:var(--accent-color);text-decoration:none}.help-text a:hover{text-decoration:underline}.success-text{color:var(--green);font-weight:500}.approve-btn{background:var(--green)}.approve-btn:hover{background:#059669}.tool-btn.warning{color:#f59e0b;background:#f59e0b1a;border-color:#f59e0b4d}.tool-btn.warning:hover{color:#fff;background:#f59e0b}.missing-keys-list{margin-top:16px;list-style:none}.missing-key-item{border:1px solid var(--border-color);background:#ffffff08;border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:14px;display:flex}.key-path{color:#a78bfa;font-family:JetBrains Mono,Fira Code,monospace;font-size:.85rem}.warning-box{color:#f59e0b;background:#f59e0b14;border:1px solid #f59e0b33;border-radius:12px;margin-bottom:24px;padding:16px;font-size:.85rem}.sm{padding:8px 14px;font-size:.8rem}.tab-container{margin-top:24px}.tab-buttons{border-bottom:1px solid var(--border-color);gap:12px;margin-bottom:24px;padding-bottom:8px;display:flex}.tab-button{color:var(--text-muted);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:8px;padding:8px 16px;font-size:.95rem;font-weight:600;position:relative}.tab-button:hover{color:var(--text-color);background:#ffffff0d}.tab-button.active{color:var(--accent-color);background:#7c3aed1a}.tab-button.active:after{content:"";background:var(--accent-color);border-radius:2px 2px 0 0;height:2px;position:absolute;bottom:-9px;left:0;right:0}.export-tab,.import-tab{padding:8px 0}.export-info{border-left:4px solid var(--accent-color);background:#7c3aed0d;border-radius:4px 12px 12px 4px;margin-bottom:24px;padding:12px 16px}.export-info p{color:var(--text-color);margin:0;font-size:.9rem}.export-preview h3,.import-options h3{color:var(--text-color);margin-bottom:16px;font-size:1.1rem;font-weight:700}.preview-stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px;display:grid}.preview-stats p{border:1px solid var(--border-color);background:#ffffff08;border-radius:12px;margin:0;padding:12px 16px;font-size:.9rem}.preview-sample h4{color:var(--text-muted);margin-bottom:12px;font-size:.9rem}.import-options{border-top:1px solid var(--border-color);margin-top:24px;padding-top:24px}.import-options label{cursor:pointer;color:var(--text-color);transition:var(--transition);align-items:center;gap:10px;margin-bottom:12px;font-size:.9rem;display:flex}.import-options label:hover{color:var(--accent-color)}.import-options input[type=checkbox]{accent-color:var(--accent-color);cursor:pointer;width:18px;height:18px}.export-import-modal .modal-content{max-width:600px}