@jjlmoya/utils-developer 1.27.0 → 1.29.0

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -97,11 +98,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
   faqTitle: 'Questions Fr\u00e9quentes',
   faq: faqData,
   bibliographyTitle: 'Ressources sur le Contraste et APCA',
-  bibliography: [
-    { name: 'W3C: Brouillon WCAG 3.0 (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
-    { name: 'Myndex: Guide de R\u00e9f\u00e9rence APCA', url: 'https://apcaw3.myndex.com/' },
-    { name: 'MDN: Accessibilit\u00e9 et Contraste des Couleurs', url: 'https://developer.mozilla.org/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -97,11 +98,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
   faqTitle: 'Pertanyaan yang Sering Diajukan',
   faq: faqData,
   bibliographyTitle: 'Sumber tentang Kontras dan APCA',
-  bibliography: [
-    { name: 'W3C: Draf WCAG 3.0 (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
-    { name: 'Myndex: Panduan Referensi APCA', url: 'https://apcaw3.myndex.com/' },
-    { name: 'MDN: Aksesibilitas dan Kontras Warna', url: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -97,11 +98,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
   faqTitle: 'Domande Frequenti',
   faq: faqData,
   bibliographyTitle: 'Risorse su Contrasto e APCA',
-  bibliography: [
-    { name: 'W3C: Bozza WCAG 3.0 (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
-    { name: 'Myndex: Guida di Riferimento APCA', url: 'https://apcaw3.myndex.com/' },
-    { name: 'MDN: Accessibilità e Contrasto Colore', url: 'https://developer.mozilla.org/it/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -97,11 +98,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
   faqTitle: 'よくある質問',
   faq: faqData,
   bibliographyTitle: 'コントラストとAPCAに関するリソース',
-  bibliography: [
-    { name: 'W3C: WCAG 3.0 ドラフト（Silver）', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
-    { name: 'Myndex: APCA リファレンスガイド', url: 'https://apcaw3.myndex.com/' },
-    { name: 'MDN: アクセシビリティとカラーコントラスト', url: 'https://developer.mozilla.org/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -97,11 +98,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
   faqTitle: '자주 묻는 질문',
   faq: faqData,
   bibliographyTitle: '명암 대비와 APCA 관련 자료',
-  bibliography: [
-    { name: 'W3C: WCAG 3.0 초안 (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
-    { name: 'Myndex: APCA 참조 가이드', url: 'https://apcaw3.myndex.com/' },
-    { name: 'MDN: 접근성과 색상 명암 대비', url: 'https://developer.mozilla.org/ko/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -97,11 +98,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
   faqTitle: 'Veelgestelde vragen',
   faq: faqData,
   bibliographyTitle: 'Bronnen over contrast en APCA',
-  bibliography: [
-    { name: 'W3C: WCAG 3.0-concept (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
-    { name: 'Myndex: APCA-referentiegids', url: 'https://apcaw3.myndex.com/' },
-    { name: 'MDN: Toegankelijkheid en kleurcontrast', url: 'https://developer.mozilla.org/nl/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -26,4 +27,4 @@ const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schem
 
 const ui: ReadabilityCalculatorUI = { labelColors: 'Kolory Bazowe', labelText: 'Tekst', labelBg: 'Tło', labelTypo: 'Typografia', labelFontSize: 'Rozmiar Czcionki', labelFontWeight: 'Waga', labelCompare: 'Porównanie Kontrastu', labelPreview: 'Percepcyjny Podgląd', labelApcaRecs: 'Rekomendacje APCA', labelBody: 'Tekst Czytania (Treść)', labelSmall: 'Mały Tekst / Podpis', labelUi: 'UI / Przyciski', statusYes: 'Tak', statusNo: 'Nie', wcagAAA: 'Przechodzi AAA', wcagAA: 'Przechodzi AA', wcagLarge: 'Tylko duży tekst', wcagFail: 'Niepowodzenie', apcaExcellent: 'Doskonały', apcaGood: 'Dobry', apcaMinimal: 'Minimalny', apcaPoor: 'Słaby', previewText: 'Czytelność wizualna to nie tylko matematyka. To jak światło i cień oddziałują na twoje oczy.', wcagRatioLabel: 'Stosunek WCAG 2.1', apcaLcLabel: 'APCA Lc (WCAG 3)', };
 
-export const content: ToolLocaleContent<ReadabilityCalculatorUI> = { slug, title, description, ui, faqTitle: 'Często Zadawane Pytania', faq: faqData, bibliographyTitle: 'Zasoby na temat Kontrastu i APCA', bibliography: [{ name: 'W3C: WCAG 3.0 Draft (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' }, { name: 'Myndex: APCA Reference Guide', url: 'https://apcaw3.myndex.com/' }, { name: 'MDN: Accessibility and Color Contrast', url: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' }], howTo: howToData, schemas: [faqSchema, howToSchema, appSchema], seo: [{ type: 'title', text: 'Kalkulator Czytelności Wizualnej (WCAG vs APCA)', level: 2 }, { type: 'paragraph', html: 'Dowiedz się, jak Twoje kolory i typografia wpływają na rzeczywiste czytanie za pomocą nowego standardu percepcyjnej dostępności. WCAG 2.1 używa prostego wzoru matematycznego z 2008 roku. <strong>APCA</strong> to nowy model proponowany dla <strong>WCAG 3.0</strong>, który naśladuje percepcję człowieka.' }, { type: 'title', text: 'Kluczowe Punkty APCA', level: 3 }, { type: 'list', items: ['<strong>Polarność:</strong> Rozumie, że Tryb Ciemny jest postrzegany inaczej niż Tryb Jasny.', '<strong>Waga Czcionki:</strong> Przydziela określone poziomy kontrastu (Lc) w zależności od wagi typografii.', '<strong>Liniowość:</strong> Naprawia nieścisłości matematyczne w modelu względnej luminancji z 2008 roku.'] }, { type: 'title', text: 'Rekomendowane Poziomy APCA', level: 3 }, { type: 'list', items: ['<strong>Lc 90+:</strong> Idealne dla bardzo małego lub nisko ważonego tekstu.', '<strong>Lc 75:</strong> Standard dla głównego tekstu czytającego.', '<strong>Lc 60:</strong> Minimum dla czytelnej zawartości średniego rozmiaru.', '<strong>Lc 45:</strong> Minimum dla dużych lub dekoracyjnych elementów.'] }] };
+export const content: ToolLocaleContent<ReadabilityCalculatorUI> = { slug, title, description, ui, faqTitle: 'Często Zadawane Pytania', faq: faqData, bibliographyTitle: 'Zasoby na temat Kontrastu i APCA', bibliography, howTo: howToData, schemas: [faqSchema, howToSchema, appSchema], seo: [{ type: 'title', text: 'Kalkulator Czytelności Wizualnej (WCAG vs APCA)', level: 2 }, { type: 'paragraph', html: 'Dowiedz się, jak Twoje kolory i typografia wpływają na rzeczywiste czytanie za pomocą nowego standardu percepcyjnej dostępności. WCAG 2.1 używa prostego wzoru matematycznego z 2008 roku. <strong>APCA</strong> to nowy model proponowany dla <strong>WCAG 3.0</strong>, który naśladuje percepcję człowieka.' }, { type: 'title', text: 'Kluczowe Punkty APCA', level: 3 }, { type: 'list', items: ['<strong>Polarność:</strong> Rozumie, że Tryb Ciemny jest postrzegany inaczej niż Tryb Jasny.', '<strong>Waga Czcionki:</strong> Przydziela określone poziomy kontrastu (Lc) w zależności od wagi typografii.', '<strong>Liniowość:</strong> Naprawia nieścisłości matematyczne w modelu względnej luminancji z 2008 roku.'] }, { type: 'title', text: 'Rekomendowane Poziomy APCA', level: 3 }, { type: 'list', items: ['<strong>Lc 90+:</strong> Idealne dla bardzo małego lub nisko ważonego tekstu.', '<strong>Lc 75:</strong> Standard dla głównego tekstu czytającego.', '<strong>Lc 60:</strong> Minimum dla czytelnej zawartości średniego rozmiaru.', '<strong>Lc 45:</strong> Minimum dla dużych lub dekoracyjnych elementów.'] }] };

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -73,11 +74,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
   faqTitle: 'Perguntas Frequentes',
   faq: faqData,
   bibliographyTitle: 'Recursos em Contraste e APCA',
-  bibliography: [
-    { name: 'W3C: WCAG 3.0 Draft (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
-    { name: 'Myndex: Guia de Referência APCA', url: 'https://apcaw3.myndex.com/' },
-    { name: 'MDN: Acessibilidade e Contraste de Cor', url: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -73,11 +74,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
   faqTitle: 'Часто Задаваемые Вопросы',
   faq: faqData,
   bibliographyTitle: 'Ресурсы о Контрасте и APCA',
-  bibliography: [
-    { name: 'W3C: WCAG 3.0 Draft (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
-    { name: 'Myndex: Справочное Руководство APCA', url: 'https://apcaw3.myndex.com/' },
-    { name: 'MDN: Доступность и Контраст Цвета', url: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -25,11 +26,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
   faqTitle: 'Vanliga Frågor',
   faq: faqData,
   bibliographyTitle: 'Resurser på Kontrast och APCA',
-  bibliography: [
-    { name: 'W3C: WCAG 3.0 Draft (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
-    { name: 'Myndex: APCA Referensguide', url: 'https://apcaw3.myndex.com/' },
-    { name: 'MDN: Tillgänglighet och Färgkontrast', url: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -25,11 +26,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
   faqTitle: 'Sık Sorulan Sorular',
   faq: faqData,
   bibliographyTitle: 'Kontrast ve APCA Kaynakları',
-  bibliography: [
-    { name: 'W3C: WCAG 3.0 Tasarısı (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
-    { name: 'Myndex: APCA Referans Kılavuzu', url: 'https://apcaw3.myndex.com/' },
-    { name: 'MDN: Erişilebilirlik ve Renk Kontrastı', url: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { ReadabilityCalculatorUI } from '../ui';
@@ -25,11 +26,7 @@ export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
   faqTitle: '常见问题',
   faq: faqData,
   bibliographyTitle: '对比度和 APCA 资源',
-  bibliography: [
-    { name: 'W3C: WCAG 3.0 草案 (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
-    { name: 'Myndex: APCA 参考指南', url: 'https://apcaw3.myndex.com/' },
-    { name: 'MDN: 可访问性和颜色对比', url: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/serpPixelSimulator/controller.ts

@@ -232,6 +232,7 @@ function updatePreview(elements: Elements, context: CanvasRenderingContext2D, ui
   elements.previewDescription.textContent = trimToPixels(context, description, DESCRIPTION_LIMIT, descriptionFont, ui.ellipsis);
   elements.previewUrl.textContent = displayUrl(elements.urlInput.value, ui.fallbackUrl);
   updateMeter({ meter: elements.titleMeter, fill: elements.titleFill, count: elements.titleCount, status: elements.titleStatus }, measure(context, title, titleFont), titleLimit, ui.pixelUnit, ui.goodLabel, ui.tooLongLabel);
+  elements.titleCount.textContent = `${Math.round(measure(context, title, titleFont))} ${ui.pixelUnit} / ${titleLimit} ${ui.pixelUnit} · ${title.length} ${ui.charactersLabel}`;
   updateMeter({ meter: elements.descriptionMeter, fill: elements.descriptionFill, count: elements.descriptionCount, status: elements.descriptionStatus }, measure(context, description, descriptionFont), DESCRIPTION_LIMIT, ui.pixelUnit, ui.goodLabel, ui.tooLongLabel);
 }
 

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

@@ -32,7 +32,7 @@ const faq = [
     answer: 'Google search cards are constrained by visual width. A title with many narrow letters can fit more characters than a title with wide letters, uppercase words, or bold-looking glyphs. Pixel measurement gives a closer preview of the visible result.',
   },
   {
-    question: 'Does this guarantee exactly how Google will truncate my snippet?',
+    question: 'Does this predict exactly how Google will truncate my snippet?',
     answer: 'No. Google can rewrite title links and snippets, and rendering can vary by query, device, language and experiment. The tool is designed as a practical visual guardrail for writing metadata that is less likely to be cut off.',
   },
   {
@@ -197,7 +197,7 @@ export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
     },
     {
       type: 'paragraph',
-      html: 'No simulator can guarantee the exact snippet Google will show. Google may rewrite title links, bold query terms, choose page text instead of the meta description, or display different snippets for different searches. This tool is best used as a fast writing and QA step: it catches obvious visual overflow before the page reaches production.',
+      html: 'No simulator can know the exact snippet Google will show. Google may rewrite title links, bold query terms, choose page text instead of the meta description, or display different snippets for different searches. This tool is best used as a fast writing and QA step: it catches obvious visual overflow before the page reaches production.',
     },
     {
       type: 'summary',

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

@@ -32,7 +32,7 @@ const faq = [
     answer: 'Las tarjetas de resultados de Google están limitadas por el ancho visual. Un título con muchas letras estrechas puede albergar más caracteres que uno con letras anchas, mayúsculas o glifos de aspecto grueso. La medición en píxeles ofrece una vista previa más fiel del resultado visible.',
   },
   {
-    question: '¿Garantiza esto exactamente cómo truncará Google mi fragmento?',
+    question: '¿Predice esto exactamente cómo truncará Google mi fragmento?',
     answer: 'No. Google puede reescribir los enlaces de título y los fragmentos, y la representación puede variar según la consulta, el dispositivo, el idioma y los experimentos. La herramienta está diseñada como una guía visual práctica para redactar metadatos con menos probabilidades de ser cortados.',
   },
   {
@@ -198,7 +198,7 @@ export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Ningún simulador puede garantizar el fragmento exacto que Google mostrará. Google puede reescribir los enlaces de título, poner en negrita los términos de la consulta, elegir texto de la página en lugar de la meta descripción o mostrar fragmentos distintos para diferentes búsquedas. Esta herramienta funciona mejor como un paso rápido de redacción y control de calidad: detecta desbordamientos visuales evidentes antes de que la página llegue a producción.',
+      html: 'Ningún simulador puede saber qué fragmento exacto mostrará Google. Google puede reescribir los enlaces de título, poner en negrita los términos de la consulta, elegir texto de la página en lugar de la meta descripción o mostrar fragmentos distintos para diferentes búsquedas. Esta herramienta funciona mejor como un paso rápido de redacción y control de calidad: detecta desbordamientos visuales evidentes antes de que la página llegue a producción.',
     },
     {
       type: 'summary',

package/src/tool/serpPixelSimulator/logic.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import {
+  DESCRIPTION_LIMIT, DESKTOP_TITLE_LIMIT, MOBILE_TITLE_LIMIT,
+  getTitleLimit, needsPixelTrim, ratioToPercent,
+} from './logic';
+
+describe('SERP pixel simulator logic', () => {
+  it('uses the documented desktop and mobile limits', () => {
+    expect(getTitleLimit('desktop')).toBe(DESKTOP_TITLE_LIMIT);
+    expect(getTitleLimit('mobile')).toBe(MOBILE_TITLE_LIMIT);
+    expect(DESCRIPTION_LIMIT).toBe(920);
+  });
+
+  it('clamps ratios and handles invalid measurements', () => {
+    expect(ratioToPercent(290, 580)).toBe(50);
+    expect(ratioToPercent(-1, 580)).toBe(0);
+    expect(ratioToPercent(900, 580)).toBe(100);
+    expect(ratioToPercent(Number.NaN, 580)).toBe(0);
+  });
+
+  it('only flags widths beyond the selected limit', () => {
+    expect(needsPixelTrim(580, 580)).toBe(false);
+    expect(needsPixelTrim(581, 580)).toBe(true);
+  });
+});

package/src/tool/svgSanitizer/bibliography.astro

@@ -1,14 +1,6 @@
 ---
 import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
-import { svgSanitizer } from './index';
-import type { KnownLocale } from '../../types';
-
-interface Props {
-  locale?: KnownLocale;
-}
-
-const { locale = 'es' } = Astro.props;
-const content = await svgSanitizer.i18n[locale]?.();
+import { bibliography } from './bibliography';
 ---
 
-{content && <SharedBibliography links={content.bibliography} />}
+<SharedBibliography links={bibliography} />

package/src/tool/svgSanitizer/bibliography.ts

@@ -0,0 +1,7 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { 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' },
+];

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'Häufig gestellte Fragen',
   faq: faqData,
   bibliographyTitle: 'Referenzen',
-  bibliography: [
-    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export - Offizielle Dokumentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO - SVG Optimizer (Open-Source-Referenz)', url: 'https://github.com/svg/svgo' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'Frequently Asked Questions',
   faq: faqData,
   bibliographyTitle: 'References',
-  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' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'Preguntas Frecuentes',
   faq: faqData,
   bibliographyTitle: 'Referencias',
-  bibliography: [
-    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export - Documentaci\u00f3n oficial', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO - SVG Optimizer (referencia open source)', url: 'https://github.com/svg/svgo' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'Questions Fr\u00e9quentes',
   faq: faqData,
   bibliographyTitle: 'R\u00e9f\u00e9rences',
-  bibliography: [
-    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export - Documentation officielle', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO - SVG Optimizer (r\u00e9f\u00e9rence open source)', url: 'https://github.com/svg/svgo' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'Pertanyaan Umum',
   faq: faqData,
   bibliographyTitle: 'Referensi',
-  bibliography: [
-    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export - Dokumentasi Resmi', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO - SVG Optimizer (referensi open source)', url: 'https://github.com/svg/svgo' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'Domande Frequenti',
   faq: faqData,
   bibliographyTitle: 'Riferimenti',
-  bibliography: [
-    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export - Documentazione ufficiale', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO - SVG Optimizer (riferimento open source)', url: 'https://github.com/svg/svgo' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'よくある質問',
   faq: faqData,
   bibliographyTitle: '参考資料',
-  bibliography: [
-    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export - 公式ドキュメント', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO - SVG Optimizer (オープンソースリファレンス)', url: 'https://github.com/svg/svgo' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: '자주 묻는 질문',
   faq: faqData,
   bibliographyTitle: '참고 자료',
-  bibliography: [
-    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export - 공식 문서', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO - SVG Optimizer (오픈소스 레퍼런스)', url: 'https://github.com/svg/svgo' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'Veelgestelde vragen',
   faq: faqData,
   bibliographyTitle: 'Referenties',
-  bibliography: [
-    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export - Officiële documentatie', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO - SVG Optimizer (open source referentie)', url: 'https://github.com/svg/svgo' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'Często zadawane pytania',
   faq: faqData,
   bibliographyTitle: 'Odniesienia',
-  bibliography: [
-    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export - Oficjalna dokumentacja', 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' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -27,4 +28,4 @@ const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schem
 
 const ui: SvgSanitizerUI = { labelInput: 'Cole seu SVG sujo aqui', labelOutput: 'SVG Limpo', optRemoveIds: 'Remover IDs', optRemoveWH: 'Remover largura/altura', optMinify: 'Minificar', btnSanitize: 'Limpar SVG', btnCopy: 'Copiar', btnCopied: 'Copiado', btnDownload: 'Baixar', statOriginal: 'Original', statCleaned: 'Limpo', statReduction: 'Redução', statElems: 'Elem. removidos', statAttrs: 'Attrs. removidos', errorPaste: 'Cole um SVG antes de limpar.', errorProcess: 'Erro ao processar o SVG.', };
 
-export const content: ToolLocaleContent<SvgSanitizerUI> = { slug, title, description, ui, faqTitle: 'Perguntas Frequentes', faq: faqData, bibliographyTitle: 'Referências', 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' }], howTo: howToData, schemas: [faqSchema, howToSchema, appSchema], seo: [{ type: 'title', text: 'Sanitizador SVG: Limpar Código do Figma e Illustrator', level: 2 }, { type: 'paragraph', html: 'Cole qualquer SVG exportado do <strong>Figma</strong>, Adobe Illustrator ou do inspetor do navegador e obtenha um arquivo vetorial limpo e otimizado pronto para produção.' }, { type: 'title', text: 'Por que SVGs exportados são tão sujos?', level: 3 }, { type: 'paragraph', html: 'Quando você exporta um SVG do Figma, você obtém um arquivo carregado com atributos que fazem sentido apenas dentro do aplicativo: <code>data-name</code>, <code>xml:space</code>, referências a camadas internas e metadados de design. O resultado é um SVG que pode pesar 40-70% mais do que o necessário.' }, { type: 'title', text: 'O que o Sanitizador remove', level: 3 }, { type: 'list', items: ['<strong>Metadados do editor:</strong> <code>metadata</code>, tags <code>title</code> e <code>desc</code> que Figma e Illustrator adicionam automaticamente.', '<strong>Namespaces Inkscape:</strong> todos os elementos com prefixo <code>inkscape:</code> e <code>sodipodi:</code>.', '<strong>Atributos desnecessários:</strong> <code>xml:space</code>, <code>version</code>, <code>xmlns:*</code> supérfluos e atributos Figma <code>data-*</code>.', '<strong>Grupos vazios:</strong> elementos <code>&lt;g&gt;</code> sem conteúdo deixados como artefatos de camadas deletadas.', '<strong>Declarações XML:</strong> a declaração <code>&lt;?xml version="1.0"?&gt;</code> e DOCTYPE desnecessários ao incorporar SVG em HTML.'] }] };
+export const content: ToolLocaleContent<SvgSanitizerUI> = { slug, title, description, ui, faqTitle: 'Perguntas Frequentes', faq: faqData, bibliographyTitle: 'Referências', bibliography, howTo: howToData, schemas: [faqSchema, howToSchema, appSchema], seo: [{ type: 'title', text: 'Sanitizador SVG: Limpar Código do Figma e Illustrator', level: 2 }, { type: 'paragraph', html: 'Cole qualquer SVG exportado do <strong>Figma</strong>, Adobe Illustrator ou do inspetor do navegador e obtenha um arquivo vetorial limpo e otimizado pronto para produção.' }, { type: 'title', text: 'Por que SVGs exportados são tão sujos?', level: 3 }, { type: 'paragraph', html: 'Quando você exporta um SVG do Figma, você obtém um arquivo carregado com atributos que fazem sentido apenas dentro do aplicativo: <code>data-name</code>, <code>xml:space</code>, referências a camadas internas e metadados de design. O resultado é um SVG que pode pesar 40-70% mais do que o necessário.' }, { type: 'title', text: 'O que o Sanitizador remove', level: 3 }, { type: 'list', items: ['<strong>Metadados do editor:</strong> <code>metadata</code>, tags <code>title</code> e <code>desc</code> que Figma e Illustrator adicionam automaticamente.', '<strong>Namespaces Inkscape:</strong> todos os elementos com prefixo <code>inkscape:</code> e <code>sodipodi:</code>.', '<strong>Atributos desnecessários:</strong> <code>xml:space</code>, <code>version</code>, <code>xmlns:*</code> supérfluos e atributos Figma <code>data-*</code>.', '<strong>Grupos vazios:</strong> elementos <code>&lt;g&gt;</code> sem conteúdo deixados como artefatos de camadas deletadas.', '<strong>Declarações XML:</strong> a declaração <code>&lt;?xml version="1.0"?&gt;</code> e DOCTYPE desnecessários ao incorporar SVG em HTML.'] }] };

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'Часто задаваемые вопросы',
   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' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'Vanliga frågor',
   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' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: 'Sık Sorulan Sorular',
   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' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

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

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SvgSanitizerUI } from '../ui';
@@ -92,11 +93,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faqTitle: '常见问题',
   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' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [