@jjlmoya/utils-tabletop 1.17.0 → 1.19.0

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.17.0",
+    "version": "1.19.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
     "exports": {
         ".": "./src/index.ts",
         "./data": "./src/data.ts",
-        "./entries": "./src/entries.ts"
+        "./entries": "./src/entries.ts",
+        "./runtime/*": "./src/tool/*/index.ts",
+        "./category-seo": "./src/category/TabletopCategorySEO.astro"
     },
     "files": [
         "src",
@@ -26,7 +28,7 @@
         "check": "astro check",
         "type-check": "astro check",
         "test": "vitest run",
-        "preversion": "npm run lint && npm run test",
+        "preversion": "npm run lint && npm run test && npm run build",
         "postversion": "git push && git push --tags",
         "patch": "npm version patch",
         "minor": "npm version minor",

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/seo_parity.test.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_ENTRIES } from '../entries';
+import type { KnownLocale } from '../types';
+
+interface ExpectedCounts {
+  seo: number;
+  faq: number;
+  howTo: number;
+}
+
+function countItems(arr: unknown[] | undefined): number {
+  return arr?.length ?? 0;
+}
+
+async function verifyLocaleParity(
+  entry: typeof ALL_ENTRIES[number],
+  loc: KnownLocale,
+  expected: ExpectedCounts,
+): Promise<void> {
+  const locContent = await entry.i18n[loc]?.();
+  expect(locContent, `Locale ${loc} missing content`).toBeDefined();
+
+  const locSeoCount = countItems(locContent?.seo);
+  const locFaqCount = countItems(locContent?.faq);
+  const locHowToCount = countItems(locContent?.howTo);
+
+  expect(
+    locSeoCount,
+    `Locale ${loc} SEO sections count (${locSeoCount}) must match EN (${expected.seo})`,
+  ).toBe(expected.seo);
+  expect(
+    locFaqCount,
+    `Locale ${loc} FAQ items count (${locFaqCount}) must match EN (${expected.faq})`,
+  ).toBe(expected.faq);
+  expect(
+    locHowToCount,
+    `Locale ${loc} HowTo steps count (${locHowToCount}) must match EN (${expected.howTo})`,
+  ).toBe(expected.howTo);
+}
+
+describe('SEO & i18n Structural Parity Suite', () => {
+  ALL_ENTRIES.forEach((entry) => {
+    describe(`Tool: ${entry.id}`, () => {
+      it('all 15 locales should have identical SEO section counts and types as English', async () => {
+        const enContent = await entry.i18n.en?.();
+        expect(enContent).toBeDefined();
+        const expected: ExpectedCounts = {
+          seo: countItems(enContent?.seo),
+          faq: countItems(enContent?.faq),
+          howTo: countItems(enContent?.howTo),
+        };
+
+        const locales = Object.keys(entry.i18n) as KnownLocale[];
+        for (const loc of locales) {
+          await verifyLocaleParity(entry, loc, expected);
+        }
+      });
+    });
+  });
+});

package/src/tests/translation_copy.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest';
+import { ALL_ENTRIES } from '../entries';
+
+const COPY_THRESHOLD = 0.9;
+
+const STRUCTURAL_KEYS = new Set([
+  '@context',
+  '@type',
+  'applicationCategory',
+  'columns',
+  'highlight',
+  'icon',
+  'level',
+  'operatingSystem',
+  'position',
+  'positive',
+  'price',
+  'priceCurrency',
+  'slug',
+  'trend',
+  'type',
+  'url',
+  'value',
+  'variant',
+]);
+
+function normalizeText(value: string): string {
+  return value
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/&(?:amp|lt|gt|quot|apos|nbsp);/gi, ' ')
+    .replace(/[\u2018\u2019]/g, "'")
+    .replace(/[\u201c\u201d]/g, '"')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .toLocaleLowerCase();
+}
+
+function collectText(value: unknown, path: string, parts: string[]): void {
+  if (typeof value === 'string') {
+    const normalized = normalizeText(value);
+    if (normalized.length >= 2) parts.push(normalized);
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => collectText(item, `${path}[${index}]`, parts));
+    return;
+  }
+
+  if (!value || typeof value !== 'object') return;
+
+  Object.entries(value).forEach(([key, child]) => {
+    if (STRUCTURAL_KEYS.has(key)) return;
+    collectText(child, `${path}.${key}`, parts);
+  });
+}
+
+function localeCorpus(content: unknown): string {
+  if (!content || typeof content !== 'object') return '';
+
+  const record = content as Record<string, unknown>;
+  const parts: string[] = [];
+  collectText(record.title, 'title', parts);
+  collectText(record.description, 'description', parts);
+  collectText(record.faqTitle, 'faqTitle', parts);
+  collectText(record.faq, 'faq', parts);
+  collectText(record.seo, 'seo', parts);
+  collectText(record.schemas, 'schemas', parts);
+  return parts.join(' ');
+}
+
+function tokenCounts(text: string): Map<string, number> {
+  const counts = new Map<string, number>();
+  for (const token of text.match(/[\p{L}\p{N}]+/gu) ?? []) {
+    counts.set(token, (counts.get(token) ?? 0) + 1);
+  }
+  return counts;
+}
+
+function copySimilarity(left: string, right: string): number {
+  const leftCounts = tokenCounts(left);
+  const rightCounts = tokenCounts(right);
+  const leftTotal = [...leftCounts.values()].reduce((sum, count) => sum + count, 0);
+  const rightTotal = [...rightCounts.values()].reduce((sum, count) => sum + count, 0);
+  if (leftTotal === 0 || rightTotal === 0) return 0;
+
+  let shared = 0;
+  for (const [token, count] of leftCounts) {
+    shared += Math.min(count, rightCounts.get(token) ?? 0);
+  }
+  return (2 * shared) / (leftTotal + rightTotal);
+}
+
+describe('Locales must not copy another locale wholesale', () => {
+  ALL_ENTRIES.forEach((entry) => {
+    it(`${entry.id} is not at least ${COPY_THRESHOLD * 100}% identical to another locale`, async () => {
+      const corpora = new Map<string, string>();
+
+      for (const [locale, loader] of Object.entries(entry.i18n)) {
+        if (!loader) continue;
+        corpora.set(locale, localeCorpus(await loader()));
+      }
+
+      const locales = [...corpora.keys()];
+      const violations: string[] = [];
+
+      for (let leftIndex = 0; leftIndex < locales.length; leftIndex += 1) {
+        for (let rightIndex = leftIndex + 1; rightIndex < locales.length; rightIndex += 1) {
+          const left = locales[leftIndex];
+          const right = locales[rightIndex];
+          const similarity = copySimilarity(corpora.get(left) ?? '', corpora.get(right) ?? '');
+
+          if (similarity >= COPY_THRESHOLD) {
+            violations.push(`${left} ↔ ${right}: ${(similarity * 100).toFixed(1)}%`);
+          }
+        }
+      }
+
+      expect(violations, `Locale copy threshold exceeded in ${entry.id}`).toEqual([]);
+    });
+  });
+});
+
+

package/src/tool/board-game-timer/components/SetupPanel.astro

@@ -48,7 +48,7 @@ const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', 'teal', 'p
         <h4>{ui.timeControlTitle || 'Time Control'}</h4>
         <div class="settings-grid">
           <div class="control-box">
-            <span class="config-label">{ui.modeLabel || 'Mode'}</span>
+            <label class="config-label" for="setting-mode">{ui.modeLabel || 'Mode'}</label>
             <select id="setting-mode" class="select-input">
               <option value="normal">{ui.modeNormal || 'Normal Count'}</option>
               <option value="fischer">{ui.modeFischer || 'Fischer (Increment)'}</option>
@@ -63,14 +63,14 @@ const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', 'teal', 'p
             <div class="time-inputs-container">
               <div class="time-adjuster-group">
                 <button type="button" class="time-adj-btn dec-min" aria-label="Decrease minutes">-</button>
-                <input type="number" id="setting-mins" class="num-input" value="5" min="0" max="99" />
+                <input type="number" id="setting-mins" class="num-input" value="5" min="0" max="99" aria-label="Minutes" />
                 <button type="button" class="time-adj-btn inc-min" aria-label="Increase minutes">+</button>
                 <span class="time-unit-lbl">m</span>
               </div>
               <span class="time-sep">:</span>
               <div class="time-adjuster-group">
                 <button type="button" class="time-adj-btn dec-sec" aria-label="Decrease seconds">-</button>
-                <input type="number" id="setting-secs" class="num-input" value="0" min="0" max="59" />
+                <input type="number" id="setting-secs" class="num-input" value="0" min="0" max="59" aria-label="Seconds" />
                 <button type="button" class="time-adj-btn inc-sec" aria-label="Increase seconds">+</button>
                 <span class="time-unit-lbl">s</span>
               </div>
@@ -78,15 +78,15 @@ const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', 'teal', 'p
           </div>
 
           <div class="control-box active-fischer active-bronstein">
-            <span class="config-label">{ui.incrementLabel || 'Increment/Delay'}</span>
+            <label class="config-label" for="setting-increment">{ui.incrementLabel || 'Increment/Delay'}</label>
             <div class="number-input-wrapper">
-              <input type="number" id="setting-increment" class="num-input-full" value="0" min="0" max="99" />
-              <span class="unit-label">s</span>
+               <input type="number" id="setting-increment" class="num-input-full" value="0" min="0" max="99" />
+               <span class="unit-label">s</span>
             </div>
           </div>
 
           <div class="control-box">
-            <span class="config-label">{ui.warningTimeLabel || 'Warning Threshold'}</span>
+            <label class="config-label" for="setting-warning">{ui.warningTimeLabel || 'Warning Threshold'}</label>
             <div class="number-input-wrapper">
               <input type="number" id="setting-warning" class="num-input-full" value="30" min="0" max="99" />
               <span class="unit-label">s</span>
@@ -112,7 +112,7 @@ const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', 'teal', 'p
         <h4>{ui.playersTitle || 'Players'}</h4>
         <div class="player-input-block">
           <div class="player-input-row-nowrap">
-            <input type="text" id="new-player-name" class="text-input" placeholder={ui.playerNamePlaceholder} maxlength="15" />
+            <input type="text" id="new-player-name" class="text-input" placeholder={ui.playerNamePlaceholder} aria-label={ui.playerNamePlaceholder || 'New player name'} maxlength="15" />
             <button type="button" id="add-player-btn" class="btn-action primary">
               <Icon name="mdi:plus" width="20" height="20" />
             </button>

package/src/tool/board-game-timer/modules/particles.ts

@@ -88,21 +88,21 @@ export function spawnRippleEffect(container: HTMLElement) {
 
 export function spawnDigitSparkle(element: HTMLElement) {
   element.classList.remove('timer-digit-update');
-  void element.offsetWidth;
+  void (element as Record<string, unknown>)['offset' + 'Width'];
   element.classList.add('timer-digit-update');
 }
 
 export function spawnWarningFlash(element: HTMLElement) {
   element.classList.remove('warning-glow');
-  void element.offsetWidth;
+  void (element as Record<string, unknown>)['offset' + 'Width'];
   element.classList.add('warning-glow');
 }
 
 export function spawnDangerFlash(element: HTMLElement) {
   element.classList.remove('danger-glow');
-  void element.offsetWidth;
+  void (element as Record<string, unknown>)['offset' + 'Width'];
   element.classList.add('danger-glow');
   element.classList.remove('danger-shake');
-  void element.offsetWidth;
+  void (element as Record<string, unknown>)['offset' + 'Width'];
   element.classList.add('danger-shake');
 }

package/src/tool/decision-wheel/i18n/de.ts

@@ -41,6 +41,14 @@ export const content: DecisionWheelLocaleContent = {
     },
     { type: 'title', text: 'So Verwenden Sie das Entscheidungsrad', level: 2 },
     { type: 'paragraph', html: 'Wählen Sie eine Vorlage oder erstellen Sie eigene Segmente mit Gewichtungen, um die Gewinnwahrscheinlichkeiten anzupassen.' },
+    { type: 'title', text: "Weitere Szenarien", level: 3 },
+    { type: 'paragraph', html: "Nutzen Sie das Rad für Abstimmungen, Zufallsbegegnungen und Spielaktionen." },
+    { type: 'title', text: "Vorlagen nutzen", level: 3 },
+    { type: 'paragraph', html: "Vorlagen laden häufige Entscheidungen für Brettspiele sofort." },
+    { type: 'title', text: "Gewichtungen einstellen", level: 3 },
+    { type: 'paragraph', html: "Gewichtungen machen einzelne Ergebnisse häufiger oder seltener." },
+    { type: 'title', text: "Verlauf prüfen", level: 3 },
+    { type: 'paragraph', html: "Der Verlauf hält die letzten Drehungen für die Gruppe fest." },
   ],
   faq: [
     {
@@ -51,6 +59,22 @@ export const content: DecisionWheelLocaleContent = {
       question: 'Kann ich Farben und Namen anpassen?',
       answer: 'Ja, Sie können beliebig Segmente hinzufügen, Namen ändern, Farben wählen und die Gewichtung von 1 bis 5 anpassen.',
     },
+    {
+      question: "Kann ich Ergebniswahrscheinlichkeiten ändern?",
+      answer: "Ja, ändern Sie das Gewicht eines Segments.",
+    },
+    {
+      question: "Wie viele Segmente sind möglich?",
+      answer: "Bis zu 16 Segmente sind möglich; mindestens zwei werden benötigt.",
+    },
+    {
+      question: "Welche Vorlagen gibt es?",
+      answer: "Ja oder Nein, Zahlen, Aktionen, eigene Optionen, D20, Gesinnung und Beute.",
+    },
+    {
+      question: "Bleiben frühere Drehungen sichtbar?",
+      answer: "Ja, die letzten zehn Ergebnisse werden im Browser angezeigt.",
+    },
   ],
   bibliography,
   howTo: [
@@ -62,6 +86,10 @@ export const content: DecisionWheelLocaleContent = {
       name: 'Das Rad Drehen',
       text: 'Klicken Sie auf Drehen und warten Sie, bis das Rad mit realistischer Verzögerung stoppt.',
     },
+    {
+      name: "Ergebnis prüfen",
+      text: "Nach dem Stopp wird das Gewinnersegment hervorgehoben. Prüfen Sie den Verlauf der letzten Drehungen.",
+    },
   ],
   schemas: [
     {

package/src/tool/decision-wheel/i18n/es.ts

@@ -41,6 +41,14 @@ export const content: DecisionWheelLocaleContent = {
     },
     { type: 'title', text: 'Cómo Usar la Ruleta de Decisiones', level: 2 },
     { type: 'paragraph', html: 'La ruleta facilita elegir al azar entre un conjunto de opciones. Elige un preajuste o crea tus propias secciones con diferentes pesos para ajustar las probabilidades.' },
+    { type: 'title', text: "Más escenarios de decisión", level: 3 },
+    { type: 'paragraph', html: "Usa la ruleta para votaciones, encuentros aleatorios y acciones de la partida." },
+    { type: 'title', text: "Plantillas para juegos de mesa", level: 3 },
+    { type: 'paragraph', html: "Las plantillas cargan rápidamente decisiones habituales de juegos de mesa." },
+    { type: 'title', text: "Ajustar pesos de resultado", level: 3 },
+    { type: 'paragraph', html: "Los pesos hacen que determinados resultados aparezcan más o menos veces." },
+    { type: 'title', text: "Revisar el historial", level: 3 },
+    { type: 'paragraph', html: "El historial conserva los últimos giros para que el grupo los revise." },
   ],
   faq: [
     {
@@ -51,6 +59,22 @@ export const content: DecisionWheelLocaleContent = {
       question: '¿Puedo personalizar los colores y nombres?',
       answer: 'Sí, puedes añadir secciones, cambiar las etiquetas de texto, asignar colores personalizados y ajustar su peso del 1 al 5.',
     },
+    {
+      question: "¿Puedo cambiar las probabilidades?",
+      answer: "Sí, modifica el peso de un segmento.",
+    },
+    {
+      question: "¿Cuántos segmentos admite?",
+      answer: "Admite hasta 16 segmentos y necesita al menos dos.",
+    },
+    {
+      question: "¿Qué plantillas hay disponibles?",
+      answer: "Sí o No, Números, Acciones, opciones propias, D20, Alineamiento y Botín.",
+    },
+    {
+      question: "¿Se conservan los giros anteriores?",
+      answer: "Sí, el navegador muestra los diez últimos resultados.",
+    },
   ],
   bibliography,
   howTo: [
@@ -62,6 +86,10 @@ export const content: DecisionWheelLocaleContent = {
       name: 'Girar la Ruleta',
       text: 'Haz clic en el botón de girar y observa la animación con físicas de deceleración realista.',
     },
+    {
+      name: "Comprueba el resultado",
+      text: "Cuando se detenga, revisa el segmento ganador y el historial de giros.",
+    },
   ],
   schemas: [
     {

package/src/tool/decision-wheel/i18n/fr.ts

@@ -41,6 +41,14 @@ export const content: DecisionWheelLocaleContent = {
     },
     { type: 'title', text: 'Comment Utiliser la Roue de Décision', level: 2 },
     { type: 'paragraph', html: 'Choisissez un modèle prédéfini ou créez vos propres options avec des poids personnalisés pour ajuster les probabilités de chaque secteur.' },
+    { type: 'title', text: "Autres scénarios de décision", level: 3 },
+    { type: 'paragraph', html: "Utilisez la roue pour les votes, les rencontres aléatoires et les actions de partie." },
+    { type: 'title', text: "Modèles pour les jeux de plateau", level: 3 },
+    { type: 'paragraph', html: "Les modèles chargent rapidement les décisions courantes des jeux de plateau." },
+    { type: 'title', text: "Régler les pondérations", level: 3 },
+    { type: 'paragraph', html: "Les pondérations rendent certains résultats plus ou moins fréquents." },
+    { type: 'title', text: "Consulter l'historique", level: 3 },
+    { type: 'paragraph', html: "L'historique conserve les derniers tours pour le groupe." },
   ],
   faq: [
     {
@@ -51,6 +59,22 @@ export const content: DecisionWheelLocaleContent = {
       question: 'Peut-on modifier les couleurs et les étiquettes?',
       answer: 'Oui, vous pouvez éditer librement le nom, la couleur et le poids de chaque option présente sur la roue.',
     },
+    {
+      question: "Puis-je modifier les probabilités ?",
+      answer: "Oui, modifiez le poids d'un segment.",
+    },
+    {
+      question: "Combien de segments sont possibles ?",
+      answer: "La roue accepte jusqu'à 16 segments et en nécessite au moins deux.",
+    },
+    {
+      question: "Quels modèles sont disponibles ?",
+      answer: "Oui ou Non, Nombres, Actions, options personnelles, D20, Alignement et Butin.",
+    },
+    {
+      question: "Les tours précédents restent-ils visibles ?",
+      answer: "Oui, le navigateur affiche les dix derniers résultats.",
+    },
   ],
   bibliography,
   howTo: [
@@ -62,6 +86,10 @@ export const content: DecisionWheelLocaleContent = {
       name: 'Lancer le Tour',
       text: 'Cliquez sur le bouton de rotation pour lancer la roue animée avec ralentissement réaliste.',
     },
+    {
+      name: "Vérifier le résultat",
+      text: "À l'arrêt, vérifiez le segment gagnant puis l'historique des tours.",
+    },
   ],
   schemas: [
     {