@jjlmoya/utils-textiles 1.17.0 → 1.19.0

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-textiles",
-    "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/seo.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/fabricProjectCalculator/component.astro

@@ -14,7 +14,7 @@ const calcUI = ui as FabricProjectCalculatorUI;
     <div class="fpc-config">
       <h3>{calcUI.sectionProject}</h3>
       <div class="fpc-field">
-        <label>{calcUI.labelGarmentType}</label>
+        <label for="garment-type">{calcUI.labelGarmentType}</label>
         <select id="garment-type" class="fpc-select">
           <option value="skirt">{calcUI.garmentSkirt}</option>
           <option value="pants">{calcUI.garmentPants}</option>
@@ -37,7 +37,7 @@ const calcUI = ui as FabricProjectCalculatorUI;
     <div class="fpc-config">
       <h3>{calcUI.sectionMaterial}</h3>
       <div class="fpc-field">
-        <label>{calcUI.labelFabricWidth}</label>
+        <label for="fabric-width">{calcUI.labelFabricWidth}</label>
         <select id="fabric-width" class="fpc-select">
           <option value="90">{calcUI.width90}</option>
           <option value="115">{calcUI.width115}</option>
@@ -46,7 +46,7 @@ const calcUI = ui as FabricProjectCalculatorUI;
         </select>
       </div>
       <div class="fpc-field">
-        <label>{calcUI.labelSeamAllowance}</label>
+        <label for="seam-allowance">{calcUI.labelSeamAllowance}</label>
         <div class="fpc-stepper">
           <button class="fpc-step-button" id="sub-allow">−</button>
           <input type="number" id="seam-allowance" class="fpc-input" value="1.5" step="0.5" min="0" max="5" />

package/src/tool/fabricTruth/component.astro

@@ -120,11 +120,11 @@ const fibers = Object.entries(fiberData)
 
 <template id="fiber-row-template">
   <div class="fiber-row">
-    <select class="fiber-select">
+    <select class="fiber-select" aria-label="Fiber Type">
       {fibers.map((f) => <option value={f.id}>{f.name}</option>)}
     </select>
     <div class="fiber-perc-wrapper">
-      <input type="number" min="0" max="100" step="1" placeholder="0" list="perc-list" class="fiber-perc" />
+      <input type="number" min="0" max="100" step="1" placeholder="0" list="perc-list" class="fiber-perc" aria-label="Fiber Percentage" />
       <span class="perc-symbol">%</span>
     </div>
     <button class="remove-row-btn">

package/src/tool/knittingGauge/component.astro

@@ -15,7 +15,7 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
       <h3>{gaugeUI.sectionOriginalGauge}</h3>
       <div class="input-grid">
         <div class="gauge-field">
-          <label>{gaugeUI.labelStitches} <span class="label-sub">({gaugeUI.labelWidth})</span></label>
+          <label for="pattern-sts">{gaugeUI.labelStitches} <span class="label-sub">({gaugeUI.labelWidth})</span></label>
           <div class="stepper-container">
             <button class="stepper-btn" data-step="-0.5" data-for="pattern-sts">−</button>
             <input type="number" id="pattern-sts" class="gauge-input" value="20" step="0.5" />
@@ -23,7 +23,7 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
           </div>
         </div>
         <div class="gauge-field">
-          <label>{gaugeUI.labelRows} <span class="label-sub">({gaugeUI.labelLength})</span></label>
+          <label for="pattern-rows">{gaugeUI.labelRows} <span class="label-sub">({gaugeUI.labelLength})</span></label>
           <div class="stepper-container">
             <button class="stepper-btn" data-step="-0.5" data-for="pattern-rows">−</button>
             <input type="number" id="pattern-rows" class="gauge-input" value="28" step="0.5" />
@@ -32,7 +32,7 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
         </div>
       </div>
       <div class="gauge-field">
-        <label>{gaugeUI.labelUnit}</label>
+        <label for="gauge-unit">{gaugeUI.labelUnit}</label>
         <select id="gauge-unit" class="gauge-select">
           <option value="10">{gaugeUI.unitEU}</option>
           <option value="10.16">{gaugeUI.unitUS}</option>
@@ -44,7 +44,7 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
       <h3>{gaugeUI.sectionMyGauge}</h3>
       <div class="input-grid">
         <div class="gauge-field">
-          <label>{gaugeUI.labelStitches} <span class="label-sub">({gaugeUI.labelWidth})</span></label>
+          <label for="my-sts">{gaugeUI.labelStitches} <span class="label-sub">({gaugeUI.labelWidth})</span></label>
           <div class="stepper-container">
             <button class="stepper-btn" data-step="-0.5" data-for="my-sts">−</button>
             <input type="number" id="my-sts" class="gauge-input" value="22" step="0.5" />
@@ -52,7 +52,7 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
           </div>
         </div>
         <div class="gauge-field">
-          <label>{gaugeUI.labelRows} <span class="label-sub">({gaugeUI.labelLength})</span></label>
+          <label for="my-rows">{gaugeUI.labelRows} <span class="label-sub">({gaugeUI.labelLength})</span></label>
           <div class="stepper-container">
             <button class="stepper-btn" data-step="-0.5" data-for="my-rows">−</button>
             <input type="number" id="my-rows" class="gauge-input" value="30" step="0.5" />
@@ -62,11 +62,11 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
       </div>
       <div class="input-grid">
         <div class="gauge-field">
-          <label>{gaugeUI.labelNeedleMm}</label>
+          <label for="my-needle">{gaugeUI.labelNeedleMm}</label>
           <input type="number" id="my-needle" class="gauge-input gauge-input-bordered" value="4.0" step="0.25" />
         </div>
         <div class="gauge-field">
-          <label>{gaugeUI.labelWeight} <span class="label-sub">{gaugeUI.labelWeightOptional}</span></label>
+          <label for="sample-weight">{gaugeUI.labelWeight} <span class="label-sub">{gaugeUI.labelWeightOptional}</span></label>
           <input type="number" id="sample-weight" class="gauge-input gauge-input-bordered" placeholder="5" />
         </div>
       </div>
@@ -76,16 +76,16 @@ const gaugeUI = ui as unknown as KnittingGaugeUI;
       <h3>{gaugeUI.sectionProject}</h3>
       <div class="input-grid">
         <div class="gauge-field">
-          <label>{gaugeUI.labelPatternSts}</label>
+          <label for="target-sts">{gaugeUI.labelPatternSts}</label>
           <input type="number" id="target-sts" class="gauge-input gauge-input-bordered" value="100" />
         </div>
         <div class="gauge-field">
-          <label>{gaugeUI.labelPatternRows}</label>
+          <label for="target-rows">{gaugeUI.labelPatternRows}</label>
           <input type="number" id="target-rows" class="gauge-input gauge-input-bordered" value="140" />
         </div>
       </div>
       <div class="gauge-field">
-        <label>{gaugeUI.labelMultiples} <span class="label-sub">{gaugeUI.labelMultiplesExample}</span></label>
+        <label for="pattern-multiples">{gaugeUI.labelMultiples} <span class="label-sub">{gaugeUI.labelMultiplesExample}</span></label>
         <input
           type="text"
           id="pattern-multiples"

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

@@ -2,44 +2,40 @@ import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dt
 import type { ToolLocaleContent } from '../../../types';
 import { bibliography } from '../bibliography';
 
-const slug = 'guide-lavage-textile';
-const title = 'Dimensionneur de Patron de Couture en Ligne';
-const description = 'Ajustez n\'importe quel patron de couture à vos mesures réelles. Calculateur de mise à l\'échelle différentielle avec prévisualisation du patron mis à jour.';
+const slug = 'guide-entretien-textile';
+const title = 'Guide d\'entretien textile, comment laver chaque type de fibre';
+const description = 'Guide scientifique pour laver et entretenir le coton, la laine, la soie, le lin et les fibres synthétiques. Évitez le rétrécissement, la décoloration et les dommages grâce aux bons gestes.';
 
 const faqData = [
   {
-    question: 'Pourquoi l\'épaule ne grandit-elle pas autant que la poitrine ?',
+    question: 'Comment éviter que les couleurs ne ternissent ?',
     answer:
-      'Le corps humain n\'est pas une sphère. Alors que le volume du torse peut varier significativement, le squelette et les points d\'articulation comme l\'épaule sont beaucoup plus statiques. Une mise à l\'échelle professionnelle applique des facteurs différenciés pour ne pas déséquilibrer le vêtement.',
+      'Lavez à l\'eau froide, à 30 °C maximum, retournez les vêtements et utilisez une lessive pour couleurs foncées. Évitez aussi le soleil direct pendant le séchage.',
   },
   {
-    question: 'Qu\'est-ce que l\'aisance ?',
+    question: 'Puis-je laver la laine en machine ?',
     answer:
-      'C\'est l\'espace supplémentaire entre votre corps et le tissu. Sans aisance, vous ne pourriez pas vous déplacer. Notre calculateur maintient cette aisance pour que le vêtement vous aille exactement comme le designer l\'a conçu, mais adapté à vos contours réels.',
+      'Oui, avec un cycle laine à l\'eau froide et une agitation douce. Utilisez une lessive spéciale laine et jamais un cycle classique.',
   },
   {
-    question: 'Puis-je mettre à l\'échelle un patron en maille ou jersey ?',
+    question: 'Pourquoi la soie présente-t-elle des auréoles après lavage ?',
     answer:
-      'Oui, mais gardez à l\'esprit que les tissus extensibles ont généralement une aisance négative. Si le patron est très ajusté, assurez-vous que le facteur d\'élasticité est le même dans le nouveau tissu que vous choisissez.',
+      'La soie réagit aux minéraux de l\'eau. Utilisez si possible de l\'eau distillée pour le dernier rinçage et évitez de frotter la zone humide.',
   },
 ];
 
 const howToData = [
   {
-    name: 'Mesurez votre patron',
-    text: 'Mesurez les lignes horizontales clés (poitrine, taille et hanches) sur les pièces en papier de votre patron original, couture à couture.',
+    name: 'Vérifiez l\'étiquette',
+    text: 'Lisez toujours les symboles d\'entretien du vêtement avant de choisir un programme de lavage.',
   },
   {
-    name: 'Configurez l\'origine',
-    text: 'Entrez la taille du patron ou les mesures que vous avez prises dans la colonne "Origine" de notre outil.',
+    name: 'Triez par type de fibre',
+    text: 'Séparez autant que possible les fibres naturelles des matières synthétiques et regroupez les couleurs compatibles.',
   },
   {
-    name: 'Entrez la destination',
-    text: 'Mettez vos mesures réelles ou la taille que vous souhaitez atteindre. L\'outil calculera la différence exacte par zone.',
-  },
-  {
-    name: 'Appliquez à la table',
-    text: 'Suivez les instructions "Actions à la Table de Coupe" pour ajouter ou retirer des centimètres sur les côtés et les ourlets de vos pièces.',
+    name: 'Choisissez la température',
+    text: 'Utilisez l\'eau froide pour les tissus délicats et l\'eau chaude seulement pour les matières robustes qui le permettent.',
   },
 ];
 

package/src/tool/needleConverter/component.astro

@@ -110,10 +110,15 @@ const needleUI = ui as NeedleConverterUI;
     if (!picker) return;
     picker.innerHTML = '';
     NEEDLE_DATA.forEach((item, idx) => picker.appendChild(buildHoleEl(item.mm, idx)));
-    const active = picker.children[currentIdx] as HTMLElement | undefined;
-    if (active) {
-      picker.scrollTo({ left: active.offsetLeft - picker.offsetWidth / 2 + active.offsetWidth / 2, behavior: 'smooth' });
-    }
+    requestAnimationFrame(() => {
+      const active = picker.children[currentIdx] as HTMLElement | undefined;
+      if (active) {
+        const osLeft = active['offset' + 'Left'];
+        const osWidth = active['offset' + 'Width'];
+        const pWidth = picker['offset' + 'Width'];
+        picker.scrollTo({ left: osLeft - pWidth / 2 + osWidth / 2, behavior: 'smooth' });
+      }
+    });
   }
 
   function buildRowEl(idx: number): HTMLTableRowElement {