@jjlmoya/utils-developer 1.13.0 → 1.15.0

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/placeholder-image-generator.css

@@ -16,7 +16,7 @@
     color: var(--pg-text);
   }
 
-  :global(.theme-dark) .pg-root {
+  .theme-dark .pg-root {
     --pg-card-bg: #1e293b;
     --pg-bg: #0f172a;
     --pg-text: #f1f5f9;
@@ -123,7 +123,7 @@
   }
 
   .pg-preset-pill:hover,
-  :global(.pg-preset-pill.active) {
+  .pg-preset-pill.active {
     background: var(--pg-primary);
     border-color: var(--pg-primary-dark);
     color: #fff;

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/prompt-library.css

@@ -20,7 +20,7 @@
     box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
   }
 
-  :global(.theme-dark) .pl-topbar {
+  .theme-dark .pl-topbar {
     background: rgba(15, 23, 42, 0.4);
     border-color: rgba(255, 255, 255, 0.08);
   }
@@ -61,13 +61,13 @@
     box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
   }
 
-  :global(.theme-dark) .pl-search-input {
+  .theme-dark .pl-search-input {
     background: rgba(15, 23, 42, 0.6);
     border-color: rgba(255, 255, 255, 0.1);
     color: rgb(248, 250, 252);
   }
 
-  :global(.theme-dark) .pl-search-input:focus {
+  .theme-dark .pl-search-input:focus {
     background: rgba(30, 41, 59, 0.8);
   }
 
@@ -121,11 +121,11 @@
     color: rgb(30, 41, 59);
   }
 
-  :global(.theme-dark) .pl-btn-ghost {
+  .theme-dark .pl-btn-ghost {
     color: rgb(148, 163, 184);
   }
 
-  :global(.theme-dark) .pl-btn-ghost:hover {
+  .theme-dark .pl-btn-ghost:hover {
     background: rgba(255, 255, 255, 0.05);
     color: rgb(248, 250, 252);
   }
@@ -164,11 +164,11 @@
     background: rgba(239, 68, 68, 0.1);
   }
 
-  :global(.theme-dark) .pl-btn-icon {
+  .theme-dark .pl-btn-icon {
     color: rgb(148, 163, 184);
   }
 
-  :global(.theme-dark) .pl-btn-icon:hover {
+  .theme-dark .pl-btn-icon:hover {
     background: rgba(255, 255, 255, 0.1);
     color: rgb(248, 250, 252);
   }
@@ -186,7 +186,7 @@
     margin-top: 2rem;
   }
 
-  :global(.theme-dark) .pl-empty-state {
+  .theme-dark .pl-empty-state {
     border-color: rgba(255, 255, 255, 0.1);
   }
 
@@ -211,11 +211,11 @@
     line-height: 1.6;
   }
 
-  :global(.theme-dark) .pl-empty-title {
+  .theme-dark .pl-empty-title {
     color: rgb(248, 250, 252);
   }
 
-  :global(.theme-dark) .pl-empty-desc {
+  .theme-dark .pl-empty-desc {
     color: rgb(148, 163, 184);
   }
 
@@ -272,7 +272,7 @@
     opacity: 1;
   }
 
-  :global(.theme-dark) .pl-card {
+  .theme-dark .pl-card {
     background: rgba(30, 41, 59, 0.5);
     border-color: rgba(255, 255, 255, 0.08);
   }
@@ -291,7 +291,7 @@
     line-height: 1.3;
   }
 
-  :global(.theme-dark) .pl-card-title {
+  .theme-dark .pl-card-title {
     color: rgb(248, 250, 252);
   }
 
@@ -309,7 +309,7 @@
     border: 1px solid rgba(0, 0, 0, 0.03);
   }
 
-  :global(.theme-dark) .pl-card-body {
+  .theme-dark .pl-card-body {
     background: rgba(15, 23, 42, 0.4);
     border-color: rgba(255, 255, 255, 0.05);
   }
@@ -327,7 +327,7 @@
     -webkit-box-orient: vertical;
   }
 
-  :global(.theme-dark) .pl-card-text {
+  .theme-dark .pl-card-text {
     color: rgb(203, 213, 225);
   }
 
@@ -348,7 +348,7 @@
     text-transform: uppercase;
   }
 
-  :global(.theme-dark) .pl-card-tag {
+  .theme-dark .pl-card-tag {
     background: rgba(139, 92, 246, 0.15);
     color: rgb(167, 139, 250);
   }
@@ -380,12 +380,12 @@
     color: rgb(5, 150, 105);
   }
 
-  :global(.theme-dark) .pl-var-highlight {
+  .theme-dark .pl-var-highlight {
     background: rgba(139, 92, 246, 0.3);
     color: rgb(167, 139, 250);
   }
 
-  :global(.theme-dark) .pl-var-highlight.pl-var-filled {
+  .theme-dark .pl-var-highlight.pl-var-filled {
     background: rgba(16, 185, 129, 0.3);
     color: rgb(52, 211, 153);
   }
@@ -421,7 +421,7 @@
     box-sizing: border-box;
   }
 
-  :global(.theme-dark) .pl-var-input {
+  .theme-dark .pl-var-input {
     background: rgba(15, 23, 42, 0.5);
     border-color: rgba(255, 255, 255, 0.1);
     color: rgb(248, 250, 252);
@@ -460,7 +460,7 @@
     border: 1px solid rgba(0, 0, 0, 0.1);
   }
 
-  :global(.theme-dark) .pl-modal-container {
+  .theme-dark .pl-modal-container {
     background: rgb(30, 41, 59);
     border-color: rgba(255, 255, 255, 0.1);
   }
@@ -505,7 +505,7 @@
     color: rgb(51, 65, 85);
   }
 
-  :global(.theme-dark) .pl-label {
+  .theme-dark .pl-label {
     color: rgb(226, 232, 240);
   }
 
@@ -536,13 +536,13 @@
     line-height: 1.6;
   }
 
-  :global(.theme-dark) .pl-input {
+  .theme-dark .pl-input {
     background: rgba(15, 23, 42, 0.6);
     border-color: rgba(255, 255, 255, 0.1);
     color: rgb(248, 250, 252);
   }
 
-  :global(.theme-dark) .pl-textarea {
+  .theme-dark .pl-textarea {
     background: rgba(15, 23, 42, 0.6);
     border-color: rgba(255, 255, 255, 0.1);
     color: rgb(248, 250, 252);
@@ -562,11 +562,11 @@
     box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
   }
 
-  :global(.theme-dark) .pl-input:focus {
+  .theme-dark .pl-input:focus {
     background: rgba(15, 23, 42, 0.9);
   }
 
-  :global(.theme-dark) .pl-textarea:focus {
+  .theme-dark .pl-textarea:focus {
     background: rgba(15, 23, 42, 0.9);
   }
 
@@ -576,7 +576,7 @@
     margin-top: 0.25rem;
   }
 
-  :global(.theme-dark) .pl-hint {
+  .theme-dark .pl-hint {
     color: rgb(148, 163, 184);
   }
 
@@ -594,7 +594,7 @@
     cursor: text;
   }
 
-  :global(.theme-dark) .pl-tags-input-wrapper {
+  .theme-dark .pl-tags-input-wrapper {
     background: rgba(15, 23, 42, 0.6);
     border-color: rgba(255, 255, 255, 0.1);
   }
@@ -605,7 +605,7 @@
     box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
   }
 
-  :global(.theme-dark) .pl-tags-input-wrapper:focus-within {
+  .theme-dark .pl-tags-input-wrapper:focus-within {
     background: rgba(15, 23, 42, 0.9);
   }
 
@@ -626,7 +626,7 @@
     outline: none;
   }
 
-  :global(.theme-dark) .pl-tags-input-field {
+  .theme-dark .pl-tags-input-field {
     color: rgb(248, 250, 252);
   }
 
@@ -639,7 +639,7 @@
     border-top: 1px solid rgba(0, 0, 0, 0.05);
   }
 
-  :global(.theme-dark) .pl-modal-footer {
+  .theme-dark .pl-modal-footer {
     border-top-color: rgba(255, 255, 255, 0.05);
   }
 
@@ -663,7 +663,7 @@
     margin-bottom: 0.5rem;
   }
 
-  :global(.theme-dark) .pl-confirm-title {
+  .theme-dark .pl-confirm-title {
     color: rgb(248, 250, 252);
   }
 

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,9 +31,10 @@
     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;
   }
 
-  :global(.theme-dark) .rc-card {
+  .theme-dark .rc-card {
     background: rgba(15, 23, 42, 0.6);
     border: 1px solid rgba(255, 255, 255, 0.08);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
@@ -55,13 +59,13 @@
     margin-bottom: 0.75rem;
   }
 
-  :global(.theme-dark) .rc-group-title {
+  .theme-dark .rc-group-title {
     color: rgb(148, 163, 184);
   }
 
   .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;
   }
 
@@ -77,7 +81,7 @@
     color: rgb(30, 41, 59);
   }
 
-  :global(.theme-dark) .rc-label-mini {
+  .theme-dark .rc-label-mini {
     color: rgb(241, 245, 249);
   }
 
@@ -90,9 +94,10 @@
     padding: 0.5rem;
     border-radius: 0.75rem;
     transition: all 0.2s ease;
+    min-width: 0;
   }
 
-  :global(.theme-dark) .rc-color-input-container {
+  .theme-dark .rc-color-input-container {
     background: rgba(30, 41, 59, 0.5);
     border-color: rgb(51, 65, 85);
   }
@@ -118,7 +123,7 @@
     border-radius: 0.4rem;
   }
 
-  :global(.theme-dark) .rc-color-picker::-webkit-color-swatch {
+  .theme-dark .rc-color-picker::-webkit-color-swatch {
     border: 1px solid rgba(255, 255, 255, 0.2);
   }
 
@@ -127,9 +132,11 @@
     font-weight: 600;
     color: rgb(71, 85, 105);
     flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 
-  :global(.theme-dark) .rc-hex-text {
+  .theme-dark .rc-hex-text {
     color: rgb(148, 163, 184);
   }
 
@@ -170,7 +177,7 @@
     outline: none;
   }
 
-  :global(.theme-dark) .rc-range {
+  .theme-dark .rc-range {
     background: rgb(51, 65, 85);
   }
 
@@ -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,9 +213,10 @@
     gap: 0.5rem;
     background: rgba(255, 255, 255, 0.4);
     border: 1px solid rgba(0, 0, 0, 0.05);
+    min-width: 0;
   }
 
-  :global(.theme-dark) .rc-score-card {
+  .theme-dark .rc-score-card {
     background: rgba(255, 255, 255, 0.03);
     border-color: rgba(255, 255, 255, 0.05);
   }
@@ -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 {
@@ -244,12 +254,12 @@
     color: rgb(153, 27, 27);
   }
 
-  :global(.theme-dark) .rc-status-pass {
+  .theme-dark .rc-status-pass {
     background: rgba(34, 197, 94, 0.15);
     color: rgb(134, 239, 172);
   }
 
-  :global(.theme-dark) .rc-status-fail {
+  .theme-dark .rc-status-fail {
     background: rgba(239, 68, 68, 0.15);
     color: rgb(252, 165, 165);
   }
@@ -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;
   }
 
@@ -300,7 +312,7 @@
     font-weight: 600;
   }
 
-  :global(.theme-dark) .rc-item-label {
+  .theme-dark .rc-item-label {
     color: rgb(148, 163, 184);
   }
 
@@ -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 },
     {