@jjlmoya/utils-developer 1.14.0 → 1.16.0

package/src/tool/llmCostCalculator/component.astro

@@ -59,7 +59,7 @@ const t = (ui ?? {}) as LlmCostCalculatorUI;
                 step="100"
                 value="1000"
               />
-              <input class="llm-req-num" type="number" id="llm-requests-num" value="1000" min="1" />
+              <input class="llm-req-num" type="number" id="llm-requests-num" value="1000" min="1" aria-label={t.labelRequests} />
             </div>
           </div>
         </div>
@@ -232,4 +232,3 @@ const t = (ui ?? {}) as LlmCostCalculatorUI;
 
   init();
 </script>
-

package/src/tool/llmCostCalculator/i18n/de.ts

@@ -16,12 +16,12 @@ const faqData = [
   {
     question: 'Was sind Tokens und wie hängen sie mit Wörtern zusammen?',
     answer:
-      'Ein Token ist die grundlegende Texteinheit, die ein Sprachmodell verarbeitet. Im Durchschnitt entspricht 1 Token etwa 0,75 Wörtern auf Englisch, also 1.000 Tokens ≈ 750 Wörter. Preise werden pro Million Tokens ($/1M) angegeben – das ist die branchenübliche Einheit bei allen Anbietern.',
+      'Ein Token ist die grundlegende Texteinheit, die ein Sprachmodell verarbeitet. Im Durchschnitt entspricht 1 Token etwa 0,75 Wörtern auf Englisch, also 1.000 Tokens ≈ 750 Wörter. Preise werden pro Million Tokens ($/1M) angegeben - das ist die branchenübliche Einheit bei allen Anbietern.',
   },
   {
     question: 'Warum sind Ausgabe Tokens teurer als Eingabe Tokens?',
     answer:
-      'Das Generieren von Text (Ausgabe) erfordert, dass das Modell jeden Token nacheinander berechnet – das ist rechenintensiver als das Lesen der Eingabe. Die meisten Anbieter berechnen für Ausgabe Tokens das 3- bis 5-Fache des Preises für Eingabe Tokens.',
+      'Das Generieren von Text (Ausgabe) erfordert, dass das Modell jeden Token nacheinander berechnet - das ist rechenintensiver als das Lesen der Eingabe. Die meisten Anbieter berechnen für Ausgabe Tokens das 3- bis 5-Fache des Preises für Eingabe Tokens.',
   },
   {
     question: 'Wie kann ich die Kosten meiner LLM-API senken?',
@@ -127,7 +127,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     },
     {
       type: 'paragraph',
-      html: 'APIs für große Sprachmodelle werden nach Token-Nutzung abgerechnet – nicht nach Zeit oder Anfragen. Jeder API-Aufruf hat zwei Kostenkomponenten: die <strong>Eingabekosten</strong> (Verarbeitung deines Prompts) und die <strong>Ausgabekosten</strong> (Generierung der Antwort). Diesen Unterschied zu verstehen ist der Schlüssel zur genauen Schätzung deiner monatlichen Rechnung.',
+      html: 'APIs für große Sprachmodelle werden nach Token-Nutzung abgerechnet - nicht nach Zeit oder Anfragen. Jeder API-Aufruf hat zwei Kostenkomponenten: die <strong>Eingabekosten</strong> (Verarbeitung deines Prompts) und die <strong>Ausgabekosten</strong> (Generierung der Antwort). Diesen Unterschied zu verstehen ist der Schlüssel zur genauen Schätzung deiner monatlichen Rechnung.',
     },
     {
       type: 'title',
@@ -146,7 +146,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     {
       type: 'card',
       title: 'Ausgabe Tokens',
-      html: '<p>Ausgabe Tokens werden sequenziell – Token für Token – erzeugt, was sie rechenintensiver macht. Die meisten Anbieter berechnen für Ausgabe Tokens <strong>das 3- bis 5-Fache</strong> des Eingabepreises. Eine Antwort mit 300 Wörtern erzeugt etwa 400 Ausgabe Tokens. Präzise Antworten zu halten ist eine der wirkungsvollsten Methoden, Kosten zu sparen.</p>',
+      html: '<p>Ausgabe Tokens werden sequenziell - Token für Token - erzeugt, was sie rechenintensiver macht. Die meisten Anbieter berechnen für Ausgabe Tokens <strong>das 3- bis 5-Fache</strong> des Eingabepreises. Eine Antwort mit 300 Wörtern erzeugt etwa 400 Ausgabe Tokens. Präzise Antworten zu halten ist eine der wirkungsvollsten Methoden, Kosten zu sparen.</p>',
     },
     {
       type: 'title',

package/src/tool/llmCostCalculator/i18n/en.ts

@@ -21,7 +21,7 @@ const faqData = [
   {
     question: 'Why are output tokens more expensive than input tokens?',
     answer:
-      'Generating text (output) requires the model to compute each token sequentially, which is computationally more intensive than reading the input. Most providers charge 3–5x more for output tokens than input tokens.',
+      'Generating text (output) requires the model to compute each token sequentially, which is computationally more intensive than reading the input. Most providers charge 3-5x more for output tokens than input tokens.',
   },
   {
     question: 'How can I reduce my LLM API costs?',
@@ -146,7 +146,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     {
       type: 'card',
       title: 'Output tokens',
-      html: '<p>Output tokens are generated one by one in sequence, making them more computationally expensive. Most providers charge <strong>3–5× more</strong> for output tokens. A 300-word response generates roughly 400 output tokens. Keeping responses concise is one of the most effective cost-saving strategies.</p>',
+      html: '<p>Output tokens are generated one by one in sequence, making them more computationally expensive. Most providers charge <strong>3-5× more</strong> for output tokens. A 300-word response generates roughly 400 output tokens. Keeping responses concise is one of the most effective cost-saving strategies.</p>',
     },
     {
       type: 'title',
@@ -155,7 +155,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     },
     {
       type: 'tip',
-      html: 'Start with a capable mid-tier model like <code>GPT-4o mini</code> or <code>Gemini 1.5 Flash</code> and only upgrade if quality falls short. The cost difference between a small and large model can be 10–100×.',
+      html: 'Start with a capable mid-tier model like <code>GPT-4o mini</code> or <code>Gemini 1.5 Flash</code> and only upgrade if quality falls short. The cost difference between a small and large model can be 10-100×.',
     },
     {
       type: 'paragraph',

package/src/tool/llmCostCalculator/i18n/fr.ts

@@ -11,7 +11,7 @@ const faqData = [
   {
     question: "Comment le coût d'une API LLM est-il calculé ?",
     answer:
-      "Les APIs LLM facturent séparément les tokens d'entrée (le prompt) et les tokens de sortie (la réponse). Le coût total par requête est : (tokens entrée × prix entrée + tokens sortie × prix sortie) / 1 000 000. Multipliez par le nombre de requêtes pour obtenir le coût mensuel total.",
+      "Les APIs LLM facturent séparément les tokens d'entrée (le prompt) et les tokens de sortie (la réponse). Le coût total par requête est: (tokens entrée × prix entrée + tokens sortie × prix sortie) / 1 000 000. Multipliez par le nombre de requêtes pour obtenir le coût mensuel total.",
   },
   {
     question: 'Que sont les tokens et comment se rapportent-ils aux mots ?',
@@ -127,7 +127,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     },
     {
       type: 'paragraph',
-      html: "Les APIs de modèles de langage facturent en fonction de l'utilisation des tokens, et non du temps ou des requêtes. Chaque appel a deux coûts : le <strong>coût d'entrée</strong> (traitement de votre prompt) et le <strong>coût de sortie</strong> (génération de la réponse). Comprendre cette distinction est essentiel pour estimer avec précision votre facture mensuelle.",
+      html: "Les APIs de modèles de langage facturent en fonction de l'utilisation des tokens, et non du temps ou des requêtes. Chaque appel a deux coûts: le <strong>coût d'entrée</strong> (traitement de votre prompt) et le <strong>coût de sortie</strong> (génération de la réponse). Comprendre cette distinction est essentiel pour estimer avec précision votre facture mensuelle.",
     },
     {
       type: 'title',
@@ -141,7 +141,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     {
       type: 'card',
       title: "Tokens d'entrée",
-      html: "<p>Les tokens d'entrée représentent tout ce qui est envoyé <strong>au</strong> modèle : votre prompt système, l'historique de la conversation et le message de l'utilisateur. Ils sont moins chers car le modèle les traite en parallèle. Un prompt système typique de 200 mots génère environ 267 tokens d'entrée.</p>",
+      html: "<p>Les tokens d'entrée représentent tout ce qui est envoyé <strong>au</strong> modèle: votre prompt système, l'historique de la conversation et le message de l'utilisateur. Ils sont moins chers car le modèle les traite en parallèle. Un prompt système typique de 200 mots génère environ 267 tokens d'entrée.</p>",
     },
     {
       type: 'card',

package/src/tool/llmCostCalculator/i18n/id.ts

@@ -21,7 +21,7 @@ const faqData = [
   {
     question: 'Mengapa token output lebih mahal daripada token input?',
     answer:
-      'Menghasilkan teks (output) mengharuskan model menghitung setiap token secara berurutan, yang secara komputasi lebih intensif daripada membaca input. Sebagian besar penyedia mengenakan biaya 3–5 kali lebih mahal untuk token output dibandingkan token input.',
+      'Menghasilkan teks (output) mengharuskan model menghitung setiap token secara berurutan, yang secara komputasi lebih intensif daripada membaca input. Sebagian besar penyedia mengenakan biaya 3-5 kali lebih mahal untuk token output dibandingkan token input.',
   },
   {
     question: 'Bagaimana cara mengurangi biaya API LLM saya?',
@@ -146,7 +146,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     {
       type: 'card',
       title: 'Token output',
-      html: '<p>Token output dihasilkan satu per satu secara berurutan, sehingga lebih intensif secara komputasi. Sebagian besar penyedia mengenakan biaya <strong>3–5× lebih mahal</strong> untuk token output. Respons 300 kata menghasilkan sekitar 400 token output. Menjaga respons tetap ringkas adalah salah satu strategi penghematan biaya yang paling efektif.</p>',
+      html: '<p>Token output dihasilkan satu per satu secara berurutan, sehingga lebih intensif secara komputasi. Sebagian besar penyedia mengenakan biaya <strong>3-5× lebih mahal</strong> untuk token output. Respons 300 kata menghasilkan sekitar 400 token output. Menjaga respons tetap ringkas adalah salah satu strategi penghematan biaya yang paling efektif.</p>',
     },
     {
       type: 'title',
@@ -155,7 +155,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     },
     {
       type: 'tip',
-      html: 'Mulailah dengan model kelas menengah yang mumpuni seperti <code>GPT-4o mini</code> atau <code>Gemini 1.5 Flash</code> dan naik ke model yang lebih besar hanya jika kualitasnya belum memadai. Perbedaan biaya antara model kecil dan besar bisa mencapai 10–100×.',
+      html: 'Mulailah dengan model kelas menengah yang mumpuni seperti <code>GPT-4o mini</code> atau <code>Gemini 1.5 Flash</code> dan naik ke model yang lebih besar hanya jika kualitasnya belum memadai. Perbedaan biaya antara model kecil dan besar bisa mencapai 10-100×.',
     },
     {
       type: 'paragraph',

package/src/tool/llmCostCalculator/i18n/pt.ts

@@ -21,7 +21,7 @@ const faqData = [
   {
     question: 'Por que os tokens de saída são mais caros que os de entrada?',
     answer:
-      'Gerar texto (saída) requer que o modelo compute cada token sequencialmente, o que é computacionalmente mais intensivo do que ler a entrada. A maioria dos provedores cobra 3–5x mais para tokens de saída do que de entrada.',
+      'Gerar texto (saída) requer que o modelo compute cada token sequencialmente, o que é computacionalmente mais intensivo do que ler a entrada. A maioria dos provedores cobra 3-5x mais para tokens de saída do que de entrada.',
   },
   {
     question: 'Como posso reduzir meus custos de API LLM?',
@@ -146,7 +146,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     {
       type: 'card',
       title: 'Tokens de saída',
-      html: '<p>Os tokens de saída são gerados um por um em sequência, tornando-os computacionalmente mais caros. A maioria dos provedores cobra <strong>3–5× mais</strong> para tokens de saída. Uma resposta de 300 palavras gera aproximadamente 400 tokens de saída. Manter as respostas concisas é uma das estratégias mais eficazes de economia de custos.</p>',
+      html: '<p>Os tokens de saída são gerados um por um em sequência, tornando-os computacionalmente mais caros. A maioria dos provedores cobra <strong>3-5× mais</strong> para tokens de saída. Uma resposta de 300 palavras gera aproximadamente 400 tokens de saída. Manter as respostas concisas é uma das estratégias mais eficazes de economia de custos.</p>',
     },
     {
       type: 'title',
@@ -155,7 +155,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     },
     {
       type: 'tip',
-      html: 'Comece com um modelo de nível médio capaz como <code>GPT-4o mini</code> ou <code>Gemini 1.5 Flash</code> e atualize apenas se a qualidade for insuficiente. A diferença de custo entre um modelo pequeno e grande pode ser 10–100×.',
+      html: 'Comece com um modelo de nível médio capaz como <code>GPT-4o mini</code> ou <code>Gemini 1.5 Flash</code> e atualize apenas se a qualidade for insuficiente. A diferença de custo entre um modelo pequeno e grande pode ser 10-100×.',
     },
     {
       type: 'paragraph',

package/src/tool/llmCostCalculator/i18n/ru.ts

@@ -21,7 +21,7 @@ const faqData = [
   {
     question: 'Почему выходные токены дороже входных?',
     answer:
-      'Генерирование текста (выход) требует, чтобы модель последовательно вычисляла каждый токен, что вычислительно более интенсивно, чем чтение входа. Большинство провайдеров взимают в 3–5 раз больше за выходные токены, чем за входные.',
+      'Генерирование текста (выход) требует, чтобы модель последовательно вычисляла каждый токен, что вычислительно более интенсивно, чем чтение входа. Большинство провайдеров взимают в 3-5 раз больше за выходные токены, чем за входные.',
   },
   {
     question: 'Как я могу снизить свои расходы на API LLM?',
@@ -146,7 +146,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     {
       type: 'card',
       title: 'Выходные токены',
-      html: '<p>Выходные токены генерируются один за другим последовательно, делая их вычислительно более дорогостоящими. Большинство провайдеров взимают <strong>3–5× больше</strong> за выходные токены. Ответ из 300 слов генерирует примерно 400 выходных токенов. Сохранение ответов краткими - одна из наиболее эффективных стратегий экономии затрат.</p>',
+      html: '<p>Выходные токены генерируются один за другим последовательно, делая их вычислительно более дорогостоящими. Большинство провайдеров взимают <strong>3-5× больше</strong> за выходные токены. Ответ из 300 слов генерирует примерно 400 выходных токенов. Сохранение ответов краткими - одна из наиболее эффективных стратегий экономии затрат.</p>',
     },
     {
       type: 'title',
@@ -155,7 +155,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     },
     {
       type: 'tip',
-      html: 'Начните с способной модели среднего уровня, такой как <code>GPT-4o mini</code> или <code>Gemini 1.5 Flash</code>, и обновляйте, только если качество недостаточно. Разница в стоимости между маленькой и большой моделью может быть 10–100×.',
+      html: 'Начните с способной модели среднего уровня, такой как <code>GPT-4o mini</code> или <code>Gemini 1.5 Flash</code>, и обновляйте, только если качество недостаточно. Разница в стоимости между маленькой и большой моделью может быть 10-100×.',
     },
     {
       type: 'paragraph',

package/src/tool/llmCostCalculator/i18n/sv.ts

@@ -21,7 +21,7 @@ const faqData = [
   {
     question: 'Varför är utdatatoken dyrare än indatatoken?',
     answer:
-      'Att generera text (utdata) kräver att modellen beräknar varje token sekventiellt, vilket är mer beräkningsintensivt än att läsa indata. De flesta leverantörer tar ut 3–5 gånger mer för utdatatoken än indatatoken.',
+      'Att generera text (utdata) kräver att modellen beräknar varje token sekventiellt, vilket är mer beräkningsintensivt än att läsa indata. De flesta leverantörer tar ut 3-5 gånger mer för utdatatoken än indatatoken.',
   },
   {
     question: 'Hur kan jag minska mina LLM API-kostnader?',
@@ -146,7 +146,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     {
       type: 'card',
       title: 'Utdatatoken',
-      html: '<p>Utdatatoken genereras sekventiellt, en i taget, vilket gör dem beräkningsmässigt dyrare. De flesta leverantörer tar ut <strong>3–5× mer</strong> för utdatatoken. Ett svar på 300 ord genererar ungefär 400 utdatatoken. Att hålla svaren korta är en av de mest effektiva kostnadsbesparingsstrategi.</p>',
+      html: '<p>Utdatatoken genereras sekventiellt, en i taget, vilket gör dem beräkningsmässigt dyrare. De flesta leverantörer tar ut <strong>3-5× mer</strong> för utdatatoken. Ett svar på 300 ord genererar ungefär 400 utdatatoken. Att hålla svaren korta är en av de mest effektiva kostnadsbesparingsstrategi.</p>',
     },
     {
       type: 'title',
@@ -155,7 +155,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     },
     {
       type: 'tip',
-      html: 'Börja med en kapabel mellanniesemodell som <code>GPT-4o mini</code> eller <code>Gemini 1.5 Flash</code> och uppgradera bara om kvaliteten är otillräcklig. Skillnaden i kostnad mellan en liten och stor modell kan vara 10–100×.',
+      html: 'Börja med en kapabel mellanniesemodell som <code>GPT-4o mini</code> eller <code>Gemini 1.5 Flash</code> och uppgradera bara om kvaliteten är otillräcklig. Skillnaden i kostnad mellan en liten och stor modell kan vara 10-100×.',
     },
     {
       type: 'paragraph',

package/src/tool/llmCostCalculator/i18n/tr.ts

@@ -21,7 +21,7 @@ const faqData = [
   {
     question: 'Çıkış token\'ları neden giriş token\'larından daha pahalıdır?',
     answer:
-      'Metin oluşturma (çıkış), modelin her token\'u sırayla hesaplamasını gerektirir ve bu, girişi okumaktan hesaplamalar açısından daha yoğundur. Çoğu sağlayıcı çıkış token\'ları için giriş token\'larından 3–5 kat daha fazla ücret alır.',
+      'Metin oluşturma (çıkış), modelin her token\'u sırayla hesaplamasını gerektirir ve bu, girişi okumaktan hesaplamalar açısından daha yoğundur. Çoğu sağlayıcı çıkış token\'ları için giriş token\'larından 3-5 kat daha fazla ücret alır.',
   },
   {
     question: 'LLM API maliyetlerimi nasıl azaltabilirim?',
@@ -146,7 +146,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     {
       type: 'card',
       title: 'Çıkış token\'ları',
-      html: '<p>Çıkış token\'ları sırayla, teker teker oluşturulur ve bu onları hesaplamalar açısından daha pahalı hale getirir. Çoğu sağlayıcı çıkış token\'ları için <strong>3–5 kat daha fazla</strong> ücret alır. 300 sözcüklük bir yanıt yaklaşık 400 çıkış token\'ı üretir. Yanıtları kısa tutmak en etkili maliyet tasarrufu stratejilerinden biridir.</p>',
+      html: '<p>Çıkış token\'ları sırayla, teker teker oluşturulur ve bu onları hesaplamalar açısından daha pahalı hale getirir. Çoğu sağlayıcı çıkış token\'ları için <strong>3-5 kat daha fazla</strong> ücret alır. 300 sözcüklük bir yanıt yaklaşık 400 çıkış token\'ı üretir. Yanıtları kısa tutmak en etkili maliyet tasarrufu stratejilerinden biridir.</p>',
     },
     {
       type: 'title',
@@ -155,7 +155,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     },
     {
       type: 'tip',
-      html: '<code>GPT-4o mini</code> veya <code>Gemini 1.5 Flash</code> gibi yetenekli bir orta katman modeliyle başlayın ve yalnızca kalite yetersizse yükseltin. Küçük ve büyük bir model arasındaki maliyet farkı 10–100× olabilir.',
+      html: '<code>GPT-4o mini</code> veya <code>Gemini 1.5 Flash</code> gibi yetenekli bir orta katman modeliyle başlayın ve yalnızca kalite yetersizse yükseltin. Küçük ve büyük bir model arasındaki maliyet farkı 10-100× olabilir.',
     },
     {
       type: 'paragraph',

package/src/tool/llmCostCalculator/i18n/zh.ts

@@ -21,7 +21,7 @@ const faqData = [
   {
     question: '为什么输出代币比输入代币更昂贵？',
     answer:
-      '生成文本（输出）需要模型依次计算每个代币，这在计算上比读取输入更密集。大多数提供商对输出代币的收费是输入代币的 3–5 倍。',
+      '生成文本（输出）需要模型依次计算每个代币，这在计算上比读取输入更密集。大多数提供商对输出代币的收费是输入代币的 3-5 倍。',
   },
   {
     question: '如何降低我的 LLM API 成本？',
@@ -146,7 +146,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     {
       type: 'card',
       title: '输出代币',
-      html: '<p>输出代币按顺序逐个生成，使其在计算上更昂贵。大多数提供商对输出代币的收费<strong>多出 3–5 倍</strong>。一个 300 字的响应会生成大约 400 个输出代币。保持响应简洁是最有效的成本节省策略之一。</p>',
+      html: '<p>输出代币按顺序逐个生成，使其在计算上更昂贵。大多数提供商对输出代币的收费<strong>多出 3-5 倍</strong>。一个 300 字的响应会生成大约 400 个输出代币。保持响应简洁是最有效的成本节省策略之一。</p>',
     },
     {
       type: 'title',
@@ -155,7 +155,7 @@ export const content: ToolLocaleContent<LlmCostCalculatorUI> = {
     },
     {
       type: 'tip',
-      html: '从有能力的中等层级模型开始，例如 <code>GPT-4o mini</code> 或 <code>Gemini 1.5 Flash</code>，仅在质量不足时升级。小型和大型模型之间的成本差异可能是 10–100×。',
+      html: '从有能力的中等层级模型开始，例如 <code>GPT-4o mini</code> 或 <code>Gemini 1.5 Flash</code>，仅在质量不足时升级。小型和大型模型之间的成本差异可能是 10-100×。',
     },
     {
       type: 'paragraph',

package/src/tool/llmCostCalculator/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await llmCostCalculator.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/mobileMockupGenerator/component.astro

@@ -90,16 +90,16 @@ const t = (ui ?? {}) as MobileMockupGeneratorUI;
           </div>
           <div id="mmg-presets" class="mmg-presets-row"></div>
           <div class="mmg-gradient-inputs">
-            <input type="color" id="mmg-grad-start" value="#6366f1" class="mmg-color-picker" />
+            <input type="color" id="mmg-grad-start" value="#6366f1" class="mmg-color-picker" aria-label={t.labelBackground} />
             <Icon name="mdi:arrow-right" class="mmg-arrow-icon" />
-            <input type="color" id="mmg-grad-end" value="#a855f7" class="mmg-color-picker" />
+            <input type="color" id="mmg-grad-end" value="#a855f7" class="mmg-color-picker" aria-label={t.labelBackground} />
           </div>
           <div class="mmg-angle-section">
             <div class="mmg-angle-row">
               <span>{t.labelAngle}</span>
               <span id="mmg-angle-val">135&deg;</span>
             </div>
-            <input type="range" id="mmg-grad-angle" min="0" max="360" value="135" class="mmg-range" />
+            <input type="range" id="mmg-grad-angle" min="0" max="360" value="135" class="mmg-range" aria-label={t.labelAngle} />
           </div>
         </div>
 
@@ -111,7 +111,7 @@ const t = (ui ?? {}) as MobileMockupGeneratorUI;
             </button>
           </div>
           <div class="mmg-safe-color-row">
-            <input type="color" id="mmg-safe-color" value="#000000" class="mmg-color-picker-sm" />
+            <input type="color" id="mmg-safe-color" value="#000000" class="mmg-color-picker-sm" aria-label={t.labelSafeAreaColor} />
             <span class="mmg-safe-color-label">{t.labelSafeAreaColor}</span>
           </div>
         </div>
@@ -135,4 +135,3 @@ const t = (ui ?? {}) as MobileMockupGeneratorUI;
   import { App } from './app';
   new App();
 </script>
-

package/src/tool/mobileMockupGenerator/i18n/es.ts

@@ -91,7 +91,7 @@ const ui: MobileMockupGeneratorUI = {
   presetImageRight: 'Imagen Der.',
   confirmClear: '¿Estás seguro de eliminar todos los mockups?',
   processingExport: 'Procesando...',
-  exportDone: 'Listo!',
+  exportDone: '¡Listo!',
 };
 
 export const content: ToolLocaleContent<MobileMockupGeneratorUI> = {

package/src/tool/mobileMockupGenerator/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await mobileMockupGenerator.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/musicalTypography/i18n/de.ts

@@ -160,7 +160,7 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     {
       type: 'card',
       title: 'Warum "Musikalisch"',
-      html: '<p>Die Pythagoreer entdeckten, dass das Teilen einer Saite in einfache Proportionen (1:2, 2:3, 3:4) Konsonanz erzeugt. Diese Intervalle – Oktave, reine Quinte und reine Quarte – sind genau die typografischen Ratios. Du komponierst visuelle Musik.</p>',
+      html: '<p>Die Pythagoreer entdeckten, dass das Teilen einer Saite in einfache Proportionen (1:2, 2:3, 3:4) Konsonanz erzeugt. Diese Intervalle - Oktave, reine Quinte und reine Quarte - sind genau die typografischen Ratios. Du komponierst visuelle Musik.</p>',
     },
     {
       type: 'title',

package/src/tool/musicalTypography/i18n/fr.ts

@@ -155,7 +155,7 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     {
       type: 'card',
       title: 'La formule',
-      html: '<p>La progression est simple : <code>Taille = Base × Ratio<sup>n</sup></code>. L\'étape 0 est votre texte de base. L\'étape 1 est un petit sous-titre. L\'étape 4 ou 5 pourrait être votre H1 principal. La même constante multiplicative garantit que toutes les relations sont cohérentes.</p>',
+      html: '<p>La progression est simple: <code>Taille = Base × Ratio<sup>n</sup></code>. L\'étape 0 est votre texte de base. L\'étape 1 est un petit sous-titre. L\'étape 4 ou 5 pourrait être votre H1 principal. La même constante multiplicative garantit que toutes les relations sont cohérentes.</p>',
     },
     {
       type: 'card',

package/src/tool/musicalTypography/i18n/id.ts

@@ -160,7 +160,7 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     {
       type: 'card',
       title: 'Mengapa "Musikal"',
-      html: '<p>Kaum Pythagoras menemukan bahwa membagi senar dalam proporsi sederhana (1:2, 2:3, 3:4) menghasilkan bunyi yang konsonan. Interval-interval ini — oktaf, kuint sempurna, dan kuart sempurna — adalah persis rasio tipografi yang digunakan. Anda sedang menggubah musik visual.</p>',
+      html: '<p>Kaum Pythagoras menemukan bahwa membagi senar dalam proporsi sederhana (1:2, 2:3, 3:4) menghasilkan bunyi yang konsonan. Interval-interval ini - oktaf, kuint sempurna, dan kuart sempurna - adalah persis rasio tipografi yang digunakan. Anda sedang menggubah musik visual.</p>',
     },
     {
       type: 'title',

package/src/tool/musicalTypography/i18n/it.ts

@@ -160,7 +160,7 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     {
       type: 'card',
       title: 'Perché "Musicale"',
-      html: "<p>I pitagorici scoprirono che dividere una corda in proporzioni semplici (1:2, 2:3, 3:4) produceva suoni consonanti. Questi intervalli — ottava, quinta giusta e quarta giusta — sono esattamente i rapporti tipografici. Stai componendo musica visiva.</p>",
+      html: "<p>I pitagorici scoprirono che dividere una corda in proporzioni semplici (1:2, 2:3, 3:4) produceva suoni consonanti. Questi intervalli - ottava, quinta giusta e quarta giusta - sono esattamente i rapporti tipografici. Stai componendo musica visiva.</p>",
     },
     {
       type: 'title',

package/src/tool/musicalTypography/i18n/ko.ts

@@ -160,7 +160,7 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     {
       type: 'card',
       title: '왜 "음악적"인가',
-      html: '<p>피타고라스학파는 현을 단순한 비율(1:2, 2:3, 3:4)로 나누면 협화음이 생긴다는 것을 발견했습니다. 옥타브, 완전5도, 완전4도 — 이 음정들이 바로 타이포그래피 비율과 정확히 일치합니다. 당신은 시각적 음악을 작곡하고 있는 것입니다.</p>',
+      html: '<p>피타고라스학파는 현을 단순한 비율(1:2, 2:3, 3:4)로 나누면 협화음이 생긴다는 것을 발견했습니다. 옥타브, 완전5도, 완전4도 - 이 음정들이 바로 타이포그래피 비율과 정확히 일치합니다. 당신은 시각적 음악을 작곡하고 있는 것입니다.</p>',
     },
     {
       type: 'title',

package/src/tool/musicalTypography/i18n/ru.ts

@@ -8,7 +8,7 @@ const description = 'Бесплатный онлайн-инструмент дл
 
 const faqData = [
   { question: 'Что такое типографическая модульная шкала?', answer: 'Это метод определения размеров шрифтов на основе постоянного математического соотношения. Подобно музыке, где ноты имеют гармонические отношения, модульная шкала создаёт сбалансированную и предсказуемую визуальную иерархию.' },
-  { question: 'Почему использовать музыкальные интервалы для дизайна?', answer: 'Музыкальные интервалы — это пропорции, которые человеческий мозг воспринимает как гармоничные. Применение их к размерам текста создаёт визуальную структуру, которая ощущается правильной и профессиональной, а не случайно выбранной.' },
+  { question: 'Почему использовать музыкальные интервалы для дизайна?', answer: 'Музыкальные интервалы - это пропорции, которые человеческий мозг воспринимает как гармоничные. Применение их к размерам текста создаёт визуальную структуру, которая ощущается правильной и профессиональной, а не случайно выбранной.' },
   { question: 'Что такое Золотое Сечение в типографии?', answer: 'Это пропорция 1.618, известная как Золотое Сечение. Она создаёт очень драматичные и элегантные шкалы, где каждый шаг иерархии растёт экспоненциально. Идеально для портфолио или сайтов, ориентированных на искусство.' },
   { question: 'Как я могу применить шкалу в своём файле CSS?', answer: 'Инструмент генерирует CSS-переменные (токены) в формате :root { --step-N: Xrem; }. Скопируйте их в свой основной CSS-файл и используйте с var(--step-N), чтобы сохранить типографическую согласованность на всём сайте.' },
 ];
@@ -38,8 +38,8 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     { type: 'paragraph', html: '<strong>Музыкальная Типографическая Шкала</strong> применяет математику музыкальных интервалов к типографическому дизайну. Подобно тому, как музыкальная композиция управляется точными пропорциями, хороший дизайн выигрывает от математической структуры, которая связывает все размеры вместе.' },
     { type: 'title', text: 'Как работает модульная шкала', level: 3 },
     { type: 'grid', columns: 2 },
-    { type: 'card', title: 'Формула', html: '<p>Прогрессия простая: <code>Size = Base × Ratio<sup>n</sup></code>. Шаг 0 — это ваш базовый текст. Шаг 1 — маленький подзаголовок. Шаг 4 или 5 может быть вашим главным H1. Одна и та же постоянная умножения (соотношение) гарантирует, что все отношения согласованы.</p>' },
-    { type: 'card', title: 'Почему "Музыкальная"', html: '<p>Пифагорейцы открыли, что деление струны на простые пропорции (1:2, 2:3, 3:4) производит созвучные звуки. Эти интервалы, октава, чистая квинта и чистая кварта, — это ровно типографические соотношения. Вы сочиняете визуальную музыку.</p>' },
+    { type: 'card', title: 'Формула', html: '<p>Прогрессия простая: <code>Size = Base × Ratio<sup>n</sup></code>. Шаг 0 - это ваш базовый текст. Шаг 1 - маленький подзаголовок. Шаг 4 или 5 может быть вашим главным H1. Одна и та же постоянная умножения (соотношение) гарантирует, что все отношения согласованы.</p>' },
+    { type: 'card', title: 'Почему "Музыкальная"', html: '<p>Пифагорейцы открыли, что деление струны на простые пропорции (1:2, 2:3, 3:4) производит созвучные звуки. Эти интервалы, октава, чистая квинта и чистая кварта, - это ровно типографические соотношения. Вы сочиняете визуальную музыку.</p>' },
     { type: 'title', text: 'Выбор правильного соотношения', level: 3 },
     { type: 'tip', html: 'Для плотных интерфейсов (приборные панели, таблицы) используйте малые соотношения, такие как <code>1.125</code> или <code>1.2</code>. Для редакционных или портфельных сайтов используйте более выразительные соотношения, такие как <code>1.5</code> или <code>1.618</code>.' },
     { type: 'paragraph', html: 'Не ограничивайте шкалу только <code>font-size</code>. Те же CSS-переменные работают для <code>margin</code>, <code>padding</code> и <code>gap</code>. Когда белое пространство следует той же математической прогрессии, что и текст, дизайн достигает уровня связности, который все ощущают, но мало кто может объяснить.' },

package/src/tool/musicalTypography/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await musicalTypography.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/placeholderGenerator/component.astro

@@ -43,14 +43,14 @@ const t = (ui ?? {}) as PlaceholderGeneratorUI;
             <label class="pg-label" for="p-bg-color">{t.labelBgColor}</label>
             <div class="pg-color-wrapper">
               <input type="color" id="p-bg-color" value="#e2e8f0" />
-              <input class="pg-color-text" type="text" id="p-bg-text" value="#e2e8f0" maxlength="7" />
+              <input class="pg-color-text" type="text" id="p-bg-text" value="#e2e8f0" maxlength="7" aria-label={t.labelBgColor} />
             </div>
           </div>
           <div class="pg-control-group">
             <label class="pg-label" for="p-text-color">{t.labelTextColor}</label>
             <div class="pg-color-wrapper">
               <input type="color" id="p-text-color" value="#64748b" />
-              <input class="pg-color-text" type="text" id="p-text-text" value="#64748b" maxlength="7" />
+              <input class="pg-color-text" type="text" id="p-text-text" value="#64748b" maxlength="7" aria-label={t.labelTextColor} />
             </div>
           </div>
         </div>

package/src/tool/placeholderGenerator/i18n/de.ts

@@ -16,7 +16,7 @@ const faqData = [
   {
     question: 'Kann ich im Generator jede beliebige Auflösung verwenden?',
     answer:
-      'Ja, Sie können beliebige numerische Werte für Breite und Höhe eingeben. Der Generator erstellt eine Arbeitsfläche mit exakt den angeforderten Abmessungen – ideal für präzise Raster oder spezifische Werbeformate.',
+      'Ja, Sie können beliebige numerische Werte für Breite und Höhe eingeben. Der Generator erstellt eine Arbeitsfläche mit exakt den angeforderten Abmessungen - ideal für präzise Raster oder spezifische Werbeformate.',
   },
   {
     question: 'In welchem Format werden die Bilder heruntergeladen?',
@@ -45,7 +45,7 @@ const howToData = [
   },
   {
     name: 'Bild herunterladen',
-    text: 'Klicken Sie auf die Schaltfläche „Herunterladen", um das erstellte Platzhalterbild direkt auf Ihrem Gerät zu speichern.',
+    text: 'Klicken Sie auf die Schaltfläche "Herunterladen", um das erstellte Platzhalterbild direkt auf Ihrem Gerät zu speichern.',
   },
 ];
 
@@ -159,7 +159,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
       type: 'list',
       items: [
         '<strong>Pixel-genaue Auflösung:</strong> Der native HTML5 Canvas stellt sicher, dass die exportierte Arbeitsfläche arithmetisch exakt den vom Nutzer angegebenen Koordinaten entspricht.',
-        '<strong>Typografisches Autoscaling:</strong> Im automatischen Modus berechnet die Schriftgröße die Umfangsfläche und Zeichenanzahl, um den Text elegant einzupassen – ohne unerwünschte <em>Overflows</em>.',
+        '<strong>Typografisches Autoscaling:</strong> Im automatischen Modus berechnet die Schriftgröße die Umfangsfläche und Zeichenanzahl, um den Text elegant einzupassen - ohne unerwünschte <em>Overflows</em>.',
         '<strong>Hexadezimale Synchronisation:</strong> Bidirektionale Zustandskontrolle zwischen nativen HTML-Farbwählern und Texteingaben sorgt für präzise Kontraste, die Ihrer Figma- oder Penpot-Palette entsprechen.',
       ],
     },
@@ -170,7 +170,7 @@ export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Kein monolithisches Projekt und kein Micro-Frontend kommt ohne Grundlagenarbeit aus – erst recht nicht bei anspruchsvollen Kunden oder Product Managern mit klarer Vision. Wer grafische Iterationen zügig durchführen kann, ohne fertige <em>Assets</em> mitschleppen zu müssen, hat einen klaren Vorteil. Dieser Generator greift direkt auf die moderne JS-API <code>toDataURL()</code> auf Ihrer lokalen Maschine zurück und liefert ein professionelles Ergebnis ohne fragwürdige Zwischenverarbeitung.',
+      html: 'Kein monolithisches Projekt und kein Micro-Frontend kommt ohne Grundlagenarbeit aus - erst recht nicht bei anspruchsvollen Kunden oder Product Managern mit klarer Vision. Wer grafische Iterationen zügig durchführen kann, ohne fertige <em>Assets</em> mitschleppen zu müssen, hat einen klaren Vorteil. Dieser Generator greift direkt auf die moderne JS-API <code>toDataURL()</code> auf Ihrer lokalen Maschine zurück und liefert ein professionelles Ergebnis ohne fragwürdige Zwischenverarbeitung.',
     },
   ],
 };

package/src/tool/placeholderGenerator/i18n/ru.ts

@@ -11,7 +11,7 @@ const faqData = [
   {
     question: 'Что такое плейсхолдер-изображение?',
     answer:
-      'Плейсхолдер или заполняющее изображение — это временный графический элемент, используемый в веб-дизайне и макете для зарезервирования пространства, где будет размещено окончательное изображение. Они помогают визуализировать структуру страницы до появления финального контента.',
+      'Плейсхолдер или заполняющее изображение - это временный графический элемент, используемый в веб-дизайне и макете для зарезервирования пространства, где будет размещено окончательное изображение. Они помогают визуализировать структуру страницы до появления финального контента.',
   },
   {
     question: 'Могу ли я использовать любое разрешение в генераторе?',

package/src/tool/placeholderGenerator/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await placeholderGenerator.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/promptLibrary/i18n/de.ts

@@ -112,7 +112,7 @@ export const content: ToolLocaleContent<PromptLibraryUI> = {
       type: 'list',
       items: [
         '<strong>Sofortsuche:</strong> Finde jene spezifische Anweisung, die du vor Monaten verwendet hast, mit einer einfachen Textsuche.',
-        '<strong>Tag-Klassifizierung:</strong> Verschlagworte deine Prompts mit „Marketing", „Programmierung" oder „Copywriting", um schnell zu filtern.',
+        '<strong>Tag-Klassifizierung:</strong> Verschlagworte deine Prompts mit "Marketing", "Programmierung" oder "Copywriting", um schnell zu filtern.',
         '<strong>Ein-Klick-Kopieren:</strong> Den vollständigen Text mit einem einzigen Klick in die Zwischenablage kopieren.',
         '<strong>Vollständige Privatsphäre:</strong> Alle deine Daten werden lokal im Browser über localStorage gespeichert.',
       ],

package/src/tool/promptLibrary/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await promptLibrary.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/readabilityCalculator/component.astro

@@ -18,14 +18,14 @@ const t = (ui ?? {}) as ReadabilityCalculatorUI;
           <div class="rc-input-wrapper">
             <label class="rc-label-mini">{t.labelText}</label>
             <div class="rc-color-input-container">
-              <input type="color" id="rc-text-color" class="rc-color-picker" value="#1e293b" />
+              <input type="color" id="rc-text-color" class="rc-color-picker" value="#1e293b" aria-label={t.labelText} />
               <span id="rc-text-hex" class="rc-hex-text">#1E293B</span>
             </div>
           </div>
           <div class="rc-input-wrapper">
             <label class="rc-label-mini">{t.labelBg}</label>
             <div class="rc-color-input-container">
-              <input type="color" id="rc-bg-color" class="rc-color-picker" value="#ffffff" />
+              <input type="color" id="rc-bg-color" class="rc-color-picker" value="#ffffff" aria-label={t.labelBg} />
               <span id="rc-bg-hex" class="rc-hex-text">#FFFFFF</span>
             </div>
           </div>
@@ -38,14 +38,14 @@ const t = (ui ?? {}) as ReadabilityCalculatorUI;
               <label class="rc-label-mini">{t.labelFontSize}</label>
               <span id="rc-size-val" class="rc-slider-value">16px</span>
             </div>
-            <input type="range" id="rc-size-slider" class="rc-range" min="12" max="72" value="16" />
+            <input type="range" id="rc-size-slider" class="rc-range" min="12" max="72" value="16" aria-label={t.labelFontSize} />
           </div>
           <div class="rc-slider-group">
             <div class="rc-slider-header">
               <label class="rc-label-mini">{t.labelFontWeight}</label>
               <span id="rc-weight-val" class="rc-slider-value">400</span>
             </div>
-            <input type="range" id="rc-weight-slider" class="rc-range" min="100" max="900" step="100" value="400" />
+            <input type="range" id="rc-weight-slider" class="rc-range" min="100" max="900" step="100" value="400" aria-label={t.labelFontWeight} />
           </div>
         </div>
 

package/src/tool/readabilityCalculator/i18n/de.ts

@@ -9,7 +9,7 @@ const description = 'Prüfen Sie den echten Kontrast Ihrer Designs mit APCA (WCA
 const faqData = [
   {
     question: 'Was ist APCA und warum unterscheidet es sich von WCAG 2.1?',
-    answer: 'APCA ist der Advanced Perceptual Contrast Algorithm, der für WCAG 3.0 entwickelt wurde. Anders als das alte einfache Verhältnis verwendet APCA mathematische Modelle, die nachbilden, wie das menschliche Gehirn Kontrast wahrnimmt – unter Berücksichtigung der Polarität (heller vs. dunkler Hintergrund) und der Schriftgröße bzw. des Schriftgewichts.',
+    answer: 'APCA ist der Advanced Perceptual Contrast Algorithm, der für WCAG 3.0 entwickelt wurde. Anders als das alte einfache Verhältnis verwendet APCA mathematische Modelle, die nachbilden, wie das menschliche Gehirn Kontrast wahrnimmt - unter Berücksichtigung der Polarität (heller vs. dunkler Hintergrund) und der Schriftgröße bzw. des Schriftgewichts.',
   },
   {
     question: 'Was bedeutet der Lc-Wert?',
@@ -108,7 +108,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
     { type: 'title', text: 'Visueller Lesbarkeitsrechner (WCAG vs APCA)', level: 2 },
     {
       type: 'paragraph',
-      html: 'Verstehen Sie, wie Farben und Typografie die tatsächliche Lesbarkeit beeinflussen – mit dem neuen wahrnehmungsbasierten Barrierefreiheitsstandard. WCAG 2.1 nutzt eine einfache Formel aus dem Jahr 2008. <strong>APCA</strong> ist das neue Modell für <strong>WCAG 3.0</strong>, das menschliche Wahrnehmung nachbildet.',
+      html: 'Verstehen Sie, wie Farben und Typografie die tatsächliche Lesbarkeit beeinflussen - mit dem neuen wahrnehmungsbasierten Barrierefreiheitsstandard. WCAG 2.1 nutzt eine einfache Formel aus dem Jahr 2008. <strong>APCA</strong> ist das neue Modell für <strong>WCAG 3.0</strong>, das menschliche Wahrnehmung nachbildet.',
     },
     { type: 'title', text: 'Kernpunkte von APCA', level: 3 },
     {

package/src/tool/readabilityCalculator/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await readabilityCalculator.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}