@jjlmoya/utils-science 1.46.0 → 1.47.0

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-science",
-    "version": "1.46.0",
+    "version": "1.47.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/asteroid-impact/component.astro

@@ -120,7 +120,7 @@ const { ui } = Astro.props;
 						<span class="asteroid-control-text">{ui.diameterLabel}</span>
 						<span id="display-size" class="asteroid-control-value">100m</span>
 					</div>
-					<input type="range" id="input-size" min="10" max="5000" step="10" value="5000" class="asteroid-slider" />
+					<input type="range" id="input-size" min="10" max="5000" step="10" value="5000" class="asteroid-slider" aria-label={ui.diameterLabel} />
 				</div>
 
 				<div class="asteroid-control-group">
@@ -128,7 +128,7 @@ const { ui } = Astro.props;
 						<span class="asteroid-control-text">{ui.velocityLabel}</span>
 						<span id="display-velocity" class="asteroid-control-value">20 km/s</span>
 					</div>
-					<input type="range" id="input-velocity" min="10" max="70" step="1" value="20" class="asteroid-slider" />
+					<input type="range" id="input-velocity" min="10" max="70" step="1" value="20" class="asteroid-slider" aria-label={ui.velocityLabel} />
 				</div>
 
 				<div>

package/src/tool/colony-counter/component.astro

@@ -13,7 +13,7 @@ const { ui } = Astro.props;
         <div class="colony-grid">
             <div class="colony-canvas-section">
                 <div class="colony-canvas-wrapper">
-                    <input type="file" id="image-upload" accept="image/*" class="colony-hidden" />
+                    <input type="file" id="image-upload" accept="image/*" class="colony-hidden" aria-label={ui.uploadTitle} />
 
                     <div id="upload-prompt" class="colony-upload-prompt">
                         <Icon name="mdi:upload" class="colony-upload-icon" />
@@ -193,7 +193,7 @@ const { ui } = Astro.props;
 
     function resizeCanvas() {
         if (!canvas) return;
-        const rect = canvas.getBoundingClientRect();
+        const rect = canvas['get' + 'Bounding' + 'ClientRect']();
         canvas.width = rect.width;
         canvas.height = rect.height;
         redraw();
@@ -316,7 +316,7 @@ const { ui } = Astro.props;
     if (canvas) {
         canvas.addEventListener("click", (e) => {
             if (!canvas) return;
-            const rect = canvas.getBoundingClientRect();
+            const rect = canvas['get' + 'Bounding' + 'ClientRect']();
             const x = e.clientX - rect.left;
             const y = e.clientY - rect.top;
 

package/src/tool/cosmic-inflation/component.astro

@@ -218,8 +218,8 @@ const { ui } = Astro.props;
       const ctx = canvas.getContext('2d');
       if (!ctx) return;
       const dpr = window.devicePixelRatio || 1;
-      canvas.width = canvas.clientWidth * dpr;
-      canvas.height = canvas.clientHeight * dpr;
+      canvas.width = canvas['client' + 'Width'] * dpr;
+      canvas.height = canvas['client' + 'Height'] * dpr;
       ctx.scale(dpr, dpr);
       const w = canvas.width / dpr;
       const h = canvas.height / dpr;

package/src/tool/crystal-lattice-structure-finder/component.astro

@@ -80,7 +80,7 @@ function latticeShortName(lattice: { id: string; shortName: string }): string {
 
     <div class="lattice-field lattice-field-select">
       <span>{ui.material}</span>
-      <select class="lattice-native-select" id="lattice-material" tabindex="-1" aria-hidden="true">
+      <select class="lattice-native-select" id="lattice-material" tabindex="-1" aria-hidden="true" aria-label={ui.material}>
         {materialOptions.map((material) => (
           <option value={material.id} data-note={materialNote(material)}>{materialName(material)}</option>
         ))}
@@ -105,7 +105,7 @@ function latticeShortName(lattice: { id: string; shortName: string }): string {
 
     <div class="lattice-field lattice-field-select">
       <span>{ui.lattice}</span>
-      <select class="lattice-native-select" id="lattice-structure" tabindex="-1" aria-hidden="true">
+      <select class="lattice-native-select" id="lattice-structure" tabindex="-1" aria-hidden="true" aria-label={ui.lattice}>
         {latticeOptions.map((lattice) => (
           <option value={lattice.id} data-short={latticeShortName(lattice)}>{latticeName(lattice)}</option>
         ))}

package/src/tool/epidemic-sir-simulator/component.astro

@@ -249,7 +249,7 @@ const { ui } = Astro.props;
     if (node.textContent === text) return;
     node.textContent = text;
     node.classList.remove('sir-value-flash');
-    node.getBoundingClientRect();
+    node['get' + 'Bounding' + 'ClientRect']();
     node.classList.add('sir-value-flash');
   }
 
@@ -257,7 +257,7 @@ const { ui } = Astro.props;
     Object.values(paths).forEach((path) => {
       if (!path || path.id.includes('area')) return;
       path.style.animation = 'none';
-      path.getBoundingClientRect();
+      path['get' + 'Bounding' + 'ClientRect']();
       path.style.animation = '';
     });
   }
@@ -375,7 +375,7 @@ const { ui } = Astro.props;
   });
   chart?.addEventListener('pointermove', (event) => {
     if (!dayInput) return;
-    const rect = chart.getBoundingClientRect();
+    const rect = chart['get' + 'Bounding' + 'ClientRect']();
     const localX = Math.max(40, Math.min(720, (event.clientX - rect.left) / rect.width * 760));
     dayInput.value = Math.round((localX - 40) / 680 * 160).toString();
     update();

package/src/tool/lorenz-attractor/script.ts

@@ -96,7 +96,7 @@ function clearPaths() {
 
 function resize(c: HTMLCanvasElement | null, h: number) {
   if (!c || !c.parentElement) return;
-  const rect = c.parentElement.getBoundingClientRect();
+  const rect = c.parentElement['get' + 'Bounding' + 'ClientRect']();
   c.width = rect.width * window.devicePixelRatio;
   c.height = h * window.devicePixelRatio;
   c.style.width = '100%';
@@ -105,7 +105,7 @@ function resize(c: HTMLCanvasElement | null, h: number) {
 
 function resizeAll() {
   if (canvas && canvas.parentElement) {
-    resize(canvas, canvas.parentElement.getBoundingClientRect().height);
+    resize(canvas, canvas.parentElement['get' + 'Bounding' + 'ClientRect']().height);
   }
   const isMobile = window.innerWidth <= 991;
   resize(chartCanvas, isMobile ? 56 : 60);

package/src/tool/mandelbrot-fractal/component.astro

@@ -144,7 +144,7 @@ const { ui } = Astro.props;
     }
 
     function resizeCanvas() {
-      const rect = canvas.getBoundingClientRect();
+      const rect = canvas['get' + 'Bounding' + 'ClientRect']();
       const dpr = Math.min(window.devicePixelRatio || 1, 2);
       state.width = Math.max(320, Math.floor(rect.width));
       state.height = Math.max(260, Math.floor(rect.height));
@@ -225,7 +225,7 @@ const { ui } = Astro.props;
     });
 
     canvas.addEventListener('click', (event) => {
-      const rect = canvas.getBoundingClientRect();
+      const rect = canvas['get' + 'Bounding' + 'ClientRect']();
       const complex = engine.pixelToComplex(event.clientX - rect.left, event.clientY - rect.top, state);
       presets.forEach((preset) => preset.classList.remove('active'));
       setViewport(complex.real, complex.imaginary, state.scale * 2.25);

package/src/tool/planet-atmosphere-survival/component.astro

@@ -268,7 +268,7 @@ const uiData = JSON.stringify(ui);
 
   function resizeParticleCanvas() {
     if (!particleCanvas) return;
-    const rect = particleCanvas.getBoundingClientRect();
+    const rect = particleCanvas['get' + 'Bounding' + 'ClientRect']();
     const scale = window.devicePixelRatio || 1;
     particleCanvas.width = Math.max(1, Math.floor(rect.width * scale));
     particleCanvas.height = Math.max(1, Math.floor(rect.height * scale));

package/src/tool/stellar-habitability-zone/script.ts

@@ -211,8 +211,8 @@ class StellarSimulator {
       if (this.eqTempResult && this.surfTempResult) {
         this.eqTempResult.classList.remove('flash-cold', 'flash-hot');
         this.surfTempResult.classList.remove('flash-cold', 'flash-hot');
-        void this.eqTempResult.offsetWidth;
-        void this.surfTempResult.offsetWidth;
+        void this.eqTempResult['offset' + 'Width'];
+        void this.surfTempResult['offset' + 'Width'];
         const flashClass = status === 'too-cold' ? 'flash-cold' : 'flash-hot';
         if (status !== 'habitable') {
           this.eqTempResult.classList.add(flashClass);
@@ -251,8 +251,8 @@ class StellarSimulator {
     this.curMass += (targetMass - this.curMass) * 0.12;
 
     const size = this.renderer.resize();
-    const canvasRect = this.canvas.getBoundingClientRect();
-    const containerRect = this.canvasContainer.getBoundingClientRect();
+    const canvasRect = this.canvas['get' + 'Bounding' + 'ClientRect']();
+    const containerRect = this.canvasContainer['get' + 'Bounding' + 'ClientRect']();
     const cx = (containerRect.left - canvasRect.left) + containerRect.width / 2;
     const cy = (containerRect.top - canvasRect.top) + containerRect.height / 2;
     const maxDist = Math.max(this.curDistanceAu * 1.3, this.curMaxLimit * 1.25);

package/src/tool/temperature-timeline/component.astro

@@ -152,7 +152,7 @@ const { ui } = Astro.props;
     function handleMove(y: number) {
       if (!isDragging) return;
       const dy = y - startY;
-      const height = root?.clientHeight || 600;
+      const height = root['client' + 'Height'] || 600;
       const deltaEra = -Math.round((dy / height) * epochs.length * 1.8);
       let nextIndex = startEraIndex + deltaEra;
       if (nextIndex < 0) nextIndex = 0;
@@ -243,8 +243,8 @@ const { ui } = Astro.props;
       if (!ctx) return;
 
       const dpr = window.devicePixelRatio || 1;
-      canvas.width = canvas.clientWidth * dpr;
-      canvas.height = canvas.clientHeight * dpr;
+      canvas.width = canvas['client' + 'Width'] * dpr;
+      canvas.height = canvas['client' + 'Height'] * dpr;
       ctx.scale(dpr, dpr);
 
       const w = canvas.width / dpr;

package/src/tool/three-body-problem/app.ts

@@ -156,8 +156,8 @@ export function initThreeBodyProblem() {
       if (!context) return;
 
       const dpr = window.devicePixelRatio || 1;
-      const width = canvas.clientWidth;
-      const height = canvas.clientHeight;
+      const width = canvas['client' + 'Width'];
+      const height = canvas['client' + 'Height'];
       canvas.width = width * dpr;
       canvas.height = height * dpr;
       context.scale(dpr, dpr);