@jjlmoya/utils-developer 1.14.0 → 1.15.0

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/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/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 }} />}

package/src/tool/readabilityCalculator/visual-readability-calculator-wcag-apca.css

@@ -1,14 +1,17 @@
 .rc-root {
     width: 100%;
+    min-width: 0;
   }
 
   .rc-container {
+    container-type: inline-size;
     display: grid;
     grid-template-columns: 1fr;
     gap: 2rem;
     max-width: 1200px;
     margin: 0 auto;
     padding: 1.5rem;
+    min-width: 0;
   }
 
   @media (min-width: 1024px) {
@@ -28,6 +31,7 @@
     flex-direction: column;
     gap: 2rem;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+    min-width: 0;
   }
 
   .theme-dark .rc-card {
@@ -61,7 +65,7 @@
 
   .rc-inputs-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
     gap: 1.5rem;
   }
 
@@ -90,6 +94,7 @@
     padding: 0.5rem;
     border-radius: 0.75rem;
     transition: all 0.2s ease;
+    min-width: 0;
   }
 
   .theme-dark .rc-color-input-container {
@@ -127,6 +132,8 @@
     font-weight: 600;
     color: rgb(71, 85, 105);
     flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 
   .theme-dark .rc-hex-text {
@@ -193,7 +200,7 @@
 
   .rc-comparison-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
     gap: 1rem;
   }
 
@@ -206,6 +213,7 @@
     gap: 0.5rem;
     background: rgba(255, 255, 255, 0.4);
     border: 1px solid rgba(0, 0, 0, 0.05);
+    min-width: 0;
   }
 
   .theme-dark .rc-score-card {
@@ -232,6 +240,8 @@
     padding: 0.2rem 0.6rem;
     border-radius: 0.5rem;
     text-transform: uppercase;
+    text-align: center;
+    overflow-wrap: anywhere;
   }
 
   .rc-status-pass {
@@ -274,6 +284,7 @@
   .rc-preview-text {
     line-height: 1.5;
     margin: 0;
+    overflow-wrap: anywhere;
   }
 
   .rc-apca-breakdown {
@@ -292,6 +303,7 @@
   .rc-breakdown-item {
     display: flex;
     justify-content: space-between;
+    gap: 1rem;
     font-size: 0.875rem;
   }
 
@@ -309,6 +321,8 @@
     display: flex;
     align-items: center;
     gap: 0.4rem;
+    text-align: right;
+    white-space: nowrap;
   }
 
   .rc-check-yes {
@@ -317,4 +331,74 @@
 
   .rc-check-no {
     color: rgb(239, 68, 68);
-  }
+  }
+
+  @container (max-width: 520px) {
+    .rc-container {
+      gap: 1rem;
+      padding: 0;
+    }
+
+    .rc-card {
+      border-radius: 1rem;
+      gap: 1.25rem;
+      padding: 1rem;
+    }
+
+    .rc-control-section {
+      gap: 1.25rem;
+    }
+
+    .rc-group-title {
+      margin-bottom: 0.75rem;
+    }
+
+    .rc-inputs-grid,
+    .rc-comparison-grid {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+
+    .rc-color-input-container {
+      align-items: stretch;
+    }
+
+    .rc-color-picker {
+      flex: 0 0 2.5rem;
+    }
+
+    .rc-score-card,
+    .rc-apca-breakdown {
+      padding: 1rem;
+      border-radius: 0.75rem;
+    }
+
+    .rc-main-preview-box {
+      min-height: 120px;
+      padding: 1.25rem;
+      border-radius: 0.875rem;
+    }
+
+    .rc-breakdown-item {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 0.35rem;
+    }
+
+    .rc-item-check {
+      text-align: left;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .rc-container {
+      gap: 1rem;
+      padding: 0;
+    }
+
+    .rc-card {
+      border-radius: 1rem;
+      gap: 1.25rem;
+      padding: 1rem;
+    }
+  }

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

@@ -31,7 +31,7 @@ const faqData = [
 
 const howToData = [
   { name: 'SVG einfügen', text: 'Füge den SVG-Code aus Figma, Illustrator oder Inkscape in das Textfeld ein.' },
-  { name: 'Optionen konfigurieren', text: 'Aktiviere oder deaktiviere die Optionen: IDs entfernen, width/height entfernen und minifizieren – je nach Bedarf.' },
+  { name: 'Optionen konfigurieren', text: 'Aktiviere oder deaktiviere die Optionen: IDs entfernen, width/height entfernen und minifizieren - je nach Bedarf.' },
   { name: 'Bereinigen', text: 'Klicke auf SVG bereinigen, um den Code zu verarbeiten und das optimierte Ergebnis zu erhalten.' },
   { name: 'Kopieren oder herunterladen', text: 'Nutze die Schaltflächen Kopieren oder Herunterladen, um das bereinigte SVG für die Produktion zu sichern.' },
 ];
@@ -108,7 +108,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
     { type: 'title', text: 'Warum sind exportierte SVGs so unordentlich?', level: 3 },
     {
       type: 'paragraph',
-      html: 'Wenn du ein SVG aus Figma exportierst, erhältst du eine Datei voller Attribute, die nur innerhalb der App einen Sinn ergeben: <code>data-name</code>, <code>xml:space</code>, Verweise auf interne Ebenen und Design-Metadaten. Das Ergebnis ist ein SVG, das 40–70 % größer als nötig sein kann.',
+      html: 'Wenn du ein SVG aus Figma exportierst, erhältst du eine Datei voller Attribute, die nur innerhalb der App einen Sinn ergeben: <code>data-name</code>, <code>xml:space</code>, Verweise auf interne Ebenen und Design-Metadaten. Das Ergebnis ist ein SVG, das 40-70 % größer als nötig sein kann.',
     },
     { type: 'title', text: 'Was der Bereiniger entfernt', level: 3 },
     {

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

@@ -108,7 +108,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
     { type: 'title', text: 'Mengapa SVG yang diekspor begitu berantakan?', level: 3 },
     {
       type: 'paragraph',
-      html: 'Saat kamu mengekspor SVG dari Figma, kamu mendapatkan file yang penuh dengan atribut yang hanya bermakna di dalam aplikasinya: <code>data-name</code>, <code>xml:space</code>, referensi ke layer internal, dan metadata desain. Hasilnya adalah SVG yang bisa 40–70% lebih besar dari yang seharusnya.',
+      html: 'Saat kamu mengekspor SVG dari Figma, kamu mendapatkan file yang penuh dengan atribut yang hanya bermakna di dalam aplikasinya: <code>data-name</code>, <code>xml:space</code>, referensi ke layer internal, dan metadata desain. Hasilnya adalah SVG yang bisa 40-70% lebih besar dari yang seharusnya.',
     },
     { type: 'title', text: 'Apa yang dihapus oleh Pembersih', level: 3 },
     {

package/src/tool/svgSanitizer/i18n/pl.ts

@@ -108,7 +108,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
     { type: 'title', text: 'Dlaczego wyeksportowane pliki SVG są takie brudne?', level: 3 },
     {
       type: 'paragraph',
-      html: 'Gdy eksportujesz SVG z Figmy, otrzymujesz plik wypełniony atrybutami, które mają sens tylko wewnątrz aplikacji: <code>data-name</code>, <code>xml:space</code>, odwołania do wewnętrznych warstw i metadane projektu. Efektem jest SVG, który może ważyć o 40–70% więcej niż powinien.',
+      html: 'Gdy eksportujesz SVG z Figmy, otrzymujesz plik wypełniony atrybutami, które mają sens tylko wewnątrz aplikacji: <code>data-name</code>, <code>xml:space</code>, odwołania do wewnętrznych warstw i metadane projektu. Efektem jest SVG, który może ważyć o 40-70% więcej niż powinien.',
     },
     { type: 'title', text: 'Co usuwa oczyszczacz', level: 3 },
     {

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

@@ -13,7 +13,7 @@ const faqData = [
   },
   {
     question: 'Работает ли это с SVG из Illustrator?',
-    answer: 'Да. Illustrator экспортирует SVG с XML-объявлениями, метаданными и собственными пространствами имён, которые очиститель удаляет. Результат — это SVG, совместимый со всеми современными браузерами.',
+    answer: 'Да. Illustrator экспортирует SVG с XML-объявлениями, метаданными и собственными пространствами имён, которые очиститель удаляет. Результат - это SVG, совместимый со всеми современными браузерами.',
   },
   {
     question: 'Какая разница между очисткой и минификацией?',
@@ -21,7 +21,7 @@ const faqData = [
   },
   {
     question: 'Может ли удаление ID-элементов повредить SVG?',
-    answer: 'Только если элемент в SVG ссылается на другой по ID, например через fill="url(#gradient)". В этом случае отключите опцию «Удалить ID». Она отключена по умолчанию именно чтобы избежать этой проблемы.',
+    answer: 'Только если элемент в SVG ссылается на другой по ID, например через fill="url(#gradient)". В этом случае отключите опцию "Удалить ID". Она отключена по умолчанию именно чтобы избежать этой проблемы.',
   },
   {
     question: 'Передаётся ли код SVG на какой-нибудь сервер?',
@@ -32,7 +32,7 @@ const faqData = [
 const howToData = [
   { name: 'Вставьте SVG', text: 'Вставьте код SVG, экспортированный из Figma, Illustrator или Inkscape, в текстовое поле.' },
   { name: 'Настройте параметры', text: 'Включите или отключите опции: удалить ID, убрать ширину/высоту и минифицировать в зависимости от ваших нужд.' },
-  { name: 'Очистите', text: 'Нажмите «Очистить SVG», чтобы обработать код и получить оптимизированный результат.' },
+  { name: 'Очистите', text: 'Нажмите "Очистить SVG", чтобы обработать код и получить оптимизированный результат.' },
   { name: 'Скопируйте или скачайте', text: 'Используйте кнопки копирования или загрузки, чтобы получить чистый SVG, готовый для продакшена.' },
 ];
 
@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: 'Ссылки',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
@@ -108,7 +108,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
     { type: 'title', text: 'Почему экспортированные SVG такие грязные?', level: 3 },
     {
       type: 'paragraph',
-      html: 'Когда вы экспортируете SVG из Figma, вы получаете файл, перегруженный атрибутами, которые имеют смысл только внутри приложения: <code>data-name</code>, <code>xml:space</code>, ссылки на внутренние слои и метаданные дизайна. Результат — это SVG, весящий на 40-70% больше необходимого.',
+      html: 'Когда вы экспортируете SVG из Figma, вы получаете файл, перегруженный атрибутами, которые имеют смысл только внутри приложения: <code>data-name</code>, <code>xml:space</code>, ссылки на внутренние слои и метаданные дизайна. Результат - это SVG, весящий на 40-70% больше необходимого.',
     },
     { type: 'title', text: 'Что удаляет очиститель', level: 3 },
     {

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

@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: 'Referenser',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],

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

@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: 'Referanslar',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],

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

@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: '参考资料',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],

package/src/tool/svgSanitizer/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await svgSanitizer.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/svgToCss/i18n/de.ts

@@ -16,7 +16,7 @@ const faqData = [
   {
     question: 'Wie ändere ich die Farbe eines in CSS eingebetteten SVGs?',
     answer:
-      'Der beste Weg ist über „mask-image“. Indem Sie das SVG als Maske definieren, können Sie die „background-color“ verwenden, um die Farbe dynamisch zu ändern, sogar in :hover-Zuständen.',
+      'Der beste Weg ist über "mask-image". Indem Sie das SVG als Maske definieren, können Sie die "background-color" verwenden, um die Farbe dynamisch zu ändern, sogar in :hover-Zuständen.',
   },
   {
     question: 'Welche Browser unterstützen CSS-Masken?',
@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: 'Ergebnis kopieren',
-    text: 'Klicken Sie auf „Kopieren“, um den generierten CSS-Code in Ihre Zwischenablage zu übernehmen.',
+    text: 'Klicken Sie auf "Kopieren", um den generierten CSS-Code in Ihre Zwischenablage zu übernehmen.',
   },
   {
     name: 'In Ihr Projekt übernehmen',

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

@@ -9,7 +9,7 @@ const description =
 
 const faqData = [
   {
-    question: '¿Es mejor usar Data URI o un archivo .svg externo?',
+    question: '¿Es mejor usar Data URI o un archivo SVG externo?',
     answer:
       'Depende del uso. Los Data URIs eliminan peticiones HTTP (ideal para iconos pequeños), pero aumentan el tamaño del CSS. Para ilustraciones grandes o ricas en detalles, es preferible un archivo externo.',
   },

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

@@ -164,7 +164,7 @@ export const content: ToolLocaleContent<SvgToCssUI> = {
     },
     {
       type: 'paragraph',
-      html: "Beaucoup de développeurs utilisent simplement <code>background-image</code> pour intégrer des vecteurs, mais cela a une limitation : vous ne pouvez pas changer la couleur du SVG dynamiquement depuis le CSS.",
+      html: "Beaucoup de développeurs utilisent simplement <code>background-image</code> pour intégrer des vecteurs, mais cela a une limitation: vous ne pouvez pas changer la couleur du SVG dynamiquement depuis le CSS.",
     },
     {
       type: 'paragraph',

package/src/tool/svgToCss/i18n/pl.ts

@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: 'Skopiuj wynik',
-    text: 'Kliknij „Kopiuj”, aby pobrać wygenerowany kod CSS do schowka.',
+    text: 'Kliknij "Kopiuj", aby pobrać wygenerowany kod CSS do schowka.',
   },
   {
     name: 'Zastosuj w swoim projekcie',

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

@@ -16,7 +16,7 @@ const faqData = [
   {
     question: 'Как изменить цвет SVG, встроенного в CSS?',
     answer:
-      "Лучший способ — через 'mask-image'. Определив SVG как маску, вы можете использовать 'background-color' для динамического изменения его цвета, даже в состояниях :hover.",
+      "Лучший способ - через 'mask-image'. Определив SVG как маску, вы можете использовать 'background-color' для динамического изменения его цвета, даже в состояниях :hover.",
   },
   {
     question: ' какие браузеры поддерживают CSS Masks?',
@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: 'Скопируйте результат',
-    text: 'Нажмите «Копировать», чтобы перенести сгенерированный CSS-код в буфер обмена.',
+    text: 'Нажмите "Копировать", чтобы перенести сгенерированный CSS-код в буфер обмена.',
   },
   {
     name: 'Примените в своем проекте',

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

@@ -16,7 +16,7 @@ const faqData = [
   {
     question: '如何更改嵌入 CSS 的 SVG 的颜色？',
     answer:
-      '最好的方法是通过“mask-image”。通过将 SVG 定义为遮罩（mask），您可以使用“background-color”动态更改其颜色，甚至在 :hover 状态下也可以。',
+      '最好的方法是通过"mask-image"。通过将 SVG 定义为遮罩（mask），您可以使用"background-color"动态更改其颜色，甚至在 :hover 状态下也可以。',
   },
   {
     question: '哪些浏览器支持 CSS 遮罩（Masks）？',
@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: '复制结果',
-    text: '点击“复制”将生成的 CSS 代码获取到剪贴板中。',
+    text: '点击"复制"将生成的 CSS 代码获取到剪贴板中。',
   },
   {
     name: '在项目中使用',

package/src/tool/svgToCss/seo.astro

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