@jjlmoya/utils-hardware 1.18.0 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-hardware",
-    "version": "1.18.0",
+    "version": "1.20.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -4,14 +4,16 @@ import { testTeclado } from '../tool/keyboardTest/index';
 import { testMando } from '../tool/gamepadTest/index';
 import { probadorVibracionMando } from '../tool/gamepadVibrationTester/index';
 import { testRaton } from '../tool/mousePollingTest/index';
+import { mouseDoubleClickTest } from '../tool/mouseDoubleClickTest/index';
 import { estimadorSaludBateria } from '../tool/batteryHealthEstimator/index';
 import { toneGenerator } from '../tool/toneGenerator/index';
 import { refreshRateDetector } from '../tool/refreshRateDetector/index';
+import { monitorGhostingTest } from '../tool/monitorGhostingTest/index';
 import { spectrumCanvas } from '../tool/colorAccuracyTest/index';
 
 export const hardwareCategory: HardwareCategoryEntry = {
   icon: 'mdi:memory',
-  tools: [pixelesPantalla, testTeclado, testMando, probadorVibracionMando, testRaton, estimadorSaludBateria, toneGenerator, refreshRateDetector, spectrumCanvas],
+  tools: [pixelesPantalla, testTeclado, testMando, probadorVibracionMando, testRaton, mouseDoubleClickTest, estimadorSaludBateria, toneGenerator, refreshRateDetector, monitorGhostingTest, spectrumCanvas],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -10,10 +10,14 @@ export { testTeclado } from './tool/keyboardTest/entry';
 export type { TestTecladoLocaleContent } from './tool/keyboardTest/entry';
 export { testRaton } from './tool/mousePollingTest/entry';
 export type { TestRatonLocaleContent } from './tool/mousePollingTest/entry';
+export { mouseDoubleClickTest } from './tool/mouseDoubleClickTest/entry';
+export type { MouseDoubleClickTestLocaleContent } from './tool/mouseDoubleClickTest/entry';
 export { toneGenerator } from './tool/toneGenerator/entry';
 export type { ToneGeneratorLocaleContent } from './tool/toneGenerator/entry';
 export { refreshRateDetector } from './tool/refreshRateDetector/entry';
 export type { RefreshRateDetectorLocaleContent } from './tool/refreshRateDetector/entry';
+export { monitorGhostingTest } from './tool/monitorGhostingTest/entry';
+export type { MonitorGhostingTestLocaleContent } from './tool/monitorGhostingTest/entry';
 export { spectrumCanvas } from './tool/colorAccuracyTest/entry';
 export type { SpectrumCanvasLocaleContent } from './tool/colorAccuracyTest/entry';
 export { hardwareCategory } from './category';
@@ -23,7 +27,9 @@ import { testMando } from './tool/gamepadTest/entry';
 import { probadorVibracionMando } from './tool/gamepadVibrationTester/entry';
 import { testTeclado } from './tool/keyboardTest/entry';
 import { testRaton } from './tool/mousePollingTest/entry';
+import { mouseDoubleClickTest } from './tool/mouseDoubleClickTest/entry';
 import { toneGenerator } from './tool/toneGenerator/entry';
 import { refreshRateDetector } from './tool/refreshRateDetector/entry';
+import { monitorGhostingTest } from './tool/monitorGhostingTest/entry';
 import { spectrumCanvas } from './tool/colorAccuracyTest/entry';
-export const ALL_ENTRIES = [estimadorSaludBateria, pixelesPantalla, testMando, probadorVibracionMando, testTeclado, testRaton, toneGenerator, refreshRateDetector, spectrumCanvas];
+export const ALL_ENTRIES = [estimadorSaludBateria, pixelesPantalla, testMando, probadorVibracionMando, testTeclado, testRaton, mouseDoubleClickTest, toneGenerator, refreshRateDetector, monitorGhostingTest, spectrumCanvas];

package/src/index.ts

@@ -22,7 +22,9 @@ export { TEST_TECLADO_TOOL } from './tool/keyboardTest/index';
 export { TEST_MANDO_TOOL } from './tool/gamepadTest/index';
 export { PROBADOR_VIBRACION_MANDO_TOOL } from './tool/gamepadVibrationTester/index';
 export { TEST_RATON_TOOL } from './tool/mousePollingTest/index';
+export { MOUSE_DOUBLE_CLICK_TEST_TOOL } from './tool/mouseDoubleClickTest/index';
 export { ESTIMADOR_SALUD_BATERIA_TOOL } from './tool/batteryHealthEstimator/index';
 export { TONE_GENERATOR_TOOL } from './tool/toneGenerator/index';
 export { REFRESH_RATE_DETECTOR_TOOL } from './tool/refreshRateDetector/index';
+export { MONITOR_GHOSTING_TEST_TOOL } from './tool/monitorGhostingTest/index';
 export { SPECTRUM_CANVAS_TOOL } from './tool/colorAccuracyTest/index';

package/src/tests/locale_completeness.test.ts

@@ -21,8 +21,8 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 9 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(9);
+  it('all 11 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(11);
   });
 });
 

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

@@ -4,8 +4,8 @@ import { hardwareCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 9 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(9);
+    it('should have 11 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(11);
     });
 
     it('hardwareCategory should be defined', () => {

package/src/tool/batteryHealthEstimator/component.astro

@@ -37,7 +37,7 @@ const S = JSON.stringify({
         <div class="bh-sliders">
           <div class="bh-slider-group">
             <div class="bh-slider-header">
-              <label class="bh-slider-label">{t.voltageLabel}</label>
+              <label for="bh-v" class="bh-slider-label">{t.voltageLabel}</label>
               <span id="bh-v-val" class="bh-slider-val">3.70V</span>
             </div>
             <input type="range" id="bh-v" class="bh-slider" min="3.0" max="4.2" step="0.01" value="3.70" />
@@ -46,7 +46,7 @@ const S = JSON.stringify({
 
           <div class="bh-slider-group">
             <div class="bh-slider-header">
-              <label class="bh-slider-label">{t.cyclesLabel}</label>
+              <label for="bh-c" class="bh-slider-label">{t.cyclesLabel}</label>
               <span id="bh-c-val" class="bh-slider-val">50</span>
             </div>
             <input type="range" id="bh-c" class="bh-slider" min="0" max="1000" step="1" value="50" />
@@ -54,7 +54,7 @@ const S = JSON.stringify({
 
           <div class="bh-slider-group">
             <div class="bh-slider-header">
-              <label class="bh-slider-label">{t.tempLabel}</label>
+              <label for="bh-t" class="bh-slider-label">{t.tempLabel}</label>
               <span id="bh-t-val" class="bh-slider-val">25°C</span>
             </div>
             <input type="range" id="bh-t" class="bh-slider" min="0" max="60" step="1" value="25" />

package/src/tool/gamepadTest/component.astro

@@ -341,11 +341,12 @@ const t = (ui ?? {}) as TestMandoUI;
       (targetBtn as HTMLElement).style.background = currentTarget.color;
       (targetBtn as HTMLElement).style.color = 'white';
       targetBtn.classList.remove('tm-target-hidden', 'tm-target-pop');
-      void targetBtn.offsetWidth;
-      targetBtn.classList.add('tm-target-pop');
       targetLabel.textContent = currentTarget.label;
       targetSub.textContent = currentTarget.type === 'axis' ? LABEL_MOVE : LABEL_PRESS;
-      setTimeout(() => targetBtn.classList.remove('tm-target-pop'), 300);
+      requestAnimationFrame(() => {
+        targetBtn?.classList.add('tm-target-pop');
+        setTimeout(() => targetBtn?.classList.remove('tm-target-pop'), 300);
+      });
     }
     function startTimer() {
       timeLeft = 30;

package/src/tool/gamepadVibrationTester/component.astro

@@ -113,7 +113,7 @@ const t = (ui ?? {}) as ProbadorVibracionMandoUI;
 
         <div class="pv-slider-group">
           <div class="pv-slider-header">
-            <span>{t.customStrongLabel}</span>
+            <label for="pv-inp-str">{t.customStrongLabel}</label>
             <span id="pv-sl-str" class="pv-slider-val">100%</span>
           </div>
           <input type="range" class="pv-slider" id="pv-inp-str" min="0" max="1" step="0.05" value="1.0" />
@@ -121,7 +121,7 @@ const t = (ui ?? {}) as ProbadorVibracionMandoUI;
 
         <div class="pv-slider-group">
           <div class="pv-slider-header">
-            <span>{t.customWeakLabel}</span>
+            <label for="pv-inp-wk">{t.customWeakLabel}</label>
             <span id="pv-sl-wk" class="pv-slider-val">100%</span>
           </div>
           <input type="range" class="pv-slider" id="pv-inp-wk" min="0" max="1" step="0.05" value="1.0" />
@@ -129,7 +129,7 @@ const t = (ui ?? {}) as ProbadorVibracionMandoUI;
 
         <div class="pv-slider-group">
           <div class="pv-slider-header">
-            <span>{t.customDurationLabel}</span>
+            <label for="pv-inp-dur">{t.customDurationLabel}</label>
             <span id="pv-sl-dur" class="pv-slider-val">500ms</span>
           </div>
           <input type="range" class="pv-slider" id="pv-inp-dur" min="50" max="2500" step="50" value="500" />

package/src/tool/keyboardTest/component.astro

@@ -187,6 +187,11 @@ const testedClass = 'tt-key-tested';
     const activeKeys = new Set<string>();
     let maxSimultaneous = 0;
 
+    function scrollLogToEnd(el: HTMLElement) {
+      void el.offsetWidth;
+      el.scrollLeft = el.scrollWidth;
+    }
+
     const keyMap = new Map<string, Element>();
     keys.forEach((k) => {
       const code = k.getAttribute('data-code');
@@ -199,7 +204,7 @@ const testedClass = 'tt-key-tested';
       div.textContent = `${msg}`;
       eventLog.appendChild(div);
       if (eventLog.children.length > 50) eventLog.firstElementChild?.remove();
-      eventLog.scrollLeft = eventLog.scrollWidth;
+      scrollLogToEnd(eventLog);
     }
 
     function handleDown(e: KeyboardEvent) {

package/src/tool/monitorGhostingTest/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import type { KnownLocale } from '../../types';
+import { monitorGhostingTest } from './index';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await monitorGhostingTest.i18n[locale]?.();
+---
+
+{content && content.bibliography.length > 0 && <SharedBibliography links={content.bibliography} />}

package/src/tool/monitorGhostingTest/bibliography.ts

@@ -0,0 +1,20 @@
+import type { BibliographyEntry } from '../../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Blur Busters UFO Motion Tests: visual tests for ghosting, pursuit tracking, and motion clarity',
+    url: 'https://www.testufo.com/',
+  },
+  {
+    name: 'RTINGS: monitor response time, overshoot, and motion handling methodology',
+    url: 'https://www.rtings.com/monitor/tests/motion/motion-blur-and-response-time',
+  },
+  {
+    name: 'TFTCentral: response time, overdrive, overshoot, and pursuit camera monitor testing',
+    url: 'https://tftcentral.co.uk/articles/response_time',
+  },
+  {
+    name: 'Blur Busters: G-SYNC 101 guide to frame pacing, VRR behavior, and display motion',
+    url: 'https://blurbusters.com/gsync/gsync101-input-lag-tests-and-settings/',
+  }
+];

package/src/tool/monitorGhostingTest/component.astro

@@ -0,0 +1,156 @@
+---
+import type { KnownLocale } from '../../types';
+import type { MonitorGhostingTestUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as MonitorGhostingTestUI;
+---
+
+<div id="mgt-root" class="mgt-root" data-config={JSON.stringify({
+  pixelsPerSecondUnit: t.pixelsPerSecondUnit,
+  pixelUnit: t.pixelUnit,
+  millisecondUnit: t.millisecondUnit,
+  fullscreen: t.fullscreen,
+  exitFullscreen: t.exitFullscreen,
+  pause: t.pause,
+  resume: t.resume,
+})}>
+  <section class="mgt-card">
+    <div class="mgt-stage">
+      <div class="mgt-monitor" id="mgt-monitor">
+        <div class="mgt-screen">
+          <div class="mgt-ruler" aria-hidden="true"></div>
+          <div id="mgt-track" class="mgt-track">
+            <span class="mgt-ghost ghost-5"></span>
+            <span class="mgt-ghost ghost-4"></span>
+            <span class="mgt-ghost ghost-3"></span>
+            <span class="mgt-ghost ghost-2"></span>
+            <span class="mgt-ghost ghost-1"></span>
+            <span id="mgt-target-object" class="mgt-target-object">
+              <span class="mgt-bars" aria-hidden="true"></span>
+              <span class="mgt-word">{t.targetText}</span>
+              <span class="mgt-ufo" aria-hidden="true">
+                <span class="mgt-ufo-dome"></span>
+                <span class="mgt-ufo-body"></span>
+                <span class="mgt-ufo-light"></span>
+              </span>
+            </span>
+          </div>
+          <div class="mgt-pursuit" aria-hidden="true"></div>
+          <div class="mgt-screen-actions">
+            <button id="mgt-fullscreen" type="button">{t.fullscreen}</button>
+            <button id="mgt-pause" type="button">{t.pause}</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="mgt-panel">
+        <div class="mgt-readout">
+          <span>{t.badge}</span>
+          <strong id="mgt-blur">--</strong>
+          <small>{t.estimatedBlur}</small>
+        </div>
+
+        <label class="mgt-control">
+          <span>{t.speedLabel}</span>
+          <b id="mgt-speed-value">--</b>
+          <input id="mgt-speed" type="range" min="240" max="1920" step="120" value="960" />
+        </label>
+
+        <label class="mgt-control">
+          <span>{t.trailLabel}</span>
+          <b id="mgt-trail-value">--</b>
+          <input id="mgt-trail" type="range" min="1" max="10" step="1" value="5" />
+        </label>
+
+        <label class="mgt-select">
+          <span>{t.backgroundLabel}</span>
+          <select id="mgt-background">
+            <option value="dark">{t.backgroundDark}</option>
+            <option value="light">{t.backgroundLight}</option>
+            <option value="grid">{t.backgroundGrid}</option>
+          </select>
+        </label>
+
+        <label class="mgt-select">
+          <span>{t.patternLabel}</span>
+          <select id="mgt-pattern">
+            <option value="bars">{t.patternBars}</option>
+            <option value="text">{t.patternText}</option>
+            <option value="ufo">{t.patternUfo}</option>
+          </select>
+        </label>
+
+        <label class="mgt-toggle">
+          <span>
+            <b>{t.pursuitLabel}</b>
+            <small>{t.pursuitOn} / {t.pursuitOff}</small>
+          </span>
+          <input id="mgt-pursuit" type="checkbox" checked />
+        </label>
+
+        <div class="mgt-metrics">
+          <div>
+            <span>{t.frameStep}</span>
+            <strong id="mgt-frame-step">--</strong>
+          </div>
+          <div>
+            <span>{t.persistence}</span>
+            <strong id="mgt-persistence">--</strong>
+          </div>
+          <div>
+            <span>{t.sampleCount}</span>
+            <strong id="mgt-sample-count">--</strong>
+          </div>
+        </div>
+
+        <p class="mgt-instructions">{t.instructions}</p>
+        <button id="mgt-reset" class="mgt-reset" type="button">{t.reset}</button>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script>
+  import { MonitorGhostingLab } from './logic';
+
+  const root = document.getElementById('mgt-root');
+  const labels = JSON.parse(root?.dataset.config ?? '{}');
+
+  new MonitorGhostingLab(
+    {
+      root,
+      monitor: document.getElementById('mgt-monitor'),
+      track: document.getElementById('mgt-track'),
+      target: document.getElementById('mgt-target-object'),
+      speed: document.getElementById('mgt-speed') as HTMLInputElement | null,
+      trail: document.getElementById('mgt-trail') as HTMLInputElement | null,
+      background: document.getElementById('mgt-background') as HTMLSelectElement | null,
+      pattern: document.getElementById('mgt-pattern') as HTMLSelectElement | null,
+      pursuit: document.getElementById('mgt-pursuit') as HTMLInputElement | null,
+      fullscreen: document.getElementById('mgt-fullscreen'),
+      pause: document.getElementById('mgt-pause'),
+      reset: document.getElementById('mgt-reset'),
+      speedValue: document.getElementById('mgt-speed-value'),
+      trailValue: document.getElementById('mgt-trail-value'),
+      blur: document.getElementById('mgt-blur'),
+      frameStep: document.getElementById('mgt-frame-step'),
+      persistence: document.getElementById('mgt-persistence'),
+      sampleCount: document.getElementById('mgt-sample-count'),
+    },
+    {
+      pixelsPerSecondUnit: labels.pixelsPerSecondUnit,
+      pixelUnit: labels.pixelUnit,
+      millisecondUnit: labels.millisecondUnit,
+      fullscreen: labels.fullscreen,
+      exitFullscreen: labels.exitFullscreen,
+      pause: labels.pause,
+      resume: labels.resume,
+    },
+  );
+</script>

package/src/tool/monitorGhostingTest/entry.ts

@@ -0,0 +1,29 @@
+import type { HardwareToolEntry, ToolLocaleContent } from '../../types';
+
+import type { MonitorGhostingTestUI } from './ui';
+export type MonitorGhostingTestLocaleContent = ToolLocaleContent<MonitorGhostingTestUI>;
+
+export const monitorGhostingTest: HardwareToolEntry<MonitorGhostingTestUI> = {
+  id: 'monitor-ghosting-test',
+  icons: {
+    bg: 'mdi:monitor',
+    fg: 'mdi:motion-play',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};