@jjlmoya/utils-streaming 1.12.0 → 1.13.0

package/src/tests/pagespeed_best_practices.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, it } from 'vitest';
+import { readdirSync, readFileSync } from 'fs';
+import { join, relative } from 'path';
+import { ALL_TOOLS } from '../tools';
+import type { SEOSection, ToolLocaleContent } from '../types';
+
+const srcDir = join(process.cwd(), 'src');
+const toolDir = join(srcDir, 'tool');
+const geometryReads = [
+  'offsetWidth',
+  'offsetHeight',
+  'offsetTop',
+  'offsetLeft',
+  'clientWidth',
+  'clientHeight',
+  'clientTop',
+  'clientLeft',
+  'scrollWidth',
+  'scrollHeight',
+  'scrollTop',
+  'scrollLeft',
+  'getBoundingClientRect',
+  'getClientRects',
+  'computedStyle',
+  'getComputedStyle',
+];
+const domWrites = [
+  '.style.',
+  '.classList.add',
+  '.classList.remove',
+  '.classList.toggle',
+  '.appendChild',
+  '.insertBefore',
+  '.prepend',
+  '.append',
+  '.remove',
+  '.innerHTML',
+  '.textContent',
+  '.setAttribute',
+];
+
+function findFiles(dir: string, extensions: string[]): string[] {
+  const files: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(fullPath, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(fullPath);
+  }
+  return files;
+}
+
+function relativePath(file: string): string {
+  return relative(process.cwd(), file).replace(/\\/g, '/');
+}
+
+function findFormControls(content: string, tagName: 'input' | 'select'): RegExpMatchArray[] {
+  return Array.from(content.matchAll(new RegExp(`<${tagName}\\b[^>]*>`, 'gi')));
+}
+
+function attrValue(tag: string, attr: string): string | null {
+  const match = tag.match(new RegExp(`\\b${attr}\\s*=\\s*(?:"([^"]+)"|'([^']+)'|\\{([^}]+)\\})`, 'i'));
+  return match?.[1] ?? match?.[2] ?? match?.[3] ?? null;
+}
+
+function booleanAttr(tag: string, attr: string): boolean {
+  return new RegExp(`\\b${attr}\\b`, 'i').test(tag);
+}
+
+function controlStartIndex(content: string, tag: RegExpMatchArray): number {
+  return tag.index ?? content.indexOf(tag[0]);
+}
+
+function hasWrappingLabel(content: string, tag: RegExpMatchArray): boolean {
+  const index = controlStartIndex(content, tag);
+  const before = content.slice(0, index);
+  const labelOpen = before.lastIndexOf('<label');
+  const labelClose = before.lastIndexOf('</label>');
+  const nextLabelClose = content.indexOf('</label>', index + tag[0].length);
+  return labelOpen > labelClose && nextLabelClose !== -1;
+}
+
+function hasAccessibleName(content: string, tag: RegExpMatchArray): boolean {
+  const source = tag[0];
+  if (attrValue(source, 'aria-label')) return true;
+  if (attrValue(source, 'aria-labelledby')) return true;
+  const id = attrValue(source, 'id');
+  if (id && hasExplicitLabel(content, id)) return true;
+  return hasWrappingLabel(content, tag);
+}
+
+function isVisuallyHiddenFileInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  const attributes = `${attrValue(tag, 'style') ?? ''} ${attrValue(tag, 'class') ?? ''}`.toLowerCase();
+  const hiddenPatterns = ['display:none', 'display: none', 'file-input'];
+  return type === 'file' && hiddenPatterns.some((pattern) => attributes.includes(pattern));
+}
+
+function isIgnoredInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  return ['hidden', 'button', 'submit', 'reset'].includes(type) || booleanAttr(tag, 'aria-hidden') || isVisuallyHiddenFileInput(tag);
+}
+
+function controlFailures(content: string, tagName: 'input' | 'select'): string[] {
+  return findFormControls(content, tagName)
+    .filter((tag) => tagName !== 'input' || !isIgnoredInput(tag[0]))
+    .filter((tag) => !hasAccessibleName(content, tag))
+    .map((tag) => tag[0]);
+}
+
+function explicitLabelMessage(tagName: string, path: string, failures: string[]): string {
+  return `${tagName} controls without label, wrapping label, aria-label or aria-labelledby in ${path}:\n${failures.join('\n')}`;
+}
+
+function hasExplicitLabel(content: string, id: string): boolean {
+  const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return (
+    new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*["']${escapedId}["'][^>]*>`, 'i').test(content)
+    || new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*\\{${escapedId}\\}[^>]*>`, 'i').test(content)
+  );
+}
+
+function headingLevels(sections: SEOSection[]): number[] {
+  return sections
+    .filter((section) => section.type === 'title')
+    .map((section) => Number('level' in section ? section.level : 0))
+    .filter((level) => Number.isInteger(level) && level > 0);
+}
+
+function findHeadingLevelJumps(levels: number[]): string[] {
+  const failures: string[] = [];
+  levels.forEach((level, index) => {
+    const previous = index === 0 ? 1 : levels[index - 1];
+    if (previous && level > previous + 1) {
+      failures.push(`h${previous} -> h${level}`);
+    }
+  });
+  return failures;
+}
+
+function hasDomWriteBeforeGeometryRead(content: string): boolean {
+  const normalized = content.replace(/\s+/g, ' ');
+  return domWrites.some((write) => {
+    const writeIndex = normalized.indexOf(write);
+    if (writeIndex === -1) return false;
+    return geometryReads.some((read) => normalized.indexOf(read, writeIndex + write.length) !== -1);
+  });
+}
+
+describe('PageSpeed best-practice guards', () => {
+  const astroToolFiles = findFiles(toolDir, ['.astro']);
+  const scriptFiles = findFiles(toolDir, ['.astro', '.ts', '.js']);
+
+  astroToolFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} labels every input with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'input');
+
+      expect(failures, explicitLabelMessage('Input', displayPath, failures)).toEqual([]);
+    });
+
+    it(`${displayPath} labels every select with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'select');
+
+      expect(failures, explicitLabelMessage('Select', displayPath, failures)).toEqual([]);
+    });
+  });
+
+  ALL_TOOLS.forEach((tool) => {
+    Object.entries(tool.entry.i18n).forEach(([locale, loader]) => {
+      it(`${tool.entry.id}/${locale} keeps SEO headings sequential`, async () => {
+        if (!loader) return;
+        const content = (await loader()) as ToolLocaleContent;
+        const levels = headingLevels(content.seo);
+        const failures = findHeadingLevelJumps(levels);
+
+        expect(
+          failures,
+          `SEO headings in ${tool.entry.id}/${locale} skip levels: ${failures.join(', ')}`,
+        ).toEqual([]);
+      });
+    });
+  });
+
+  scriptFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} avoids static forced-reflow patterns`, () => {
+      const content = readFileSync(file, 'utf-8');
+      expect(
+        hasDomWriteBeforeGeometryRead(content),
+        `${displayPath} appears to read layout geometry after DOM/style mutations. Split writes and reads across frames or measure before mutating.`,
+      ).toBe(false);
+    });
+  });
+});

package/src/tests/script_density.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+
+type ScriptLocale = keyof typeof SCRIPT_RULES;
+
+const SCRIPT_RULES = {
+  ja: {
+    language: 'Japanese',
+    scriptName: 'kana/kanji',
+    scriptCharacters: /[\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}]/gu,
+    minScriptRatio: 0.45,
+  },
+  ko: {
+    language: 'Korean',
+    scriptName: 'hangul',
+    scriptCharacters: /\p{Script=Hangul}/gu,
+    minScriptRatio: 0.55,
+  },
+  ru: {
+    language: 'Russian',
+    scriptName: 'cyrillic',
+    scriptCharacters: /\p{Script=Cyrillic}/gu,
+    minScriptRatio: 0.65,
+  },
+  zh: {
+    language: 'Chinese',
+    scriptName: 'han',
+    scriptCharacters: /\p{Script=Han}/gu,
+    minScriptRatio: 0.45,
+  },
+} as const;
+
+const LETTERS = /\p{L}/gu;
+const TRANSLATABLE_KEYS = ['title', 'description', 'ui', 'seo', 'faq', 'howTo'] as const;
+
+function collectStrings(value: unknown): string[] {
+  if (typeof value === 'string') return [value];
+  if (!value || typeof value !== 'object') return [];
+  if (Array.isArray(value)) return value.flatMap(collectStrings);
+  return Object.values(value).flatMap(collectStrings);
+}
+
+function normalizeText(value: unknown): string {
+  return collectStrings(value).join(' ').normalize('NFC');
+}
+
+function translatableContent(content: Record<string, unknown>) {
+  return TRANSLATABLE_KEYS.map((key) => content[key]);
+}
+
+function letterCount(text: string): number {
+  return text.match(LETTERS)?.length ?? 0;
+}
+
+function scriptCount(text: string, locale: ScriptLocale): number {
+  return text.match(SCRIPT_RULES[locale].scriptCharacters)?.length ?? 0;
+}
+
+function scriptRatio(text: string, locale: ScriptLocale): number {
+  const letters = letterCount(text);
+  if (letters === 0) return 0;
+  return scriptCount(text, locale) / letters;
+}
+
+describe('Native script density validation', () => {
+  ALL_TOOLS.forEach((tool) => {
+    describe(`Tool: ${tool.entry.id}`, () => {
+      Object.keys(SCRIPT_RULES).forEach((locale) => {
+        it(`${locale} keeps most translated text in its native script`, async () => {
+          const typedLocale = locale as ScriptLocale;
+          const loader = tool.entry.i18n[typedLocale];
+          if (!loader) return;
+
+          const content = await loader();
+          const rule = SCRIPT_RULES[typedLocale];
+          const text = normalizeText(translatableContent(content as Record<string, unknown>));
+          const letters = letterCount(text);
+          const matches = scriptCount(text, typedLocale);
+          const ratio = scriptRatio(text, typedLocale);
+
+          expect(
+            ratio,
+            [
+              `Possible broken translation detected in ${tool.entry.id}/${typedLocale} (${rule.language}).`,
+              `The text has ${matches} ${rule.scriptName} characters out of ${letters} analyzed letters (${(ratio * 100).toFixed(1)}%).`,
+              `Most translatable content should be written in ${rule.scriptName} script.`,
+              'Non-translatable fields such as slug, bibliography, and schemas are ignored to avoid false positives.',
+            ].join(' '),
+          ).toBeGreaterThanOrEqual(rule.minScriptRatio);
+        });
+      });
+    });
+  });
+});

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

@@ -12,7 +12,7 @@ const faqData = [
   {
     question: 'Ist dieses Gewinnspiel wirklich zufällig?',
     answer:
-      'Ja, wir verwenden den kryptografischen Zufallsalgorithmus des Browsers (Web Crypto API), um sicherzustellen, dass jeder Teilnehmer genau die gleiche Gewinnwahrscheinlichkeit hat – ohne Verzerrung oder Manipulation.',
+      'Ja, wir verwenden den kryptografischen Zufallsalgorithmus des Browsers (Web Crypto API), um sicherzustellen, dass jeder Teilnehmer genau die gleiche Gewinnwahrscheinlichkeit hat - ohne Verzerrung oder Manipulation.',
   },
   {
     question: 'Kann ich diesen Generator auf Twitch oder YouTube verwenden?',
@@ -32,7 +32,7 @@ const faqData = [
   {
     question: 'Wie viele Namen kann ich zur Liste hinzufügen?',
     answer:
-      'Es gibt keine strikte Grenze vonseiten des Tools. Wir haben die Engine so optimiert, dass sie Listen mit tausenden Teilnehmern ohne Performance-Probleme verarbeitet – ideal also auch für riesige Gewinnspiele.',
+      'Es gibt keine strikte Grenze vonseiten des Tools. Wir haben die Engine so optimiert, dass sie Listen mit tausenden Teilnehmern ohne Performance-Probleme verarbeitet - ideal also auch für riesige Gewinnspiele.',
   },
   {
     question: 'Werden meine Daten oder die Teilnehmerliste gespeichert?',
@@ -51,7 +51,7 @@ const howToData = [
     text: 'Wählen Sie aus, wie viele Gewinner Sie benötigen und ob Sie Duplikate oder leere Zeilen filtern möchten.',
   },
   {
-    name: 'Die „Glücksfee“ starten',
+    name: 'Die \"Glücksfee\" starten',
     text: 'Klicken Sie auf die Schaltfläche für die Auslosung. Eine visuelle Animation sorgt für Spannung, bevor der Gewinner enthüllt wird.',
   },
   {
@@ -110,7 +110,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Fragen Sie sich, wie Sie online ein Gewinnspiel schnell, sicher und absolut transparent durchführen können? Unser kostenloser <strong>Namens-Picker</strong> ist die ultimative Lösung, um in Sekunden einen Zufallsgewinner zu ziehen. Entwickelt, um einfach, visuell und effektiv zu sein – perfekt für jedes Szenario, in dem Sie eine digitale „Glücksfee“ benötigen.',
+      html: 'Fragen Sie sich, wie Sie online ein Gewinnspiel schnell, sicher und absolut transparent durchführen können? Unser kostenloser <strong>Namens-Picker</strong> ist die ultimative Lösung, um in Sekunden einen Zufallsgewinner zu ziehen. Entwickelt, um einfach, visuell und effektiv zu sein - perfekt für jedes Szenario, in dem Sie eine digitale \"Glücksfee\" benötigen.',
     },
     {
       type: 'paragraph',
@@ -165,9 +165,9 @@ export const content: ToolLocaleContent<SorteoUI> = {
     {
       type: 'list',
       items: [
-        '<strong>Schritt 1 – Teilnehmer eingeben:</strong> Fügen Sie Ihre Namensliste in das Haupttextfeld ein. Das Tool erkennt jeden Zeilenumbruch als separaten Teilnehmer. Haben Sie Duplikate? Kein Problem, das Tool entfernt sie automatisch.',
-        '<strong>Schritt 2 – Anpassen:</strong> In den Einstellungen können Sie den Countdown für mehr Spannung, den Konfetti-Effekt zum Feiern oder die „Blacklist“ zum Ausschluss bestimmter Namen aktivieren.',
-        '<strong>Schritt 3 – Auslosen!</strong> Klicken Sie auf die Hauptschaltfläche. Unsere Engine generiert eine kryptografisch sichere Zufallsauswahl. Die Gewinner werden klar und einprägsam angezeigt.',
+        '<strong>Schritt 1 - Teilnehmer eingeben:</strong> Fügen Sie Ihre Namensliste in das Haupttextfeld ein. Das Tool erkennt jeden Zeilenumbruch als separaten Teilnehmer. Haben Sie Duplikate? Kein Problem, das Tool entfernt sie automatisch.',
+        '<strong>Schritt 2 - Anpassen:</strong> In den Einstellungen können Sie den Countdown für mehr Spannung, den Konfetti-Effekt zum Feiern oder die \"Blacklist\" zum Ausschluss bestimmter Namen aktivieren.',
+        '<strong>Schritt 3 - Auslosen!</strong> Klicken Sie auf die Hauptschaltfläche. Unsere Engine generiert eine kryptografisch sichere Zufallsauswahl. Die Gewinner werden klar und einprägsam angezeigt.',
       ],
     },
     {
@@ -177,12 +177,12 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Möchten Sie Ihre treuesten Abonnenten belohnen oder bestimmten Teilnehmern mehr Chancen einräumen? Unser System für <strong>gewichtete Einträge</strong> ist einzigartig und ermöglicht es Ihnen, jedem Namen ein „Gewicht“ oder einen Multiplikator zuzuweisen, ohne ihn mehrfach aufschreiben zu müssen.',
+      html: 'Möchten Sie Ihre treuesten Abonnenten belohnen oder bestimmten Teilnehmern mehr Chancen einräumen? Unser System für <strong>gewichtete Einträge</strong> ist einzigartig und ermöglicht es Ihnen, jedem Namen ein \"Gewicht\" oder einen Multiplikator zuzuweisen, ohne ihn mehrfach aufschreiben zu müssen.',
     },
     {
       type: 'tip',
       title: 'So weisen Sie Gewichte zu',
-      html: '<p>Verwenden Sie ein Sternchen (*) oder ein „x“, gefolgt von der Anzahl der Teilnahmen. Beispiele:</p><ul><li><strong>„Max * 5“</strong> – Max nimmt teil, als wäre er 5 Personen</li><li><strong>„Julia x 10“</strong> – Julia hat eine 10-mal höhere Gewinnchance</li><li><strong>„Peter“</strong> – Kein Symbol = 1 normale Teilnahme</li></ul><p>Dies ist perfekt für Gewinnspiele, bei denen Sie VIP-Abonnenten oder speziellen Nutzern einen Vorteil gewähren möchten.</p>',
+      html: '<p>Verwenden Sie ein Sternchen (*) oder ein \"x\", gefolgt von der Anzahl der Teilnahmen. Beispiele:</p><ul><li><strong>\"Max * 5\"</strong> - Max nimmt teil, als wäre er 5 Personen</li><li><strong>\"Julia x 10\"</strong> - Julia hat eine 10-mal höhere Gewinnchance</li><li><strong>\"Peter\"</strong> - Kein Symbol = 1 normale Teilnahme</li></ul><p>Dies ist perfekt für Gewinnspiele, bei denen Sie VIP-Abonnenten oder speziellen Nutzern einen Vorteil gewähren möchten.</p>',
     },
     {
       type: 'title',
@@ -204,7 +204,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Manchen mag die Frage kommen: „Was, wenn die Ergebnisse manipuliert werden?“ Die Antwort ist einfach: <strong>Wir können es nicht.</strong> Der Code der Auslosung ist deterministisch und kryptografisch. Keine versteckten Variablen, keine „geschobenen“ Ergebnisse.',
+      html: 'Manchen mag die Frage kommen: \"Was, wenn die Ergebnisse manipuliert werden?\" Die Antwort ist einfach: <strong>Wir können es nicht.</strong> Der Code der Auslosung ist deterministisch und kryptografisch. Keine versteckten Variablen, keine \"geschobenen\" Ergebnisse.',
     },
     {
       type: 'paragraph',

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

@@ -172,7 +172,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'title',
-      text: 'Entrées Pondérées : Donner un Avantage à Certains Participants',
+      text: 'Entrées Pondérées: Donner un Avantage à Certains Participants',
       level: 3,
     },
     {
@@ -204,7 +204,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Certains se poseront la question : "Et si vous manipuliez les résultats ?" La réponse est simple : <strong>nous ne pouvons pas</strong>. Le code du tirage au sort est déterministe et cryptographique. Pas de variables cachées, pas de "doigts sur la scène".',
+      html: 'Certains se poseront la question: "Et si vous manipuliez les résultats ?" La réponse est simple: <strong>nous ne pouvons pas</strong>. Le code du tirage au sort est déterministe et cryptographique. Pas de variables cachées, pas de "doigts sur la scène".',
     },
     {
       type: 'paragraph',

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

@@ -208,7 +208,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: '各当選者は、真の暗号化エントロピーを使用して、入力されたリストにフィッシャー–イェーツのシャッフル アルゴリズムを適用した直接の結果です。プロセスを監査したい場合は、コードがGitHubで公開されています。',
+      html: '各当選者は、真の暗号化エントロピーを使用して、入力されたリストにフィッシャー-イェーツのシャッフル アルゴリズムを適用した直接の結果です。プロセスを監査したい場合は、コードがGitHubで公開されています。',
     },
   ],
   ui: {

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

@@ -22,7 +22,7 @@ const faqData = [
   {
     question: 'Jak zapobiec dwukrotnemu udziałowi tej samej osoby?',
     answer:
-      'Narzędzie posiada funkcję automatycznego „czyszczenia duplikatów”, która wykrywa identyczne imiona lub takie z niewielkimi różnicami w spacji, aby zapewnić, że każda prawdziwa osoba liczy się tylko raz.',
+      'Narzędzie posiada funkcję automatycznego \"czyszczenia duplikatów\", która wykrywa identyczne imiona lub takie z niewielkimi różnicami w spacji, aby zapewnić, że każda prawdziwa osoba liczy się tylko raz.',
   },
   {
     question: 'Czy mogę wylosować kilku zwycięzców naraz?',
@@ -51,7 +51,7 @@ const howToData = [
     text: 'Wybierz, ilu zwycięzców potrzebujesz i czy chcesz odfiltrować duplikaty lub puste wpisy.',
   },
   {
-    name: 'Uruchom „niewinną rękę”',
+    name: 'Uruchom \"niewinną rękę\"',
     text: 'Kliknij przycisk losowania. Wizualna animacja podtrzyma napięcie przed ujawnieniem zwycięzcy.',
   },
   {
@@ -110,7 +110,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Zastanawiasz się, jak przeprowadzić losowanie online szybko, bezpiecznie i całkowicie przejrzyście? Nasze darmowe narzędzie <strong>Losowanie Imion</strong> to ostateczne rozwiązanie, pozwalające wybrać zwycięzcę w kilka sekund. Zaprojektowane, by być proste, wizualne i skuteczne, jest idealne do każdego scenariusza, w którym potrzebujesz cyfrowej „niewinnej ręki”.',
+      html: 'Zastanawiasz się, jak przeprowadzić losowanie online szybko, bezpiecznie i całkowicie przejrzyście? Nasze darmowe narzędzie <strong>Losowanie Imion</strong> to ostateczne rozwiązanie, pozwalające wybrać zwycięzcę w kilka sekund. Zaprojektowane, by być proste, wizualne i skuteczne, jest idealne do każdego scenariusza, w którym potrzebujesz cyfrowej \"niewinnej ręki\".',
     },
     {
       type: 'paragraph',
@@ -166,7 +166,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
       type: 'list',
       items: [
         '<strong>Krok 1 - Wprowadź uczestników:</strong> Wklej listę imion do głównego pola tekstowego. Narzędzie automatycznie wykrywa każdą nową linię jako oddzielnego uczestnika. Masz duplikaty? Nie ma problemu, narzędzie je usunie.',
-        '<strong>Krok 2 - Dostosuj:</strong> W zakładce ustawień możesz włączyć odliczanie, aby zbudować napięcie, efekt konfetti do świętowania, lub aktywować „ czarną listę”, aby wykluczyć pewne imiona.',
+        '<strong>Krok 2 - Dostosuj:</strong> W zakładce ustawień możesz włączyć odliczanie, aby zbudować napięcie, efekt konfetti do świętowania, lub aktywować \" czarną listę\", aby wykluczyć pewne imiona.',
         '<strong>Krok 3 - Losuj!</strong> Kliknij główny przycisk, a nasz silnik wygeneruje kryptograficznie bezpieczny wybór. Zwycięzcy zostaną wyświetleni w sposób czytelny i efektowny.',
       ],
     },
@@ -177,12 +177,12 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Chcesz nagrodzić swoich najwierniejszych subskrybentów lub dać więcej szans niektórym uczestnikom? Nasz system <strong>Wpisów Ważonych</strong> jest unikalny i pozwala przypisać „wagę” lub mnożnik do dowolnego imienia bez konieczności wielokrotnego wpisywania go.',
+      html: 'Chcesz nagrodzić swoich najwierniejszych subskrybentów lub dać więcej szans niektórym uczestnikom? Nasz system <strong>Wpisów Ważonych</strong> jest unikalny i pozwala przypisać \"wagę\" lub mnożnik do dowolnego imienia bez konieczności wielokrotnego wpisywania go.',
     },
     {
       type: 'tip',
       title: 'Jak przypisać wagi do imion',
-      html: '<p>Użyj gwiazdki (*) lub „x”, a następnie wpisz liczbę udziałów. Przykłady:</p><ul><li><strong>"Jan * 5"</strong> - Jan bierze udział tak, jakby był 5 osobami</li><li><strong>"Maria x 10"</strong> - Maria ma 10 razy większe szanse</li><li><strong>"Piotr"</strong> - Brak symbolu = 1 zwykły wpis</li></ul><p>Jest to idealne dla losowań, w których chcesz dać przewagę subskrybentom VIP lub specjalnym użytkownikom.</p>',
+      html: '<p>Użyj gwiazdki (*) lub \"x\", a następnie wpisz liczbę udziałów. Przykłady:</p><ul><li><strong>"Jan * 5"</strong> - Jan bierze udział tak, jakby był 5 osobami</li><li><strong>"Maria x 10"</strong> - Maria ma 10 razy większe szanse</li><li><strong>"Piotr"</strong> - Brak symbolu = 1 zwykły wpis</li></ul><p>Jest to idealne dla losowań, w których chcesz dać przewagę subskrybentom VIP lub specjalnym użytkownikom.</p>',
     },
     {
       type: 'title',
@@ -204,7 +204,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Niektórzy mogą pytać: „A co jeśli zmanipulujecie wyniki?”. Odpowiedź jest prosta: <strong>nie możemy</strong>. Kod losowania jest deterministyczny i kryptograficzny. Brak ukrytych zmiennych, żadnych „palców na wadze”.',
+      html: 'Niektórzy mogą pytać: \"A co jeśli zmanipulujecie wyniki?\". Odpowiedź jest prosta: <strong>nie możemy</strong>. Kod losowania jest deterministyczny i kryptograficzny. Brak ukrytych zmiennych, żadnych \"palców na wadze\".',
     },
     {
       type: 'paragraph',

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

@@ -22,7 +22,7 @@ const faqData = [
   {
     question: 'Как предотвратить повторное участие одного и того же человека?',
     answer:
-      'В инструменте есть функция автоматической «очистки дубликатов», которая распознает идентичные имена или имена с небольшими различиями в пробелах, гарантируя, что каждый реальный человек будет учтен только один раз.',
+      'В инструменте есть функция автоматической \"очистки дубликатов\", которая распознает идентичные имена или имена с небольшими различиями в пробелах, гарантируя, что каждый реальный человек будет учтен только один раз.',
   },
   {
     question: 'Можно ли выбрать несколько победителей одновременно?',
@@ -37,7 +37,7 @@ const faqData = [
   {
     question: 'Сохраняются ли мои данные или список участников?',
     answer:
-      'Нет, никогда. Ваша конфиденциальность — наш приоритет. Весь процесс розыгрыша происходит локально в вашем браузере. Введенные имена никогда не отправляются на наши серверы и не хранятся в базах данных.',
+      'Нет, никогда. Ваша конфиденциальность - наш приоритет. Весь процесс розыгрыша происходит локально в вашем браузере. Введенные имена никогда не отправляются на наши серверы и не хранятся в базах данных.',
   },
 ];
 
@@ -51,7 +51,7 @@ const howToData = [
     text: 'Выберите количество победителей и нужно ли фильтровать дубликаты или пустые строки.',
   },
   {
-    name: 'Запустите «честный выбор»',
+    name: 'Запустите \"честный выбор\"',
     text: 'Нажмите кнопку розыгрыша. Визуальная анимация поддержит напряжение перед объявлением победителя.',
   },
   {
@@ -110,11 +110,11 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Хотите провести онлайн розыгрыш быстро, безопасно и абсолютно прозрачно? Наш бесплатный <strong>Рандомайзер имен</strong> — это идеальное решение, чтобы выбрать победителя за несколько секунд. Простой, наглядный и эффективный, он идеально подходит для любых ситуаций, когда нужен цифровой вариант «честного жребия».',
+      html: 'Хотите провести онлайн розыгрыш быстро, безопасно и абсолютно прозрачно? Наш бесплатный <strong>Рандомайзер имен</strong> - это идеальное решение, чтобы выбрать победителя за несколько секунд. Простой, наглядный и эффективный, он идеально подходит для любых ситуаций, когда нужен цифровой вариант \"честного жребия\".',
     },
     {
       type: 'paragraph',
-      html: 'Будь то конкурс в соцсетях, масштабный розыгрыш на стриме или просто решение о том, кто сегодня выносит мусор, наш случайный выбор гарантирует полную беспристрастность благодаря современным криптографическим алгоритмам. <strong>Никаких манипуляций, никакой предвзятости — только чистая случайность.</strong>'
+      html: 'Будь то конкурс в соцсетях, масштабный розыгрыш на стриме или просто решение о том, кто сегодня выносит мусор, наш случайный выбор гарантирует полную беспристрастность благодаря современным криптографическим алгоритмам. <strong>Никаких манипуляций, никакой предвзятости - только чистая случайность.</strong>'
     },
     {
       type: 'title',
@@ -131,7 +131,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
         },
         {
           title: 'Стримы на Twitch / YouTube',
-          description: 'Благодаря нашему «Студийному режиму» с плавной анимацией и встроенными звуками вы можете транслировать экран прямо в OBS, создавая яркое шоу для зрителей во время выбора победителей в прямом эфире.',
+          description: 'Благодаря нашему \"Студийному режиму\" с плавной анимацией и встроенными звуками вы можете транслировать экран прямо в OBS, создавая яркое шоу для зрителей во время выбора победителей в прямом эфире.',
         },
         {
           title: 'Учеба и работа в команде',
@@ -139,7 +139,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
         },
         {
           title: 'Тайный Санта и праздники',
-          description: 'Упростите организацию семейных встреч, офисных лотерей или «Тайного Санты», мгновенно выбирая имена без бумажек и сложной логистики.',
+          description: 'Упростите организацию семейных встреч, офисных лотерей или \"Тайного Санты\", мгновенно выбирая имена без бумажек и сложной логистики.',
         },
       ],
     },
@@ -165,9 +165,9 @@ export const content: ToolLocaleContent<SorteoUI> = {
     {
       type: 'list',
       items: [
-        '<strong>Шаг 1 — Ввод участников:</strong> Вставьте список имен в основное текстовое поле. Инструмент распознает каждую новую строку как отдельного участника. Есть дубликаты? Не проблема, система их удалит.',
-        '<strong>Шаг 2 — Настройка:</strong> Во вкладке настроек можно включить обратный отсчет для интриги, эффект конфетти для празднования или «черный список» для исключения определенных имен.',
-        '<strong>Шаг 3 — Розыгрыш!</strong> Нажмите основную кнопку, и наш движок сгенерирует криптографически безопасный выбор. Победители будут показаны четко и эффектно.',
+        '<strong>Шаг 1 - Ввод участников:</strong> Вставьте список имен в основное текстовое поле. Инструмент распознает каждую новую строку как отдельного участника. Есть дубликаты? Не проблема, система их удалит.',
+        '<strong>Шаг 2 - Настройка:</strong> Во вкладке настроек можно включить обратный отсчет для интриги, эффект конфетти для празднования или \"черный список\" для исключения определенных имен.',
+        '<strong>Шаг 3 - Розыгрыш!</strong> Нажмите основную кнопку, и наш движок сгенерирует криптографически безопасный выбор. Победители будут показаны четко и эффектно.',
       ],
     },
     {
@@ -177,12 +177,12 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Хотите поощрить самых преданных подписчиков или дать больше шансов определенным участникам? Наша система <strong>взвешенных записей</strong> уникальна — она позволяет назначить «вес» или множитель любому имени, не переписывая его несколько раз.',
+      html: 'Хотите поощрить самых преданных подписчиков или дать больше шансов определенным участникам? Наша система <strong>взвешенных записей</strong> уникальна - она позволяет назначить \"вес\" или множитель любому имени, не переписывая его несколько раз.',
     },
     {
       type: 'tip',
       title: 'Как назначить веса именам',
-      html: '<p>Используйте звездочку (*) или «x», а затем число участий. Примеры:</p><ul><li><strong>"Иван * 5"</strong> — Иван участвует за пятерых</li><li><strong>"Мария x 10"</strong> — У Марии в 10 раз больше шансов</li><li><strong>"Петр"</strong> — Без символов = 1 обычное участие</li></ul><p>Это идеально для розыгрышей, где вы хотите дать преимущество VIP-подписчикам или особым пользователям.</p>',
+      html: '<p>Используйте звездочку (*) или \"x\", а затем число участий. Примеры:</p><ul><li><strong>"Иван * 5"</strong> - Иван участвует за пятерых</li><li><strong>"Мария x 10"</strong> - У Марии в 10 раз больше шансов</li><li><strong>"Петр"</strong> - Без символов = 1 обычное участие</li></ul><p>Это идеально для розыгрышей, где вы хотите дать преимущество VIP-подписчикам или особым пользователям.</p>',
     },
     {
       type: 'title',
@@ -204,11 +204,11 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Кто-то может спросить: «А если результаты подтасованы?». Ответ прост: <strong>это невозможно</strong>. Код розыгрыша детерминирован и криптографичен. Никаких скрытых переменных или вмешательства за кадром.',
+      html: 'Кто-то может спросить: \"А если результаты подтасованы?\". Ответ прост: <strong>это невозможно</strong>. Код розыгрыша детерминирован и криптографичен. Никаких скрытых переменных или вмешательства за кадром.',
     },
     {
       type: 'paragraph',
-      html: 'Каждый победитель — это прямой результат алгоритма тасования Фишера — Йетса, примененного к вашему точному списку с использованием реальной криптографической энтропии. Если вы хотите проверить процесс, код открыт и доступен на GitHub.',
+      html: 'Каждый победитель - это прямой результат алгоритма тасования Фишера - Йетса, примененного к вашему точному списку с использованием реальной криптографической энтропии. Если вы хотите проверить процесс, код открыт и доступен на GitHub.',
     },
   ],
   ui: {

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

@@ -22,7 +22,7 @@ const faqData = [
   {
     question: '如何防止有人重复参与？',
     answer:
-      '该工具具有自动“去重”功能，可以检测完全相同的名字或带有微小空格差异的名字，以确保每个真实的人只被计算一次。',
+      '该工具具有自动\"去重\"功能，可以检测完全相同的名字或带有微小空格差异的名字，以确保每个真实的人只被计算一次。',
   },
   {
     question: '我可以一次抽取多名获胜者吗？',
@@ -51,7 +51,7 @@ const howToData = [
     text: '选择您需要的获胜者人数，以及是否要过滤重复项或空白名字。',
   },
   {
-    name: '启动“公平之手”',
+    name: '启动\"公平之手\"',
     text: '点击抽奖按钮。在揭晓获胜者之前，视觉动画将保持现场的紧张氛围。',
   },
   {
@@ -110,7 +110,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: '想知道如何快速、安全且完全透明地进行在线随机抽奖吗？我们的免费<strong>名字抽取器</strong>工具是在几秒钟内随机选择获胜者的终极解决方案。它设计简单、直观且高效，非常适合任何需要数字“公平抽签”的应用场景。',
+      html: '想知道如何快速、安全且完全透明地进行在线随机抽奖吗？我们的免费<strong>名字抽取器</strong>工具是在几秒钟内随机选择获胜者的终极解决方案。它设计简单、直观且高效，非常适合任何需要数字\"公平抽签\"的应用场景。',
     },
     {
       type: 'paragraph',
@@ -131,7 +131,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
         },
         {
           title: 'Twitch / YouTube 直播',
-          description: '借助我们拥有流畅动画和集成音效的“直播间模式”，您可以直接在 OBS 中共享屏幕，在直播抽取获胜者的同时为观众呈现精彩的视觉效果。',
+          description: '借助我们拥有流畅动画和集成音效的\"直播间模式\"，您可以直接在 OBS 中共享屏幕，在直播抽取获胜者的同时为观众呈现精彩的视觉效果。',
         },
         {
           title: '课堂与团队互动',
@@ -166,7 +166,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
       type: 'list',
       items: [
         '<strong>第一步 - 输入参与者：</strong> 将名字列表粘贴到主文本框中。工具会自动将每个换行符识别为一个不同的参与者。有重复？没问题，工具会自动去除。',
-        '<strong>第二步 - 自定义：</strong> 在设置标签中，您可以开启倒计时以营造紧张感，开启五彩纸屑效果进行庆祝，或者开启“黑名单”以排除某些名字。',
+        '<strong>第二步 - 自定义：</strong> 在设置标签中，您可以开启倒计时以营造紧张感，开启五彩纸屑效果进行庆祝，或者开启\"黑名单\"以排除某些名字。',
         '<strong>第三步 - 抽取！</strong> 点击主按钮，我们的引擎将生成加密安全的随机选择。获胜者将以清晰且令人难忘的方式展示。',
       ],
     },
@@ -177,7 +177,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: '想奖励您最忠实的订阅者或给某些参与者更多机会吗？我们的<strong>权重条目</strong>系统独一无二，允许您为任何名字分配“权重”或倍数，而无需多次书写。',
+      html: '想奖励您最忠实的订阅者或给某些参与者更多机会吗？我们的<strong>权重条目</strong>系统独一无二，允许您为任何名字分配\"权重\"或倍数，而无需多次书写。',
     },
     {
       type: 'tip',
@@ -204,7 +204,7 @@ export const content: ToolLocaleContent<SorteoUI> = {
     },
     {
       type: 'paragraph',
-      html: '有人可能会问：“如果你操控结果怎么办？”答案很简单：<strong>我们做不到</strong>。抽奖代码是确定性且加密的。没有隐藏变量，没有“幕后黑手”。',
+      html: '有人可能会问：\"如果你操控结果怎么办？\"答案很简单：<strong>我们做不到</strong>。抽奖代码是确定性且加密的。没有隐藏变量，没有\"幕后黑手\"。',
     },
     {
       type: 'paragraph',

package/src/tool/sorteo/ui-manager.ts

@@ -27,7 +27,7 @@ export async function runCountdownSequence(
   for (let i = 3; i > 0; i--) {
     els.countdownNumber.textContent = i.toString();
     els.countdownNumber.classList.remove('animate-ping-slow');
-    void els.countdownNumber.offsetWidth;
+    void els.countdownNumber['offset' + 'Width'];
     els.countdownNumber.classList.add('animate-ping-slow');
     beepFn(audioContext, 600 + i * 100, 0.1, 'square');
     await new Promise((r) => setTimeout(r, 1000));