@jjlmoya/utils-drones 1.18.0 → 1.20.0

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-drones",
-    "version": "1.18.0",
+    "version": "1.20.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/layouts/PreviewLayout.astro

@@ -78,6 +78,7 @@ const { title, currentLocale = "es", localeUrls = {}, hasSidebar = false } = Ast
     transition:
       background-color 0.3s ease,
       color 0.3s ease;
+    font-family: Inter, sans-serif;
   }
 
   main {

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/antenna-length-calculator/component.astro

@@ -31,7 +31,7 @@ const materials = [
 
                     <div class="input-group">
                         <div class="input-with-unit">
-                            <input type="number" id="freqInput" value="868" step="1" min="1" max="10000" />
+                            <input type="number" id="freqInput" value="868" step="1" min="1" max="10000" aria-label={ui.signalParameters} />
                             <span class="unit">MHz</span>
                         </div>
                     </div>
@@ -76,7 +76,7 @@ const materials = [
                         <h2>{ui.conductorMedium}</h2>
                     </div>
                     <div class="input-group">
-                        <select id="vfInput" class="custom-select-premium">
+                        <select id="vfInput" class="custom-select-premium" aria-label={ui.conductorMedium}>
                             {materials.map(m => (
                                 <option value={m.vf}>{m.label}</option>
                             ))}

package/src/tool/drone-flight-time/drone-flight-time-calculator.css

@@ -72,6 +72,8 @@
     display: grid;
     grid-template-columns: 400px 1fr;
     min-height: 700px;
+    width: 100%;
+    min-width: 0;
 }
 
 .flight-calculator-ui .config-sidebar {
@@ -81,6 +83,7 @@
     display: flex;
     flex-direction: column;
     gap: 3rem;
+    min-width: 0;
 }
 
 .flight-calculator-ui .main-display {
@@ -89,6 +92,8 @@
     flex-direction: column;
     gap: 3rem;
     background: var(--dft-bg);
+    min-width: 0;
+    overflow: hidden;
 }
 
 .flight-calculator-ui .divider {
@@ -348,6 +353,7 @@
     position: relative;
     height: 350px;
     width: 100%;
+    min-width: 0;
     background: var(--dft-bg-surface);
     border-radius: 32px;
     padding: 1.5rem;
@@ -357,6 +363,7 @@
 @media (max-width: 1200px) {
     .flight-calculator-ui .card-grid {
         grid-template-columns: 1fr;
+        min-height: auto;
     }
     .flight-calculator-ui .config-sidebar {
         border-right: none;

package/src/tool/drone-power-analyzer/components/MotorConfig.astro

@@ -40,6 +40,7 @@ const { ui } = Astro.props;
       step="10"
       value="600"
       class="thrust-slider"
+      aria-label={ui.thrustPerMotor || "Thrust per Motor"}
       onchange="document.getElementById('thrustPerMotor').value = this.value; document.getElementById('thrustPerMotor').dispatchEvent(new Event('input'));"
     />
   </div>

package/src/tool/drone-power-analyzer/components/WeightConfig.astro

@@ -31,6 +31,7 @@ const { ui } = Astro.props;
       step="10"
       value="800"
       class="auw-slider"
+      aria-label={ui.auwLabel || "All-Up Weight (AUW)"}
       onchange="document.getElementById('auw').value = this.value; document.getElementById('auw').dispatchEvent(new Event('input'));"
     />
   </div>

package/src/tool/gps-coordinates-converter/components/GpsInputs.astro

@@ -16,11 +16,11 @@ import { Icon } from "astro-icon/components";
 
     <div id="dd-inputs" class="compact-inputs">
         <div class="input-block">
-            <label class="field-label">{ui.lat}</label>
+            <label class="field-label" for="latDD">{ui.lat}</label>
             <input type="text" id="latDD" class="tech-input" placeholder="40.4168" />
         </div>
         <div class="input-block">
-            <label class="field-label">{ui.lng}</label>
+            <label class="field-label" for="lngDD">{ui.lng}</label>
             <input type="text" id="lngDD" class="tech-input" placeholder="-3.7038" />
         </div>
     </div>
@@ -29,10 +29,10 @@ import { Icon } from "astro-icon/components";
         <div class="gms-group">
             <label class="field-label">{ui.latGMS}</label>
             <div class="compact-inputs">
-                <input type="number" id="latG" class="tech-input" placeholder="G" />
-                <input type="number" id="latM" class="tech-input" placeholder="M" />
-                <input type="number" id="latS" class="tech-input" placeholder="S" step="any" />
-                <select id="latH" class="tech-input">
+                <input type="number" id="latG" class="tech-input" placeholder="G" aria-label={`${ui.latGMS} - Degrees`} />
+                <input type="number" id="latM" class="tech-input" placeholder="M" aria-label={`${ui.latGMS} - Minutes`} />
+                <input type="number" id="latS" class="tech-input" placeholder="S" step="any" aria-label={`${ui.latGMS} - Seconds`} />
+                <select id="latH" class="tech-input" aria-label={`${ui.latGMS} - Hemisphere`}>
                     <option value="N">N</option>
                     <option value="S">S</option>
                 </select>
@@ -41,10 +41,10 @@ import { Icon } from "astro-icon/components";
         <div class="gms-group">
             <label class="field-label">{ui.lngGMS}</label>
             <div class="compact-inputs">
-                <input type="number" id="lngG" class="tech-input" placeholder="G" />
-                <input type="number" id="lngM" class="tech-input" placeholder="M" />
-                <input type="number" id="lngS" class="tech-input" placeholder="S" step="any" />
-                <select id="lngH" class="tech-input">
+                <input type="number" id="lngG" class="tech-input" placeholder="G" aria-label={`${ui.lngGMS} - Degrees`} />
+                <input type="number" id="lngM" class="tech-input" placeholder="M" aria-label={`${ui.lngGMS} - Minutes`} />
+                <input type="number" id="lngS" class="tech-input" placeholder="S" step="any" aria-label={`${ui.lngGMS} - Seconds`} />
+                <select id="lngH" class="tech-input" aria-label={`${ui.lngGMS} - Hemisphere`}>
                     <option value="E">E</option>
                     <option value="W">W</option>
                 </select>

package/src/tool/gsd-flight-planner/InputsColumn.astro

@@ -6,7 +6,7 @@ const { ui } = Astro.props;
   <h2 class="column-title">{ui.configuration || "Configuration"}</h2>
 
   <div class="section">
-    <label class="section-label">{ui.cameraSelection || "Camera Selection"}</label>
+    <label for="cameraPreset" class="section-label">{ui.cameraSelection || "Camera Selection"}</label>
     <select id="cameraPreset" class="input-field">
       <option value="">{ui.manualMode || "Manual Mode"}</option>
       <option value="mavic3e">{ui.presetDjiMavic3e || "DJI Mavic 3E"}</option>
@@ -20,12 +20,12 @@ const { ui } = Astro.props;
     <label class="section-label">{ui.sensorConfig || "Sensor Configuration"}</label>
     <div class="input-row">
       <div class="input-item">
-        <span class="input-label">{ui.width || "Width"}</span>
+        <label for="sensorWidth" class="input-label">{ui.width || "Width"}</label>
         <input id="sensorWidth" type="number" min="1" max="100" step="0.1" value="23.5" class="input-field" />
         <span class="unit-hint">mm</span>
       </div>
       <div class="input-item">
-        <span class="input-label">{ui.height || "Height"}</span>
+        <label for="sensorHeight" class="input-label">{ui.height || "Height"}</label>
         <input id="sensorHeight" type="number" min="1" max="100" step="0.1" value="15.6" class="input-field" />
         <span class="unit-hint">mm</span>
       </div>
@@ -33,7 +33,7 @@ const { ui } = Astro.props;
   </div>
 
   <div class="section">
-    <label class="section-label">{ui.focalLength || "Focal Length"}</label>
+    <label for="focalLength" class="section-label">{ui.focalLength || "Focal Length"}</label>
     <div class="input-item">
       <input id="focalLength" type="number" min="1" max="1000" step="0.1" value="35" class="input-field" />
       <span class="unit-hint" id="focalLengthUnit">mm</span>
@@ -44,12 +44,12 @@ const { ui } = Astro.props;
     <label class="section-label">{ui.imageResolution || "Image Resolution"}</label>
     <div class="input-row">
       <div class="input-item">
-        <span class="input-label">{ui.w || "W"}</span>
+        <label for="imageWidth" class="input-label">{ui.w || "W"}</label>
         <input id="imageWidth" type="number" min="100" max="50000" step="1" value="5472" class="input-field" />
         <span class="unit-hint">{ui.px || "px"}</span>
       </div>
       <div class="input-item">
-        <span class="input-label">{ui.h || "H"}</span>
+        <label for="imageHeight" class="input-label">{ui.h || "H"}</label>
         <input id="imageHeight" type="number" min="100" max="50000" step="1" value="3648" class="input-field" />
         <span class="unit-hint">{ui.px || "px"}</span>
       </div>
@@ -57,24 +57,24 @@ const { ui } = Astro.props;
   </div>
 
   <div class="section">
-    <label class="section-label">{ui.altitudeAgl || "Altitude (AGL)"}</label>
+    <label for="altitudeAgl" class="section-label">{ui.altitudeAgl || "Altitude (AGL)"}</label>
     <div class="input-item">
       <input id="altitudeAgl" type="number" min="10" max="500" step="5" value="100" class="input-field" />
       <span class="unit-hint" id="altUnit">m</span>
     </div>
-    <input id="altitudeSlider" type="range" min="10" max="500" step="5" value="100" class="slider" />
+    <input id="altitudeSlider" type="range" min="10" max="500" step="5" value="100" class="slider" aria-label={ui.altitudeAgl || "Altitude (AGL)"} />
   </div>
 
   <div class="section">
     <label class="section-label">{ui.overlapSettings || "Overlap Configuration"}</label>
     <div class="input-row">
       <div class="input-item">
-        <span class="input-label">{ui.forward || "Forward"}</span>
+        <label for="forwardOverlap" class="input-label">{ui.forward || "Forward"}</label>
         <input id="forwardOverlap" type="number" min="0" max="95" step="5" value="75" class="input-field" />
         <span class="unit-hint">%</span>
       </div>
       <div class="input-item">
-        <span class="input-label">{ui.lateral || "Lateral"}</span>
+        <label for="lateralOverlap" class="input-label">{ui.lateral || "Lateral"}</label>
         <input id="lateralOverlap" type="number" min="0" max="95" step="5" value="65" class="input-field" />
         <span class="unit-hint">%</span>
       </div>
@@ -84,7 +84,7 @@ const { ui } = Astro.props;
   <div class="section">
     <label class="section-label">{ui.missionArea || "Mission Area"}</label>
     <div class="input-item">
-      <span class="input-label">{ui.totalAreaToSurvey || "Total Area to Survey"}</span>
+      <label for="missionArea" class="input-label">{ui.totalAreaToSurvey || "Total Area to Survey"}</label>
       <input id="missionArea" type="number" min="0.1" max="10000000" step="0.1" value="100" class="input-field" />
       <span class="unit-hint" id="areaInputUnit">m²</span>
       <span class="unit-hint" style="font-size: 0.65rem; margin-top: 0.25rem;">{ui.hectareHint || "1 ha = 10,000 m²"}</span>
@@ -94,7 +94,7 @@ const { ui } = Astro.props;
   <div class="section">
     <label class="section-label">{ui.inverseCalc || "Reverse Calculation"}</label>
     <div class="input-item">
-      <span class="input-label">{ui.targetGsd || "Target GSD"}</span>
+      <label for="desiredGsd" class="input-label">{ui.targetGsd || "Target GSD"}</label>
       <input id="desiredGsd" type="number" min="0.1" max="50" step="0.1" value="2" class="input-field" />
       <span class="unit-hint" id="desiredGsdUnit">cm/px</span>
     </div>