@jjlmoya/utils-textiles 1.17.0 → 1.18.0

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-textiles",
-    "version": "1.17.0",
+    "version": "1.18.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",

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/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/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 {

package/src/tool/sewingPatternScaler/component.astro

@@ -27,13 +27,13 @@ const SIZES = ['36', '38', '40', '42', '44', '46'];
       <div id="standard-grid">
         <div class="input-grid">
           <div class="input-group">
-            <label class="label-tiny">{scalerUI.labelPatternSize}</label>
+            <label class="label-tiny" for="origin-size">{scalerUI.labelPatternSize}</label>
             <select id="origin-size" class="form-input form-select">
               {SIZES.map((s) => <option value={s} selected={s === '38'}>{scalerUI.sizePrefix} {s}</option>)}
             </select>
           </div>
           <div class="input-group">
-            <label class="label-tiny">{scalerUI.labelTargetSize}</label>
+            <label class="label-tiny" for="target-size">{scalerUI.labelTargetSize}</label>
             <select id="target-size" class="form-input form-select">
               {SIZES.map((s) => <option value={s} selected={s === '42'}>{scalerUI.sizePrefix} {s}</option>)}
             </select>
@@ -44,22 +44,22 @@ const SIZES = ['36', '38', '40', '42', '44', '46'];
       <div id="custom-grid" class="hidden">
         <span class="label-tiny">{scalerUI.labelOriginMeasures}</span>
         <div class="input-grid">
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelChest}</label><input type="number" id="origin-chest" class="form-input" value="88" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelWaist}</label><input type="number" id="origin-waist" class="form-input" value="68" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelHips}</label><input type="number" id="origin-hips" class="form-input" value="94" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelLength}</label><input type="number" id="origin-length" class="form-input" value="60" /></div>
+          <div class="input-item"><label class="label-tiny" for="origin-chest">{scalerUI.labelChest}</label><input type="number" id="origin-chest" class="form-input" value="88" /></div>
+          <div class="input-item"><label class="label-tiny" for="origin-waist">{scalerUI.labelWaist}</label><input type="number" id="origin-waist" class="form-input" value="68" /></div>
+          <div class="input-item"><label class="label-tiny" for="origin-hips">{scalerUI.labelHips}</label><input type="number" id="origin-hips" class="form-input" value="94" /></div>
+          <div class="input-item"><label class="label-tiny" for="origin-length">{scalerUI.labelLength}</label><input type="number" id="origin-length" class="form-input" value="60" /></div>
         </div>
         <span class="label-tiny target-lbl">{scalerUI.labelTargetMeasures}</span>
         <div class="input-grid">
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelChest}</label><input type="number" id="target-chest" class="form-input" value="96" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelWaist}</label><input type="number" id="target-waist" class="form-input" value="76" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelHips}</label><input type="number" id="target-hips" class="form-input" value="102" /></div>
-          <div class="input-item"><label class="label-tiny">{scalerUI.labelLength}</label><input type="number" id="target-length" class="form-input" value="62" /></div>
+          <div class="input-item"><label class="label-tiny" for="target-chest">{scalerUI.labelChest}</label><input type="number" id="target-chest" class="form-input" value="96" /></div>
+          <div class="input-item"><label class="label-tiny" for="target-waist">{scalerUI.labelWaist}</label><input type="number" id="target-waist" class="form-input" value="76" /></div>
+          <div class="input-item"><label class="label-tiny" for="target-hips">{scalerUI.labelHips}</label><input type="number" id="target-hips" class="form-input" value="102" /></div>
+          <div class="input-item"><label class="label-tiny" for="target-length">{scalerUI.labelLength}</label><input type="number" id="target-length" class="form-input" value="62" /></div>
         </div>
       </div>
 
       <div class="ease-group">
-        <label class="label-tiny">{scalerUI.labelEase}</label>
+        <label class="label-tiny" for="ease-val">{scalerUI.labelEase}</label>
         <input type="number" id="ease-val" class="form-input" value="4" />
       </div>
     </div>

package/src/tool/stainChemistry/component.astro

@@ -28,7 +28,7 @@ const fibers = Object.entries(ui.fiberData)
     <div class="selectors-section">
       <div class="selectors-grid">
         <div class="selector-group">
-          <label class="selector-label">
+          <label class="selector-label" for="fiber-select">
             <Icon name="mdi:tshirt-v-outline" class="label-icon" />
             {ui.fiberLabel}
           </label>
@@ -44,7 +44,7 @@ const fibers = Object.entries(ui.fiberData)
         </div>
 
         <div class="selector-group">
-          <label class="selector-label">
+          <label class="selector-label" for="stain-select">
             <Icon name="mdi:shimmer" class="label-icon" />
             {ui.stainLabel}
           </label>

package/src/tool/yarnCalculator/component.astro

@@ -80,11 +80,11 @@ const initLabels = yarnUI.sizeLabels?.sweater ?? ['S', 'M', 'L', 'XL'];
         <div class="custom-input-box">
           <div class="ball-grid">
             <div>
-              <label class="label-tiny">{yarnUI.labelGrams}</label>
+              <label class="label-tiny" for="ball-weight">{yarnUI.labelGrams}</label>
               <input type="number" id="ball-weight" class="custom-input" value="100" />
             </div>
             <div>
-              <label class="label-tiny">{yarnUI.labelMeters}</label>
+              <label class="label-tiny" for="ball-meters">{yarnUI.labelMeters}</label>
               <input type="number" id="ball-meters" class="custom-input" value="200" />
             </div>
           </div>